HeroIcons

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.

How to use HeroIcons icons

npm install @heroicons/react

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" />;
}

<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>

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

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

Compare HeroIcons with similar icon packs