Using Font Awesome Icons in a React Application
Tags: react, javascript, webdev, design
Published: 2021-05-21 02:57:03

If you've ever had to display some sort of Icon on a webpage, more than likely you've used or seen [Font Awesome](https://fontawesome.com/). Font Awesome is an awesome *(heh)* toolkit that provides a rich set of icons and logos. 

The amazing team over at Font Awesome provides a nice React component that makes adding these icons to your React application super simple. 

---

## Prerequisites

In order to follow along in this tutorial, you'll need to set up a React application. The quickest and easiest way to do this would be to use `create-react-app`. 

> In case you aren't familiar with `create-react-app`, I have a tutorial [here](https://www.sabinthedev.com/post/create-react-app-setup/) that walks you through the steps to get a basic project set up and running

---

## Installing Font Awesome

Once you've got your React application started, we'll need to install the libries Font Awesome provides:

```shell
# SVG Rendering Library
npm i --save @fortawesome/fontawesome-svg-core
# The set of icons Font Awesome provides
npm install --save @fortawesome/free-solid-svg-icons
# The actual React component we will be using
npm install --save @fortawesome/react-fontawesome
```

This will install all the pieces necessary to load up and render the icons you want to use.

There are a bunch of other sets of icons in different styles you can install, including the [Pro](https://fontawesome.com/plans) icons. For our purposes here, we'll stick to the solid-style free icons and logos.

>NOTE: To use Pro icons, you will need a paid Pro account.

---

## Using an Icon

Now that we've got all of our packages installed, it's time for the fun part! Let's throw some icons on the page!

For now, let's open up our `App.js` file. This file should just contain the boilerplate JSX `create-react-app` provides. Let's go ahead and get rid of everything in the main `header` tag so we have a clean slate but keep some styling. 

In order to throw an Icon on this page, we're going to need to import the `FontAwesomeIcon` component we installed and an SVG Icon to render. Let's use the `fa-rocket` icon. Then we can render out that component and give the icon we want to use.

```jsx
import './App.css';

// Font Awesome Imports
import { faRocket } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

function App() {
  return (
    <div className="App">
        <FontAwesomeIcon icon={faRocket} />
    </div>
  );
}

export default App;
```

> NOTE: The icons exported from the icon libraries are in Camel Case

The output of that should look something like this:

![Rocket Icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/od63nd5vnzpdp4d1jbgi.png)

Of course, Font Awesome has a ton of different styles and sets of icons to choose from, however because a lot of those require a Pro account I will leave those out of this tutorial. 

If you're interested in using these, take a look at their [docs](https://fontawesome.com/how-to-use/on-the-web/using-with/react)

## Setting up an Icon Library

What happens if we have a TON of icons we want to use? Will we have to re-import them everywhere we want to use them?

Great question! The answer is no, Font Awesome provides a way to create a `library` of icons that become globally available to the application after being imported. 

To set that up, let's first create a new file called `fontawesome.js`

We'll add the library setup into this file:

```javascript
// Import the library
import { library } from '@fortawesome/fontawesome-svg-core'
// Import whichever icons you want to use
import { faRocket, faHome } from '@fortawesome/free-solid-svg-icons'

// Add the icons to your library
library.add(
    faRocket,
    faHome
)
```

Here we are picking out the icons we want and adding them to out "library" that will become globally available after we put this file to use. 

>NOTE: You can also `import * as Icons from '@fortawesome/free-solid-svg-icons';` and map those into your library to get *all* of the icons, but the bundle size is huge! Best to just pick the ones you know you'll need.

So, we've got a library. Let's use it. Over in your `index.js` file we're going to import that `fontawesome.js` file so that it runs when the application starts.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './fontawesome'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
```

And that's all the setup for the library! The icons you put into your library should now be globally available. The only thing that's changed is how we specify our icons when rendering a `<FontAwesomeIcon>` component. Let's take a look back in the `App.js` file

```jsx
import './App.css';
// NOTICE we don't need to import the individual icons!
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

function App() {
  return (
    <div className="App">
      <header className="App-header">
	  	<FontAwesomeIcon icon={['fa', 'rocket']} />
		<br/>
		<FontAwesomeIcon icon={['fa', 'home']} />
      </header>
    </div>
  );
}

export default App;

```

We no longer need to import each individual icon into our component! Also, in the `<FontAwesomeIcon>` itself, rather than passing it an icon, we will pass it an array. This array should have:

1. The icon prefix (*see the full selection [here](https://fontawesome.com/icons)*)
2. The icon's name without the prefix

![Rocket and Home Icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0t4xh8ejzj2l8nbvvlw6.png)

---

## Conclusion 

And there you have it! You can now use icons as you please throughout your application.

There are other configuration options and attributes you can apply to these icons that are described in Font Awesome's [docs](https://fontawesome.com/how-to-use/on-the-web/using-with/react) that I highly recommend checking out!

Thanks for reading, and have fun throwing all the icons you can onto your next React webpage 😎

P.S. If you liked this article, be sure to follow me on [Twitter](https://twitter.com/sabinthedev) to get updates on new articles I write