Heroicons

Language: JavaScript

Icons

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.

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.

Installation

npm: npm install @heroicons/react

yarn: yarn add @heroicons/react

cdn: <script src='https://unpkg.com/@heroicons/react/outline/index.js'></script>

manual: Download SVG icons directly from the Heroicons website and include them in your project.

Usage

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

Using an outline icon in React

import { 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

import { 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.

Customizing icon size and color

<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

<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

<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.

Error Handling

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.

Official Docs Github