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 installing core utility packages, icon installation, and installing the React component, so that you can make awesome stuff your way!
1. Add the React Component
Section titled “1. Add the React Component”First things first. Let’s install the react-fontawesome component into your project.
npm i --save @fortawesome/react-fontawesome@latestyarn add @fortawesome/react-fontawesome@latest2. Add SVG Core
Section titled “2. Add SVG Core”Next you’ll need to use npm or yarn to install the core package which is a dependency that includes all the utilities to make the icons work.
npm i --save @fortawesome/fontawesome-svg-coreyarn add @fortawesome/fontawesome-svg-core3. Add Icon Packages
Section titled “3. Add Icon Packages”Lastly, you’ll need to install the icons you want to use. There are two ways to add Font Awesome icons to your project:
Using a Kit Package (Recommended)
Section titled “Using a Kit Package (Recommended)”This is the simplest way to get started. It is also the only way to use Pro+ icons via a package manager.
Before installing your Kit package, you must complete the following steps:
Once you’ve completed both steps above, install your Kit package:
npm i --save @fortawesome/kit-[your-kit-code]yarn add @fortawesome/kit-[your-kit-code]Using SVG Icon Packages
Section titled “Using SVG Icon Packages”Alternatively, you can install individual Free or Pro icon packages for each style you want to use.
Free icons can be installed without any additional configuration and include the following styles.
npm i --save @fortawesome/free-solid-svg-iconsnpm i --save @fortawesome/free-regular-svg-iconsnpm i --save @fortawesome/free-brands-svg-iconsyarn add @fortawesome/free-solid-svg-iconsyarn add @fortawesome/free-regular-svg-iconsyarn add @fortawesome/free-brands-svg-iconsPro icons require an active subscription to a Pro Plan. You’ll also need to configure access to these Pro Packages before you can install and use them.
After configuration is complete, you can install individual styles as packages:
npm 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-iconsyarn add @fortawesome/pro-solid-svg-iconsyarn add @fortawesome/pro-regular-svg-iconsyarn add @fortawesome/pro-light-svg-iconsyarn add @fortawesome/pro-thin-svg-iconsyarn add @fortawesome/pro-duotone-svg-iconsyarn add @fortawesome/duotone-regular-svg-iconsyarn add @fortawesome/duotone-light-svg-iconsyarn add @fortawesome/duotone-thin-svg-iconsyarn add @fortawesome/sharp-solid-svg-iconsyarn add @fortawesome/sharp-regular-svg-iconsyarn add @fortawesome/sharp-light-svg-iconsyarn add @fortawesome/sharp-thin-svg-iconsyarn add @fortawesome/sharp-duotone-solid-svg-iconsyarn add @fortawesome/sharp-duotone-regular-svg-iconsyarn add @fortawesome/sharp-duotone-light-svg-iconsyarn add @fortawesome/sharp-duotone-thin-svg-iconsYou’re Ready to Add Icons!
Section titled “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!