Tailwind-ready SVG icons—outline and solid

Tool powered by Heroicons on heroicons.com.

Heroicons on heroicons.com: Tailwind CSS icons in outline, solid, mini, and micro—MIT SVGs with React and Vue packages.

What is Heroicons?

Heroicons is an open-source SVG icon set created by the makers of Tailwind CSS. It offers hundreds of icons across multiple styles, including outline and solid variants, and includes React and Vue libraries for implementation. Use the official Heroicons site to search and shortlist icon options in one workflow.

What you can do with Heroicons

Tailwind CSS icons with outline, solid, mini, and micro styles—plus React and Vue packages under MIT.

  1. Tailwind CSS icons for UI stacks: The default set for many Tailwind UI projects—browse outline and solid lanes on heroicons.com.

  2. Outline, solid, mini, and micro: Outline for light chrome, solid for filled controls, mini and micro for dense layouts.

  3. Phone, arrow, and UI metaphors: Hand-crafted catalog covers navigation marks and common glyphs; solid variants also appear under paths like /solid.

  4. React and Vue packages: Official libraries keep icon names aligned between design specs and production code.

  5. MIT commercial use: Ship product UI with MIT licensing; confirm the current text on heroicons.com and GitHub.

How to choose icons from Heroicons

Use this process to choose and integrate Tailwind icons with consistent design rules.

  1. Pick your icon style baseline

    Choose one primary set, such as outline or solid, to reduce visual inconsistency.

  2. Search for role-specific icons

    Select icons by UI role—actions, navigation, alerts, phone outline, arrows, and data states.

  3. Validate size and stroke harmony

    Check icon readability and rhythm at your target component sizes.

  4. Apply library-based implementation

    Use official React or Vue packages to simplify maintenance and version updates.

Tips for better icon usage

These practices help keep icon systems accessible, consistent, and maintainable.
  • 01

    Standardize icon sizes per surface

    Define clear size tokens for navigation, controls, and dense UI areas.

  • 02

    Avoid mixing unrelated styles

    Use one coherent icon family per context unless semantic contrast is intentional.

  • 03

    Check contrast in all themes

    Verify icon clarity on both light and dark surfaces before release.

  • 04

    Document semantic mappings

    Track which icon represents each action or state to reduce ambiguity.

Who Heroicons is great for

Heroicons is useful for teams building clean and consistent interface icon systems.

  • Product designers

    Select coherent iconography for product flows, settings, and feature surfaces.

  • Design system teams

    Establish standardized icon sets across components and documentation.

  • Front-end developers

    Integrate icons quickly with React or Vue libraries in production apps.

  • Startup teams

    Ship polished interface iconography early without custom icon drawing cycles.

Benefits of using Heroicons

Heroicons helps teams move from icon discovery to implementation faster.

  • Faster icon selection

    Find action and status icons quickly in a centralized browsing workflow.

  • Improved visual consistency

    Apply one style family across product surfaces with less drift.

  • Cleaner developer handoff

    Use official library references for predictable implementation.

  • Lower maintenance overhead

    Rely on maintained upstream icon sets and package-based updates.

Frequently Asked Questions

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