Today I am going to tell you the best free icon libraries in react js. If you are tired of searching icons for your website or your app project than you are at the right place I will tell you the best icon libraries in react js.
This react icon libraries are complete free to install and use you can also use this icon libraries in next js which is a server side framework made with react js. I will tell you everything you need to know so read till the end.
If you want to know more about the best react libraries to use than read this article – Best react libraries to use in 2021 you will find the best react libraries to use.
Best Icon Libraries In React Js
Contents
Earlier whenever I tried to find icons for my projects it was difficult to find icons for my projects but when I came to know about this great react icons libraries it really helped me find beautiful and cool icons.
If you are new to react js than don’t worry I will tell the installation and how to use this react icon libraries step by step so now let’s see the best icon libraries in react js.
1. React Icons
React-icons is the best icon library you are going to find this is personally my favourite icon library It has every type of icons you want in your project. It has more than 668,467 weekly downloads this means it is very popular react icon library.
Installation
It is very easy to install this library just like other react libraries you can install it with npm install just paste the below code
npm i react-icons
Usage
First you need to go to react-icons library website – react-icons-website don’t worry you don’t need to download anything then just search a name of the icon like home or search it will show you icon result.
Now copy the name of the icon by clicking and To use the icons of this library in your project you can simply import the icon you want from the react-icons library like this
// IMPORT IT AT THE TOP
import {FaBear} from 'react-icons/fa'
//TO DISPLAY USE THIS
<faBear />
This will show the icon on the website you can add classes, change the color and size to know more read the react icons docs – read react-icons-docs.
2. Material-ui Icons
Material-ui icons is one of the most popular react icon library It has many beautiful and amazing icons it is a much smaller library compared to react-icons. It has more than 1,488,658 weekly downloads.
Material ui library also has a component library which you can use which provides pre made components which can be used to build amazing web application.
Installation
You can install material-ui icons library by typing or pasting the below command in your project terminal or command prompt it will install the icons library in your project.
npm i @material-ui/icons
Usage
You can use this library just like react-icons you have to go to the material-ui icons website and search for the icon you want and copy the code of the icon it should be like this
import Nameoftheicon from '@material-ui/icons/nameoftheicon'
<nameoftheicon />
This code will display the icon on the website you can customise it however you want if you want to know more about these read their docs – material-icon-docs.
3. React feather
React feather is another free open source icon library with beautiful and awesome icons It is a very small library it has around 155,033 weekly downloads since it is a small library there are not that much icons.
Installation
You can install react feather just like another library the code for installing react-feather is below you can type or paste this in your project terminal.
npm i react-feather
Usage
For using icons from this library it is the same process you have to go to the react-feather-website and search for the icon you want and enter the name of the icon while importing it.
import {Nameoftheicon} from 'react-feather'
<nameoftheicon />
This code will display the icon on the website you can customise it however you want if you want to know more about these read their docs – react-feather-docs.
4. Bootstrap Icons
You may also have heard of bootstrap which popularly used for components it also has a library called bootstrap icons which provides beautiful icons for your projects. It has more than 66,830 weekly downloads.
Installation
You can install bootstrap icons by using the below command that will install bootstrap icons in your project
npm i bootstrap-icons
Usage
For using icons from this library it is the same process you have to go to the bootstrap-icons-website and search for the icon you want and you will get the code for that icon copy and paste the code your icon will be displayed.
Which should you use ?
Now we have talked about 4 best react icon libraries There were many other libraries to but I didn’t want you to get confused on choosing a react icon library.
In my opinion and my favourite react icon library is react-icons because it comes with all the icons from antdesign, fontawesome and more it has the most customizable icons I also you material icons library if I don’t find the icon that I am looking for.
That doesn’t mean other react icon libraries are not better you can use whichever you want sometimes you will not find the icon you are looking for.
Summary
Theses were the best icon libraries in react js there are many icon libraries in react but you don’t need to install unneccessary libraries just use this react icon libraries you will love them It will save you a lot of time of searching for icons.
If you are intrested in web development than read this article – Roadmap to become a full stack web developer this is a complete guide to web development.
I hope you loved this article on best react js icon libraries if you are intrested in more such amazing content than do subscribe to our newsletter to get daily updates of our latest blog post and do comment your thoughts on this libraries.
Thank you for reading Have a nice day 🙂
