Heroicons
Hand-crafted SVG icons by the Tailwind team for UI design.
Open the official app on heroicons.com
This tool is hosted by its maintainers. Click below to open heroicons.com in a new tab — it's their official demo.
Browse design tools →What's next with Heroicons?
Choose how you want to get started.
Use it free
Open the official tool or demo — no account needed.
Self-host it
Run the open-source version on your own infrastructure.
What is Heroicons?
Heroicons is an open-source collection of scalable vector graphics (SVG) icons designed for use in web development projects. Licensed under the MIT license, it provides developers and designers with a curated set of high-quality icons that can be easily integrated into user interfaces. The project caters to front-end developers, UI/UX designers, and open-source contributors who need consistent, customizable icons for applications, websites, and tools. It addresses the challenge of finding reliable, royalty-free icons that maintain visual quality across different screen sizes and resolutions. By offering a standardized icon library, Heroicons streamlines the process of enhancing digital interfaces with professional-grade graphics without requiring advanced design skills or proprietary software.
How it works
Heroicons is a repository of SVG icons hosted on GitHub, maintained by the Tailwind Labs team. It provides a unified set of icons optimized for use with modern web frameworks and CSS utilities. The icons are available in multiple styles, including Outline, Solid, Mini, and Micro, allowing developers to choose the most appropriate variant for their design needs. The primary purpose of Heroicons is to offer a lightweight, scalable solution for adding visual elements to web interfaces. Its icons are designed to be easily customizable via CSS, making them adaptable to different color schemes, sizes, and contextual requirements. This flexibility ensures consistency across projects while reducing the need for custom icon creation. Heroicons includes over 200 icons, such as navigation arrows (arrow-down, arrow-left), status indicators (battery-0, bell-snooze), and functional symbols (book-open, bug-ant). These icons are available in multiple stroke widths and sizes, including 24x24 pixels and 1.5px stroke variants. The project also supports variations like 'Outline 2' and 'Outline 3' for different visual weightings.
How to use it
- 1Open the Heroicons page
- 2Use the tool directly in your browser
- 3Results appear instantly — no waiting, no downloads
What it can do
- UI icons
Use cases
Assumptions and limitations
Assumptions
- source: https://github.com/tailwindlabs/heroicons
- license: MIT — free to use
- privacy: Self-hosted — you control your data
Limitations
- Limited icon variety compared to commercial icon libraries like Font Awesome
- Requires manual integration into projects without built-in framework support
- No built-in animation or interactivity features
- Customization is restricted to CSS properties without advanced styling tools
- Icon scaling may require additional CSS for responsive designs
Understanding the result
Hand-crafted SVG icons by the Tailwind team for UI design.
Tool details
- Clearly flagged when a network request is needed.
- No account, no sign-up, and no tracking of your content.
- Powered by (MIT).
- Built with
- (tailwindlabs/heroicons)
- License
- MIT
- Runs locally
- No — requires a network request
- Verification
- Not yet verified
- Input
- Query
- Output
- Text
Built with tailwindlabs/heroicons. OpenToolVault provides the discovery and browser interface while crediting the original project maintainers.
- Built with
- License
- MIT
Open-source project
OpenToolVault is an independent directory. We are not affiliated with or endorsed by this project.
References
- / — GitHub Repository
Upstream project · GitHub
- MIT License
Upstream project
Frequently asked
How do I access and use Heroicons in my project?
Visit the Heroicons GitHub repository to browse icons. Copy the SVG code for your desired icon variant (e.g., Solid or Outline) and paste it into your HTML file or framework component. For React projects, use the pre-configured components in the 'react' directory. Customize the icon using CSS properties like fill, stroke, or transform to match your design requirements.
How does Heroicons ensure icon scalability across devices?
Heroicons uses SVG vector graphics, which are inherently scalable without loss of quality. The icons are designed with responsive dimensions (e.g., 24x24 pixels) and can be resized using CSS. The MIT license allows developers to adjust stroke widths and colors while maintaining the icon's structural integrity for different screen sizes and resolutions.
How can I customize the color of an icon?
To change an icon's color, add a CSS style rule targeting the SVG element. For example, if your icon has the class 'heroicon-s-solid', apply 'style="fill: #ff0000"' to the SVG tag. This overrides the default stroke or fill color, allowing you to match the icon to your application's color scheme.
How does Heroicons compare to Font Awesome or Ionicons?
Heroicons focuses on minimalism and clean vector graphics with a MIT license, while Font Awesome and Ionicons offer larger icon libraries with commercial usage restrictions. Heroicons excels in simplicity and framework compatibility, whereas Font Awesome provides more icons and built-in CSS styling. Ionicons, a newer alternative, offers a similar MIT license but with a different design language and SVG optimization approach.
What should I do if an icon isn't displaying correctly?
Verify the SVG code is correctly copied and pasted, ensuring no typos in the XML structure. Check for conflicting CSS styles that may override the icon's appearance. If using a framework like React, ensure the component is properly imported and rendered. For Tailwind CSS integration, confirm the icon's class names align with your project's configuration and that necessary utilities (e.g., fill, stroke) are applied.