DEV Community

Cover image for How to set up Font Awesome in React
David Emaye
David Emaye

Posted on • Edited on

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.
Font Awesome
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

create-react-app
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.

navigating into folder
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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Installing the font awesome react component

Now we will install the Font Awesome React component.

npm i --save @fortawesome/react-fontawesome@latest
Enter fullscreen mode Exit fullscreen mode

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

package.json

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;
Enter fullscreen mode Exit fullscreen mode

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 react</h3>
      <FontAwesomeIcon icon={faPenNib} />
      <FontAwesomeIcon icon={faEnvelope} />
    </div>
  )
}

export default IconPage
Enter fullscreen mode Exit fullscreen mode

This is the output we get.
Image
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'
Enter fullscreen mode Exit fullscreen mode

You can import them together in a single line.

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

...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'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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 react</h3>
      <FontAwesomeIcon icon="fa-solid fa-cart-shopping" />
      <FontAwesomeIcon icon="fa-regular fa-eye" />
    </div>
  )
}

export default IconPageGlobal;
Enter fullscreen mode Exit fullscreen mode

And this is our result.
Image

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.
To access the codes on this articles check this repository

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!!! 😊

Top comments (10)

Collapse
 
willofbass profile image
Willof Bassanti Bantys

Thanks

Collapse
 
moh41 profile image
Moh

Awesome Thank You.

Collapse
 
abulkalam_asif profile image
Abulkalam-Asif

I just created the account to say "Thank You for this article". I was trying to do so by following the official documentation of FontAwesome, but it was not working.

Collapse
 
mikefazekas profile image
Michael Fazekas

This is great! thank you for sharing!

Collapse
 
ecj222 profile image
Enoch Chejieh

This is interesting, Thank you!

Collapse
 
murielcristina profile image
Muri

Thanks!, its clearer in here

Collapse
 
rushi7coder profile image
rushikesh vadnal

Great !! Thankyou for this Article . I just Wanted to know how can i find other Icons like a Right Arrow

Collapse
 
davidemaye profile image
David Emaye
Collapse
 
ankittanwar03 profile image
Ankit Tanwar

Worked for me! Thanks for explaining efficiently.

Collapse
 
salozzo86 profile image
salozzo86

Super helpful article, thank you!