Heroicons (Solid)

Overview

Heroicons Solid is the filled side of the Tailwind Labs icon set. It is really three sets: 24px solid (324 icons), 20px “mini” (324) and 16px “micro” (316). Each size is drawn on its own grid rather than scaled down, so the 16px home icon is a different, simpler shape from the 24px one. Names match the outline set exactly, so switching from outline to solid for a state change is a one-line swap.

At a Glance

Version examined

@heroicons/react 2.2.0

Icons in the package

324 (24px), 324 (20px mini), 316 (16px micro)

Icons available in Icony

175 (curated, 24px solid)

Canvas

24×24, 20×20 or 16×16 viewBox depending on import path

Drawing model

Fills: fill="currentColor", fill-rule="evenodd" on complex shapes

Rendered HomeIcon SVG

561 bytes (24px), 362 (20px), 328 (16px)

License

MIT

Three sizes, three drawings

Most libraries give you one drawing and let you scale it. Heroicons Solid does not.

The 24px HomeIcon is two paths, a separate roof chevron and a body with a doorway, built on .75 and .125 offsets. The 20px mini version is a single path on whole-pixel coordinates (M9.293 2.293a1 1 0 0 1 1.414 0l7 7…) with a squarer, simpler shape. The 16px micro version is simpler still: one compact shape with a small rounded door opening.

The 20px and 16px drawings are tuned so their edges land on whole pixels at their native size.

That is the main reason to pick Heroicons Solid over scaling a filled icon down. At 16 and 20px, a drawing made for that grid is visibly crisper than a 24px drawing scaled by 0.67 or 0.83.

Complex icons use fill-rule="evenodd" and clip-rule="evenodd" to punch holes, as in Cog6ToothIcon, where the center of the gear is a hole rather than a second shape. The background shows through, so keep that in mind when you place icons on images or gradients.

Which size to use

• 24/solid for primary navigation, tab bars, and anywhere the solid icon swaps with a 24px outline icon.
• 20/solid inside buttons, form fields, dropdown items and menus, next to 14–16px text.
• 16/solid for dense tables, tags, badges and inline status. It has 316 icons, not 324: eight older icons such as ArrowSmallUpIcon and PlusSmallIcon are not drawn at this size.

Trade-offs of the solid sets

• Each size has its own drawing. Almost no other free library does this.
• Names match the outline set exactly at 24px, so active ? Solid : Outline never fails.
• Every SVG carries aria-hidden="true" by default.
• It shares the outline set’s 324-icon catalog, so niche concepts are missing.
• Solid icons have no stroke, so strokeWidth does nothing. In Icony, the stroke slider is inert for this library.
• There is no size prop and no default width/height. You have to size icons with classes or CSS.

When Solid falls short

• You need a solid style for more than a few hundred concepts. Phosphor Fill covers all 1,512 Phosphor icons.
• You want solid icons at large display sizes with a rounder, friendlier look. Phosphor Fill’s larger corner radii suit that better.
• You need solid icons with a two-tone effect; use Phosphor’s duotone weight.

Heroicons Solid vs. Phosphor Fill

Heroicons Solid wins on small-size crispness (thanks to the 20 and 16px sets) and on consistency. Phosphor Fill wins on breadth, a single component API (weight="fill" rather than a different import path), and zero layout risk when switching weights. For a Tailwind-based product that needs fewer than a few hundred icons, Heroicons is the tidier choice. Otherwise Phosphor is safer.

Gotchas

• The size is in the import path. HomeIcon from 20/solid is a different component from HomeIcon from 24/solid, and auto-imports can easily grab the wrong one.
• Alias the imports when you use both outline and solid, or the names collide.
• Mini and micro icons are designed for their native size. Rendering a 16/solid icon at 24px throws away the reason to use it.
• Outline versus solid alone doesn’t tell assistive technology about state. Add aria-current or aria-pressed as well.

License: one package, three sets

Outline, 24px solid, 20px solid and 16px solid all ship in the same MIT-licensed @heroicons/react package, so there is one license to track whichever sets you mix. Commercial use, modification and redistribution are allowed; keep the notice with your source.

Key Features

• Three solid sets: 24/solid, 20/solid, 16/solid
• Each size redrawn for its own pixel grid
• Same names as 24/outline for easy state swaps
• fill="currentColor" with even-odd cut-outs
• Accessible defaults: aria-hidden="true"
• MIT license from Tailwind Labs

Installation

npm install @heroicons/react

Usage Example

Basic React usage with Heroicons (Solid)

import { HomeIcon as HomeOutline } from '@heroicons/react/24/outline';
import { HomeIcon as HomeSolid } from '@heroicons/react/24/solid';
import { CheckIcon } from '@heroicons/react/20/solid';

export function NavItem({ active }: { active: boolean }) {
  const Icon = active ? HomeSolid : HomeOutline;
  return (
    <a href="/" aria-current={active ? 'page' : undefined} className="flex items-center gap-2">
      <Icon className="size-6 text-indigo-600" />
      Home
    </a>
  );
}

// 20px "mini" icons are drawn for buttons and inputs
export function SaveButton() {
  return (
    <button className="inline-flex items-center gap-1.5">
      <CheckIcon className="size-5" />
      Save
    </button>
  );
}

Best For

Common Questions