How to find Icon names for Font Awesome to import with React?

Question

I have added Font Awesome icon library to my react project. As per the documentation, i am creating a library but not able to add icons as i dont know the icon name to import.

For eg - On website icon is "coffee". But to add to library i need to use -

library.add(faCoffee)

then i can use it as -

How do i find the icon React name i.e. faCoffee for coffee?

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee);

<FontAwesome icon="coffee" />

Answer 1

I'm going to answer this even though it's old and I'm sure you were able to figure it out, just because NOBODY actually answered your question correctly.

You can find the font awesome icons here.

When you click on an icon you'll see the icon name, e.g. 'arrow-circle-left' but in order to use it like in your above example, you'll have to add 'fa' to the start and convert the rest to camel case. I.e. 'arrow-circle-left' becomes 'faArrowCircleLeft'.

You can then import it using:

    import { faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons'

No idea why they can't just post a list of these names somewhere.

Answer 2

I would consider using react-icons over the @fortawesome package for popular icon packages.React-icons is nice because it provides ES6 support for various popular icons, allowing one to only include the icons actually being used within your react project. Some popular supported icon packages within react-icons are the following:

1. Font Awesome
2. Ionicons
3. Material Design Icons
4. Typicons
5. And many more for a complete list look here

For your particular case you could easily use Font Awesome icons and search for the exact name of the icon you're trying to use by doing the following:

1. Install the react-icons package

   npm install react-icons --save

2. Search for your desired icon and exact import name here

3. Import and use the desired icon within your react project, for example the Font Awesome coffee icon:

   import { FaCoffee } from 'react-icons/fa'; <FaCoffee />

The react-icons package is extremely easy to use and in my experience has been less complex than the other icon packages for react projects.

Hopefully that helps!