We Are Hiring! Font Awesome is hiring a product designer to help us take Shoelace to the next level.
Read about the Job

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 Dynamic Icon Importing which automatically imports the icons you're using - and only the icons you're using. But you can choose other methods that allow you to explicitly add individual icons or add icons to a global library.

Font Awesome Sharp requires Pro and specific versions!

Make sure you have an active Pro-level plan or a Pro license with access to the specific versions that include Sharp's styles.

Dynamic Icon Importing

Dynamic Icon Importing eliminates the need to declare individual icons, saving you time adding icons and tracking down unused icons. This work is based on javascripter's babel macro plugin (opens new window)

Install the Babel Macros

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

    npm install babel-plugin-macros
    
    yarn add 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 (opens new window))

      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: '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

          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!

          Alternative Ways to Add Icons

          If you can't dynamically import icons, we have a couple of other options available. Here's a handy table comparing the ways you can add icons with React:

          Option Benefits Drawbacks
          Dynamic Icon Import Automatically includes just the icons you're using in your components, optimizing your final bundle. Only the icons you use are included in the bundle. You need to add and configure babel macros.
          Individually Allows icons to be subsetted, optimizing your final bundle. Only the icons you import are included in the bundle. Explicitly importing icons into each of many components in your project can become tedious.
          Globally Individually import icons just once in an init module - there's no need to import the icons into each component once they’ve been added to the library. You may be including files that won't be used and could impact performance.

          Add Individual Icons Explicitly

          If you can't or don't want to use the Dynamic Icon Importing method, you can explicitly add individual icons to each component. Here's a simple example:

          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. But here's how you do it if you can't use dynamic icon importing or global is how you like to roll.

          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'
          
          library.add(fasFaCoffee, farFaCoffee, falFaCoffee, fatFaCoffee, fadFaCoffee, fassFaCoffee, fasrFaCoffee, faslFaCoffee)