Set Up with React
When using Font Awesome with React, we recommend using our official
react-fontawesomecomponent to make everything work just right.
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-coreFind 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 a Kit Package or SVG Icon Packages, and select any of our styles.
For Pro icons, you’ll first need to set up access with your secret Font Awesome npm token and global or per-project access.
Then add the Pro icon style packages that you plan to use in your app:
npm i --save @awesome.me/kit-KIT_CODE# You probably don't need all of these, just pick what you neednpm i --save @fortawesome/pro-solid-svg-iconsnpm i --save @fortawesome/pro-regular-svg-iconsnpm i --save @fortawesome/pro-light-svg-iconsnpm i --save @fortawesome/pro-thin-svg-iconsnpm i --save @fortawesome/pro-duotone-svg-iconsnpm i --save @fortawesome/duotone-regular-svg-iconsnpm i --save @fortawesome/duotone-light-svg-iconsnpm i --save @fortawesome/duotone-thin-svg-iconsnpm i --save @fortawesome/sharp-solid-svg-iconsnpm i --save @fortawesome/sharp-regular-svg-iconsnpm i --save @fortawesome/sharp-light-svg-iconsnpm i --save @fortawesome/sharp-thin-svg-iconsnpm i --save @fortawesome/sharp-duotone-solid-svg-iconsnpm i --save @fortawesome/sharp-duotone-regular-svg-iconsnpm i --save @fortawesome/sharp-duotone-light-svg-iconsnpm i --save @fortawesome/sharp-duotone-thin-svg-iconsnpm i --save @fortawesome/free-solid-svg-iconsnpm i --save @fortawesome/free-regular-svg-iconsnpm i --save @fortawesome/free-brands-svg-icons3. Add the React Component
And lastly, install the Font Awesome React component:
npm i --save @fortawesome/react-fontawesome@latestYou’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!