Heroicons
Free MIT-licensed SVG icon set for UI work, with React and Vue packages.
- Stars
- 23.9k
- Forks
- 1.3k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 6 months ago
- Type
- Library
What it is
Heroicons is a collection of hand-crafted SVG icons made by the team behind Tailwind CSS. You can copy an icon's SVG code straight into a web page, or install official React or Vue packages that let you import each icon as a component. The icons are free to use under the MIT license.
- Paste an SVG icon from heroicons.com directly into an HTML page
- Import an icon as a React component from @heroicons/react and style it with a class
- Import an icon as a Vue component from @heroicons/vue
- Change icon color by setting the CSS color property
Great for
- Web developers building interfaces who want clean, consistent icons
- Teams already using Tailwind CSS, since icons are styled with utility classes like text-gray-500
- React or Vue developers who want icons as importable components
- Designers who want a simple, consistent icon set to pick from
Not ideal for
- People who need a very large or specialized icon library, since the README does not describe its icon count and the project is not accepting new icon contributions
- Contributors hoping to add new icons or framework support, because the README says only bug-fix contributions are accepted
- Developers using frameworks other than React or Vue who want a ready-made package, since the README mentions no official package for them
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm (only if using the React or Vue packages)
Install the React package
npm install @heroicons/reactInstall the Vue package
npm install @heroicons/vue - 2
Run it
- Go to heroicons.com and find the icon you need
- Copy its SVG source into your HTML, or install the React or Vue package
- Import an icon by name, for example BeakerIcon from @heroicons/react/24/solid
- Add a size or color class such as size-6 text-blue-500 to style it
- 3
Get the most out of it
- Use the outline style for lighter UI and the solid style for emphasis, as the README describes both sets
- Pick the 16, 20, or 24 size packages to match your layout
- Style icons with Tailwind utility classes or plain CSS color, since both styles follow the color property
- Browse the full list of icon names on UNPKG before importing
Downloads
Strengths
- Free and MIT-licensed, so it can be used in commercial projects
- Icons are styled with the CSS color property, which fits well with Tailwind CSS
- Official React and Vue packages offer several sizes and styles (24px outline, 24px solid, 20px solid, 16px solid)
Trade-offs
- The README says only bug-fix contributions are accepted, so requests for new icons or new framework support will not be merged
- Only React and Vue packages are provided officially; other frameworks need your own wrapper
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| heroicons (this) | 23.9k | Library | beginner | 6 months ago | Web developers building interfaces who want clean, consistent icons |
| tabler-icons | 22.5k | App | beginner | 7 days ago | Web developers who need a consistent set of icons for buttons, menus, and dashboards |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.