Heroicons Icons
Beautiful hand-crafted SVG icons by the makers of Tailwind CSS. Designed for clean, modern interfaces with both outline and solid styles.
About Heroicons
Beautiful hand-crafted SVG icons by the makers of Tailwind CSS. Designed for clean, modern interfaces with both outline and solid styles.
Available Styles
What You Get
| Feature | Details |
|---|---|
| Icon count | 1,288 icons in this library |
| License | MIT |
| Creator | Tailwind Labs |
| Export formats | SVG, PNG, JSX, Base64. Copy to clipboard or download instantly. |
| Customization | Color, size, rotation, flip. All in-browser. |
| Account required | None. No sign-up needed. |
How to Use Heroicons Icons
1. Search the library
Head to Browse Icons and filter by “Heroicons” to browse all 1,288 icons in this set.
2. Customize
Click any icon to open the detail panel. Pick a color, adjust stroke width, switch between Outline and Solid styles, or rotate and flip.
3. Export
Copy the SVG, download a PNG at any size, grab the icon ID for @iconify/react, or export as JSX or Base64. No account required.
Use in React / Next.js
Install the Iconify React package and use Heroicons icons directly in your project:
npm install @iconify/react
import { Icon } from "@iconify/react"
// Example Heroicons icon
<Icon icon="heroicons:home" className="h-6 w-6" />Browse Heroicons Icons Free
1,288 icons. No watermarks, no account, no attribution required.