How to use React Icons npm Package in React? Last Updated : 21 Aug, 2024 Comments Improve Suggest changes Like Article Like Report 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.PrerequisitesNode JS and NPM React JavaScriptSteps to to use React Icons npm Package in ReactHere 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 ApplicationFirst, we create a sample React application by using the below command.npx create-react-app reacticonsoutputProject Structure:projectStep 2: Install React IconsOnce Project is successfully created. Now We need install React Icons by using Below command.npm install react-iconsiconsStep 3: Add the CodeOnce 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. CSS // App.css body { align-items: center; text-align: center; font-weight: bold; } JavaScript // 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 ApplicationOnce development is completed. Now Its time to run the application by using below command.npm startoutputOutput : This project by default runs on port number 3000 on your machine.ConclusionBusing 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. Comment More infoAdvertise with us Next Article How to use React Icons npm Package in React? M myarticzixi Follow Improve Article Tags : Web Technologies ReactJS Node-npm Similar Reads How to use React Icons in Next.js ? Icons make the website beautiful and interactive. Icons are an important part of a website's user interfaces, which are used in expressing objects, actions, and ideas. They are used to communicate the core idea and intent of a product or action and express the object visually. Here, we will learn to 3 min read How to use Bootstrap Icons in React ? React is a free library for making websites look and feel cool. With React, your websites can be super interactive and lively. Itâs great for making modern websites where everything happens on one page. The best part is that you can build and reuse different parts of your webpage, making it easy to 2 min read Top npm Packages for React ReactJS, often referred to as React is a popular JavaScript library developed by Facebook for building user interfaces. It emphasizes a component-based architecture, where UIs are built using reusable components. It has a vast range of libraries which helps it to become more powerful. In this articl 4 min read How to use CDN Links in React JS? React is integrated in the projects using package managers like npm or yarn. However, there are some cases where using Content Delivery Network (CDN) links can be a advantage, especially for quick prototypes, or when integrating React into existing projects. The two libraries imported CDN Links are 3 min read How to use Icon Component in React JS? Every application requires icons for UI purposes, and integrating them with Material UI for React is seamless. Utilize the Icon Component in ReactJS effortlessly by following this straightforward approach. Prerequisites:NodeJS or NPMReact JSMaterial UISteps to create React Application And Installing 2 min read How to use Material UI Icons ? Material UI Icons is a library that provides a collection of pre-designed icons following Google's Material Design guidelines. These icons can be easily integrated into React applications to enhance visual elements and improve user experience. Installation// Package containing Material UI icon compo 1 min read How to Add Icon in NavBar using React-Bootstrap ? This article will show you how to add an icon in the navigation bar using React-Bootstrap. We will use React-Bootstrap because it makes it easy to use reusable components without implementing them. PrerequisitesReactJSJSXReact BootstrapCreating React App and Installing ModuleStep 1: Create a React a 2 min read How to Add MUI React Button Icon in React-Bootstrap ? In this article, we will learn how to add the mui react button icon in react-bootstrap. Icons can be added in the react-bootstrap by importing the MUI icon component and using it within your React-Bootstrap button. React-Bootstrap is a front-end framework that was designed keeping React in mind. Ste 2 min read React Chakra UI Media and Icons Image React Chakra UI Media and Icons Image component is tailored for managing media content and displaying icons and images. In this guide, we'll delve into how to leverage Chakra UI to efficiently handle media assets and effectively incorporate icons and images into your React application, thereby enhan 3 min read React Suite Icon extension React Icons A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we'll learn about React Suite Icon extension R 3 min read Like