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

> Learn how to import icons from different icon packs in React Icons

React Icons provides a consistent import pattern across 30+ icon packs, making it easy to use icons from different libraries in your React application.

## Basic Import Pattern

React Icons uses ES6 named imports with a clear, predictable pattern:

```jsx theme={null}
import { IconName } from 'react-icons/pack';
```

Where:

* `IconName` is the specific icon component (e.g., `FaBeer`, `MdHome`, `AiFillStar`)
* `pack` is the two-letter abbreviation for the icon pack (e.g., `fa`, `md`, `ai`)

## Import Examples by Pack

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

    function App() {
      return (
        <div>
          <FaBeer />
          <FaHome />
          <FaUser />
          <FaHouse /> {/* Font Awesome 6 */}
          <FaCircleUser /> {/* Font Awesome 6 */}
        </div>
      );
    }
    ```
  </Tab>

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

    function Navigation() {
      return (
        <nav>
          <MdHome size={24} />
          <MdSettings size={24} />
          <MdSearch size={24} />
        </nav>
      );
    }
    ```
  </Tab>

  <Tab title="Ant Design">
    ```jsx theme={null}
    import { AiFillStar, AiOutlineStar, AiFillHeart } from 'react-icons/ai';

    function Rating({ filled }) {
      return filled ? <AiFillStar /> : <AiOutlineStar />;
    }
    ```
  </Tab>

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

    function Menu() {
      return (
        <div>
          <HiHome /> {/* Heroicons v1 solid */}
          <HiOutlineHome /> {/* Heroicons v2 outline */}
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

## Available Icon Packs

React Icons includes 40,000+ icons from 30+ popular icon packs. Here are the most commonly used:

| Pack ID | Library           | Count | Import Example                                    |
| ------- | ----------------- | ----- | ------------------------------------------------- |
| `ai`    | Ant Design Icons  | 831   | `import { AiFillStar } from 'react-icons/ai'`     |
| `bi`    | Bootstrap Icons   | 2,716 | `import { BiHome } from 'react-icons/bi'`         |
| `bs`    | BoxIcons          | 1,634 | `import { BsHeart } from 'react-icons/bs'`        |
| `ci`    | Circum Icons      | 288   | `import { CiUser } from 'react-icons/ci'`         |
| `fa`    | Font Awesome 5    | 1,612 | `import { FaBeer } from 'react-icons/fa'`         |
| `fa6`   | Font Awesome 6    | 2,045 | `import { FaHouse } from 'react-icons/fa6'`       |
| `fc`    | Flat Color Icons  | 329   | `import { FcHome } from 'react-icons/fc'`         |
| `fi`    | Feather           | 287   | `import { FiHome } from 'react-icons/fi'`         |
| `gi`    | Game Icons        | 4,040 | `import { GiSword } from 'react-icons/gi'`        |
| `go`    | Github Octicons   | 264   | `import { GoRepo } from 'react-icons/go'`         |
| `gr`    | Grommet-Icons     | 635   | `import { GrHome } from 'react-icons/gr'`         |
| `hi`    | Heroicons         | 460   | `import { HiHome } from 'react-icons/hi'`         |
| `hi2`   | Heroicons 2       | 888   | `import { HiOutlineHome } from 'react-icons/hi2'` |
| `im`    | IcoMoon Free      | 491   | `import { ImHome } from 'react-icons/im'`         |
| `io`    | Ionicons 4        | 696   | `import { IoMdHome } from 'react-icons/io'`       |
| `io5`   | Ionicons 5        | 1,332 | `import { IoHome } from 'react-icons/io5'`        |
| `lu`    | Lucide            | 1,215 | `import { LuHome } from 'react-icons/lu'`         |
| `md`    | Material Design   | 4,341 | `import { MdHome } from 'react-icons/md'`         |
| `pi`    | Phosphor Icons    | 9,072 | `import { PiHouse } from 'react-icons/pi'`        |
| `ri`    | Remix Icon        | 2,860 | `import { RiHome2Line } from 'react-icons/ri'`    |
| `rx`    | Radix Icons       | 318   | `import { RxHome } from 'react-icons/rx'`         |
| `si`    | Simple Icons      | 3,209 | `import { SiReact } from 'react-icons/si'`        |
| `sl`    | Simple Line Icons | 189   | `import { SlHome } from 'react-icons/sl'`         |
| `tb`    | Tabler Icons      | 5,237 | `import { TbHome } from 'react-icons/tb'`         |
| `ti`    | Themify Icons     | 352   | `import { TiHome } from 'react-icons/ti'`         |
| `tfi`   | Themify Icons     | 352   | `import { TfiHome } from 'react-icons/tfi'`       |
| `vsc`   | VS Code Icons     | 461   | `import { VscHome } from 'react-icons/vsc'`       |
| `wi`    | Weather Icons     | 219   | `import { WiDaySunny } from 'react-icons/wi'`     |

<Note>
  View the complete icon catalog at [react-icons.github.io/react-icons](https://react-icons.github.io/react-icons) to search and browse all available icons.
</Note>

## Multiple Imports

You can import multiple icons from the same pack in a single statement:

```jsx theme={null}
import { 
  FaHome, 
  FaUser, 
  FaCog, 
  FaSignOutAlt,
  FaBell 
} from 'react-icons/fa';
```

## Mixing Icon Packs

You can use icons from different packs in the same component:

```jsx theme={null}
import { FaGithub } from 'react-icons/fa';
import { MdEmail } from 'react-icons/md';
import { AiFillLinkedin } from 'react-icons/ai';

function ContactLinks() {
  return (
    <div className="social-links">
      <a href="https://github.com"><FaGithub size={24} /></a>
      <a href="mailto:contact@example.com"><MdEmail size={24} /></a>
      <a href="https://linkedin.com"><AiFillLinkedin size={24} /></a>
    </div>
  );
}
```

## Import from Specific Files (Alternative)

For projects with specific build requirements, you can import from individual icon files using the `@react-icons/all-files` package:

```jsx theme={null}
import { FaBeer } from '@react-icons/all-files/fa/FaBeer';
import { MdHome } from '@react-icons/all-files/md/MdHome';
```

<Warning>
  This approach is **not recommended** for most projects. It has slower installation times and is only necessary for specific build systems like Meteor or Gatsby with older configurations.
</Warning>

## Icon Naming Conventions

Icon names follow predictable patterns based on their source library:

### Font Awesome

* Solid icons: `FaIconName` (e.g., `FaUser`, `FaHome`)
* Regular/Outline: Often same name or with suffix
* Font Awesome 6: `Fa` prefix from `react-icons/fa6`

### Material Design

* All icons: `MdIconName` (e.g., `MdHome`, `MdSettings`)
* Outlined/Filled variants use different names (e.g., `MdFavorite` vs `MdFavoriteBorder`)

### Ant Design

* Filled: `AiFillIconName` (e.g., `AiFillStar`)
* Outlined: `AiOutlineIconName` (e.g., `AiOutlineStar`)
* Two-tone: `AiTwotoneIconName`

### Heroicons v2

* Solid: `HiIconName` (e.g., `HiHome`)
* Outline: `HiOutlineIconName` (e.g., `HiOutlineHome`)
* Mini: `HiMiniIconName`

### Ionicons 5

* Default: `IoIconName` (e.g., `IoHome`)
* Outline: `IoIconNameOutline` (e.g., `IoHomeOutline`)
* Sharp: `IoIconNameSharp` (e.g., `IoHomeSharp`)

## Finding Icons

To find the exact icon name you need:

1. **Browse the official catalog**: Visit [react-icons.github.io/react-icons](https://react-icons.github.io/react-icons)
2. **Search by keyword**: Use the search function to find icons by name
3. **Filter by pack**: Select specific icon packs to browse
4. **Copy import statement**: Click any icon to copy its import statement

## Best Practices

<Info>
  **Performance Tip**: Import only the icons you need. React Icons uses ES6 imports with tree-shaking to ensure only imported icons are included in your bundle.
</Info>

### Organize Imports by Pack

```jsx theme={null}
// Good: Group imports by pack
import { FaGithub, FaTwitter, FaLinkedin } from 'react-icons/fa';
import { MdEmail, MdPhone } from 'react-icons/md';

// Avoid: Scattered imports
import { FaGithub } from 'react-icons/fa';
import { MdEmail } from 'react-icons/md';
import { FaTwitter } from 'react-icons/fa';
```

### Create Icon Component Wrappers

For consistent styling across your app:

```jsx theme={null}
import { FaHome, FaUser, FaCog } from 'react-icons/fa';

const Icon = ({ name, ...props }) => {
  const icons = {
    home: FaHome,
    user: FaUser,
    settings: FaCog,
  };
  
  const IconComponent = icons[name];
  return <IconComponent {...props} />;
};

// Usage
<Icon name="home" size={24} color="blue" />
```

### Use Semantic Names

```jsx theme={null}
// Good: Descriptive variable names
const HomeIcon = FaHome;
const UserProfileIcon = FaUser;
const SettingsIcon = FaCog;

<HomeIcon />
<UserProfileIcon />
<SettingsIcon />
```

## TypeScript Support

All icons are fully typed. See the [TypeScript guide](/core-concepts/typescript) for detailed type information.

```tsx theme={null}
import { FaBeer } from 'react-icons/fa';
import type { IconType } from 'react-icons';

const BeerIcon: IconType = FaBeer;
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Icon Context" icon="sliders" href="/core-concepts/icon-context">
    Configure default props for all icons
  </Card>

  <Card title="Tree-Shaking" icon="tree" href="/core-concepts/tree-shaking">
    Optimize your bundle size
  </Card>
</CardGroup>