Set Up with React Native

When using Font Awesome with React Native, we recommend using our official react-native-fontawesome component so icons render correctly in your mobile app.

Before You Get Started

Make sure you have the following in place:

For Pro+ Icons, Use a Kit Package!

If you're planning to use Pro+ icons, you'll need an active Pro+ Plan and a v7 Kit with Package Installation enabled. (Kits work great for Pro icons too!)

In this doc, we'll cover installing the core SVG package, adding icon packages, and installing the React Native component so your icons render cleanly across iOS and Android.

1. Add SVG Core

First, use npm or yarn to install the core package, which includes the utilities that make the icons work.

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

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

Install the React Native component and its peer dependency, react-native-svg.

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

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

Using Expo?

If you're using Expo, install react-native-svg with Expo's installer so you get a compatible version: npx expo install react-native-svg. See Use React Native with... for more.

4. iOS: Pod Install (bare React Native CLI only)

If you're using a bare react-native-cli project (not Expo), finish the iOS setup by installing pods:

cd ios && pod install

Expo projects don't need this step.

    No results