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

# Icon Libraries Overview

> Learn how to import and use icons from 30+ icon libraries in React Icons

React Icons provides access to over 40,000 SVG icons from 30+ popular icon libraries. Each library is organized under its own import path, allowing you to include only the icons your project needs.

## Import Pattern

All icons follow a consistent import pattern. Each icon library has a unique prefix and import path:

```jsx theme={null}
import { IconName } from 'react-icons/[library-id]';
```

### Common Import Examples

<Tabs>
  <Tab title="Font Awesome">
    ```jsx theme={null}
    import { FaBeer, FaHeart, FaUser } from 'react-icons/fa6';

    function App() {
      return (
        <div>
          <FaBeer />
          <FaHeart />
          <FaUser />
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Material Design">
    ```jsx theme={null}
    import { MdHome, MdSettings, MdSearch } from 'react-icons/md';

    function App() {
      return (
        <div>
          <MdHome />
          <MdSettings />
          <MdSearch />
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Heroicons">
    ```jsx theme={null}
    import { HiHome, HiOutlineHome, HiMiniHome } from 'react-icons/hi2';

    function App() {
      return (
        <div>
          <HiHome /> {/* Solid */}
          <HiOutlineHome /> {/* Outline */}
          <HiMiniHome /> {/* Mini/20px */}
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Bootstrap">
    ```jsx theme={null}
    import { BsHeart, BsFillHeart } from 'react-icons/bs';

    function App() {
      return (
        <div>
          <BsHeart /> {/* Outline */}
          <BsFillHeart /> {/* Filled */}
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

## Library Prefixes

Each icon library uses a unique prefix to avoid naming conflicts:

<CardGroup cols={3}>
  <Card title="Font Awesome" icon="font-awesome">
    **Prefix:** `Fa`, `FaReg`

    **Import:** `react-icons/fa6`
  </Card>

  <Card title="Material Design" icon="material-symbols">
    **Prefix:** `Md`, `MdOutline`

    **Import:** `react-icons/md`
  </Card>

  <Card title="Heroicons" icon="sparkles">
    **Prefix:** `Hi`, `HiOutline`, `HiMini`

    **Import:** `react-icons/hi2`
  </Card>

  <Card title="Bootstrap" icon="bootstrap">
    **Prefix:** `Bs`, `BsFill`

    **Import:** `react-icons/bs`
  </Card>

  <Card title="Feather" icon="feather">
    **Prefix:** `Fi`

    **Import:** `react-icons/fi`
  </Card>

  <Card title="Lucide" icon="wand-magic-sparkles">
    **Prefix:** `Lu`

    **Import:** `react-icons/lu`
  </Card>
</CardGroup>

## Icon Variants

Many libraries provide multiple variants of the same icon:

### Filled vs Outline

```jsx theme={null}
import { BsHeart, BsFillHeart } from 'react-icons/bs';
import { HiHome, HiOutlineHome } from 'react-icons/hi2';
import { MdStar, MdOutlineStar } from 'react-icons/md';
```

### Different Sizes

```jsx theme={null}
import { HiHome, HiMiniHome } from 'react-icons/hi2';
// Hi - 24px solid
// HiMini - 20px solid
```

### Color Variants

```jsx theme={null}
import { AiFillHeart, AiOutlineHeart, AiTwotoneHeart } from 'react-icons/ai';
// AiFill - Filled
// AiOutline - Outline
// AiTwotone - Two-tone (supports color customization)
```

## Library Selection Guide

### Choose Based on Design System

<CardGroup cols={2}>
  <Card title="Modern/Minimal" icon="sparkles">
    * **Heroicons**: Clean, modern icons from Tailwind CSS team
    * **Lucide**: Community fork of Feather with more icons
    * **Feather**: Minimalist, consistent design
  </Card>

  <Card title="Material Design" icon="material-symbols">
    * **Material Design Icons**: Official Google icons
    * Matches Material-UI/MUI components
    * 4,300+ icons with multiple variants
  </Card>

  <Card title="Bootstrap Projects" icon="bootstrap">
    * **Bootstrap Icons**: Official Bootstrap icons
    * 2,700+ icons designed for Bootstrap
    * Consistent with Bootstrap components
  </Card>

  <Card title="Comprehensive" icon="layer-group">
    * **Font Awesome 6**: 2,000+ popular icons
    * **Tabler Icons**: 5,200+ consistent icons
    * **Phosphor Icons**: 9,000+ flexible icons
  </Card>
</CardGroup>

### Choose Based on Use Case

**Branding & Logos**

```jsx theme={null}
import { SiReact, SiTypescript, SiGithub } from 'react-icons/si';
// Simple Icons - 3,200+ brand logos
```

**Development Tools**

```jsx theme={null}
import { VscCode, VscTerminal, VscGit } from 'react-icons/vsc';
// VS Code Icons - 460+ editor icons
```

**Gaming**

```jsx theme={null}
import { GiSword, GiShield, GiPotion } from 'react-icons/gi';
// Game Icons - 4,000+ gaming icons
```

**Weather**

```jsx theme={null}
import { WiDaySunny, WiRain, WiSnow } from 'react-icons/wi';
// Weather Icons - 220+ weather conditions
```

## Bundle Size Optimization

<Note>
  React Icons uses ES6 imports, so only the icons you import are included in your bundle.
</Note>

```jsx theme={null}
// ✅ Good - Only imports FaBeer
import { FaBeer } from 'react-icons/fa6';

// ❌ Avoid - Can impact tree-shaking in some bundlers
import * as Icons from 'react-icons/fa6';
```

### Tree-Shaking Support

React Icons is optimized for tree-shaking. Modern bundlers (Webpack 5+, Vite, Rollup) automatically:

* Include only imported icons
* Remove unused code
* Optimize bundle size

## Finding Icons

Browse the complete icon library at [react-icons.github.io/react-icons](https://react-icons.github.io/react-icons/)

Search features:

* Search by keyword across all libraries
* Filter by icon library
* Preview icons before importing
* Copy import statements

## Next Steps

<CardGroup cols={2}>
  <Card title="Explore Font Awesome" href="/icon-libraries/font-awesome">
    2,000+ popular icons with comprehensive coverage
  </Card>

  <Card title="Explore Material Design" href="/icon-libraries/material-design">
    4,300+ icons from Google's design system
  </Card>

  <Card title="Explore Heroicons" href="/icon-libraries/heroicons">
    800+ hand-crafted icons from Tailwind CSS
  </Card>

  <Card title="View All Libraries" href="/icon-libraries/all-libraries">
    Complete list of 30+ icon libraries
  </Card>
</CardGroup>