Heroicons

Heroicons is a set of beautiful, hand-crafted SVG icons from the makers of Tailwind CSS. The icons are designed to be simple, consistent, and flexible.

Installation

Heroicons are included with React Icons:

npm install react-icons

Import Path

React Icons provides both Heroicons v1 and v2:

// Heroicons 2 (recommended - latest version)
import { HiHome, HiOutlineHome, HiMiniHome } from 'react-icons/hi2';

// Heroicons 1 (legacy)
import { HiHome, HiOutlineHome } from 'react-icons/hi';

Use hi2 for the latest icons. Heroicons 2 includes new icons and a mini (20px) variant.

Library Details

Heroicons v1

Icon Count: 460Version: 1.0.6Import: react-icons/hiVariants: Solid, Outline

Heroicons v2

Icon Count: 888Version: 2.1.3Import: react-icons/hi2Variants: Solid (24px), Outline (24px), Mini (20px)

Project URL: github.com/tailwindlabs/heroicons License: MIT License

Usage Examples

Basic Usage

import { HiHome, HiUser, HiCog } from 'react-icons/hi2';

function App() {
  return (
    <div>
      <HiHome />
      <HiUser />
      <HiCog />
    </div>
  );
}

Icon Variants

Heroicons provides multiple variants for different use cases:

Solid (24px)
Outline (24px)
Mini (20px)

import {
  HiHome,
  HiUser,
  HiHeart,
  HiStar
} from 'react-icons/hi2';

function SolidIcons() {
  return (
    <div>
      <HiHome />   {/* 24px solid */}
      <HiUser />   {/* 24px solid */}
      <HiHeart />  {/* 24px solid */}
      <HiStar />   {/* 24px solid */}
    </div>
  );
}

Default Heroicons use the Hi prefix and are 24px solid icons.

import {
  HiOutlineHome,
  HiOutlineUser,
  HiOutlineHeart,
  HiOutlineStar
} from 'react-icons/hi2';

function OutlineIcons() {
  return (
    <div>
      <HiOutlineHome />   {/* 24px outline */}
      <HiOutlineUser />   {/* 24px outline */}
      <HiOutlineHeart />  {/* 24px outline */}
      <HiOutlineStar />   {/* 24px outline */}
    </div>
  );
}

Outline icons use the HiOutline prefix. Perfect for lighter UI elements.

import {
  HiMiniHome,
  HiMiniUser,
  HiMiniHeart,
  HiMiniStar
} from 'react-icons/hi2';

function MiniIcons() {
  return (
    <div>
      <HiMiniHome />   {/* 20px solid */}
      <HiMiniUser />   {/* 20px solid */}
      <HiMiniHeart />  {/* 20px solid */}
      <HiMiniStar />   {/* 20px solid */}
    </div>
  );
}

Mini icons use the HiMini prefix. Available only in Heroicons v2.

import {
  HiHome,
  HiOutlineHome,
  HiUser,
  HiOutlineUser,
  HiCog,
  HiOutlineCog,
  HiBell,
  HiOutlineBell
} from 'react-icons/hi2';

function Navigation() {
  const [activeTab, setActiveTab] = React.useState('home');
  
  return (
    <nav>
      <button onClick={() => setActiveTab('home')}>
        {activeTab === 'home' ? <HiHome /> : <HiOutlineHome />}
        <span>Home</span>
      </button>
      
      <button onClick={() => setActiveTab('profile')}>
        {activeTab === 'profile' ? <HiUser /> : <HiOutlineUser />}
        <span>Profile</span>
      </button>
      
      <button onClick={() => setActiveTab('settings')}>
        {activeTab === 'settings' ? <HiCog /> : <HiOutlineCog />}
        <span>Settings</span>
      </button>
      
      <button onClick={() => setActiveTab('notifications')}>
        {activeTab === 'notifications' ? <HiBell /> : <HiOutlineBell />}
        <span>Notifications</span>
      </button>
    </nav>
  );
}

Button Examples

import {
  HiPlus,
  HiPencil,
  HiTrash,
  HiArrowDownTray,
  HiShare,
  HiMiniCheck
} from 'react-icons/hi2';

function ActionButtons() {
  return (
    <div className="space-x-2">
      <button className="btn-primary">
        <HiPlus className="w-5 h-5" />
        Add Item
      </button>
      
      <button className="btn-secondary">
        <HiPencil className="w-4 h-4" />
        Edit
      </button>
      
      <button className="btn-danger">
        <HiTrash className="w-4 h-4" />
        Delete
      </button>
      
      <button className="btn-icon">
        <HiArrowDownTray className="w-5 h-5" />
      </button>
      
      <button className="btn-icon">
        <HiShare className="w-5 h-5" />
      </button>
    </div>
  );
}

Common Use Cases

Forms & Inputs
Alerts & Notifications
Cards & Content
Dropdowns & Menus

import {
  HiMagnifyingGlass,
  HiEnvelope,
  HiLockClosed,
  HiEye,
  HiEyeSlash,
  HiXMark
} from 'react-icons/hi2';

function SearchInput() {
  const [query, setQuery] = React.useState('');
  
  return (
    <div className="relative">
      <HiMagnifyingGlass className="absolute left-3 top-3 text-gray-400" />
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
        className="pl-10 pr-10"
      />
      {query && (
        <button 
          onClick={() => setQuery('')}
          className="absolute right-3 top-3"
        >
          <HiXMark className="text-gray-400" />
        </button>
      )}
    </div>
  );
}

function LoginForm() {
  const [showPassword, setShowPassword] = React.useState(false);
  
  return (
    <form>
      <div className="input-group">
        <HiEnvelope />
        <input type="email" placeholder="Email" />
      </div>
      
      <div className="input-group">
        <HiLockClosed />
        <input 
          type={showPassword ? 'text' : 'password'} 
          placeholder="Password" 
        />
        <button onClick={() => setShowPassword(!showPassword)}>
          {showPassword ? <HiEyeSlash /> : <HiEye />}
        </button>
      </div>
    </form>
  );
}

import {
  HiCheckCircle,
  HiExclamationTriangle,
  HiInformationCircle,
  HiXCircle,
  HiXMark
} from 'react-icons/hi2';

function Alert({ type, message, onClose }) {
  const icons = {
    success: HiCheckCircle,
    warning: HiExclamationTriangle,
    info: HiInformationCircle,
    error: HiXCircle
  };
  
  const Icon = icons[type];
  
  return (
    <div className={`alert alert-${type}`}>
      <Icon className="w-5 h-5" />
      <span>{message}</span>
      <button onClick={onClose}>
        <HiXMark className="w-5 h-5" />
      </button>
    </div>
  );
}

import {
  HiEllipsisVertical,
  HiHeart,
  HiOutlineHeart,
  HiChatBubbleLeft,
  HiShare,
  HiBookmark,
  HiOutlineBookmark
} from 'react-icons/hi2';

function PostCard({ post }) {
  const [liked, setLiked] = React.useState(false);
  const [saved, setSaved] = React.useState(false);
  
  return (
    <div className="card">
      <div className="card-header">
        <div className="author">{post.author}</div>
        <button><HiEllipsisVertical /></button>
      </div>
      
      <div className="card-content">
        {post.content}
      </div>
      
      <div className="card-actions">
        <button onClick={() => setLiked(!liked)}>
          {liked ? <HiHeart className="text-red-500" /> : <HiOutlineHeart />}
          <span>{post.likes}</span>
        </button>
        
        <button>
          <HiChatBubbleLeft />
          <span>{post.comments}</span>
        </button>
        
        <button>
          <HiShare />
        </button>
        
        <button onClick={() => setSaved(!saved)}>
          {saved ? <HiBookmark /> : <HiOutlineBookmark />}
        </button>
      </div>
    </div>
  );
}

import {
  HiEllipsisVertical,
  HiPencil,
  HiTrash,
  HiShare,
  HiArrowDownTray,
  HiDocumentDuplicate
} from 'react-icons/hi2';

function DropdownMenu() {
  const [isOpen, setIsOpen] = React.useState(false);
  
  return (
    <div className="relative">
      <button onClick={() => setIsOpen(!isOpen)}>
        <HiEllipsisVertical />
      </button>
      
      {isOpen && (
        <div className="dropdown-menu">
          <button><HiPencil /> Edit</button>
          <button><HiDocumentDuplicate /> Duplicate</button>
          <button><HiShare /> Share</button>
          <button><HiArrowDownTray /> Download</button>
          <hr />
          <button className="text-red-600">
            <HiTrash /> Delete
          </button>
        </div>
      )}
    </div>
  );
}

Styling Heroicons

With Tailwind CSS

Heroicons are designed to work perfectly with Tailwind CSS:

import { HiHome } from 'react-icons/hi2';

function TailwindIcons() {
  return (
    <div>
      {/* Size */}
      <HiHome className="w-4 h-4" />   {/* 16px */}
      <HiHome className="w-5 h-5" />   {/* 20px */}
      <HiHome className="w-6 h-6" />   {/* 24px */}
      <HiHome className="w-8 h-8" />   {/* 32px */}
      
      {/* Color */}
      <HiHome className="text-blue-500" />
      <HiHome className="text-gray-600" />
      <HiHome className="text-red-500" />
      
      {/* Hover states */}
      <HiHome className="text-gray-400 hover:text-gray-600" />
    </div>
  );
}

Responsive Sizing

import { HiHome } from 'react-icons/hi2';

function ResponsiveIcon() {
  return (
    <HiHome className="w-5 h-5 md:w-6 md:h-6 lg:w-8 lg:h-8" />
  );
}

Icon Naming Convention

Heroicons use these naming patterns:

Solid (24px): Hi[IconName] (e.g., HiHome, HiUser)
Outline (24px): HiOutline[IconName] (e.g., HiOutlineHome, HiOutlineUser)
Mini (20px): HiMini[IconName] (e.g., HiMiniHome, HiMiniUser) - v2 only

All names use PascalCase:

home → HiHome
magnifying-glass → HiMagnifyingGlass
arrow-down-tray → HiArrowDownTray

Popular Heroicons

HiHome / HiOutlineHome - Home
HiBars3 - Menu (hamburger)
HiXMark - Close/X
HiChevronDown - Dropdown arrow
HiArrowLeft - Back arrow
HiMagnifyingGlass - Search

Actions

HiPlus - Add
HiPencil - Edit
HiTrash - Delete
HiArrowDownTray - Download
HiShare - Share
HiDocumentDuplicate - Duplicate

Status

HiCheckCircle - Success
HiExclamationTriangle - Warning
HiInformationCircle - Info
HiXCircle - Error

Content

HiHeart / HiOutlineHeart - Like/favorite
HiStar / HiOutlineStar - Rating
HiBookmark / HiOutlineBookmark - Save
HiChatBubbleLeft - Comment

Migration from v1 to v2

Change the import path and update icon names:

// Before (v1)
import { HiHome, HiOutlineHome } from 'react-icons/hi';

// After (v2)
import { HiHome, HiOutlineHome } from 'react-icons/hi2';

Some icon names have changed in v2:

HiSearch → HiMagnifyingGlass
HiX → HiXMark
HiMenu → HiBars3
HiDownload → HiArrowDownTray

Resources

Heroicons Website

Browse and search all Heroicons

GitHub Repository

View source code and report issues

Search All Icons

Search Heroicons in React Icons preview

All Libraries

Explore other icon libraries

Get Started

Core Concepts

Guides

Icon Libraries

Installation

Import Path

Library Details

Heroicons v1

Heroicons v2

Usage Examples

Basic Usage

Icon Variants

Navigation Examples

Button Examples

Common Use Cases

Styling Heroicons

With Tailwind CSS

Responsive Sizing

Icon Naming Convention

Popular Heroicons

Navigation

Actions

Status

Content

Migration from v1 to v2

Resources

Heroicons Website

GitHub Repository

Search All Icons

All Libraries

Get Started

Core Concepts

Guides

Icon Libraries

​Installation

​Import Path

​Library Details

Heroicons v1

Heroicons v2

​Usage Examples

​Basic Usage

​Icon Variants

​Navigation Examples

​Button Examples

​Common Use Cases

​Styling Heroicons

​With Tailwind CSS

​Responsive Sizing

​Icon Naming Convention

​Popular Heroicons

​Navigation

​Actions

​Status

​Content

​Migration from v1 to v2

​Resources

Heroicons Website

GitHub Repository

Search All Icons

All Libraries

Installation

Import Path

Library Details

Usage Examples

Basic Usage

Icon Variants

Navigation Examples

Button Examples

Common Use Cases

Styling Heroicons

With Tailwind CSS

Responsive Sizing

Icon Naming Convention

Popular Heroicons

Navigation

Actions

Status

Content

Migration from v1 to v2

Resources