How to use font awesome icons in React

Share the post

Hello All, In this React Tutorial, We will discuss How to use font awesome icons in React with the help of an example. In the last React tutorial, We had discussed How to set the default value in dropdown using React JS.

In this React JS Example, We will see How to install npm dependency for font awesome & use the font awesome icons in our application.

So, Let’s Start…

Steps Required to learn How to use font awesome icons in React

  • Create a new react project
  • Install npm dependency
  • Create a new form component & include font awesome icon
  • Update App.js
  • Run the ReactJS application

Step 1: Create a new React Project

We need to create a new React Project. Use the below command to create a new project in React JS

npx create-react-app myapp

Now, go to our project path

cd myapp

We will open this project in Visual Studio Code editor using the below command.

code .

Step 2: Install npm dependency

Now, We will install the font-awesome npm dependency for React using the below command.

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

Step 3: Create a new form component & include font awesome icon

To use font awesome icons, first, we will create a form component & use a form tag. Inside our form tag, we will use the FontAwesomeIcon tag & Inside our FontAwesomeIcon tag, we will use an icon. Please see the below code for reference.

Complete Form.js

import React, { useState } from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAreaChart } from '@fortawesome/free-solid-svg-icons'

const Form = () => {

    return (
        <>
            <div>
                <h1>How to use font awesome icons in React</h1>

                <div>
                    <form>
                        <div>
                            <FontAwesomeIcon icon={faAreaChart} color="red" /> Area Chart Icon (Red Color)
                        </div>
                    </form>
                </div>
            </div>
        </>
    );
};

export default Form;

In the above example, We have taken Area Chart Icon with Red Color.

Step 4: Update App.js

Now, We will update App.js & include the Form.js component. Please see the below code & update your App.js

import Form from "../src/components/Form";
import "./App.css";

export default function App() {
  return (
    <>
      <div>
        <Form />
      </div>
    </>
  );
}

Step 6: Run the ReactJS application

To Run the React Project use the below command

npm run start

Output

How to use font awesome icons in React
How to use font awesome icons in React

Leave a Comment