Using Font Awesome 5 with React

Font Awesome is an icon font that contains symbols and glyphs instead of numbers and letters. The font creators released the first set of icons in 2012, and since then, it's been used on at least 100 million websites. The icon collection is constantly growing, and new ways to integrate them into the web environment with frameworks are being developed.

If you're already familiar with the benefits, features, and structure of Font Awesome, you can jump straight to the practical part. We've prepared a detailed guide on how to add icons to your project. For beginners in web development, we recommend carefully studying the entire material before implementing your ideas.

Introduction to Font Awesome 5

The new version of Font Awesome was released not too long ago and quickly gained popularity. Developers and designers noticed several key improvements:

• Modern responsive icon design

• Animated icons

• Two versions: 1608 free & 7864 pro icons

• 4 styles

• New grid system

• Better readability at small sizes

Although users worldwide have access to the same icon packages, they can be easily customized. We'll show you how to change the color, size, and position of Font Awesome icons using CSS and fully transform their appearance.

How to Use Font Awesome 5 with React

Before setting up Font Awesome in React, decide which icons you need. To avoid importing all of them, they've been divided into 4 packages based on their styles. Pay attention to the three-letter abbreviations, as you'll use these in the next steps.

Four icon styles:

• Solid (fas)

• Regular (far)

• Light (fal)

• Brands (fab)

The Free Solid package is entirely free, while the other 3 are part of the paid version. You can find the entire icon collection on the official Font Awesome website. You can filter icons by style and download the ones you like.

Installing the Package

Once you’ve familiarized yourself with the icon styles, you can begin integrating Font Awesome into your React project. In this guide, we’ll use NPM (Node Package Manager) for installation, although you can also use Yarn.

To install Font Awesome core and solid icons, run:

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

Or with Yarn:

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

To install all icon styles (including pro versions if you have access), you can run the following commands:

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

Now that you’ve installed the packages, you need to import the icons into your application.

Importing Icons

Method 1. Explicit Icon Import

This method allows you to import icons individually in each React component. This is useful if you only need a few icons and want to keep the JavaScript bundle small. However, this method can become cumbersome if the same icon is used in multiple places.

Here’s an example of how to import icons explicitly:

import ReactDOM from 'react-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCocktail } from '@fortawesome/free-solid-svg-icons';

const element = <FontAwesomeIcon icon={faCocktail} />;
ReactDOM.render(element, document.body);

Method 2. Creating an Icon Library

This method is more efficient, especially for larger projects. Instead of importing icons individually, you can create a Font Awesome icon library. Once added, you can reference icons anywhere in your React application without importing them again.

Here’s how you can create a library:

import ReactDOM from 'react-dom';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCocktail, faBomb } from '@fortawesome/free-solid-svg-icons';

library.add(faCocktail, faBomb);

const App = () => (
  <div>
    <FontAwesomeIcon icon="bomb" />
    Favorite Drink: <FontAwesomeIcon icon="cocktail" />
  </div>
);

ReactDOM.render(<App />, document.body);

Editing Icons

Once you’ve imported the icons into your project, you can start customizing them. Here are a few ways to modify icons:

Icon Size

Font Awesome 5 lets you adjust the size of icons with size options such as xs, sm, lg, or by multiplying the size using numbers (2x, 3x, etc.).

<FontAwesomeIcon icon="spinner" size="2x" />
<FontAwesomeIcon icon="spinner" size="lg" />

Icon Rotation and Flip

You can rotate icons or flip them horizontally or vertically:

<FontAwesomeIcon icon="spinner" flip="horizontal" />
<FontAwesomeIcon icon="cocktail" rotation={90} />

Icon Color

To change the color of an icon, simply use CSS:

<FontAwesomeIcon icon="square" color="green" />

Icon Animation

Add animations such as spinning or pulsing:

<FontAwesomeIcon icon="spinner" spin />
<FontAwesomeIcon icon="spinner" pulse />

Power Transforms

With power transforms, you can combine transformations like moving, shrinking, and rotating in one line:

<FontAwesomeIcon icon="spinner" transform="shrink-6 left-4" />
<FontAwesomeIcon icon="spinner" transform={{ rotate: 45 }} />

Conclusion

Font Awesome is an excellent tool for adding social media icons, logos, and other symbols to your React application. With the ability to customize and animate icons, you can create a unique and recognizable app design.