How to set up Font Awesome in React

Hello There 😊

In this article, we will learn how to implement Font Awesome icons library in a React project.

Introduction

Font Awesome is a popular icon library that provides scalable vector icons that can be customized with CSS. It is commonly used in web design and is easily recognizable by its iconic font and CSS styling. The library includes a wide variety of icons, including social media icons, user interface icons, and brand icons.

If you are new to react and don’t know how to integrate font awesome in react, or you are finding it hard to set up the font-awesome icons library in react and how to use it in react, this article is for you.

Prerequisites

To complete this tutorial, you will need the following:

1. A basic understanding of React before starting this tutorial.
2. Node.js installed locally. You can do so here; Install Node.js.

We will achieve our aim of this article by doing the following.

1. Setting up our react project.
2. Installing font awesome’s SVG core package.
3. Installing font awesome’s icon packages (We’ll be using the Free icons).
4. Installing the font awesome react component.
5. Importing icons into each component.
6. Importing icons globally.

Setting up our react project

First, open your Visual Studio code’s terminal or device’s terminal and type the following command: npx create-react-app font-awesome-react

Doing this will create a react app named font-awesome-react and all the react packages needed for the project will be installed.
Next, we will navigate into the font-awesome-react folder by typing cd font-awesome-react into the terminal.

To start our project, we will type npm start. This will start the project on the development server.

Next, we will open the App.js file in the src folder, remove the original React element rendered there and replace it with any other element of your choice.

Installing font awesome’s SVG core package

We will need to install the core package, which includes all the utilities, to make the icons work.

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

Installing font awesome’s icon packages

Next, we will install the icon packages in different styles: solid, regular, light, thin, and duotone.

Not all icons are free, so you can install the icon packages for the free icons or the pro icons.

Free Icons

These are the styles available for the free icons.

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

Pro Icons

You must have a valid Pro Package Token and an active Pro Plan subscription to configure Pro access for your project if you intend to use the Pro packages, which offer additional icons and styles.

These are the styles available for the pro icons.

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-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons
npm i --save @fortawesome/sharp-solid-svg-icons

Installing the font awesome react component

Now we will install the Font Awesome React component.

npm i --save @fortawesome/react-fontawesome@latest

After installing all the necessary packages above, we will navigate to our package.json file to see everything we have installed.

Importing icons into each component

For the purpose of this article, we will be creating a new page: IconPage.js, which we will then import into our App.js.

import IconPage from './IconPage'
import './App.css';

function App() {
  return (
    <div className="App">
      <IconPage />
    div>
  );
}

export default App;

We would import some icons into the IconPage.js file.
To do this, we have to import FontAwesomeIcon into the file.
Then, we can add any free icon we need to the project by importing the icon from the package we installed earlier. e.g:
import { faPenNib } from '@fortawesome/free-solid-svg-icons'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPenNib } from '@fortawesome/free-solid-svg-icons'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'

const IconPage = () => {
  return (
    <div>
      <h3>How to use font-awesome in reacth3>
      <FontAwesomeIcon icon={faPenNib} />
      <FontAwesomeIcon icon={faEnvelope} />
    div>
  )
}

export default IconPage

This is the output we get.

If you have so many icons to use in a single file, instead of importing them individually with multiple lines of code

import { faPenNib } from '@fortawesome/free-solid-svg-icons'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'

You can import them together in a single line.

import { faPenNib, faEnvelope } from '@fortawesome/free-solid-svg-icons'

…or you can import them globally, which we will discuss below.

Importing icons globally

To import icons globally, we will navigate to the App.js file. We will then import a library from the SVG core package we installed.

import { library } from '@fortawesome/fontawesome-svg-core'

Remember, we talk about the icons having different styles. We would be importing every icon style.
First, we have to know how these styles are represented.

• Solid Style – fas
• Regular Style – far
• Light Style – fal
• Duotone Style – fad
• Brand Style – fab
  So we will be importing each style with what they are represented with.

import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'

We imported just these three because they are the only styles available for the free icon.
We will add all the imported styles to our library by adding this code below export default App; in the App.js file.

library.add(fab, fas, far)

This is how the App.js file will be now.

// import the library
import { library } from '@fortawesome/fontawesome-svg-core'

// import your icons
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'

import IconPage from './IconPage'
import './App.css';

function App() {
  return (
    <div className="App">
      <IconPage />
    div>
  );
}

export default App;
library.add(fab, fas, far)

Doing these, we have added Font Awesome Icons globally.
Now, let’s see how to use the icons in the new file we will create. IconPageGlobal.js.

In the IconPageGlobal.js created, we will only import FontAwesomeIcon by typing:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
To use the icons:

<FontAwesomeIcon icon="fa-solid fa-cart-shopping" />
<FontAwesomeIcon icon="fa-regular fa-eye" />

This is the IconPageGlobal.js file now.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const IconPageGlobal = () => {
  return (
    <div>
      <h3>How to use font-awesome Globally in reacth3>
      <FontAwesomeIcon icon="fa-solid fa-cart-shopping" />
      <FontAwesomeIcon icon="fa-regular fa-eye" />
    div>
  )
}

export default IconPageGlobal;

And this is our result.

Conclusion

Importing icons globally is not recommended because it can make your package larger by including icons you won’t be using. It is advised to import Font Awesome icons one at a time so that your final package sizes are as little as possible because you will only import the icons that you actually need.

Please leave a comment below to ask me anything! I’m always happy to talk and help.

Kindly Connect with me on Twitter and on Linkedin

Thanks for Reading!!! 😊