Welcome! In this guide, we're going to take a look at a selection of stunning icon libraries, which are free and open-source. Perfect for adding some magic to your websites, web apps and dashboards.
Let's get started!
1. Heroicons
Heroicons is a modern, beautifully designed icon library. It was created by the creators of Tailwind CSS, and has over 300 icons to choose from.
You can quickly search for icons on the official website, and preview the collection.
Website: Heroicons
GitHub Repo: GitHub Repo
Features:
- Available in outline, solid, and mini styles
- Vue and React components available
- Figma file
- 300+ icons to choose from
2. Feather Icons
Feather Icons is a minimalist and lightweight open-source icon set, focused on simplicity and elegance. It has over 280 icons available, which you can quickly search for. You can install the icon library via NPM or by loading the script via a CDN.
Website: Feather Icons
GitHub Repo: GitHub Repo
Features:
- SVG-based for easy integration
- Install via NPM or CDN
- Interface has customization sidebar
3. Tabler Icons
Next up is Tabler Icons! This is a crisp and highly customizable icon set that would be well-suited to websites, dashboards and web applications. There are thousands of icons to choose from; it's a very extensive collection, I must say!
Website: Tabler Icons
GitHub Repo: GitHub Repo
Features:
- Great for dashboards and admin interfaces
- Available as React, Vue, Angular, and Svelte components
- Figma plugin available
- Extensive collection
4. Lucide Icons
Lucide is a community-driven fork of Feather Icons, offering additional icons, as well as packages for utilising the icons in various frameworks including React, Angular and Vue.
Website: Lucide Icons
GitHub Repo: GitHub Repo
Features:
- Expanded collection of icons
- Available for multiple frameworks
- Figma plugin
- Optimized for modern UI/UX design
5. Google Material Symbols & Icons
Google’s Material Symbols is an extensive icon collection with thousands of icons to choose from. It's very useful if you'd like to build a web dashboard. It also has a Figma plugin so that you can utilise the icons in your designs before developing the product, site or web app.
The user interface makes it seamless to search for different icons and it even has dark mode support too! The interface also features a customization sidebar, plus you can search for icons by category.
Dark mode:
Click the Moon emoji in the bottom-left corner to enable dark mode!
Website: Material Symbols
GitHub Repo: GitHub Repo
Features:
- Extensive collection of icons
- Great for web apps, dashboards and user interfaces
- Figma plugin
- Search for icons by category
6. Bootstrap Icons
Bootstrap Icons is a free icon set with packages available for React and Vue.js. I often use this library for my own projects, and would definitely recommend taking a look at it! You can quickly search for icons on the official website and get the icons you need.
Website: Bootstrap Icons
GitHub Repo: GitHub Repo
Features:
- Available in SVG and font formats
- Easy to customize with CSS
- Packages available for React and Vue (on NPM)
7. Radix Icons
Radix Icons is a thoughtfully designed icon set grouped into different collections, such as arrows, typography icons and more. You can download the icons as SVGs (through a .zip archive) or install the library for React via NPM.
Website: Radix Icons
GitHub Repo: GitHub Repo
Features:
- Crisp and modern aesthetic
- Available as SVG and React components
- Install via NPM or download as SVGs
- Free and open-source
8. Iconoir
Iconoir is a free and open-source icon library with a modern aesthetic. The icons are available for multiple frameworks including React and Vue.js.
Website: Iconoir
GitHub Repo: GitHub Repo
Features:
- Over 1,200 icons
- Consistent and minimalistic design
- Supports React, Figma, and SVG
- Free for personal and commercial use
- Regular updates
9. Phosphor Icons
I'd also recommend taking a look at the Phosphor icon library. It has a wide range of styles including a cool duotone style! You can preview the various styles by clicking the Styles dropdown in the top header menu.
You can also customize the size of the icons or randomize the styles too. The interface is very intuitive overall, and makes it quick and easy to search for the icons you need.
Examples:
Website: Phosphor Icons
GitHub Repo: GitHub Repo
Features:
- Supports multiple weights and styles
- Available in SVG, React, Vue, and more
- Customizable stroke width and colors
- Open-source and free to use
10. Carbon Icons
Carbon Icons is IBM’s open-source icon library, part of the Carbon Design System, ideal for web applications, dashboards and more.
Website: Carbon Icons
GitHub Repo: GitHub Repo
Features:
- Part of the IBM Carbon Design System
- Available as React, Angular and Vue components
- Install via NPM or Yarn
- You can also use the icons in vanilla JavaScript
Follow Me for More Roundups!
Thanks for reading! If you'd like to see more roundups like this, be sure to follow me here on Dev.to or on X/Twitter where I share more resources.
Conclusion
Hopefully you've discovered some cool icon sets that you can use for your project.
Do you have any other examples you'd like to mention? Be sure to let me know in the comments below!
Top comments (5)
Very useful!!
I would also like you to check out FlyonUI tailwind CSS component library.
Hi Nandini,
Wow, FlyonUI looks great! Super useful library, I'm glad to have discovered it. The components look so beautifully-designed, and I like that there's built-in theme functionality too.
I will definitely feature it in a new article âś…
Thank you for your response!! Glad you loved it.
I would love to read you next article then.
Very helpful.
Thanks for reading, Bobby! I'm glad you found it helpful 🙌