How to set up Font Awesome in React
Tags: react, fontawesome, icons, beginners
Published: 2023-01-07 09:48:48

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xm3mm6q5i0fdwvphbyjf.jpg)
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](https://nodejs.org/en/).

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4n86qhb0i1hnal46v42.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5h2jz0p105nnt4jo3nt.png)
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.
```bash
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.
```bash
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](https://fontawesome.com/account#pro-package-tokens) and an active [Pro Plan](https://fontawesome.com/plans) 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.
```bash
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.
```bash
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.

![package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7b0n1bbmsknr7izfnq6.png)
### 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`.
```react
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'`
```react
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
```
This is the output we get.
![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mplhotw2btvope764fn.jpg)
If you have so many icons to use in a single file, instead of importing them individually with multiple lines of code
```react
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.
```react
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.
```react
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.
```react
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.
```react
library.add(fab, fas, far)
```
This is how the `App.js` file will be now.
```react
// 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:
```react
<FontAwesomeIcon icon="fa-solid fa-cart-shopping" />
<FontAwesomeIcon icon="fa-regular fa-eye" />
```

This is the `IconPageGlobal.js` file now.
```react
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;
```
And this is our result.
![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kolatt0ryht3uwhlw1i2.jpg)

## 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] (https://github.com/Emodot/font-awesome-react)

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

Kindly Connect with me on [Twitter](https://twitter.com/davidemaye) and on [Linkedin](https://www.linkedin.com/in/davidemaye/)

Thanks for Reading!!! 😊