If you are working on a Web application, you will use icons to make your web page design more interactive and visual. When you use icons on a webpage, it adds more character to the page and makes your webpage more appealing visually as compared to a webpage with just Text (without any icons).
For general web development, there are so many icons library, where you can simply import the CSS in your web project and start using it in your HTML code. But when you are working with ReactJS or NextJS, then it is recommended that you use npm packages for icons, import them as JS modules in your project and then use them.
So in this article, I will share with you the best NPM packages for Icon sets with you, that you can use in your next wen project. So let's see the list.
1. Lucide
This is my personal favourite. It's light weight, clean icons, customizable, and you can import only the icons that you want to use, with a great community support.
The icons are categorised properly and the collection is decent. You won't miss not having any icon. Yes, some social media website icons are not there, that's it.
Installation Command:
You can install this icon package using the following npm command,
npm i lucide
// or
npm i lucide-react
Link: lucide.dev
2. Tabler
This is another good icon set. This icon set has both outline and filled versions of the icons. Tabler has over 5200+ icons that are customizable, available in multiple formats, and Tabler has a figma plugin too.
Just one small thing that I didn't like about Tabler was that there are no icons for social websites like Facebook, Instagram, Twitter, Google, etc.
Installation Command:
You can install this icon package using the following npm command,
npm i @tabler/core
//or
npm i @tabler/icons-react
Link: tabler.io
3. Remix Icons
This icon package has modern, sharp, and pixel perfect icons. The icons collection is huge, and properly categorised. You will even find the social media icons in multiple styles.
Installation Command:
You can install this icon package using the following npm command,
npm install remixicon --save
Link: remixicon.com
4. Boxicons
Boxicons icon set has a very unique style with over 1600+ icons. You can rotate the icons, animate the icons, and use them in your web application. The support for icon rotation, and animation, comes in-built.
It has logos of almost all the popular products and applications in IT industry and in social media. For example, icons for MongoDB, PostgreSQL, GraphQL, Python, etc. are available, along with icons for Airbnb, Amazon, Dribbble, etc.
Installation Command:
You can install this icon package using the following npm command,
npm install boxicons --save
Link: boxicons.com
5. Bootstrap Icons
Bootstrap icons is the official icon collection that comes along the famous Bootstrap framework, but you can also install and use the Bootstrap icons without using the Bootstrap CSS. Bootstrap CSS has a great collection of icons both in outline and solid style.
You might feel that the style is a little outdated, but it works very well for a simpler more professional website.
At Studytonight, we use Bootstrap icons.
Installation Command:
You can install this icon package using the following npm command,
npm i bootstrap-icons
Link: Bootstrap Icons
6. Phosphor
Phosphor is a super modern icons family available in 6 different brush strokes - thin, light, regular, bold, fill, and duotone.
You can either download the icons in SVG format, or use them as <i> tags in your HTML code, or use the icons as components in ReactJS or NextJS project.
Installation Command:
You can install this icon package using the following npm command,
npm i @phosphor-icons/react
Link: phosphoricons.com
7. Teenyicons
This is a very unique icon collection with both outline and solid style. The icon collection is limited, but the designs are cute and unique. You should definitely check it out.
Installation Command:
You can install this icon package using the following npm command,
npm i teenyicons
Link: Teenyicons
More Icon Packages
The icon packages mentioned above are the ones that we like the most, but there are many more that you can try.
-
Radix Icons - radix-ui.com
-
Core UI Icons - coreui.io
-
Feather Icons - feathericons.com
-
Octicons - primer.style
-
Ikonate - ikonate.com
-
CSS.gg Icons - css.gg
-
React Icons - react-icons.github.io
-
Material Icons - mui.com/material-ui
So that's the complete collection of icon sets available as npm packages that you can use in your next web development project.
