How to use React Icons npm Package in React?

The React Icons NPM package allows us to easily include popular icons in our React project. It provides a vast collection of icons from various icon libraries like Font Awesome, Material Design, and others wrapped in React Components. This enables us to seamlessly integrate these icons into our react components with flexibility and ease. The React Icons package includes icons from various libraries such as Font Awesome, Material Design Icons, Bootstrap Icons, Feather Icons, Ionicons, Heroicons, etc. The icons are provided as React components which means you can import them directly and use them like any other React components in your project.

Prerequisites

• Node JS and NPM
• React
• JavaScript

Steps to to use React Icons npm Package in React

Here First we create a React project after that we install React icons by using npm once installed successfully then we use those icons in our application. For this follow step by step process to understand the concept easily.

Step 1: Create a React Application

First, we create a sample React application by using the below command.

npx create-react-app reacticons

Project Structure:

Step 2: Install React Icons

Once Project is successfully created. Now We need install React Icons by using Below command.

npm install react-icons

Step 3: Add the Code

Once React Icons are installed successfully. Now we import them into our code as React component. Here we update the App.js file and App.css below we provide the source code for your reference.

// App.css
body {
    align-items: center;
    text-align: center;
    font-weight: bold;
}

// App.js
import './App.css';
import { FaBeer } from "react-icons/fa";
import { AiFillAndroid } from "react-icons/ai";
import { AiFillApple } from "react-icons/ai";

function App() {
    return (
        <div className="App">
            <h1>Welcome to GeeksForGeeks</h1>
            <ul style={{ listStyleType: 'none', padding: 0 }}>
                <li style={{ marginBottom: '10px' }}>
                    1. Let's go for a <FaBeer style={{ color: 'orange', fontSize: '2rem' }} />
                </li>
                <li style={{ marginBottom: '10px' }}>
                    2. This is Android: <AiFillAndroid style={{ color: 'green', fontSize: '2rem' }} />
                </li>
                <li>
                    3. This is Apple: <AiFillApple style={{ color: 'black', fontSize: '2rem' }} />
                </li>
            </ul>
        </div>
    );
}

export default App;

Step 4: Run the Application

Once development is completed. Now Its time to run the application by using below command.

npm start

Output : This project by default runs on port number 3000 on your machine.

Conclusion

Busing React Icons in our project simplifies the process of integrating and customizing icons. With its wide range of available icons and the flexibility and the flexibility of React components. React Icons is an excellent tool for enhancing your UI design with minimal effort. The package is easy to set up and use making it a go to choice for adding icons to any React project.