Add Icons with React

There are a few ways of adding icons to a React project. Choose the option that works for your project, and then add icons in your UI using the FontAwesomeIcon element.

Before You Get Started

Make sure you:

• Have followed and completed the previous React set up steps.
• Set up a Kit and Enabled Package Installation to use Pro+ icons.

Adding Icons with a Kit Package

The easiest way to add icons when using React is with a Pro Kit — which allows custom icon upload and icon subsetting. There are a few interfaces you can use with these packages. Use the Kit Package API docs to find the best way for your project and situation.

Kit Package API docs

Pro+ Icons are only available in Kit Packages!

Along with a Pro+ Plan, you'll need to install a downloaded Kit package to use any of our Pro+ Icons — they are not available in any other packages.

By Prefix and Name

Font Awesome Icons

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { byPrefixAndName } from '@awesome.me/kit-KIT_CODE/icons'

const element = <FontAwesomeIcon icon={byPrefixAndName.fas['house']} />

ReactDOM.render(element, document.body)

Custom Icons

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { byPrefixAndName } from '@awesome.me/kit-KIT_CODE/icons'

const element = <FontAwesomeIcon icon={byPrefixAndName.fak['my-icon']} />

ReactDOM.render(element, document.body)

For this to work, you’ll need to have a Kit that contains the icons in the examples. If you’re not familiar with how Kits work, you can find out here.

Importing Specific Icons

An alternative to using the prefix and name is by importing icons directly. This is your best bet at leveraging tree-shaking if that’s useful to you.

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'
import { faCat } from '@awesome.me/kit-KIT_CODE/icons/sharp/solid'
import { faDog } from '@awesome.me/kit-KIT_CODE/icons/duotone/solid'
import { faDragon } from '@awesome.me/kit-KIT_CODE/icons/sharp-duotone/solid'

const element = (
  <div>
    <FontAwesomeIcon icon={faHouse} />
    <FontAwesomeIcon icon={faCat} />
    <FontAwesomeIcon icon={faDog} />
    <FontAwesomeIcon icon={faDragon} />
  </div>
)

ReactDOM.render(element, document.body)

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faMyIcon } from '@awesome.me/kit-KIT_CODE/icons/kit/custom'
const element = <FontAwesomeIcon icon={faMyIcon} />
ReactDOM.render(element, document.body)

You can use all the icons in a family and style, too. But this will put the kibosh on tree-shaking (Probably? Are we using A.I. for this yet?).

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { fas, fad, fass, fasds } from '@awesome.me/kit-KIT_CODE/icons'

const element = (
  <div>
    <FontAwesomeIcon icon={fas.faHouse} />
    <FontAwesomeIcon icon={fad.faMouse} />
    <FontAwesomeIcon icon={fass.faCat} />
    <FontAwesomeIcon icon={fasds.faDog} />
  </div>
)

ReactDOM.render(element, document.body)

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { fak } from '@awesome.me/kit-KIT_CODE/icons'
const element = (
  <div>
    <FontAwesomeIcon icon={fak.faMyIcon} />
    <FontAwesomeIcon icon={fak.faAnotherOne} />
    <FontAwesomeIcon icon={fak.faMyLogo} />
  </div>
)
ReactDOM.render(element, document.body)

Using the Library

Another mechanism that the SVG Core provides is a JavaScript class called Library.

With a subsetted Kit, this can be an easy way to add all icons once and use them with a syntax that requires less typing.

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome.me/kit-KIT_CODE/icons'

library.add(...all)

Now all icons in the Kit have been added in just one, easy line. No fuss, no muss.

Using it doesn’t require importing the icons. You just need an array or string.

As a string

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const element = <FontAwesomeIcon icon="fa-solid fa-house" />

ReactDOM.render(element, document.body)

As an array

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const element = <FontAwesomeIcon icon={['fas', 'house']} />

ReactDOM.render(element, document.body)

Custom icons are just as easy.

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const element = <FontAwesomeIcon icon={['fak', 'my-icon']} />

ReactDOM.render(element, document.body)

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const element = <FontAwesomeIcon icon="fa-kit fa-my-icon" />

ReactDOM.render(element, document.body)

TypeScript and Custom Icons

Custom Icons + TypeScript Issues

Currently there are some issues using custom icons with TypeScript. We’ll be working to address these in future versions of Font Awesome but for now, we have a few workarounds noted below.

Library Using an Array

Error

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome/kit-KIT_CODE/icons'

library.add(...all)

const element = <FontAwesomeIcon icon="{['kit', 'my-icon']}" />
// This will cause this TypeScript error: `Type is not assignable to type IconProp`

ReactDOM.render(element, document.body)

Workaround

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library, IconProp } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome/kit-KIT_CODE/icons'

// @ts-ignore
const myIcon : IconProp = ['kit', 'my-icon']

const element = <FontAwesomeIcon icon={myIcon} />

ReactDOM.render(element, document.body)

Library using a string

Error

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome/kit-KIT_CODE/icons'
library.add(...all)
const element = <FontAwesomeIcon icon="fa-kit fa-my-icon" />
// This will cause this TypeScript error: `Type is not assignable to type IconProp`
ReactDOM.render(element, document.body)

Workaround

import ReactDOM from 'react-dom'
import { library, IconProp } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { all } from '@awesome/kit-KIT_CODE/icons'

library.add(...all)

// @ts-ignore
const myIcon : IconProp = "fa-kit fa-my-icon"

const element = <FontAwesomeIcon icon={myIcon} />

ReactDOM.render(element, document.body)

We know this is annoying and defeats the purpose of using TypeScript. We’re working on it, but we think we’ll have to reach for Generics to fix it and we didn’t want to hold up the original release of Kit Packages.

Pro+ Icons are only available in Kit Packages!

Along with a Pro+ Plan, you'll need to install a downloaded Kit package to use any of our Pro+ Icons — they are not available in any other packages.

Adding Icons with SVG Icon Packages

If you can’t or don’t want to use a Kit, you can explicitly add individual icons to each component. Here’s a simple example:

Add Individual Icons Explicitly

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faEnvelope} />

ReactDOM.render(element, document.body)

Notice that the faEnvelope icon is imported from @fortawesome/free-solid-svg-icons as an object and then provided to the icon prop as an object.

Add Icons Globally

We like to travel light so we don’t recommend this method unless you know what you’re doing. Globally importing icons can increase the size of your bundle with icons you aren’t using. It also couples your components to another module that manages your icons.

First, you’ll import the icons you want to use via a “library” in the initializing module of your React application, like App.js. Here’s an example of that:

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'

import { fas } from '@fortawesome/free-solid-svg-icons'
import { fass } from '@fortawesome/sharp-solid-svg-icons'
import { fad } from '@fortawesome/pro-duotone-svg-icons'
import { fadt } from '@fortawesome/duotone-thin-svg-icons'
import { fasds } from '@fortawesome/sharp-duotone-solid-svg-icons'
import { faTwitter, faFontAwesome } from '@fortawesome/free-brands-svg-icons'
import { faHatCowboy } from '@fortawesome/pro-thin-svg-icons'
import { faHatChef } from '@fortawesome/sharp-solid-svg-icons'

library.add(fas, fass, fad, fadt, fasds, faTwitter, faFontAwesome, faHatCowboy, faHatChef)

In our call to library.add() we’re passing:

• fas: which represents all of the icons in @fortawesome/free-solid-svg-icons. (Be careful importing whole styles - it can be a LOT of icons!) So any of the icons in that package may be referenced by icon name as a string anywhere else in our app. For example: coffee, check-square, or spinner.
• fass: represents all sharp solid icons in @sharp-solid-svg-icons. (pro icons!)
• fad: represents all duotone solid icons in @pro-duotone-svg-icons. (pro icons!)
• fadt: represents all duotone thin icons in @duotone-thin-svg-icons. (pro icons!)
• fasds: represents all sharp duotone solid icons in @sharp-duotone-solid-svg-icons. (pro icons!)
• faTwitter, faFontAwesome, faHatCowboy, and faHatChef: Adding each of these icons individually allows us to refer to them throughout our app by their icon string names, twitter, font-awesome, hat-cowboy, and hat-chef.

You can then use any of those icons anywhere in your app without needing to re-import into each component. So if you used icons in a couple of components, that would end up looking something like this:

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Mailroom = () => (
  <div>
    <FontAwesomeIcon icon="fa-solid fa-dog" />
    <FontAwesomeIcon icon="fa-sharp fa-solid fa-hippo" />
    <FontAwesomeIcon icon="fa-duotone fa-solid fa-feather" />
    <FontAwesomeIcon icon="fa-duotone fa-thin fa-fish" />
    <FontAwesomeIcon icon="fa-sharp-duotone fa-solid fa-dolphin" />
  </div>
)

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Showcase = () => (
  <div>
    <FontAwesomeIcon icon="fa-brands fa-twitter" />
    <FontAwesomeIcon icon="fa-brands fa-font-awesome" />
    <FontAwesomeIcon icon="fa-thin fa-hat-cowboy" />
    <FontAwesomeIcon icon="fa-sharp fa-solid fa-hat-chef" />
  </div>
)

You’ll notice we were able use the imported brand icons without explicitly importing them in the component. And we used the dog, hippo, feather, fish, and dolphin icons without explicitly importing them anywhere. But, each bundle now has over 1000 solid icons plus the two brand icons we added, which is more than we’re using - a good reason to avoid importing a whole style.

Same Icons, Different Styles

Using ES modules and import statements we can define unique names for two different styles of the same icon. Here’s an example:

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee as fasFaCoffee } from '@fortawesome/pro-solid-svg-icons'
import { faCoffee as fadFaCoffee } from '@fortawesome/pro-duotone-svg-icons'
import { faCoffee as fadtFaCoffee } from '@fortawesome/duotone-thin-svg-icons'
import { faCoffee as fassFaCoffee } from '@fortawesome/sharp-solid-svg-icons'
import { faCoffee as fasdsFaCoffee } from '@fortawesome/sharp-duotone-solid-svg-icons'

library.add(fasFaCoffee, fadFaCoffee, fadtFaCoffee, fassFaCoffee, fasdsFaCoffee)

Dynamic Importing is Not Supported

If you’ve used this method for adding icons in the past, you’ll need to switch to one of the support methods noted above.

Add Some Style

Now that you have some icons on the page, add some pieces of flair! Check out all the styling options you can use with Font Awesome and React.

Express Yourself with Some Styling!