ReactJS | Icons

22 Jun, 2020
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:  
Basics of ReactJS
NodeJS:Installation of Node.js on WindowsInstallation of Node.js on Linux
Installation of Node.js on Windows
Installation of Node.js on Linux
Already created ReactJS app
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
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;
Output:
react-js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?