Finding Icon names is hard

[chandran-jr]

It is hard for a developer to find the actual names of the components to import into their applications. Please fix it or guide me how to do it

[adamwathan]

Hey! The component names are the PascalCase versions of the icon names you see on the website, so academic-cap is AcademicCap.

[chandran-jr]

Hey! The component names are the PascalCase versions of the icon names you see on the website, so academic-cap is AcademicCap.

Do I have to add "Icon" at the end? I'm searching for the forward icon, so is it "ForwardIcon"?

[adamwathan]

Do I have to add "Icon" at the end? I'm searching for the forward icon, so is it "ForwardIcon"?

Ah yep sorry I left that detail out. Can see all of the icons that are published here in case it helps:

https://unpkg.com/browse/@heroicons/react@2.0.13/24/outline/

[lack-of-gravitas]

@adamwathan why do we users have to dig through a separate link to find this info?

Surely a codemod to help users upgrade would be a nice value add.

[adamwathan]

why do we users have to dig through a separate link to find this info?

I'm not sure what you mean by this — that's where the information is so that's where you look to get it. It's linked clearly from the README. Please don't forget this is just a fun open source project created in someone's spare time and released for free for anyone who wants to use it — you are not owed anything here. If you're unhappy with the library then use a different library or make something yourself, it makes literally no difference to me at all.

Surely a codemod to help users upgrade would be a nice value add.

Yeah that would be cool, unfortunately we don't have unlimited time and have to prioritize what we work on and we just have more important projects than that, especially since Heroicons v2 is not really meant to be something you upgrade to, it's simply a new icon set in a different style.

If you want to create a codemod and publish it somewhere for people to use go for it, that would be cool 👍

[kotoyama]

Why do I need to do this

import { CalendarIcon } from '@heroicons/react/24/outline'

instead of

import { CalendarIcon } from '@heroicons/react'

?

Are you serious?

[adamwathan]

There’s three different icon styles and sizes and you need to specify which one you want so yeah I’m super serious.

[MartinSchere]

Hey! The component names are the PascalCase versions of the icon names you see on the website, so academic-cap is AcademicCap.

It's not really the case, for instance MagnifyingGlass is not the pascal case version of search

[adamwathan]

That screenshot isn’t our website, not sure what that is. On our website you can see the icon name is “magnifying-glass”:

[MartinSchere]

Oh, I was looking at heroicons.dev, not sure why the .com domain did not show up first. Thank you!