ReactJS | Icons

Last Updated : 20 Apr, 2023

A built-in library of icons is provided by React, by using it we can include any number of icons in our project. We just have to import module in our app.js file by mentioning library name and icon name which we want to add.

Prerequisites:

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

Step 1: Before moving further, firstly you have to install react icons library, by running following command in your project directory, with the help of terminal in your src folder or you can also run this command in Visual Studio Code’s terminal in your project folder.

npm install react-icons --save

Step 2: 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: 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: Now in your app.js file, add this code:

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

app.js:

javascript

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/

app.js: To change color of Icons and size, see below code.

javascript

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:

app.js: To add multiple icons, see below

javascript

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;