Using Font Awesome 5 in React

Published on July 11, 2018

Holly Girouard

Using Font Awesome 5 in React

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

In part one of this series we demoed reactstrap to create simple forms quickly and efficiently. In this installment, we’re going to use Font Awesome 5 to add some SVG icons and make our forms even more attractive.

Note: Font Awesome 5.1 welcomed huge improvements which included a complete rewrite of the codebase. If you are using version 4, follow their upgrade steps to ensure consistency.

The series

What’s New?

FA went all out with version 5 by rewriting their entire codebase and providing users with new and refreshing features.

V5 adds a wide variety of icons (over 1000!) and even category packs that include travel, emoji 😍, and design in a fancy SVG format.

If you’ve worked with Font Awesome in the past, something like ‘fa-profile’ might look familiar. In V5 FA introduced icon styles like ‘fas’ for Font Awesome solid, ‘fal’ for Font Awesome Light, ‘fab’ for Font Awesome Brands and lastly ‘far’ for Font Awesome Regular so the new icons might look more like ‘far fa-profile’. This adds a great deal of flexibility for UI/UX design.

Additionally, there are FA packages (like the one we’re about to use!) for React, Angular, Vue and Ember.

To fund this rapid and robust development, FA introduced Font Awesome Pro which gives users additional design flexibility and functionality. If you’re a fan of the free functionality in V4, not to fret! All functionality in V4 remains in the free plan with bug fixes and updates.

Check out their update page for the full scoop.


Let’s pick up from where we left off in part one. We took the liberty of adding some CSS to get an 🐊.io feel.

To get started, we’re going to install react-fontawesome along with the SVG libraries fontawesome-svg-core and fontawesome-svg-icons. The packages we’re installing only contain the free version. If you’re looking to utilize new pro icons and styles, check out their Github repo for additional installation and configuration instructions.

Here’s how to install what’s needed via npm or Yarn:

$ npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

# or, using Yarn:
$ yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons


Now that we’re golden on the installation, we’re going to jump right in and implement these bad boys.

There are multiple ways to use FA icons but we’re going to focus on building a library to easily access all icons throughout an app.

In our App.js file, we’re going to import the icons we need.

In this example we’re going to use the envelope and key icons. All icons can be found in Font Awesome’s icon library. All icon imports are converted to camelCase with fa at the start leaving out all the dashes. For example, the key icon will be imported as faKey. We’ll start by importing the required files and calling fontawesome-svg-core’s 'library.add to pull our icons.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faEnvelope, faKey } from '@fortawesome/free-solid-svg-icons';

library.add(faEnvelope, faKey);

// ...

As our project grows, we only need to import and add icons to our library in App.js. Imagine that we have a component called SignUp.js where we need to use these icons. Since they have already been added to the library in App.js we simply add the import below for the ** component.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

/// ...

Next, as part of the Username label, we’re going to use the FontAwesomeIcon component.

// ...


Notice that the icon name provided isn’t written the same as when it’s imported. When passing the icon name as a prop to the FontAwesomeIcon component, we only need the icon’s name in lowercase letters. For additional styling I also added a className. Now just rinse and repeat for the key icon. The result should look something like this:

Form Feedback with Icon

Our icons and text are a little squished and, dare I say, boring, so let’s add a space between the icon and the label text and change the icon’s color and size:

// ...

  {' '}Username

As you can see, the FontAwesomeIcon component can take a few different props to change the icon style. Here we used the color and size props. The size prop expects a string value like xs, lg, 2x, 3x… There are quite a few more props that can be passed-in. Notably, the spin and pulse boolean props will have the icon rotate on itself.

Colored Icons

That’s all there is too it! Look at that lovely UI.


reactstrap + react-fontawesome = one happy dev 🚀

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Holly Girouard


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel