Add Icons with React (2024)

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 allowyou 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

Font Awesome Icons
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.fas['house']} />
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/sharp-duotone/solid'
const element = (
 <div>
 <FontAwesomeIcon icon={faHouse} />
 <FontAwesomeIcon icon={faCat} />
 <FontAwesomeIcon icon={faDog} />
 </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, far, fal, fass, fasds } from '@awesome.me/kit-KIT_CODE/icons'
const element = (
 <div>
 <FontAwesomeIcon icon={fas.faHouse} />
 <FontAwesomeIcon icon={far.faMouse} />
 <FontAwesomeIcon icon={fal.faCheese} />
 <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'
See Also
10 golden rules for responsive SVGs[React] - How to alter SVG size in React
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
As an array

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const element = <FontAwesomeIcon icon="fa-solid fa-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 beworking to address these in future versions of Font Awesome but for now, wehave a few workarounds.

Library using an array

Error
Workaround

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)

Library using a string

Error
Workaround

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)

We know this is annoying and defeats the purpose of using Typescript. We’reworking on it, but we think we’ll have to reach forGenerics to fixit 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 { fass } from '@fortawesome/sharp-solid-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'
import { faPlateUtensils } from '@fortawesome/sharp-regular-svg-icons'
library.add(fas, fass, fasds, 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" />!
 And a Sharp Duotone Solid Icon example.
 <FontAwesomeIcon icon="fa-sharp-duotone fa-solid fa-dog" />
 </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'
import { faCoffee as fasdsFaCoffee } from '@fortawesome/sharp-duotone-solid-svg-icons'
library.add(fasFaCoffee, farFaCoffee, falFaCoffee, fatFaCoffee, fadFaCoffee, fassFaCoffee, fasrFaCoffee, faslFaCoffee, fastFaCoffee, 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, 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: 'user', family: 'sharp-duotone', style: 'solid'})
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: 'dog', family: 'sharp-duotone', style: 'solid'})} /> // Sharp Duotone Solid
<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 recommendyou switch to the newer icon() function

FAQs

How do I add icons in React? ›

Importing specific icons

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)

Read On ›

How to add material icons in React? ›

How to apply Material UI icons to your project

Step 1 - Install the Material UI Library Install the Material UI library into your project as part of your package. ...
Step 2 - Install the Material UI Icons package ...
Step 3 - Import the Icons ...
Step 4 - Displaying the icon on the DOM

Aug 24, 2022

Discover More Details ›

How do I add awesome icons to react? ›

To use Font Awesome icons in your React project, you need to install the fortawesome/fontawesome-svg-core, fortawesome/free-solid-svg-icons, fortawesome/react-fontawesome, and fortawesome/free-brands-svg-icons packages. The fortawesome/fontawesome-svg-core package is the core package of Font Awesome.

How do I install react-icons kit? ›

react-icons-kit

Installation. npm install --save-dev react-icons-kit.
Documentation / Demo. Please visit react-icons-kit.
Bundled Icon Sets. IcoMoon vmaster. FontAwesome v4.7. MaterialIcons v3.0.1. Open Iconic v1.1.1. Entypo latest. Ikons latest. ...
Browse Icon Sets. Browse all available icons here: react-icons-kit.
Quick Start Guide.

See Details ›

How do I add a logo to Reactjs? ›

Importing an SVG Image in Your React Application

import React from 'react'; import { ReactComponent as MyLogo } from './my_logo. svg'; const MyComponent = () => { return ( <div> <MyLogo /> </div> ); }; export default MyComponent; In the above example, we import an SVG image using the ReactComponent syntax.

Find Out More ›

Can I customize react-icons? ›

React icons library is a great resource for React developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code.

Tell Me More ›

How do you add items in react? ›

To add an item or multiple items, addItems method can be used. In the following example, the Bugatti Veyron Super Sport and SSC Ultimate Aero items will be added while clicking Add Items button.

Show Me More ›

How do I add material design icons? ›

Using via Google Fonts. Similar to other Google Web Fonts, the correct CSS will be served to activate the 'Material Icons' font specific to the browser. An additional CSS class will be declared called .material-icons . Any element that uses this class will have the correct CSS to render these icons from the web font.

Explore More ›

How do I use local icons in react? ›

[React] - How to import icons into React

Find the specific icon you want to use on the icon library's website or documentation. Each icon should have a unique class name.
Add the icon to your component using the library's icon component or HTML tag (depending on the library).

How do I add a menu icon in React? ›

To place the icon on a menu item, set the iconCss property with the required icon CSS. By default, the icon is positioned at the left of the menu item. In the following sample, the icons of File and Edit menu items and Open , Save , Cut , Copy ,and Paste sub menu items are added using the iconCss property.

Show Me More ›

How to add icons in React? ›

Below all the steps are described order wise how to add icons and design them in existing React project.

Step 1: Install the React Icons Package. ...
Step 2: Modify the App.js file. ...
Step 3: Choose the icons to be used from the react-icons. ...
Step 4: Import and use the selected icon.

Read The Full Story ›

Are react-icons free? ›

Download 130 free React Icons in All design styles.

These free images are pixel perfect to fit your design and available in both PNG and vector.

See Details ›

How do I add a menu icon in react JS? ›

Get More Info Here ›

How do I add an icon to a dropdown in React? ›

You can render icons to the list items by mapping the iconCss field. This iconCss field create a span in the list item with mapped class name to allow styling as per your need.