Heroicons

Overview

Heroicons are beautiful, hand-crafted SVG icons created by the team behind Tailwind CSS. Designed specifically for modern web interfaces, Heroicons come in outline style (24×24 and 20×20) and pair seamlessly with Tailwind CSS utility classes. The clean, professional aesthetic makes them a natural choice for any Tailwind-based project.

Key Features

• Crafted by the Tailwind CSS team
• Available in 24×24 outline and 20×20 mini sizes
• Optimized for Tailwind CSS className usage
• TypeScript support with full type definitions
• Pixel-perfect at small sizes
• Pairs naturally with shadcn/ui components

Installation

npm install @heroicons/react

Usage Example

Basic React usage with Heroicons

import { HomeIcon, MagnifyingGlassIcon, Cog6ToothIcon } from '@heroicons/react/24/outline';

export default function App() {
  return (
    <div>
      <HomeIcon className="w-6 h-6 text-indigo-500" />
      <MagnifyingGlassIcon className="w-6 h-6 text-gray-500" />
      <Cog6ToothIcon className="w-8 h-8" />
    </div>
  );
}

Best For