Using Font Awesome Icons in a React Application

If you've ever had to display some sort of Icon on a webpage, more than likely you've used or seen Font Awesome. 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 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:

# 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 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.

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

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

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:

// 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.

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

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:

The icon prefix (see the full selection here)
The icon's name without the prefix

Rocket and Home Icon

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 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 to get updates on new articles I write!