How to use icons in React?

Introduction

In this article, I have explained how to use icons in React? As you know icons play an important role in web applications. Icons can enhance user experience & also highlights important information. Now how to use icons in React? We can use icons in React by installing the React icons in our project.

Installation:

Open the terminal and run the below command to install react icons in your project.

npm install react-icons --save

The above command will install the react icons in your project & now you can use any of the icons in your project.

How to choose react icon?

You can choose the react icon by searching “React Icons” in your browser and opening the official website of the react icons. After opening click on the search bar and search for the icon name after that it will show you all icons related to your search below. Now you can select one icon by clicking on the icon (by clicking it will copy the icon name).

The method for using the icons in your React app is given below:

import { FaAmazon } from 'react-icons/fa';
export function Header() {
  
    return(
      <h3> <FaAmazon /> Amazon </h3>
  );
}

Code Explanation

First of all, you have to import the icon by using the name from the react-icons. As you can see in the above code the name of the icon is “FaBeer” which is imported from react-icons/fa. In this path /fa is used because the react icons are grouped into different categories for example fa is the font awesome category, gi is the game icon category, fi is the feather category, fc is the flat color icons category, etc. In the above code, the icon is used in the h3 tags before the text Amazon.