How to Use FontAwesome Icons in React Applications

You may not realize it, but icons and logos are an essential part of modern applications. While building interfaces in React, developers can use many different toolkits and packages that contain icons. FontAwesome is one of the best options because it offers a wide variety of icons. The team behind FontAwesome also made an effort to integrate the icons into React ecosystem.

Using FontAwesome in React

Picking a FontAwesome Icon for React

Once you’ve determined what type of icons your application needs, you can search for related keywords on Font Awesome Icons page to find something suitable. The filters you see on the left side are essential for narrowing down your options. They can help you find what exactly you’re looking for, and more importantly, tell you which FontAwesome package you need to install.

To install regular icons, execute the following command in the command line:

npm install --save @fortawesome/free-regular-svg-icons

To explore all the different packages you can install, look over this guide.

Creating a Library

As your application grows, you’re going to need icons in many different files. Importing the same icons over and over can be exhausting. Instead, you can import every icon that you need in one JavaScript file, where you’ll create a FA library.

It is customary to store your icon libraries in the src folder. The library should contain all the icons used throughout your React application. Once done, import the library in a parent component (usually App.js) so that all children have access to it.

Here’s what a simple icon library would look like:

import {library} from '@fortawesome/fontawesome-svg-core';
// import the necessary icons
import {faCheckSquare, faCoffee} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faCoffee,
    faCheckSquare,
);

Using <FontAwesomeIcon/>

The react-fontawesome package includes a <FontAwesomeIcon /> custom component explicitly created to use FA icons in React applications. The separate component approach can give you performance gains and minimize the overall bundle size.

To use the <FontAwesomeIcon/> component, you must install the react-fontawesome package. You’re also going to need to import specific icons. For instance, if you’re going to use a Twitter logo, you would need to import the faTwitter icon.

import React, { Component } from 'react';
import { render } from 'react-dom';
import { faTwitter } from '@fortawesome/free-brands-svg-icons';

class App extends Component {
  render() {
    return <FontAwesomeIcon icon={ faTwitter }/>
  }
}

The icon attribute is the most important, but other attributes can help you customize the icon.

The size attribute accepts many different values - sm for small, md for medium, lg for large, and xl for extra-large. It also accepts numeric values, which can help you scale the icon relative to its standard size. You can use numeric values between 2x and 6x values to enlarge the icon accordingly. You can also use decimal values. You can also use inline styles to change the appearance of the <FontAwesomeIcon /> component.

Using className

If you’re developing a React application using the create-react-app CLI, you can use the className attribute to display icons. If you’re coming from other frameworks or languages, this is most likely how you’re used to using FontAwesome.

Don’t forget that in JSX syntax, you must use the className attribute, much like regular DOM. This is necessary because the class in JavaScript is a reserved word.

Once you’ve installed the font-awesome library, you must import it into the index.js file. The file must include:

import 'font-awesome/css/font-awesome.min.css';

Once you’ve imported the icon styles, you can use regular className syntax in JSX:

 render: function() {
    return <span><i className="fa fa-address-card fa-amazon">Icon</i></span>;
}