HeroIcons Icons

Heroicons: 500+ beautiful, customizable SVG icons. Free, open-source, Tailwind-friendly. Download and integrate.

1,288 icons MIT UI Other / Mixed Grid by Refactoring UI Inc
⌘+F

Copy & download HeroIcons icons

Click any icon above to open the detail panel. Four export formats are available instantly — no sign-up required.

SVG

Raw vector markup. Paste directly into HTML or React components. Scales to any size without quality loss.

JSX / TSX

React-ready component. Drop into any React or Next.js project. Works with shadcn/ui, Radix, and Tailwind CSS.

PNG

Raster export at 1×, 2× and 3× for email templates, Figma imports, app assets, and Open Graph images.

Base64

Inline data URI — embed icons in CSS background-image, email HTML, or anywhere an image URL is needed.

Works with shadcn/ui

Copy the JSX format and paste directly into any shadcn/ui component. Alternatively, install @heroicons/react and use via @iconify/react — fully tree-shakeable, no icon font loading required.

About HeroIcons

Heroicons is the official SVG icon set from the Tailwind CSS team, crafted by designer Steve Schoger. With 292 hand-crafted icons available in Outline (24px), Solid (20px), and Mini (16px) variants, Heroicons covers every essential UI action needed in a web application. Every icon is optimised for its target size — not merely scaled — ensuring crisp rendering at both small labels and large hero banners. The React package (@heroicons/react) is fully tree-shakeable: only imported icons land in your JavaScript bundle. MIT licensed — free for personal and commercial projects, no attribution required. Browse all Heroicons SVG icons here, copy code directly, export as JSX React components, or download as PNG. Heroicons pairs seamlessly with Tailwind CSS and shadcn/ui. Compared with Lucide, Heroicons offers a smaller, more curated library designed to match the Tailwind visual language precisely. Ideal for SaaS UI, dashboards, admin panels, and marketing pages.

Created By

Refactoring UI Inc Visit Website

License

MIT View License

Features & Tags

Has Padding

Pack Details

Version

2.2.0

v2.2.0

Color Support

Monochrome

Category

UI Other / Mixed Grid

In 13 collections

UI Arrow – Chevrons, Pointers & Direction Communication & Messaging Education & Learning Outline & Line Art – Lucide, Feather, Heroicons & More Accessibility Monochrome SVG for Dark Mode SVG for Astro SVG for Vue.js SVG for Next.js SVG for Figma SVG for Email Templates

How to use HeroIcons icons

Icon Set Version

v2.2.0

Package

@heroicons/react

License SPDX

MIT

Sample Icons

camera, building-library, receipt-refund

Install

bash 
npm install @heroicons/react

React

tsx 
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
// Also available: /24/solid  /20/solid  /16/solid

export default function App() {
  return <MagnifyingGlassIcon className="h-6 w-6" />;
}

Via Iconify · HTML

html 
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="heroicons:icon-name" width="24"></iconify-icon>

Via Iconify · any framework

tsx 
import { Icon } from '@iconify/react';

export default function App() {
  return <Icon icon="heroicons:icon-name" width={24} />;
}

Package stats

Build-time npm metadata cached weekly • Last refresh May 12, 2026

@heroicons/react

<source media="(pref

v2.2.0
Score 56%
Popularity 53%
Quality 48%
Maintenance 67%

License

MIT

Weekly downloads

3.1M

Monthly downloads

12.3M

Total downloads

132.3M

Unpacked size

3.5 MB

Last published

Nov 18, 2024

Registry updated

Jan 7, 2026

npm Repository Homepage

Compare HeroIcons with similar icon packs

Lucide Tabler Icons Phosphor Icons

Frequently Asked Questions

Heroicons was crafted by Steve Schoger and is maintained by the Tailwind CSS team. It is the official icon set of the Tailwind ecosystem.

Outline icons use 1.5px strokes and are best for primary UI elements. Solid icons are filled and work well for active/selected states and smaller sizes where strokes may not render cleanly.

Run npm install @heroicons/react. Then: import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";. Use /16/solid, /20/solid, /24/outline, or /24/solid paths.