React Native

Integrating Font Awesome with React Native. You must be using React Native, or this page will not help you.

Before You Get Started

Make sure you:

• Configured access to use Font Awesome packages
• Plan to use the SVG+JS method
• Are using React Native and have a project set up. If not, get set up with their docs.
• Set up a Kit and Enabled Package Installation to use Pro+ icons.

1. Add SVG Core

First you’ll need to use npm or yarn to install the core package which includes all the utilities to make the icons work:

npm

npm i --save @fortawesome/fontawesome-svg-core

yarn

yarn add @fortawesome/fontawesome-svg-core

2. Add Icon Packages

Next, you’ll install the icons you want to use — you can choose a Kit Package or SVG Icon Packages, and select any of our styles. Follow the instructions for installing icons using the Kit package or SVG Icon packages.

Pro+ Icons are only available in Kit Packages!

Along with a Pro+ Plan, you'll need to install a downloaded Kit package to use any of our Pro+ Icons — they are not available in any other packages.

3. Add the React Native Component

npm

npm i --save @fortawesome/react-native-fontawesome@latest  react-native-svg

yarn

yarn add @fortawesome/react-native-fontawesome@latest  react-native-svg

If you are using a bare react-native-cli project, you will need to run the following command in order to complete the setup on iOS:

cd ios && pod install

Using Icons in Your Project

There are two ways you can use Font Awesome icons in your React Native components:

1. Explicit Import

Explicit Import allows you to subset your icons and optimize your final bundle — only the icons you import get included.

import React, { Component } from 'react'
import { View } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer'

type Props = {}
export default class App extends Component<Props> {
  render() {
    return (
      <View>
        <FontAwesomeIcon icon={faMugSaucer} />
      </View>
    )
  }
}

2. Build a Library

Explicitly importing icons into each of many components in your app might become tedious, so you may want to build a library to more easily use our icons in more than one component. So you can import icons just once in some initializing module, add them to the library, then reference any of them by icon name as a string from any component.

There’s no need to import the icons into each component once they’re in the library.

// in App.js
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 { faMugEmpty } from '@fortawesome/free-solid-svg-icons/faMugEmpty'

library.add(fab, faSquareCheck, faMugSaucer)

We’ll pass fab in the code block above, which represents all of the brand icons in @fortawesome/free-brands-svg-icons. Any of the brand icons in that package may be referenced by icon name as a string anywhere else in our app.

We added faSquareCheck and faMugSaucer icons individually which allowed us to refer to them throughout our app by their icon string names, square-check and mug-saucer, respectively.

Now we can use the icons in our components:

// in Beverage.js, or any functional component
import React from 'react'
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" />
    // Using mug-saucer is the same as fa-mug-saucer
    <Text>Favorite beverage: </Text>
    <FontAwesomeIcon icon="fa-mug-saucer" />
  </View>
)

Oh, it's magic

Another piece of magic that’s happening in the background when providing icon names as strings like the above code block demonstrates: the fas prefix (for Font Awesome Solid) is being inferred as the default.

Using other icon styles

If you have imported other styles you can add icons using the following syntax:

// any component
import React from 'react'
import { View, Text } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'

export const Gadget = () => (
  <View>
    // if no style prefix is given, icon defaults to a solid icon -->
    <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. This is not as friendly but you can still use it.

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

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

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

// These icons 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 we can rename our icons which allows us to import and use the same icon in different styles:

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
)

Tree-shaking isn't working! The Build times are taking forever!

Check the way that you are importing icons.

In past versions of react-native-fontawesome, we documented importing icons like this:

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

This can cause build times for your project to skyrocket because React Native is trying to tree shake. The Font Awesome packages are so large that we highly recommend that you avoid this.

Instead, use “deep imports” by default.

import { faStroopwafel } from '@fortawesome/pro-solid-svg-icons/faStroopwafel' // <- notice the additional module here?

By directly importing from the faStroopwafel.js module, there is no additional work that tree shaking needs to do to reduce your bundle size.

Coloring Icons

The color prop takes priority over setting color via StyleSheet. So if you end up with both, the prop wins. In fact, when provided a style object (suppose you’ve declared other style properties other than color), if the color prop has been specified, then any color property on the style object is removed before the style object is passed through to the underlying SVG rendering library. This is to avoid ambiguity.

Using the color prop should be preferred over using the StyleSheet.

Color Prop

<FontAwesomeIcon icon={faMugSaucer} color={'red'} />

Color StyleSheet Property

To set the color of an icon , provide a StyleSheet like this:

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer'

type Props = {}

const style = StyleSheet.create({
  icon: {
    color: 'blue'
  }
})

export default class App extends Component<Props> {
  render() {
    return (
      <View>
        <FontAwesomeIcon icon={faMugSaucer} style={style.icon} />
      </View>
    )
  }
}

Sizing Icons

The default icon size is 16. To adjust the icon size, use the size prop:

<FontAwesomeIcon icon={faMugSaucer} size={32} />

Duotone Icons

You can specify the color and opacity for Duotone and Sharp Duotone Icon’s secondary layer using the secondaryColor and secondaryOpacity props. Note that these are optional and will simply default to using your primary color at 40% opacity.

<FontAwesomeIcon
  icon="mug-saucer"
  color="blue"
  secondaryColor="red"
  secondaryOpacity={0.4}
/>

Power Transforms

Take control over the positioning of your icons with power transforms, here is how to use:

  <FontAwesomeIcon icon="arrows-up-down-left-right" transform="shrink-6 left-4" />
  <FontAwesomeIcon icon="arrow-right" transform={{ rotate: 42 }} />

Masking

Want to combine two icons to create one single-color shape… enter masking, here is how to use:

<FontAwesomeIcon icon="mug-saucer" mask="circle" transform="shrink-6" />

Notice that we are also using Power Transforms to make the mug-saucer icon a bit smaller. If we don’t it doesn’t fit well.

You can also use maskId to explicitly set the id used for masking. It’s auto-generated normally but this causes issues with Jest Snapshot Testing as that value can change.

<FontAwesomeIcon
  icon="mug-saucer"
  mask="circle"
  maskId="mug-saucer-mask"
  transform="shrink-6"
/>