Heroicons Explorer
Search 320+ Tailwind CSS Heroicons by Tailwind Labs. Preview Outline, Solid, Mini, and Micro styles, customize Tailwind classes (size-*, text-*), and copy React JSX, Vue, or clean SVG code.
The Official Iconography of the Tailwind CSS Ecosystem
Heroicons is crafted specifically for Tailwind CSS by Steve Schoger and Adam Wathan. Rather than generic, auto-scaled vectors, each Heroicon style (24 Outline, 24 Solid, 20 Mini, and 16 Micro) has been independently designed from scratch to ensure pixel-perfect legibility across varying screen densities and UI component contexts.
Tailwind CSS size-* Ready
Copy ready-to-use markup formatted with modern Tailwind utility classes like size-5 and size-6, eliminating redundant w-* h-* pairs.
4 Hand-Crafted Variants
Seamlessly toggle between 24x24 Outline, 24x24 Solid, 20x20 Mini, and 16x16 Micro to guarantee visual harmony across navigation bars, buttons, and badges.
Zero-Runtime Overhead
Import only the specific icons you need using @heroicons/react or @heroicons/vue. Tree-shaking leaves no unused vectors in your production bundle.
Heroicons Style & Sizing Matrix
| Variant | ViewBox / Grid | Recommended Class | Ideal Usage |
|---|---|---|---|
| 24x24 Outline | 0 0 24 24 | size-6 | Main navigation, cards, page headers, empty states |
| 24x24 Solid | 0 0 24 24 | size-6 | Selected menu items, filled buttons, high-emphasis actions |
| 20x20 Mini | 0 0 20 20 | size-5 | Input field prefixes/suffixes, dropdown menus, button icons |
| 16x16 Micro | 0 0 16 16 | size-4 | Tight pill badges, status tags, table cell indicators, inline text |
Frequently Asked Questions
What is Heroicons and who created it?
Heroicons is an open-source icon set designed by Steve Schoger and Adam Wathan at Tailwind Labs. It is designed to integrate seamlessly with Tailwind CSS, Tailwind UI, and Catalyst application frameworks.
What are the 4 official Heroicons variants and when should I use each?
Heroicons provides four hand-crafted variants: 24x24 Outline (1.5px stroke for general navigation & UI), 24x24 Solid (fill-based for active states, badges & emphasis), 20x20 Mini (compact solid icons for form inputs & dropdown menus), and 16x16 Micro (high-density solid icons for tight badges, chips & inline alerts).
How do I use the new Tailwind CSS "size-*" utility classes?
In modern Tailwind CSS (v3.4+ and v4), the size-* utility sets both width and height simultaneously. For example, size-4 sets width: 1rem (16px) and height: 1rem (16px), size-5 sets 1.25rem (20px), and size-6 sets 1.5rem (24px). This replaces the older w-6 h-6 pattern.
How do I install Heroicons in React or Next.js?
Install the official package with "npm install @heroicons/react". Then import the desired variant and icon: "import { ArrowRightIcon } from '@heroicons/react/24/outline';" and render it: "<ArrowRightIcon className=\"size-6 text-indigo-600\" />". Bundlers like Next.js automatically tree-shake unused icons.
How do I install Heroicons in Vue 3?
Install the official Vue package with "npm install @heroicons/vue". In your SFC script setup: "import { ArrowRightIcon } from '@heroicons/vue/24/outline';" and render "<ArrowRightIcon class=\"size-6 text-indigo-600\" />".
Can I use Heroicons without React or Vue as raw SVGs?
Yes. You can copy the inline SVG markup with Tailwind CSS classes directly into HTML, Blade, ERB, or Astro templates. You can also download standalone SVGs or copy base64 CSS Data URIs for use in CSS background-image rules.