Uwarp

Heroicons — Tailwind-ready outline, solid, mini & micro SVGs

Free MIT SVG icons in outline, solid, mini, and micro—built by the Tailwind CSS makers, with React and Vue packages.

  • SVG Icons
  • Tailwind Icons
  • React Icons
  • UI Icons
Publisher
Tailwind Labs
Type
Open-Source SVG Icon Set
Pricing
Free
Reviewed
20 August 2026
Official site

Quick verdict

Use when

  • MIT SVG icons
  • Outline / solid / mini / micro
  • Tailwind-friendly
  • Free UI icon set

Skip when

  • Multi-set icon browser
  • Custom webfont generator
  • Huge commercial packs

Heroicons vs common alternatives

Selection snapshot for Heroicons: pricing tiers, learning cost, output limits, and privacy versus common alternatives. Numbers change—check each official site.

Tap a dimension to focus

Pricing

  1. Heroicons — official site
  2. Heroicons — GitHub (license)
  3. Lucide — official site
  4. Feather Icons — official site

Preview of Heroicons - not the live app. Confirm details on the official site.

Does this overview help you decide?

—

(—)

Learn more

Details below the decision summary—features, workflow, and scope notes.

What is Heroicons?

Free MIT SVG icons in outline, solid, mini, and micro—built by the Tailwind CSS makers, with React and Vue packages.

What it costs

Tier snapshot before you depend on the set.
Free tier
Yes
Pricing summary
Heroicons is free under the MIT license. Browse and download SVGs without an account; React and Vue packages are free npm installs. Confirm the current license text on GitHub before client work—terms are controlled by the upstream project.

Reviewed on 20 August 2026 · Heroicons — GitHub license

What Heroicons provides

Core capabilities of the public Heroicons product.

  • Four style lanes

    Outline, solid, mini, and micro variants for light chrome, filled controls, and dense UI.

  • SVG-first delivery

    Copy or download scalable SVGs sized for common UI densities.

  • React and Vue packages

    Official libraries keep glyph names consistent between specs and production code.

  • MIT licensing

    Use in commercial products under MIT—confirm the live license on GitHub.

How teams use Heroicons

A practical icon selection workflow.

  1. Pick one primary style

    Standardize on outline or solid for a surface so navigation and actions stay consistent.

  2. Search by UI role

    Find icons for actions, alerts, navigation, media, and status instead of browsing at random.

  3. Check size and stroke

    Validate readability at your component sizes; use mini/micro for dense tables and chips.

  4. Install the package

    Prefer React or Vue packages over one-off SVG pastes when the app will grow.

Who Heroicons is for

Roles that need a coherent product icon baseline.

  • Product and UI designers

    Specify a consistent icon family for flows, settings, and empty states.

  • Design system teams

    Document outline vs solid usage and size tokens once across components.

  • Front-end developers

    Ship icons via maintained React or Vue packages instead of ad-hoc assets.

When Heroicons is the right pick

Choose Heroicons when you want a Tailwind-aligned MIT icon set with clear style lanes and official React/Vue packages. Skip it when you need a multi-library browser, webfont export, or a much larger icon catalog.

Licensing and platform notes

Facts to verify on the official site before you depend on a workflow.
Web browser + packages
Browse on heroicons.com; install official React/Vue packages from the documented npm names.
MIT license
Open-source MIT. Confirm the current license file on GitHub before commercial release.
Tailwind Labs upstream
Created by the makers of Tailwind CSS. Icon catalog and package versions are controlled upstream.

Frequently Asked Questions

Quick answers about this tool—open a question to read more.