Font Awesome Pro - React.js / Next.js

Font Awesome Pro – React.js / Next.js

In this post I’m going to explain how to use font awesome pro icons in a simple React.js or Next.js application.

I’ve spent a few hours browsing the web trying find how to get my pro icons to show but so far the documentation has been confusing or incomplete.

My aim with this post is to give a simple solution that works without all the effort I had to go through.

NPM Install / Yarn Install Libraries

Install the Font Awesome icon libraries via terminal or command line.

NPM

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/react-fontawesome

Yarn

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/react-fontawesome

Install Pro Icons Libraries

Important! Follow the pre-requisite configuration instruction at https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/using-package-managers#installing-pro. Note you’ll need to logged in to get your unique secret key.

Install the libraries you require from the list below via terminal or command line.

NPM

npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons

Yarn

yarn add @fortawesome/pro-solid-svg-icons
yarn add @fortawesome/pro-regular-svg-icons
yarn add @fortawesome/pro-light-svg-icons
yarn add @fortawesome/pro-duotone-svg-icons

Import the Libraries into your React.js or Next.js App

Import the libraries you wish to use.

I’m importing the pro regular font into my project. I’ve created a page called finance.js.

I want to show the regular fa-check-circle as shown below:

import { ReactElement } from 'react'
import { library } from '@fortawesome/fontawesome-svg-core'
import { far } from '@fortawesome/pro-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

library.add(far)

function page() {

    return (
        <div class="container">
            <FontAwesomeIcon icon={["far", "check-circle"]} />
        </div>
     )
}

I’ve found that the icon names are the same as the class name shown on the Font Awesome e.g. fa-check-circle, except you just need to remove the fa- part as we’re already specifying which library it’s coming from.

Now, you should now see your icon displayed on the page.

Natasha Wylie