What it does
Heroicons is a free SVG icon library for interface controls, with official React and Vue components. It includes 24-pixel outline and solid drawings, plus 20-pixel and 16-pixel solid sets for smaller spaces.
Choose the size family before adding an icon. The website separates Outline, Solid, Mini and Micro, so a compact toolbar can use artwork drawn for smaller dimensions rather than relying on a scaled navigation icon.
Add an icon to a project
- Browse the catalog and copy the SVG you need into your HTML.
- For React, install
@heroicons/reactand import the component from the appropriate size and style path, such as@heroicons/react/24/solid. Vue has the equivalent@heroicons/vuepackage. - Set the CSS color property to change the icon color. Component names use capitals and end in Icon, such as BeakerIcon.
The MIT licence permits commercial use and modification. Keep the copyright and permission notice with redistributed copies. The maintainers currently accept bug fixes but do not accept contributions for new icons or additional frameworks.
Strengths
- Official React and Vue component packages.
- Separate artwork is available for 16, 20 and 24-pixel interface sizes.
Watch out for
- The project is not accepting contributions for new icons or additional frameworks.
Best for
- React and Vue interface controls
- Small menus and toolbars
Sources
- Heroicons (Oct 27, 2026)
- Heroicons README (Oct 27, 2026)
- Heroicons MIT License (Oct 27, 2026)