# Add Icons with React Native

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

> There are a few ways to add icons to a React Native project. Choose the option that fits your project, and then render icons with the `FontAwesomeIcon` component.

Make sure you:

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

## About Adding Icons in React Native

You can add icons to your React Native project using either a **Kit Package** (required for Pro+ and Custom icons) or **SVG Icon Packages** by style. Both work the same way they do on the web — the only React Native–specific concern is keeping your Metro bundle lean, which means preferring deep imports.

| 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, tree-shakes well                          | Not centralized, tedious to add many icons, can be ambiguous about style |
| <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 RN project          | Can be bulky if you don't subset your Kit                                |
| <span style="text-wrap: nowrap">SVG Pkg</span>                                                                                  | [Explicit Import](#explicit-import)           | Best tree-shaking when using [deep imports](#deep-imports-by-default)           | 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> | [Build a Library](#build-a-library)           | Import once, use anywhere by string name                                        | Skip if bundle size matters more than convenience                        |

## Deep Imports by Default

  <h4>
    Tree-shaking issues? Build times taking forever?
  </h4>

Check how you're importing icons. React Native's Metro bundler handles tree-shaking differently than web bundlers, and the Font Awesome style packages are large. **Always prefer deep imports** to keep your bundle small and your build fast.

In past versions of `react-native-fontawesome`, we documented SVG package imports like this:

```js
import { faStroopwafel } from '@fortawesome/pro-solid-svg-icons'
```

This pulls in the entire style package and can cause build times to skyrocket. **Use "deep imports" instead** — import the specific icon module directly:

```js
import { faStroopwafel } from '@fortawesome/pro-solid-svg-icons/faStroopwafel'
```

By importing from the `faStroopwafel.js` module directly, Metro has very little work to do and only the icon you use ends up in your bundle. The same principle applies to Kit packages — import from per-style entry points (`.../icons/classic/solid`) rather than the top-level `.../icons` barrel when you care about bundle size.

---

## Add Icons Using a Kit Package

The easiest way to add icons in React Native is with a Pro Kit package — which lets you add your own [custom icons](/web/add-icons/upload-icons.md) and [create a custom subset](/web/dig-deeper/subsetting.md) with just the icons or styles you need. See the [Kit Package API docs](/web/dig-deeper/kit-package-api.md) for more.

  <h4>
    Subset your Kit for smaller bundles
  </h4>

A subsetted Kit is especially valuable in React Native. Metro ships everything your app imports to the device, so trimming your Kit to just the icons you actually use keeps your app's JS bundle small and your builds fast.

And don't forget — for the examples below to work, your Kit needs to contain the icons in the examples. 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 using the [shorthand prefix to specify family and style](/web/dig-deeper/styles.md):

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

export default function App() {
  return (
    <View>
      {/* 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']} />
    </View>
  )
}
```

### Importing Specific Icons

An alternative to the shorthand `byPrefixAndName` is importing icons directly. **This is your best bet at leveraging tree-shaking in Metro**, and it's what we recommend when bundle size matters.

```tsx
import { View } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-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'

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

      {/* Same icon in multiple styles (with shorthand prefixes preserved) */}
      <FontAwesomeIcon icon={fassFaDragon} />
      <FontAwesomeIcon icon={fasdsFaDragon} />

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

### Using the Library

The [Font Awesome Core](/web/dig-deeper/svg-core.md) provides a `Library` class. With a subsetted Kit, this is an easy way to add all your icons once and then reference them by string name anywhere in your app.

First, set up the Library:

```ts
// icons.ts (or App.tsx)
import { library } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome.me/kit-KIT_CODE/icons'

library.add(...all)
```

Now all icons in your Kit are registered. Use them as strings or arrays anywhere in your components:

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

```tsx
<FontAwesomeIcon icon="fa-solid fa-house" />
<FontAwesomeIcon icon="fa-regular fa-circle-user" />
<FontAwesomeIcon icon="fa-kit fa-my-icon" />
```

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

Make sure your Kit is [using subsetting](/web/dig-deeper/subsetting.md) so you aren't bundling icons you don't need.

---

## Add Icons Using SVG Icon Packages

If you can't or don't want to use a Kit, you can add icons using our SVG packages by style. (**Pro+ and Custom icons aren't available in SVG packages** — those require a Kit.)

### Explicit Import

Explicit imports are the recommended pattern with SVG packages — they subset your icons and optimize your final bundle so only the icons you use are included.

```tsx
import { View } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer'

export default function App() {
  return (
    <View>
      <FontAwesomeIcon icon={faMugSaucer} />
    </View>
  )
}
```

Note the deep import (`/faMugSaucer` at the end) — see [Deep Imports by Default](#deep-imports-by-default) above.

### Build a Library

Explicitly importing icons into each component can get tedious. Instead, you can build an icon library: import icons once in an initializing module, add them to the library, then reference any of them by string name from any component.

```ts
// icons.ts (imported once from App.tsx)
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faSquareCheck } from '@fortawesome/free-solid-svg-icons/faSquareCheck'
import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer'

library.add(fab, faSquareCheck, faMugSaucer)
```

We pass `fab` above, which represents all of the brand icons in `@fortawesome/free-brands-svg-icons`. Any of the brand icons in that package can then be referenced by name as a string anywhere else in our app.

We added `faSquareCheck` and `faMugSaucer` individually, which lets us refer to them throughout our app by their names, `square-check` and `mug-saucer`.

Now we can use the icons in our components:

```tsx
import { View, Text } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'

export const Beverage = () => (
  <View>
    <FontAwesomeIcon icon="square-check" />
    <Text>Favorite beverage:</Text>
    <FontAwesomeIcon icon="mug-saucer" />
    <Text>Same icon, different syntax:</Text>
    <FontAwesomeIcon icon="fa-mug-saucer" />
  </View>
)
```

  <h4>
    Oh, it's magic
  </h4>

When you use an icon name as a string, the `fas` prefix (Font Awesome Solid) is inferred as the default.

### Using Other Icon Styles

If you've imported other styles, you can reference icons using this syntax:

```tsx
import { View, Text } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'

export const Gadget = () => (
  <View>
    {/* Defaults to solid if no style prefix is given */}
    <FontAwesomeIcon icon="fa-square-check" />
    <Text>Popular gadgets come from vendors like:</Text>
    {/* Classic regular icon */}
    <FontAwesomeIcon icon="fa-regular fa-flux-capacitor" />
    {/* Duotone icon */}
    <FontAwesomeIcon icon="fa-duotone fa-solid fa-car-bolt" />
    {/* Sharp solid icon */}
    <FontAwesomeIcon icon="fa-sharp fa-solid fa-car-bolt" />
    {/* Sharp duotone solid icon */}
    <FontAwesomeIcon icon="fa-sharp-duotone fa-solid fa-flux-capacitor" />
  </View>
)
```

You can also use the array syntax:

```tsx
{/* These are the same Light icon */}
<FontAwesomeIcon icon="fal fa-alien" />
<FontAwesomeIcon icon={['fal', 'alien']} />

{/* These are the same Sharp Solid icon */}
<FontAwesomeIcon icon="fass fa-bolt-lightning" />
<FontAwesomeIcon icon={['fass', 'bolt-lightning']} />

{/* These are the same Duotone Regular icon */}
<FontAwesomeIcon icon="fadr fa-flux-capacitor" />
<FontAwesomeIcon icon={['fadr', 'flux-capacitor']} />

{/* These are the same Sharp Duotone Solid icon */}
<FontAwesomeIcon icon="fasds fa-car-bolt" />
<FontAwesomeIcon icon={['fasds', 'car-bolt']} />
```

## Same Icon, Different Styles

With ES modules and `import` statements you can rename icons to import and use the same icon in multiple styles. This works for both Kit packages and SVG packages:

```ts
import { library } from '@fortawesome/fontawesome-svg-core'
import { faStroopwafel as fasFaStroopwafel } from '@fortawesome/pro-solid-svg-icons/faStroopwafel'
import { faStroopwafel as fassFaStroopwafel } from '@fortawesome/sharp-solid-svg-icons/faStroopwafel'
import { faStroopwafel as fadrFaStroopwafel } from '@fortawesome/duotone-regular-svg-icons/faStroopwafel'
import { faStroopwafel as fasdsFaStroopwafel } from '@fortawesome/sharp-duotone-solid-svg-icons/faStroopwafel'

library.add(fasFaStroopwafel, fassFaStroopwafel, fadrFaStroopwafel, fasdsFaStroopwafel)
```