HeroIcons Icons

All Heroicons in one searchable grid: Outline, Solid, and Mini variants. Copy SVG or JSX, download PNG. MIT licensed, by the Tailwind CSS team.

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

Search icons...

More SVG Icons

academic-cap

academic-cap-16-solid

academic-cap-20-solid

academic-cap-solid

adjustments-horizontal

adjustments-horizontal-16-solid

adjustments-horizontal-20-solid

adjustments-horizontal-solid

adjustments-vertical

adjustments-vertical-16-solid

adjustments-vertical-20-solid

adjustments-vertical-solid

archive-box

archive-box-16-solid

archive-box-20-solid

archive-box-arrow-down

archive-box-arrow-down-16-solid

archive-box-arrow-down-20-solid

archive-box-arrow-down-solid

archive-box-solid

archive-box-x-mark

archive-box-x-mark-16-solid

archive-box-x-mark-20-solid

archive-box-x-mark-solid

arrow-down

arrow-down-16-solid

arrow-down-20-solid

arrow-down-circle

arrow-down-circle-16-solid

arrow-down-circle-20-solid

arrow-down-circle-solid

arrow-down-left

arrow-down-left-16-solid

arrow-down-left-20-solid

arrow-down-left-solid

arrow-down-on-square

arrow-down-on-square-16-solid

arrow-down-on-square-20-solid

arrow-down-on-square-solid

arrow-down-on-square-stack

arrow-down-on-square-stack-16-solid

arrow-down-on-square-stack-20-solid

arrow-down-on-square-stack-solid

arrow-down-right

arrow-down-right-16-solid

arrow-down-right-20-solid

arrow-down-right-solid

arrow-down-solid

arrow-down-tray

arrow-down-tray-16-solid

arrow-down-tray-20-solid

arrow-down-tray-solid

arrow-left

arrow-left-16-solid

arrow-left-20-solid

arrow-left-circle

arrow-left-circle-16-solid

arrow-left-circle-20-solid

arrow-left-circle-solid

arrow-left-end-on-rectangle

arrow-left-end-on-rectangle-16-solid

arrow-left-end-on-rectangle-20-solid

arrow-left-end-on-rectangle-solid

arrow-left-on-rectangle

arrow-left-on-rectangle-20-solid

arrow-left-on-rectangle-solid

arrow-left-solid

arrow-left-start-on-rectangle

arrow-left-start-on-rectangle-16-solid

arrow-left-start-on-rectangle-20-solid

arrow-left-start-on-rectangle-solid

arrow-long-down

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

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 Aug 13, 2026

@heroicons/react

<source media="(pref

v2.2.0

Score 56%

Popularity 53%

Quality 48%

Maintenance 67%

License

MIT

Weekly downloads

3.9M

Monthly downloads

15.8M

Total downloads

168.3M

Unpacked size

3.5 MB

Last published

Nov 18, 2024

Registry updated

May 12, 2026

npm Repository Homepage

HeroIcons version history

HeroIcons has not published a new npm release in over a year. The latest version, v2.2.0, was released on Nov 18, 2024.

Version	Released
v2.2.0	Nov 18, 2024
v2.1.5	Jul 10, 2024
v2.1.4	Jun 17, 2024
v2.1.3	Mar 22, 2024
v2.1.2	Mar 22, 2024
v2.1.1	Dec 18, 2023
v2.1.0	Dec 18, 2023
v2.0.18	May 9, 2023
v2.0.17	Mar 30, 2023
v2.0.16	Feb 17, 2023
v2.0.15	Feb 8, 2023
v2.0.14	Jan 25, 2023
v2.0.13	Nov 2, 2022
v2.0.12	Oct 5, 2022
v2.0.11	Sep 12, 2022
v2.0.10	Aug 30, 2022
v2.0.9	Aug 30, 2022
v2.0.8	Aug 26, 2022
v2.0.7	Aug 25, 2022
v2.0.6	Aug 25, 2022

Source: npm registry data for @heroicons/react, refreshed weekly.

Compare HeroIcons with similar icon packs

Lucide Tabler Icons Phosphor Icons

Frequently Asked Questions

Who made Heroicons?

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

What is the difference between Heroicons outline and solid?

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.

How do I install Heroicons in React?

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

How many icons are in HeroIcons?

HeroIcons contains 1,288 SVG icons in the UI Other / Mixed Grid category.

How often is HeroIcons updated?

HeroIcons has not published a new npm release in over a year. The latest version, v2.2.0, was released on Nov 18, 2024. See the full version history below.