# Add Icons with React

Learn how to add and use Font Awesome icons in your React applications.

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

Make sure you:

- Completed the steps to [Set up with React](/web/use-with/react.md)

## About Adding Icons in React

There are a bunch of ways to add icons in a React project. Which one is right for you depends on how you set up your project and how you plan to use icons. Here is a quick overview of the options -- the details on how to use each are below.

  <h4>
    Check Your Icon Import and Usage Syntax
  </h4>
  Ensure that you’re both importing and using the icon in the correct format. Icon names need to follow a specific naming convention based on how they are imported and then ultimately used. Check the examples in the appropriate section to verify the correct import syntax and usage.

| Type                                                                                                                            | Method                                                 | Pros                                                                            | Cons                                                                     |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| <span style="text-wrap: nowrap">Kit Pkg</span><br /><strong style="font-size: .9em;text-wrap: nowrap">Best Pro Option</strong>  | [ByPrefixAndName](#by-prefix-and-name)                 | Easiest, and lightweight when you [subset your Kit](/web/dig-deeper/subsetting.md) | Not centralized, can be bulky if you don't subset your Kit               |
| <span style="text-wrap: nowrap">Kit Pkg</span>                                                                                  | [Individual Icons](#importing-specific-icons)          | Easy to see which icons are imported, Allows tree-shaking                       | Not centralized, tedious to add many icons, can be ambiguous about style |
| <span style="text-wrap: nowrap">Kit Pkg</span>                                                                                  | [Whole Styles](#importing-whole-styles)                | Fast way to add lots of icons                                                   | Not centralized, bulky                                                   |
| <span style="text-wrap: nowrap">Kit Pkg</span>                                                                                  | [Use the Library](#using-the-library)                  | Import all the icons in your Kit once, use anywhere in your React project       | Can be bulky if you don't subset your Kit                                |
| <span style="text-wrap: nowrap">SVG Pkg</span>                                                                                  | [Individual Icons](#add-icons-using-svg-icon-packages) | Easy to see which icons are imported                                            | Tedious to add many icons, can be ambiguous about style                  |
| <span style="text-wrap: nowrap">SVG Pkg</span><br /><strong style="font-size: .9em;text-wrap: nowrap">Best Free Option</strong> | [Whole Styles (Free)](#add-whole-styles)               | Easy way to add all the Free icons                                              | Only includes Free icons                                                 |
| <span style="text-wrap: nowrap">SVG Pkg</span>                                                                                  | [Whole Styles (Pro)](#add-whole-styles)                | Fast way to add lots of icons                                                   | Can be very bulky, doesn't work with tree-shaking                        |

## Add Icons Using a Kit Package

The easiest way to add icons when using React is with a Pro Kit package &mdash; which lets you add your own [custom icons](/web/add-icons/upload-icons.md) and [create a subset](/web/dig-deeper/subsetting.md) with just the icons or styles you need. Check out the [Kit Package API docs](/web/dig-deeper/kit-package-api.md) to find out what's in the package and learn more about using one.

  <h4>
    Use a Kit Package for Pro+ and Custom Icons
  </h4>
  Pro Kits are the only way to use Pro+ Icons and Custom Icons in a package — they are not available in any other
  packages.

And don't forget - for the examples below to work, you'll need to make sure your Kit contains the icons in the examples, especially if you've [subsetted your Kit](/web/dig-deeper/subsetting.md). If you're not familiar with how Kits work, you can [learn more about Kits](/web/setup/use-kit.md).

### By Prefix and Name

Here’s an example showing how to use the [shorthand prefix to specify family and style](/web/dig-deeper/styles.md) in practice:

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

function App() {
  return (
    <div>
      {/* Font Awesome Classic Solid (fas) icon */}
      <FontAwesomeIcon icon={byPrefixAndName.fas['house']} />

      {/* Font Awesome Classic Regular (far) icon */}
      <FontAwesomeIcon icon={byPrefixAndName.far['circle-user']} />

      {/* Custom Icon */}
      <FontAwesomeIcon icon={byPrefixAndName.fak['my-icon']} />
    </div>
  )
}

export default App
```

### Importing Specific Icons

An alternative to using the shorthand prefix and name is by importing icons directly. **This is your best bet at leveraging [tree-shaking](/apis/javascript/tree-shaking.md) if that's useful to you.** We still recommend preserving the shorthand prefix in your import names if you're using an icon in multiple [styles](/web/dig-deeper/styles.md).

```js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'
import { faCircleUser } from '@awesome.me/kit-KIT_CODE/icons/classic/regular'
import { faTree, faDragon as fassFaDragon } from '@awesome.me/kit-KIT_CODE/icons/sharp/solid'
import { faDog } from '@awesome.me/kit-KIT_CODE/icons/duotone/solid'
import { faDragon as fasdsFaDragon } from '@awesome.me/kit-KIT_CODE/icons/sharp-duotone/solid'
import { faMyIcon } from '@awesome.me/kit-KIT_CODE/icons/kit/custom'

function App() {
  return (
    <div>
      {/* Font Awesome Icons  */}
      <FontAwesomeIcon icon={faHouse} />
      <FontAwesomeIcon icon={faCircleUser} />
      <FontAwesomeIcon icon={faTree} />
      <FontAwesomeIcon icon={faDog} />

      {/* Font Awesome icon in multiple styles (with shorthand prefixes included)  */}
      <FontAwesomeIcon icon={fassFaDragon} />
      <FontAwesomeIcon icon={fasdsFaDragon} />

      {/* Custom Icon  */}
      <FontAwesomeIcon icon={faMyIcon} />
    </div>
  )
}

export default App
```

### Importing Whole Styles

You can use all the icons in a [style](/web/dig-deeper/styles.md) by importing each's shorthand prefix, but this method won't work with tree-shaking and can add bloat to your project since it includes all the icons in the style so use it only when the other methods don't work for your project.

```js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { fas, far, fad, fass, fasds, fak } from '@awesome.me/kit-KIT_CODE/icons'

function App() {
  return (
    <div>
      {/* Font Awesome Icons  */}
      <FontAwesomeIcon icon={fas.faHouse} />
      <FontAwesomeIcon icon={far.faCircleUser} />
      <FontAwesomeIcon icon={fad.faMouse} />
      <FontAwesomeIcon icon={fass.faCat} />
      <FontAwesomeIcon icon={fasds.faDog} />

      {/* Custom Icon  */}
      <FontAwesomeIcon icon={fak.faMyIcon} />
      <FontAwesomeIcon icon={fak.faAnotherOne} />
      <FontAwesomeIcon icon={fak.faMyLogo} />
    </div>
  )
}

export default App
```

### Using the Library

Another mechanism that the [Font Awesome Core](/web/dig-deeper/svg-core.md) 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.

First set up the Library:

```js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
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. But you'll want to make sure your Kit is [using subsetting](/web/dig-deeper/subsetting.md) so you aren't loading tons of icons you're not using.

A nice benefit of this method is that you can just add the icon as an `array` (using the shorthand prefix for your desired [style](/web/dig-deeper/styles.md)) or `string` in your templates without having to import the icons individually.

  **As a string:**
  **As an array:**

```js
<FontAwesomeIcon icon="fa-solid fa-house" />
<FontAwesomeIcon icon="fa-regular fa-circle-user" />
```

```js
<FontAwesomeIcon icon={['fas', 'house']}  />
<FontAwesomeIcon icon={['far', 'circle-user']}  />
```

Custom icons are just as easy.

  **As a string:**
  **As an array:**

```js
<FontAwesomeIcon icon="fa-kit fa-my-icon" />
```

```js
<FontAwesomeIcon icon={['fak', 'my-icon']} />
```

### TypeScript and Custom Icons

  <h4>
    Custom Icons + TypeScript Issues
  </h4>

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.

#### Error

  **As an string:**
  **As an array:**

```js
import { createRoot } from 'react-dom/client'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome.me/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`

createRoot(document.body).render(element)
```

```js
import { createRoot } from 'react-dom/client'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome.me/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`

createRoot(document.body).render(element)
```

##### Workaround

  **As an string:**
  **As an array:**

```js
import { createRoot } from 'react-dom/client'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library, IconProp } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome.me/kit-KIT_CODE/icons'

library.add(...all)

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

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

createRoot(document.body).render(element)
```

```js
import { createRoot } from 'react-dom/client'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library, IconProp } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome.me/kit-KIT_CODE/icons'

library.add(...all)

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

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

createRoot(document.body).render(element)
```

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](https://www.typescriptlang.org/docs/handbook/2/generics.html) to fix
it and we didn't want to hold up Kit Packages.

## Add Icons Using SVG Icon Packages

If you can't or don't want to use a Kit, you can add icons into your React project components using our SVG packages by style. (Remember: **Pro+ and Custom icons aren't available with SVG Packages** - you'll need to use a Kit package to use those icons.)

### Add Individual Icons

You can add each icon individually to keep your bundle small and efficient if you're only using a few icons. Here's an example using our SVG Icon Packages:

```js
import { createRoot } from 'react-dom/client'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'

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

createRoot(document.body).render(element)
```

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

#### Same Icons, Different Styles

Using ES modules and `import` statements we can define unique names for two or more different styles of the same icon (using shorthand prefix to specify each [style](/web/dig-deeper/styles.md)). Here's an example with different styles of the "house" icon:

```js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'

import { faHouse as fasFaHouse } from '@fortawesome/pro-solid-svg-icons'
import { faHouse as fadFaHouse } from '@fortawesome/pro-duotone-svg-icons'
import { faHouse as fadtFaHouse } from '@fortawesome/duotone-thin-svg-icons'
import { faHouse as fassFaHouse } from '@fortawesome/sharp-solid-svg-icons'
import { faHouse as fasdsFaHouse } from '@fortawesome/sharp-duotone-solid-svg-icons'
import { faCircleUser as farFaCircleUser } from '@fortawesome/pro-regular-svg-icons'
import { faCircleUser as falFaCircleUser } from '@fortawesome/pro-light-svg-icons'

library.add(fasFaHouse, fadFaHouse, fadtFaHouse, fassFaHouse, fasdsFaHouse, farFaCircleUser, falFaCircleUser)
```

And here's how you would add the "house" icon in various styles into your component:

  **As a string:**
  **As an array:**

```html
<FontAwesomeIcon icon="fa-solid fa-house" />
<FontAwesomeIcon icon="fa-duotone fa-solid fa-house" />
<FontAwesomeIcon icon="fa-duotone fa-thin fa-house" />
<FontAwesomeIcon icon="fa-sharp fa-solid fa-house" />
<FontAwesomeIcon icon="fa-sharp-duotone fa-solid fa-house" />
<FontAwesomeIcon icon="fa-regular fa-circle-user" />
<FontAwesomeIcon icon="fa-light fa-circle-user" />
```

```js
<FontAwesomeIcon icon={['fas', 'house']} />
<FontAwesomeIcon icon={['fad', 'house']} />
<FontAwesomeIcon icon={['fadt', 'house']} />
<FontAwesomeIcon icon={['fass', 'house']} />
<FontAwesomeIcon icon={['fasds', 'house']} />
<FontAwesomeIcon icon={['far', 'circle-user']} />
<FontAwesomeIcon icon={['fal', 'circle-user']} />
```

### Add Whole Styles

#### Free only

If you're just using the Free icons and styles, the easiest way to get the icons into your app is to add the Free SVG Icon Packages. Here's an example of how to do that:

```js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'

/* import all the icons in Free Solid, Free Regular, and Brands styles */
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fab)
```

And then you can use any of the icons in those styles without having to explictly import them, like this:

  **As a string:**
  **As an array:**

```js
<>
  <FontAwesomeIcon icon="fa-solid fa-dog" />
  <FontAwesomeIcon icon="fa-regular fa-circle-user" />
  <FontAwesomeIcon icon="fa-brands fa-threads" />
</>
```

```js
<>
  <FontAwesomeIcon icon={['fas', 'dog']} />
  <FontAwesomeIcon icon={['far', 'circle-user']} />
  <FontAwesomeIcon icon={['fab', 'threads']} />
</>
```

#### Add Whole Pro Styles

You can also add all the icons in a style - like Sharp Regular or Duotone - but be careful as each Pro style has thousands of icons. Here's an example of how to import whole styles (using shorthand prefix to specify each [style](/web/dig-deeper/styles.md)):

```js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'

/* import all the icons in Free Solid, Duotone Solid, and Duotone Thin styles */
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fad } from '@fortawesome/pro-duotone-svg-icons'
import { fadt } from '@fortawesome/duotone-thin-svg-icons'

library.add(fas, fad, fadt)
```

And then you can use any of the icons in those styles without having to explictly import them, like this:

  **As a string:**
  **As an array:**

```js
<>
  <FontAwesomeIcon icon="fa-solid fa-dog" />
  <FontAwesomeIcon icon="fa-duotone fa-solid fa-circle-user" />
  <FontAwesomeIcon icon="fa-duotone fa-thin fa-fish" />
</>
```

```js
<>
  <FontAwesomeIcon icon={['fas', 'dog']} />
  <FontAwesomeIcon icon={['fad', 'circle-user']} />
  <FontAwesomeIcon icon={['fadt', 'fish']} />
</>
```

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

```js
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`: [style](/web/dig-deeper/styles.md) shorthand that represents all of the icons in `@fortawesome/free-solid-svg-icons` [\*](#all-styles-warning)
- `fad`: [style](/web/dig-deeper/styles.md) shorthand that represents all the Duotone Solid icons in `@pro-duotone-svg-icons` [\*](#all-styles-warning)
- `fadt`: [style](/web/dig-deeper/styles.md) shorthand that represents all Duotone Thin icons in `@duotone-thin-svg-icons` [\*](#all-styles-warning)
- `fass`: [style](/web/dig-deeper/styles.md) shorthand that represents all Sharp Solid icons in `@sharp-solid-svg-icons` [\*](#all-styles-warning)
- `fasds`: [style](/web/dig-deeper/styles.md) shorthand that represents all Sharp Duotone Solid icons in `@sharp-duotone-solid-svg-icons` [\*](#all-styles-warning)
- `faThreads`, `faFontAwesome`, `faHatCowboy`, and `faHatChef`: Adding each of these icons individually allows us to use them without importing all the icons in the style

<span id="all-styles-warning">\*</span> For the packages above marked with a "\*", the import adds all the icons in that package/style. Which makes it easy to add any of the icons in that package using the icon name as a string anywhere in the app. But it's also a lot of icons.

  <h4>
    Be Careful What You Import!
  </h4>

Think twice before importing whole styles with SVG Icon Packages - it can be a LOT of icons!

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 might look something like this:

```js
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-circle-user" />
    <FontAwesomeIcon icon="fa-duotone fa-thin fa-fish" />
    <FontAwesomeIcon icon="fa-sharp-duotone fa-solid fa-dolphin" />
  </div>
)
```

```js
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](#importing-specific-icons).

## Troubleshooting

#### Missing Icons?

If some of your icons aren't showing up, make sure you have included the icons - in the style you're trying to use - in your subset for your Kit (if you're using the Kit package), or imported the style package for the style of icon you're trying to use (if you're using the SVG packages by style).

#### Importing Hyphenated Icon Names

If you’re having trouble importing icons with hyphenated names (like user-circle, thumbs-up, or face-smile), make sure you’re using the correct import format.

When importing from the Font Awesome package, prepend `fa` and convert the icon name to **PascalCase** (also known as **UpperCamelCase**). For example:

| Icon Name     | Import Name    |
| ------------- | -------------- |
| `circle-user` | `faCircleUser` |
| `thumbs-up`   | `faThumbsUp`   |
| `face-smile`  | `faFaceSmile`  |

#### Still Using Dynamic Importing?

Dynamic Importing is no longer 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.