How to Download Heroicons Icons as SVG or PNG
Heroicons are hand-crafted by the Tailwind CSS team. With only 324 icons, it's a curated set rather than an exhaustive one — every icon is carefully designed for modern web UIs. If you use Tailwind CSS, Heroicons is the natural pairing, but they work beautifully in any project.
- Find your icon — Search by name in the grid above (e.g., "arrow-right", "check", "x-mark"), or scroll through all 324 Heroicons icons.
- Set size and color — Click the icon to open the export panel. Pick any size from 16px to 512px and set a custom color.
- Download or copy code — Save as SVG, PNG, JPG, or WebP. Or copy raw SVG, React component, or Vue snippet to paste into your project.
Why Use Heroicons?
- Designed by Tailwind Labs — perfect integration with Tailwind CSS projects
- Three variants: outline (24px), solid (24px), and mini (20px)
- Curated set — no filler icons, every icon is high quality
- Consistent 1.5px stroke width across all outline icons
About Heroicons
Beautiful hand-crafted SVG icons by the makers of Tailwind CSS. Available in outline, solid, and mini styles. The library contains 324 icons, licensed under MIT. Visit https://heroicons.com for official documentation.
Other Icon Libraries to Download
- Download Phosphor Icons icons — 9,072 icons as SVG/PNG
- Download Material Design Icons Community icons — 7,447 icons as SVG/PNG
- Download Tabler Icons icons — 5,039 icons as SVG/PNG
- Download Noto Emoji icons — 3,800 icons as SVG/PNG
- Download Simple Icons icons — 3,420 icons as SVG/PNG
- Download Remix Icon icons — 3,229 icons as SVG/PNG
- Download Fluent UI Icons icons — 2,428 icons as SVG/PNG
- Download Material Design Icons icons — 2,122 icons as SVG/PNG
- Download Bootstrap Icons icons — 2,078 icons as SVG/PNG
- Download Font Awesome icons — 1,970 icons as SVG/PNG
- Download Lucide icons — 1,941 icons as SVG/PNG
- Download Boxicons icons — 1,634 icons as SVG/PNG
- Download Ionicons icons — 1,357 icons as SVG/PNG
- Download Ant Design Icons icons — 831 icons as SVG/PNG
- Download css.gg icons — 704 icons as SVG/PNG
- Download Feather Icons icons — 287 icons as SVG/PNG
Frequently Asked Questions
Why does Heroicons only have 324 icons?
Heroicons is intentionally curated. The Tailwind team only adds icons they consider essential for web UI. Quality over quantity. If you need more variety, pair with Lucide or Phosphor.
Heroicons vs Lucide — which should I choose?
Heroicons if you use Tailwind CSS (native integration). Lucide if you need more variety (1,941 icons vs 324). Both have similar clean aesthetics.
How to download Heroicons icons as PNG?
Find the icon in the grid above, click it, select your desired size and PNG format, then click Download. Rendered instantly in your browser — no server upload needed.
How to extract Heroicons icons as SVG?
Click any icon and press "Copy SVG" or "Download SVG". Each icon is a standalone SVG with customizable size and color.
Can I convert Heroicons icons to PNG without installing anything?
Yes. All 324 icons are pre-loaded. Search, click, download — no npm, no font files, no build tools.
Is it free to download Heroicons icons?
Yes, 100% free. Heroicons is open source (MIT). No signup, no watermarks, no limits. See our
licenses page for details.
Can I use Heroicons icons in commercial projects?
Yes. MIT permits commercial use. See our
licenses page for full terms.