Add Icons with React Native

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.

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.

Deep Imports by Default

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

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:

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 and create a custom subset with just the icons or styles you need. See the Kit Package API docs for more.

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.

By Prefix and Name

Here's an example using the shorthand prefix to specify family and style:

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.

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

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

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

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

Make sure your Kit is using subsetting 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.

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

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

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

Using Other Icon Styles

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

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:

{/* 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:

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)