Heroicons

Overview

Heroicons is a set of 324 icons from Tailwind Labs, published in four styles: 24px outline, 24px solid, 20px solid (“mini”) and 16px solid (“micro”). This page covers the outline style, which draws every icon with a 1.5 stroke on a 24×24 canvas. That is lighter than the 2px default of Lucide and Tabler. The set is deliberately small and evenly finished, and you size its components with CSS classes rather than props.

At a Glance

Version examined

@heroicons/react 2.2.0

Icons in the package

324 in 24/outline

Icons available in Icony

175 (curated)

Canvas

24×24 viewBox

Drawing model

Strokes: fill="none", stroke="currentColor"

Default stroke

1.5, round caps and joins

Rendered HomeIcon SVG

454 bytes (290 gzipped)

License

MIT

Design language

The rendered <HomeIcon /> from 24/outline has viewBox="0 0 24 24", fill="none", stroke="currentColor" and stroke-width="1.5". The icon is one path, and its coordinates are full of quarter and eighth values (M2.25 12, v10.125, c.621 0 1.125.504…). A 1.5px line can never cover whole pixels, so at best one edge lands on the grid: the wall at x=9.75 runs from 9 to 10.5, and the other edge falls mid-pixel. That is why Heroicons Outline looks a little softer at 24px than the 2px sets.

The 1.5 line makes the set feel lighter and more refined than Lucide or Tabler at their 2px defaults. Corners are softly rounded and shapes are a bit more literal. The home icon, for example, has a separate roofline and a floor line.

Every SVG carries two attributes: aria-hidden="true" and data-slot="icon". The first treats every icon as decorative by default. The second gives parent components a stable hook, so a button can style any icon inside it with a [data-slot=icon] selector.

Strengths and weaknesses

• Consistency. 324 icons from a single team, and none of them look out of place.
• Outline and solid are true pairs. The file lists of 24/outline and 24/solid are identical, so state switching never hits a missing icon.
• Decorative icons are hidden from screen readers by default, so you don’t have to remember to do it.
• The catalog is small. 324 icons cover general app UI, but domain-specific concepts are often missing.
• There is no size prop. The SVG has no width or height, so without a class it expands to fill its container.
• The 1.5 line can look faint at 16px or in light gray. For small sizes, use the mini and micro solid sets.

Reasons to look elsewhere

• You need hundreds of domain icons. Tabler or Lucide cover far more ground.
• You do not use utility CSS and prefer a size prop API; Lucide and Tabler fit better.
• Your icons are mostly 16px. Use Heroicons’ own 16/solid set or a small-grid library.

Heroicons vs. Lucide

Both are stroke-based on 24×24, and both accept strokeWidth, so you can set Heroicons to 2 or Lucide to 1.5 to make them match.

They differ in catalog size (324 vs. about 1,500) and API (class-based sizing vs. a size prop). Accessibility defaults differ too: Heroicons hides icons by default, Lucide 0.460.0 does not. And Heroicons has designed solid versions, which Lucide lacks.

Setup notes

• You must import from a style path: @heroicons/react/24/outline, 24/solid, 20/solid or 16/solid. Importing from the package root throws a runtime error that tells you exactly this.
• Old tutorials import from @heroicons/react/outline. That is the v1 path, and with v2 installed it throws an error suggesting you install v1. Update the path instead, and check the names, because v2 renamed many icons. There is no MenuIcon or SearchIcon in v2; they are now Bars3Icon and MagnifyingGlassIcon.
• All names end in Icon. Import both styles with aliases: import { HomeIcon as HomeOutline } from …/24/outline.
• The title prop adds a <title> and aria-labelledby, but the SVG keeps aria-hidden="true". For a meaningful standalone icon, also pass aria-hidden={false}. Better still, label the button that contains it.
• Next.js 16 lists @heroicons/react/24/outline, 24/solid and 20/solid in its default optimizePackageImports; 16/solid is not on that list.

License: MIT from Tailwind Labs

Heroicons is MIT-licensed and published by Tailwind Labs, the makers of Tailwind CSS. You don’t need Tailwind to use it, and the license works the same in any stack: commercial use, modification and redistribution are allowed, and the notice stays with your source. No credit is needed in your UI.

Key Features

• 324 outline icons with a 1.5 stroke on a 24×24 grid
• Identical names across outline and solid styles
• Sized with CSS classes (there is no size prop)
• aria-hidden="true" and data-slot="icon" on every SVG
• Optional title / titleId props
• MIT license from Tailwind Labs

Installation

npm install @heroicons/react

Usage Example

Basic React usage with Heroicons

import { HomeIcon, MagnifyingGlassIcon, Cog6ToothIcon } from '@heroicons/react/24/outline';

export function Toolbar() {
  return (
    <div className="flex gap-3 text-gray-600">
      {/* No width/height on the SVG — size it with classes */}
      <HomeIcon className="size-6" />
      <MagnifyingGlassIcon className="size-6 text-indigo-600" />

      {/* Heavier line when you need it */}
      <Cog6ToothIcon className="size-6" strokeWidth={2} />
    </div>
  );
}

Best For

Common Questions