When using Font Awesome with React, we recommend using our official react-fontawesome component to make everything work just right.

Advertisement

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

• All 26,107 icons in Font Awesome
• 5 Classic styles of every icon
• 3 Sharp styles of every icon
• A Perpetual License to use Pro
• Services and tools to make easy work of using icons
• Fresh icons, features, and software updates
• Plus support from real humans

Already have a Pro Plan? Sign in

Before You Get Started

Make sure you:

• Plan to use the SVG+JS method
• Are using React and not React Native (that's a different component)

We'll cover the basics of using the official react-fontawesome component (described below), which uses the SVG + JS method to render icons. But you can opt to use the Web Fonts + CSS method if you prefer.

Follow the steps below to set up the react-fontawesome component in your project.

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 i --save @fortawesome/fontawesome-svg-core

yarn add @fortawesome/fontawesome-svg-core

Find out more about what's in Font Awesome core

2. Add Icon Packages

Next, you'll install the icons you want to use -- you can choose Free or Pro icons, and select any of our styles.

Free

For Free icons, you can add either -- or both -- of these styles:

# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

# Free icons styles
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons

Pro

For Pro icons, you'll first need to set up access with your secret Font Awesome npm token and global or per-project access.

Configure Access for Pro

Then add the Pro icon style packages that you plan to use in your app:

# Pro icons styles
npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons
npm i --save @fortawesome/sharp-solid-svg-icons
npm i --save @fortawesome/sharp-regular-svg-icons
npm i --save @fortawesome/sharp-light-svg-icons

# Pro icons styles
yarn add @fortawesome/pro-solid-svg-icons
yarn add @fortawesome/pro-regular-svg-icons
yarn add @fortawesome/pro-light-svg-icons
yarn add @fortawesome/pro-thin-svg-icons
yarn add @fortawesome/pro-duotone-svg-icons
yarn add @fortawesome/sharp-solid-svg-icons
yarn add @fortawesome/sharp-regular-svg-icons
yarn add @fortawesome/sharp-light-svg-icons

Font Awesome Sharp requires Pro and specific versions!

Make sure you have an active Pro-level plan or a Pro license with access to the specific versions that include Sharp's styles.

3. Add the React Component

And lastly, install the Font Awesome React component:

npm i --save @fortawesome/[email protected]

yarn add @fortawesome/[email protected]

You're Ready to Add Icons!

Like Anakin said, it’s woooorking! All of our icons are now ready to do your project’s bidding. Learn how to add them to your React project and then use their power to bring order and style to your UI!

Add Some Icons!