Heroicons

What it is

Heroicons is a set of free, MIT-licensed high-quality SVG icons for UI development. It provides both outline and solid styles, optimized for modern web applications.

Heroicons can be used as React components, Vue components, or inline SVGs. They are customizable via size, color, stroke, and other SVG attributes.

Getting started

The smallest useful thing you can do with it, and what each part means.

Using an outline icon in React

javascript

12345import { AcademicCapIcon } from '@heroicons/react/outline';

function App() {
  return <AcademicCapIcon className='h-6 w-6 text-blue-500' />;
}

Imports the `AcademicCapIcon` from Heroicons and renders it with a specific size and color in a React component.

Using a solid icon in React

javascript

12345import { AcademicCapIcon } from '@heroicons/react/solid';

function App() {
  return <AcademicCapIcon className='h-6 w-6 text-green-500' />;
}

Uses the solid variant of the icon with a custom color.

Advanced usage

Where the library earns its place over a simpler alternative.

Customizing icon size and color

javascript

<AcademicCapIcon className='h-12 w-12 text-red-600' />

Adjusts the height, width, and color of the icon using Tailwind CSS classes.

Animating an icon

javascript

<AcademicCapIcon className='h-6 w-6 text-blue-500 animate-spin' />

Applies a spin animation to the icon using Tailwind CSS animation classes.

Inline SVG usage

javascript

<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
  <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 14l9-5-9-5-9 5 9 5z' />
</svg>

Uses Heroicons as an inline SVG element with customizable attributes.

Errors and fixes

The failures you are most likely to hit, and what actually resolves them.

Icon not displayed: Ensure the component or SVG is correctly imported and rendered in your project.
Incorrect size or color: Check the CSS classes or SVG attributes applied to the icon.
Bundle size too large: Use tree-shaking or import individual icons instead of the entire package.

Best practices

Import only the icons you need to reduce bundle size.
Use Tailwind CSS classes for consistent sizing and coloring.
Prefer React/Vue components for ease of integration and maintainability.
Use solid or outline variants consistently to match your UI design.
Combine with accessibility attributes like `aria-label` or `title` for screen readers.

Background

Why it exists, and what it was reacting to.

Heroicons was created by the makers of Tailwind CSS to provide a cohesive and visually appealing set of icons that integrate seamlessly with Tailwind-based projects. It focuses on simplicity, scalability, and clarity, making it popular among frontend developers.

Related libraries

Others in UI & Graphics for JavaScript.

MUI (Material-UI)

Ant Design

Chakra UI

Headless UI

Radix UI

shadcn/ui