Uwarp

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

Browse Heroicons for 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
Visit Website
Heroicons homepage showing outline, solid, mini, and micro SVG icon styles
Official site preview — Heroicons. Live UI, pricing, and generation happen on their domain.

Quick verdict

Use when
You need a free MIT SVG icon set with outline, solid, mini, and micro styles—especially when your stack already uses Tailwind CSS and you want React or Vue packages.
Skip when
You need a multi-set icon browser, a custom webfont generator, a commercial marketplace with huge packs, or a much larger single-family catalog than Heroicons ships.
Try instead

Browse multi-set search, Lucide, webfont builders, and free icon directories on Uwarp when a Tailwind-aligned Heroicons set is not the job.

Heroicons vs common alternatives

Stable selection factors only—pricing tiers, learning cost, output format, and license surface. Confirm live details on each official site.

  • HeroiconsThis page

    Pricing
    Free MIT open-source set—confirm license on GitHub
    Learning cost
    Browse styles → copy SVG or install React/Vue package—very short ramp
    Output limits
    Hundreds of icons across outline, solid, mini, and micro; official React/Vue packages
    Privacy
    Self-host SVGs or packages; no account required to browse

  • Lucide

    Pricing
    Free ISC open-source set—confirm license on site
    Learning cost
    Search large catalog → copy or install package—very short ramp
    Output limits
    Large single-style stroke catalog with many framework packages
    Privacy
    Self-host SVGs or packages; no account required to browse

  • Feather Icons

    Pricing
    Free MIT open-source set—confirm license on site
    Learning cost
    Browse feather set → copy SVG or use community wrappers—very short ramp
    Output limits
    Smaller classic stroke set; fewer official framework packages than Heroicons
    Privacy
    Self-host SVGs; no account required to browse
  1. Heroicons — official site
  2. Heroicons — GitHub (license)
  3. Lucide — official site
  4. Feather Icons — official site

Learn more

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

What is Heroicons?

Heroicons is a free, open-source SVG icon set from the makers of Tailwind CSS (Tailwind Labs). It ships outline, solid, mini, and micro styles sized for product UI—navigation, actions, status, devices, and more—plus official React and Vue packages so icon names stay aligned from design to code.

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.
Page type
This route is a curated listing at /curated/heroicons. Downloads and package installs happen on the official site and npm.
Affiliation
This page is not affiliated with Heroicons or Tailwind Labs beyond discovery and documentation. Features and terms are determined on the official site.

Frequently Asked Questions

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