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

# Installation

> Install React Icons in your React project using npm, yarn, or pnpm

React Icons provides 40,000+ SVG icons from 30+ popular icon packs as React components. It uses ES6 imports, allowing you to include only the icons your project needs.

## Choose Your Package Manager

<CodeGroup>
  ```bash npm theme={null}
  npm install react-icons --save
  ```

  ```bash yarn theme={null}
  yarn add react-icons
  ```

  ```bash pnpm theme={null}
  pnpm add react-icons
  ```
</CodeGroup>

## Requirements

React Icons requires React 16.3 or higher as a peer dependency.

```json package.json theme={null}
{
  "dependencies": {
    "react": "*",
    "react-icons": "^5.6.0"
  }
}
```

<Note>
  React Icons version 5.6.0 includes native TypeScript support. No need to install `@types/react-icons` separately.
</Note>

## Alternative Installation (Meteor, Gatsby)

For projects where bundle size optimization is critical, you can use the `@react-icons/all-files` package, which allows importing individual icon files:

<CodeGroup>
  ```bash npm theme={null}
  npm install @react-icons/all-files --save
  ```

  ```bash yarn theme={null}
  yarn add @react-icons/all-files
  ```

  ```bash pnpm theme={null}
  pnpm add @react-icons/all-files
  ```
</CodeGroup>

<Warning>
  This package has not had a new release recently. See [issue #593](https://github.com/react-icons/react-icons/issues/593) for more information.
</Warning>

### Usage with Individual Files

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

function Question() {
  return (
    <h3>
      Lets go for a <FaBeer />?
    </h3>
  );
}
```

## Verify Installation

After installation, verify that React Icons is properly installed:

<Steps>
  <Step title="Import an icon">
    Try importing an icon from any icon pack:

    ```jsx theme={null}
    import { FaReact } from "react-icons/fa";
    ```
  </Step>

  <Step title="Use the icon component">
    Use it as a regular React component:

    ```jsx theme={null}
    <FaReact />
    ```
  </Step>

  <Step title="Run your project">
    Start your development server and check that the icon renders correctly.
  </Step>
</Steps>

## Next Steps

<CardGroup cols={2}>
  <Card title="Quickstart Guide" icon="rocket" href="/quickstart">
    Learn how to use React Icons with complete examples
  </Card>

  <Card title="Icon Packs" icon="grid" href="/icon-libraries/all-libraries">
    Explore all available icon packs and libraries
  </Card>
</CardGroup>