> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/react-icons/react-icons/llms.txt
> Use this file to discover all available pages before exploring further.

# Heroicons

> Use 800+ hand-crafted Heroicons from Tailwind Labs in your React application

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:

```bash theme={null}
npm install react-icons
```

## Import Path

React Icons provides both Heroicons v1 and v2:

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

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

<Note>
  Use `hi2` for the latest icons. Heroicons 2 includes new icons and a mini (20px) variant.
</Note>

## Library Details

<CardGroup cols={2}>
  <Card title="Heroicons v1" icon="1">
    **Icon Count:** 460

    **Version:** 1.0.6

    **Import:** `react-icons/hi`

    **Variants:** Solid, Outline
  </Card>

  <Card title="Heroicons v2" icon="2">
    **Icon Count:** 888

    **Version:** 2.1.3

    **Import:** `react-icons/hi2`

    **Variants:** Solid (24px), Outline (24px), Mini (20px)
  </Card>
</CardGroup>

**Project URL:** [github.com/tailwindlabs/heroicons](https://github.com/tailwindlabs/heroicons)

**License:** [MIT License](https://opensource.org/licenses/MIT)

## Usage Examples

### Basic Usage

```jsx theme={null}
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:

<Tabs>
  <Tab title="Solid (24px)">
    ```jsx theme={null}
    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>
      );
    }
    ```

    <Note>
      Default Heroicons use the `Hi` prefix and are 24px solid icons.
    </Note>
  </Tab>

  <Tab title="Outline (24px)">
    ```jsx theme={null}
    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>
      );
    }
    ```

    <Note>
      Outline icons use the `HiOutline` prefix. Perfect for lighter UI elements.
    </Note>
  </Tab>

  <Tab title="Mini (20px)">
    ```jsx theme={null}
    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>
      );
    }
    ```

    <Note>
      Mini icons use the `HiMini` prefix. Available only in Heroicons v2.
    </Note>
  </Tab>
</Tabs>

### Navigation Examples

```jsx theme={null}
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

```jsx theme={null}
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

<Tabs>
  <Tab title="Forms & Inputs">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="Alerts & Notifications">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="Cards & Content">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="Dropdowns & Menus">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>
</Tabs>

## Styling Heroicons

### With Tailwind CSS

Heroicons are designed to work perfectly with Tailwind CSS:

```jsx theme={null}
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

```jsx theme={null}
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

### Navigation

* `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:

```jsx theme={null}
// 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

<CardGroup cols={2}>
  <Card title="Heroicons Website" icon="link" href="https://heroicons.com/">
    Browse and search all Heroicons
  </Card>

  <Card title="GitHub Repository" icon="github" href="https://github.com/tailwindlabs/heroicons">
    View source code and report issues
  </Card>

  <Card title="Search All Icons" icon="search" href="https://react-icons.github.io/react-icons/">
    Search Heroicons in React Icons preview
  </Card>

  <Card title="All Libraries" icon="layer-group" href="/icon-libraries/all-libraries">
    Explore other icon libraries
  </Card>
</CardGroup>