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.
By prefix and name
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)
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.
import ReactDOM from 'react-dom'import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const element = <FontAwesomeIcon icon="fa-solid fa-house" />
ReactDOM.render(element, document.body)
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
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)
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
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)
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.
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 { 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
, orspinner
.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
, andfaHatChef
: 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
, andhat-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)
What about Dynamic Importing Deprecated
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, styleicon({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 officon({name: 'user', style: 'solid'})icon({name: 'user', style: 'regular'})icon({name: 'twitter', style: 'brands'})
// 'solid' is the default style, you can leave that officon({name: 'user'})
import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'// Specify all properties: name, family, styleicon({name: 'user', family: 'classic', style: 'solid'})icon({name: 'user', family: 'duotone', style: 'solid'})icon({name: 'user', family: 'sharp', style: 'solid'})icon({name: 'user', family: 'sharp-duotone', style: 'solid'})icon({name: 'twitter', family: 'classic', style: 'brands'})// 'classic' is the default family, you can leave that officon({name: 'user', style: 'solid'})// 'solid' is the default style, you can leave that officon({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: 'duotone', style: 'solid'})} /> // Duotone<FontAwesomeIcon icon={icon({name: 'user-secret', family: 'sharp', style: 'solid'})} /> // Sharp Solid<FontAwesomeIcon icon={icon({name: 'dog', family: 'sharp-duotone', style: 'solid'})} /> // Sharp Duotone Solid<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