React Icons

React-icons is a library that provides popular and customizable icons for react applications. It is easy to integrate in the project and we can include any number of icons in our project.

Prerequisites

• React JS
• Nodejs and NPM
• Create React App

Approach

To use icons in our react project we will install the react-icons library from NPM as a project dependency. Then we can directly import any icon of out choice and use in the react app.

Steps to Use React Icons

Below all the steps are described order wise how to add icons and design them in existing React project.

Step 1: Install the React Icons Package

install the react icons library from npm using the below command

npm install react-icons --save

The updated dependencies in package.json file

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},

Step 2: Modify the App.js file

After installing icons library, now open your App.js file which is present inside your project directory's, under src folder and delete code preset inside it. 

Step 3: Choose the icons to be used from the react-icons

Now open react-icons library by visiting the below link. This is inbuilt library of react-icons which is provided by react. After opening react-icons, now from menu select category and name of icon you want to add. After clicking, on right hand side you will see many icons and there names. In category I am selecting Game icons, and from right hand side I am selecting GiPoliceBadge you can choose any other if you want.

https://react-icons.github.io/react-icons/icons?name=gi

Step 4: Import and use the selected icon

Now in your aApp.js file, add this code:  

import { IconName } from "react-icons/";

Example: This example demonstrates using icons form react-icon library.

// Filename - App.js

import React, { Component } from "react";

// gi is sort name of game icon.
import { GiPoliceBadge } from "react-icons/gi";

// The GiPoliceBadge is icon name.
class App extends Component {
    render() {
        return (
            <div>
                <GiPoliceBadge /> 
            </div>
        );
    }
}
export default App;

Output: 

• To see output run below command.  

npm start

• Now, after npm started successfully , open browser and type below url to see output.

http://localhost:3000/

Example: This article demonstrate changing the color of Icons and size.

// Filename - App.js

import React, { Component } from "react";

// gi is sort name of game icon.
import { GiPoliceBadge } from "react-icons/gi";

// The GiPoliceBadge is icon name.
class App extends Component {
    render() {
        return (
            <div>
                <GiPoliceBadge size="100px" color="green"/> 
            </div>
        );
    }
}
export default App;

Output:

Example: This example demonstrates adding multiple icons in from react-icons.

// Filename - App.js

import React, { Component } from "react";

// gi is sort name of game icon.
import { GiPoliceBadge } from "react-icons/gi";
import { MdAndroid } from "react-icons/md";
import { GoBroadcast } from "react-icons/go";
import { FaAmazon } from "react-icons/fa";
// The GiPoliceBadge is icon name.
class App extends Component {
    render() {
        return (
            <div>
                <GiPoliceBadge size="50px" color="green"/>
                <MdAndroid size="50px" color="yellow" />
                <GoBroadcast size="50px" color="purple"/> 
                <FaAmazon size="50px" color="black" /> 
            </div>
        );
    }
}
export default App;

Output:

Summary

React Icons library simplify using icons in the react project by providing easy to use react component. We can access multiple popular icons along with customizable styles and colors by integrating it in out react project.

rana_prathviraj_singh

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• ReactJS