How To Use Font Awesome 5 with React

Introduction

Font Awesome is a toolkit for websites that provides icons and social logos. React is a coding library that is used for creating user interfaces. While the Font Awesome team has made a React component to promote integration, there are some fundamentals to understand about Font Awesome 5 and how it is structured. In this tutorial you’ll explore how to use the React Font Awesome component.

Prerequisites

No coding is required for this tutorial, but if you are interested in experimenting with some of the examples you will need the following:

• Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.
• Create React App, which you can do by following How To Set Up A React Project.

Step 1 — Using Font Awesome

The Font Awesome team created a React component so you can use the two together. With this library, you can follow the tutorial after you select your icon.

In this example, we’ll use the home icon and do everything in the App.js file:

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

Your app now has a small home icon. You’ll notice that this code only selects the home icon so that only one icon is added to our bundle size.

Now, Font Awesome will make sure that this component will replace itself with the SVG version of that icon once this component is mounted.

Step 2 — Choosing Icons

Before installing and using the icons, it’s important to know how the Font Awesome libraries are structured. Since there are many icons, the team decided to split them up into multiple packages.

When picking and choosing which icons you want, it’s recommend to visit the Font Awesome icons page to explore your options. You will see different filters to choose from along the left side of the page. These filters are very important because they will indicate what package to import your icon from.

In the example above, we pulled the home icon out of the @fortawesome/free-solid-svg-icons package.

Determining which Package an Icon Belongs To

You can figure out which package an icon belongs to by reviewing the filters on the left. You can also click into an icon and see the package it belongs to.

Once you know which package a font belongs to, it’s important to remember the three-letter shorthand for that package:

• Solid Style - fas
• Regular Style - far
• Light Style - fal
• Duotone Style - fad

You can search for a specific type from the icons page:

Using Icons from Specific Packages

If you browse the Font Awesome icons page, you’ll notice that there are usually multiple versions of the same icon. For example, let’s take a look at the boxing-glove icon:

In order to use a specific icon, you will need to adjust <FontAwesomeIcon>. Following are multiple types of the same icon from different packages. These include three-letter shorthands discussed earlier.

Here is an example of the solid version:

<FontAwesomeIcon icon={['fas', 'code']} />

This defaults to solid version if a type is not specified:

<FontAwesomeIcon icon={faCode} />

And the light version using fal:

<FontAwesomeIcon icon={['fal', 'code']} />;

We had to switch our icon prop to be an array instead of a simple string.

Step 3 — Installing Font Awesome

Since there are multiple versions of an icon, multiple packages, and free/pro packages, installing them all involves more than one npm package. You may need to install multiples and then choose the icons you want.

For this article, we’ll install everything so we can demonstrate how to install multiple packages.

Run the following command to install the base packages:

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

Run the following commands to install the regular icons:

# regular icons
npm i -S @fortawesome/free-regular-svg-icons
npm i -S @fortawesome/pro-regular-svg-icons

These will install the solid icons:

# solid icons
npm i -S @fortawesome/free-solid-svg-icons
npm i -S @fortawesome/pro-solid-svg-icons

Use this command for light icons:

# light icons
npm i -S @fortawesome/pro-light-svg-icons

This will install duotone icons:

# duotone icons
npm i -S @fortawesome/pro-duotone-svg-icons

Finally, this will install brand icons:

# brand icons
npm i -S @fortawesome/free-brands-svg-icons

Or, if you prefer to get them all installed in one go, you can use this command to install the free icon sets:

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

If you have a pro account with Font Awesome, you can use the following to install all of the icons:

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

You’ve installed the packages but haven’t yet used them in your application or added them to our app bundles yet. Let’s look at how you can do that in the next step.

Step 4 — Creating an Icon Library

It can be tedious to import the icon you want into multiple files. Let’s say you use the Twitter logo in several places, you don’t want to have to write that multiple times.

To import everything in one place, instead of importing each icon into each separate file, we’ll create a Font Awesome library.

Let’s create fontawesome.js in the src folder and then import that into index.js. Feel free to add this file wherever as long as the components you want to use the icons in have access (are child components). You could even do this right in your index.js or App.js. However, it can be better to move this out to a separate file since it can get large:

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

// import your icons
import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';

library.add(
  faMoneyBill,
  faCode,
  faHighlighter
  // more icons go here
);

If you did this in its own file, then you’ll need to import into index.js:

import React from 'react';
import { render } from 'react-dom';

// import your fontawesome library
import './fontawesome';

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

Importing an Entire Icon Package

It isn’t recommended to import an entire package because you’re importing every single icon into your app which could cause a large bundle size. If you do need to important an entire package, you certainly can.

In this example, let’s say you wanted all the brand icons in @fortawesome/free-brands-svg-icons. You would use the following to import the entire package:

import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);

fab represents the entire brand icon package.

Importing Icons Individually

The recommended way to use Font Awesome icons is to import them one by one so that your final bundle sizes are as small as possible, as you will only import what you need.

You can create a library from multiple icons from the different packages like so:

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

import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
import { faImages } from '@fortawesome/pro-solid-svg-icons';
import {
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
} from '@fortawesome/free-brands-svg-icons';

library.add(
  faUserGraduate,
  faImages,
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
);

Importing the Same Icon from Multiple Styles

If you want all the types of boxing-glove for the fal, far, and fas packages, you can import them all as a different name and then add them.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
import {
  faBoxingGlove as faBoxingGloveRegular
} from '@fortawesome/pro-regular-svg-icons';
import {
  faBoxingGlove as faBoxingGloveSolid
} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faBoxingGlove,
    faBoxingGloveRegular,
    faBoxingGloveSolid
);

You can then use them by implementing the different prefixes:

<FontAwesomeIcon icon={['fal', 'boxing-glove']} />
<FontAwesomeIcon icon={['far', 'boxing-glove']} />
<FontAwesomeIcon icon={['fas', 'boxing-glove']} />

Step 5 — Using Icons

Now that you have installed what you need and have added your icons to your Font Awesome library, you are ready to use them and assign sizes. In this tutorial, we’ll use the light (fal) package.

This first example will use the normal size:

<FontAwesomeIcon icon={['fal', 'code']} />

The second example can use named sizing, which uses abbreviations for small (sm), medium (md), large (lg), and extra-large (xl):

<FontAwesomeIcon icon={['fal', 'code']} size="sm" />
<FontAwesomeIcon icon={['fal', 'code']} size="md" />
<FontAwesomeIcon icon={['fal', 'code']} size="lg" />
<FontAwesomeIcon icon={['fal', 'code']} size="xl" />

The third option is to use numbered sizing which can go up to 6:

<FontAwesomeIcon icon={['fal', 'code']} size="2x" />
<FontAwesomeIcon icon={['fal', 'code']} size="3x" />
<FontAwesomeIcon icon={['fal', 'code']} size="4x" />
<FontAwesomeIcon icon={['fal', 'code']} size="5x" />
<FontAwesomeIcon icon={['fal', 'code']} size="6x" />

When using numbered sizing, you can also use decimals to find the perfect size:

<FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />

Font Awesome styles the SVGs it uses by taking the text-color of the CSS. If you were to place a <p> tag where this icon were to go, the color of the paragraph would be the color of the icon:

<FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />

Font Awesome also has a power transforms feature where you can string together different transforms:

<FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />

You can use any of the transforms found on the Font Awesome site. You can use this to move icons up, down, left, or right to get the positioning perfect next to text or inside of buttons.

Fixed Width Icons

When using icons in a spot where they all need to be the same width and uniform, Font Awesome lets us use the fixedWidth prop. For instance, let’s say that you need fixed widths for your navigation dropdown:

<FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />

Spinning Icons

Spinning is useful to implement on form buttons when a form is processing. You can use the spinner icon to make a nice loading effect:

<FontAwesomeIcon icon={['fal', 'spinner']} spin />

You can use the spin prop on anything!

<FontAwesomeIcon icon={['fal', 'code']} spin />

Advanced: Masking Icons

Font Awesome allows you to combine two icons to make effects with masking. You define your normal icon and then use the mask prop to define a second icon to lay on top. The first icon will be constrained within the masking icon.

In this example, we created tag filters using masking:

<FontAwesomeIcon
  icon={['fab', 'javascript']}
  mask={['fas', 'circle']}
  transform="grow-7 left-1.5 up-2.2"
  fixedWidth
/>

Notice how you can chain together multiple transform props to move the inner icon to fit inside the masking icon.

We even colorize and change out the background logo with Font Awesome:

Step 6 — Using react-fontawesome and Icons Outside of React

If your entire site isn’t a single-page application (SPA), and instead you have a traditional site and have added React on top. To avoid importing the main SVG/JS library and also the react-fontawesome library, Font Awesome has created a way to use the React libraries to watch for icons outside of React components.

If you have any <i class="fas fa-stroopwafel"></i>, we can tell Font Awesome to watch and update those using the following:

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

dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver

MutationObserver’s are a web technology that allow us to watch the DOM for changes performantly. Find out more about this technique on the React Font Awesome docs.

Conclusion

Using Font Awesome and React together is a great pairing, but creates the need to use multiple packages and consider different combinations. In this tutorial you explored some of the ways you can use Font Awesome and React together.