---
title: "Heroicons"
description: "A collection of interface icons with React-friendly usage."
pagination: false
---

{/* Generated from content/. Edit the catalog, not this page. */}

<PurposeNote title="Good for">Adding consistent icons to Tailwind-oriented and other web interfaces.</PurposeNote>

## What it does

A collection of interface icons with React-friendly usage.

## When it fits

Adding consistent icons to Tailwind-oriented and other web interfaces.

## Other options in this category

<div data-pagefind-ignore>

- [Iconify](/icons/iconify) — Choosing icons from multiple sets without changing the integration approach.
- [Iconify React](/icons/iconify-react) — Using icon collections through a shared React component API.
- [Lucide React](/icons/lucide-react) — Building interfaces with a coordinated, customizable icon style.
- [React Icons](/icons/react-icons) — Importing individual icons into a React application.
- [react-file-icon](/icons/react-file-icon) — Showing recognizable file badges in upload and document lists.

</div>

## Source

[Project source for Heroicons ↗](https://heroicons.com/)

Editorial overview reviewed on October 24, 2026. Follow the source for current setup, compatibility, and licensing.

[Add interface icons →](/tasks/add-interface-icons)

[All icons options →](/icons)