Integrating Font Awesome with React Native(opens new window) . You must be using React Native, or this page will not help you.
How to Install
We're going to assume that you already have a React Native project setup. If you don't, you can get started over in their docs(opens new window) .
Install our component, the SVG core, and the
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:
Add some icons Styles
Install our free Solid, Brands, and Regular icon styles:
If you are a Pro or Pro Max subscriber you can install additional icons. Additional configuration is required when installing our Pro packages.
Once your pro configuration is complete, you can add Pro icons:
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.
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.
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.
faMugSaucer icons individually which allowed us to refer to them throughout our app by their icon string names,
Now we can use the icons in our components:
Using other icon styles
If you have imported other styles you can add icons using the following syntax:
You can also use the array syntax. This is not as friendly but you can still use it.
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:
In past versions of
react-native-fontawesome, we documented importing icons like this:
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.
By directly importing from the
faStroopwafel.js module, there is no additional work that tree shaking needs to do to reduce your bundle size.
Style those 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 StyleSheet property
To set the color of an icon , provide a
StyleSheet like this:
The default icon size is 16. To adjust the icon size, use the size prop:
You can specify the color and opacity for Duotone's secondary layer using the
secondaryOpacity props. Note that these are optional and will simply default to using your primary color at 40% opacity.
Take control over the positioning of your icons with power transforms, here is how to use:
Want to combine two icons to create one single-color shape... enter masking, here is how to use:
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(opens new window) as that value can change.