How to install and use font awesome icons in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To install and use font awesome icons in React js, you have to use the npm or yarn package manager that is how you can install the font awesome icons library into your project.

Today, I am going to show you, how to install and use font awesome icons in react js.

Install Antd

Install the following packages to use font awesome icons in react js.

npm

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

Table of contents

• Create a new React JS project.
• Import the font awesome icons component.
• Use font awesome icons components in the project.

Let’s start with the first step.

Step 1: Create a new React JS project.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import the font awesome icons component.

After installing font awesome icons, you have to import your React component. To do this, add the following line to the top of your component file.

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSpinner, faCircleNotch } from "@fortawesome/free-solid-svg-icons";

Step 3: Use font awesome icons components in the project.

In this blog, short example of icon={faSpinner} and icon={faCircleNotch} being displayed through div element.

The second icon is the faCircleNotch icon, which is red in color and also set to rotate.

<div>
  <h3>
    <FontAwesomeIcon icon={faSpinner} color="blue" spin />
  </h3>

  <h3>
    <FontAwesomeIcon icon={faCircleNotch} color="red" spin />
  </h3>
</div>

ReactJS use font awesome icons example.

This code below is an example, The icon prop is used to specify which icon to use, while the color prop is used to set the color of the icon. spin prop, when set to true, spins the icon.

App.js

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSpinner, faCircleNotch } from "@fortawesome/free-solid-svg-icons";
class FontAwesomeIcons extends React.Component {
  render() {
    return (
      <div>
        <h3>
          <FontAwesomeIcon icon={faSpinner} color="blue" spin />
        </h3>

        <h3>
          <FontAwesomeIcon icon={faCircleNotch} color="red" spin />
        </h3>
      </div>
    );
  }
}

export default FontAwesomeIcons;

Check the output of the above code example.

Here, we are provided code sandbox links for the above program to install and use font awesome icons in React js. Then you can use whenever you went and do the changes as per your requirements.

Try it Yourself

All the best 👍