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.

There are a few ways to add icons when using React. The easiest way is to use a Pro Kit

which allows custom icon upload and icon subsetting. But you can choose other methods that allow you to use icons from our SVG icon packages.

Using a Kit Package

If you’ve created a Kit and installed it in your project, you’re ready to get going.

Kit Package API reference

There are a few interfaces you can use with these packages. We can help you find the best way for your project and situation.

Kit Package Javascript API docs

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'

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

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, far, fal } from '@awesome.me/kit-KIT_CODE/icons'

const element = (
  <div>
    <FontAwesomeIcon icon={fas.faHouse} />
    <FontAwesomeIcon icon={far.faMouse} />
    <FontAwesomeIcon icon={fal.faCheese} />
  </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 Issue

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.

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.

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!

Importing from 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 { faTwitter, faFontAwesome } from '@fortawesome/free-brands-svg-icons'
import { faHatCowboy } from '@fortawesome/pro-thin-svg-icons'
import { faHatChef } from '@fortawesome/sharp-solid-svg-icons'
import { faPlateUtensils } from '@fortawesome/sharp-regular-svg-icons'

library.add(fas, faTwitter, faFontAwesome, faHatCowboy, faHatChef, faPlateUtensils)

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.
• faTwitter, faFontAwesome, faHatCowboy, faHatChef, and faPlateUtensils: 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, hat-chef, and plate-utensils.

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-check-square" />
    Your <FontAwesomeIcon icon="fa-regular fa-coffee" /> is hot!

    Compliments of the <FontAwesomeIcon icon="fa-sharp fa-solid fa-hat-chef" />!

  </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-regular fa-mug-hot" />
    The coffee is ready at these companies!

    Be careful not to spill any your <FontAwesomeIcon icon="fa-thin fa-hat-cowboy" />!

  </div>
)

You’ll notice we were able use the imported brand icons without explicitly importing them in the component. And we used the square-check, and envelope icons without explicitly importing them anywhere. But, our 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 farFaCoffee } from '@fortawesome/pro-regular-svg-icons'
import { faCoffee as falFaCoffee } from '@fortawesome/pro-light-svg-icons'
import { faCoffee as fatFaCoffee } from '@fortawesome/pro-thin-svg-icons'
import { faCoffee as fadFaCoffee } from '@fortawesome/pro-duotone-svg-icons'
import { faCoffee as fassFaCoffee } from '@fortawesome/sharp-solid-svg-icons'
import { faCoffee as fasrFaCoffee } from '@fortawesome/sharp-regular-svg-icons'
import { faCoffee as faslFaCoffee } from '@fortawesome/sharp-light-svg-icons'
import { faCoffee as fastFaCoffee } from '@fortawesome/sharp-thin-svg-icons'

library.add(fasFaCoffee, farFaCoffee, falFaCoffee, fatFaCoffee, fadFaCoffee, fassFaCoffee, fasrFaCoffee, faslFaCoffee, fastFaCoffee)

What about Dynamic Importing Deprecated

This method has been deprecated

In version 6 we introduced a Babel Macro that while useful is becoming more difficult to configure and isn’t an option for folks who aren’t using Babel.

Install the Babel Macros

First, you’ll install the babel macros using npm or yarn:

npm install babel-plugin-macros

Set Up the Babel Configs

Next, you’ll need to configure the babel plugins. Add the following to your babel.config.js file:

module.exports = function (api) {
  return {
    plugins: ['macros'],
  }
}

Then, create a babel-plugin-macros.config.js and add the fontawesome-svg-core settings. You can set the license to either free or pro depending on the icons you are planning to use. (Learn more about setting babel macros)

module.exports = {
  'fontawesome-svg-core': {
    'license': 'free'
  }
}

module.exports = {
  'fontawesome-svg-core': {
    'license': 'pro'
  }
}

Add the Icons to Your Project

Use the syntax below wherever you want them to appear in your project.

import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'

// Specify all properties: name, family, style
icon({name: 'user', family: 'classic', style: 'solid'})
icon({name: 'user', family: 'classic', style: 'regular'})
icon({name: 'twitter', family: 'classic', style: 'brands'})

// 'classic' is the default family, you can leave that off
icon({name: 'user', style: 'solid'})
icon({name: 'user', style: 'regular'})
icon({name: 'twitter', style: 'brands'})

// 'solid' is the default style, you can leave that off
icon({name: 'user'})

import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
// Specify all properties: name, family, style
icon({name: 'user', family: 'classic', style: 'solid'})
icon({name: 'user', family: 'classic', style: 'regular'})
icon({name: 'user', family: 'classic', style: 'light'})
icon({name: 'user', family: 'classic', style: 'thin'})
icon({name: 'user', family: 'duotone', style: 'solid'})
icon({name: 'user', family: 'sharp', style: 'solid'})
icon({name: 'user', family: 'sharp', style: 'regular'})
icon({name: 'user', family: 'sharp', style: 'light'})
icon({name: 'user', family: 'sharp', style: 'thin'})
icon({name: 'twitter', family: 'classic', style: 'brands'})
// 'classic' is the default family, you can leave that off
icon({name: 'user', style: 'solid'})
icon({name: 'user', style: 'regular'})
icon({name: 'user', style: 'light'})
icon({name: 'user', style: 'thin'})
// 'solid' is the default style, you can leave that off
icon({name: 'user'})

Seeing it in context makes more sense.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'

<FontAwesomeIcon icon={icon({name: 'user-secret'})} /> // Defaults to the Classic family, Solid style
<FontAwesomeIcon icon={icon({name: 'coffee', style: 'regular'})} /> // Defaults to Classic family
<FontAwesomeIcon icon={icon({name: 'coffee', family: 'sharp', style: 'solid'})} /> // Setting both family and style
<FontAwesomeIcon icon={icon({name: 'twitter', style: 'brands'})} /> // A brand icon

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { solid, regular, light, thin, duotone, icon } from '@fortawesome/fontawesome-svg-core/import.macro' // <-- import styles to be used
<FontAwesomeIcon icon={icon({name: 'user-secret'})} /> // Defaults to the Classic family, Solid style
<FontAwesomeIcon icon={icon({name: 'coffee', style: 'regular'})} /> // Defaults to Classic family
<FontAwesomeIcon icon={icon({name: 'coffee', family: 'classic', style: 'light'})} /> // Setting both family and style
<FontAwesomeIcon icon={icon({name: 'coffee', family: 'classic', style: 'thin'})} /> // Thin
<FontAwesomeIcon icon={icon({name: 'coffee', family: 'duotone', style: 'solid'})} /> // Duotone
<FontAwesomeIcon icon={icon({name: 'user-secret', family: 'sharp', style: 'solid'})} /> // Sharp Solid
<FontAwesomeIcon icon={icon({name: 'plate-utensils', family: 'sharp', style: 'regular'})} /> // Sharp Regular
<FontAwesomeIcon icon={icon({name: 'starship', family: 'sharp', style: 'light'})} /> // Sharp Light
<FontAwesomeIcon icon={icon({name: 'twitter', style: 'brands'})} /> // A brand icon

Older import macros solid(), regular(), light(), thin(), duotone(), and brands() are still supported for backward-compatibility. But we recommend you switch to the newer icon() function