ReactJS | Icons

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 preset 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



filter_none

edit
close

play_arrow

link
brightness_4
code

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;

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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;

chevron_right


Output:

app.js: To add multiple icons, see below

javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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;

chevron_right


Output:

react-js-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.