Design Library
IC-002 · D. Icons and Visual Assets

Heroicons

Tailwind Labs SVG icons: Outline 24, Solid 24, Mini 20, Micro 16.

Summary

Tailwind Labs SVG icons: Outline 24, Solid 24, Mini 20, Micro 16.

What it is

An open-source icon set with consistent grid, stroke and naming, distributed as SVG and framework packages.

Who it’s for

Designers and developers who need a coherent, license-clear icon set for UI.

Monochrome lightSplit heroMinimal, utilitarian
Heroicons: hero image
Figure 1. 24 icons in Outline 24 and Solid 24. Source: RENDERED BY US from SVGs in the heroicons npm package (MIT, Copyright (c) Tailwind Labs, Inc.)

Key takeaways

  • Captured heroicons.com: split hero (title left, oversized outline icon right) above a dense icon grid with style tabs.
  • White, gray and a muted indigo; the grid itself is the product.
  • Color: monochrome light theme; dominant colors #FFFFFF, #ABABBE (ESTIMATED from our capture).

Best practices to borrow

  • Keep chrome neutral and let content carry color.
  • Put the promise on one side and proof (product, media or illustration) on the other; keep the headline short.
  • Pick one set, one size and one stroke weight per product; don’t mix sets in the same UI.
ESTIMATED

Palette preview

#FFFFFF~51%#ABABBE~3%

Quick links

Source PDF notes DESIGN.md Images (.zip)

Figures

Extracted from the v2 research PDF. Only figures the research team rendered from open-licensed or official public values are shown; official page screenshots and third-party artwork are not published here (they are blanked in the downloadable PDF). Captions and credits are as written in the PDF.

Figure 1. 24 icons in Outline 24 and Solid 24. Source: RENDERED BY US from SVGs in the heroicons npm package (MIT, Copyright (c) Tailwind La
Figure 1. 24 icons in Outline 24 and Solid 24. Source: RENDERED BY US from SVGs in the heroicons npm package (MIT, Copyright (c) Tailwind Labs, Inc.)
Download full resolutionRendered by the research team; see caption for source and license. Entry license: MIT

Related entries

IC-001 · Icon Library

Lucide Icons

Monochrome lightCentered hero
IC-003 · Icon Library

Phosphor Icons

Warm neutralSplit hero
AV-001 · Avatar Library

DiceBear

Monochrome lightSplit hero
WR-004 · Website Reference

Notion

Monochrome lightSplit hero
ESTIMATED

Dominant palette from our captures

Measured by us from our screenshot(s) of https://heroicons.com (median-cut quantization; share = % of pixels). Approximate and not official.

#FFFFFF~51% of pixels#ABABBE~3% of pixels

Layout pattern: Split hero

Observed by us on the captured page(s). See all entries by layout.

How to apply it: Put the promise on one side and proof (product, media or illustration) on the other; keep the headline short.

Other entries with this layout: Material Design 3, Phosphor Icons, Linear, Stripe, Notion, DiceBear, Open Peeps, Humaaans, Blush, Linear onboarding flow.

Our analysis

Captured heroicons.com: split hero (title left, oversized outline icon right) above a dense icon grid with style tabs. White, gray and a muted indigo; the grid itself is the product.

Monochrome lightSplit heroMinimal, utilitarian

Similar to this

Ranked by shared color theme, layout, category, type and mood tags.

IC-001 · Icon Library

Lucide Icons

Monochrome lightCentered hero
IC-003 · Icon Library

Phosphor Icons

Warm neutralSplit hero
AV-001 · Avatar Library

DiceBear

Monochrome lightSplit hero
WR-004 · Website Reference

Notion

Monochrome lightSplit hero

Downloads

PDF notes All images (.zip) DESIGN.md

PDF: research notes made for this library; third-party images inside follow the credits in their captions. License / terms of the source: MIT

DESIGN.md for AI coding agents

Copy this into your repo or agent context. OFFICIAL and ESTIMATED values are labelled.

Download .mdAll entries
# DESIGN.md · Heroicons (IC-002)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Icon Library · Category: D. Icons and Visual Assets
- Platforms: Web, React, Vue
- Color theme: Monochrome light · Layout pattern: Split hero · Mood: Minimal, utilitarian
- License / terms: MIT

Tailwind Labs SVG icons: Outline 24, Solid 24, Mini 20, Micro 16.

### Analysis (ours)
Captured heroicons.com: split hero (title left, oversized outline icon right) above a dense icon grid with style tabs. White, gray and a muted indigo; the grid itself is the product.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~51%
- `#ABABBE` ~3%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://heroicons.com
- Library entry: https://design-library-byt.pages.dev/entry/IC-002