React

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

When using Font Awesome with React, we recommend 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.

First Things First!

Make sure you:

# Set up

# Add (Beta) 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:

# install the beta package - using the @next flag
npm i --save @fortawesome/fontawesome-svg-core@next
# install the beta package - using the @next flag
yarn add @fortawesome/fontawesome-svg-core@next

Find out more about what's in Font Awesome core

# Add (Beta) 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@next
npm i --save @fortawesome/free-regular-svg-icons@next 
# Free icons styles
yarn add @fortawesome/free-solid-svg-icons@next
yarn add @fortawesome/free-regular-svg-icons@next

# 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@next
npm i --save @fortawesome/pro-regular-svg-icons@next
npm i --save @fortawesome/pro-light-svg-icons@next
npm i --save @fortawesome/pro-thin-svg-icons@next
npm i --save @fortawesome/pro-duotone-svg-icons@next
# Pro icons styles
yarn add @fortawesome/pro-solid-svg-icons@next
yarn add @fortawesome/pro-regular-svg-icons@next
yarn add @fortawesome/pro-light-svg-icons@next
yarn add @fortawesome/pro-thin-svg-icons@next
yarn add @fortawesome/pro-duotone-svg-icons@next

# Add the React Component

And lastly, install the Font Awesome React component:

npm i --save @fortawesome/react-fontawesome@latest
yarn add @fortawesome/react-fontawesome@latest

# Yuss! 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!

You're viewing the Version 6 Beta

It's all the awesome of 5 but now more six-y! Version 6 brings over 13,000 icons across 5 styles - including the new Thin style! - and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!