Upgrade from v6 to v7

Wondering how to upgrade your Font Awesome React component from v6 to v7 and use all the new fancy family styles? We got you covered.

Before You Get Started

Make sure you have the following in place:

• A project using React 16.3 or later
• Access configured to use Font Awesome packages (for Pro/Pro+ Icons)
• An active Pro+ Plan and a v7 Kit with Package Installation enabled to use Pro+ icons

1. Remove Older Versions

Remove any entries of react-fontawesome and fontawesome-svg-core packages from your package.json or yarn.lock file:

  // these need to be removed
  "@fortawesome/react-fontawesome"
  "@fortawesome/fontawesome-svg-core"

Clean Install Tip

To help ensure a clean install of the new react-fontawesome and fontawesome-svg-core packages, consider removing any existing entries for @fortawesome/fontawesome-svg-core and @fortawesome/react-fontawesome from your node_modules directory and your lock file (package-lock.json if using npm, or yarn.lock if using Yarn) before reinstalling.

2. Ready for Reinstallation

Next, head over to the Set Up with React guide. Take a moment to decide whether you’d like to install using a Kit Package (recommended) or SVG Icon Packages, and just follow the steps for the option that works best for you.

Optional: Updating v6 Pro Icon Packages

All v6 icon packages are still compatible with the new react-fontawesome and fontawesome-svg-core packages.

However, if you’d like to upgrade to the latest v7 icon packages, simply follow the same steps as above: remove the existing icon packages from your package.json (and yarn.lock if applicable), then reinstall the Icon Packages.