Set Up with React
When using Font Awesome with React, we recommend using our official
react-fontawesome
component to make everything work just right.
In this doc, 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@latest
yarn add @fortawesome/react-fontawesome@latest
2. 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-core
yarn add @fortawesome/fontawesome-svg-core
3. Add Icon Packages
Section titled “3. Add Icon Packages”Lastly, you’ll need to install the icons you want to use.
- If you’re just using Free icons, skip ahead to the Free package instructions.
- If you’re using Pro+ icons, you’ll need to use a Kit package.
- If you’re using Pro icons, there are you can use a Kit package or the SVG packages by style.
Pick the method that works for your project, and continue on for details on how to get the icons into your project.
Using a Kit Package (Recommended)
Section titled “Using a Kit Package (Recommended)”This is the simplest way to get started if you’re using any Pro icons. It is also the only way to use Pro+ icons via a package manager.
Before installing your Kit package, you’ll need to complete the following steps:
Once you’ve completed both steps above, install your Kit package:
npm install @awesome.me/kit-KIT_CODE@latest
yarn add @awesome.me/kit-KIT_CODE@latest
Using SVG Icon Packages (Alternate)
Section titled “Using SVG Icon Packages (Alternate)”Alternatively, you can install individual Free or Pro icon packages for each style you want to use.
Free Icon Packages
Section titled “Free Icon Packages”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-icons
yarn add @fortawesome/free-solid-svg-iconsyarn add @fortawesome/free-regular-svg-iconsyarn add @fortawesome/free-brands-svg-icons
Pro Icon Packages
Section titled “Pro Icon Packages”Pro 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 any of the individual styles as packages, but use caution when installing full styles as they are big packages that include a lot of icons! (Using a Kit is more effcient.)
npm install @fortawesome/pro-solid-svg-iconsnpm install @fortawesome/pro-regular-svg-iconsnpm install @fortawesome/pro-light-svg-iconsnpm install @fortawesome/pro-thin-svg-iconsnpm install @fortawesome/pro-duotone-svg-iconsnpm install @fortawesome/duotone-regular-svg-iconsnpm install @fortawesome/duotone-light-svg-iconsnpm install @fortawesome/duotone-thin-svg-iconsnpm install @fortawesome/sharp-solid-svg-iconsnpm install @fortawesome/sharp-regular-svg-iconsnpm install @fortawesome/sharp-light-svg-iconsnpm install @fortawesome/sharp-thin-svg-iconsnpm install @fortawesome/sharp-duotone-solid-svg-iconsnpm install @fortawesome/sharp-duotone-regular-svg-iconsnpm install @fortawesome/sharp-duotone-light-svg-iconsnpm install @fortawesome/sharp-duotone-thin-svg-icons
yarn 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-icons