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

# Introduction

> Include popular icons in your React projects with react-icons - a library that brings together 40,000+ SVG icons from 30+ icon packs

# Welcome to React Icons

React Icons is the most popular icon library for React applications, providing 40,000+ SVG icons from popular icon packs using ES6 imports. With automatic tree-shaking support, you only bundle the icons you actually use.

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Get up and running with react-icons in minutes
  </Card>

  <Card title="Browse Icon Libraries" icon="icons" href="/icon-libraries/overview">
    Explore 30+ icon packs including Font Awesome, Material Design, and more
  </Card>

  <Card title="API Reference" icon="code" href="/api/icon-component">
    Learn about the IconContext and customization options
  </Card>

  <Card title="TypeScript Support" icon="brackets-curly" href="/core-concepts/typescript">
    Full TypeScript support with complete type definitions
  </Card>
</CardGroup>

## Why React Icons?

<AccordionGroup>
  <Accordion title="Lightweight & Tree-Shakable" icon="leaf">
    Only bundle the icons you use. ES6 imports enable automatic tree-shaking, ensuring your bundle size stays minimal.
  </Accordion>

  <Accordion title="40,000+ Icons from 30+ Libraries" icon="grid-2">
    Access Font Awesome, Material Design, Heroicons, Bootstrap Icons, Feather, and 25+ other popular icon packs through a single, unified API.
  </Accordion>

  <Accordion title="TypeScript Support" icon="code">
    Written in TypeScript with complete type definitions for all icons and configuration options.
  </Accordion>

  <Accordion title="Fully Customizable" icon="palette">
    Configure size, color, className, and style through props or globally via React Context API.
  </Accordion>

  <Accordion title="Accessibility Built-In" icon="universal-access">
    Support for icon titles and ARIA attributes to ensure your icons are accessible to all users.
  </Accordion>

  <Accordion title="Zero Dependencies" icon="box">
    No external dependencies - just React as a peer dependency.
  </Accordion>
</AccordionGroup>

## Quick Example

Here's how simple it is to use react-icons in your React application:

```jsx theme={null}
import { FaBeer } from "react-icons/fa";
import { MdAlarm } from "react-icons/md";

function MyComponent() {
  return (
    <div>
      <h3>Let's go for a <FaBeer />?</h3>
      <p>Wake up call <MdAlarm size={24} color="red" /></p>
    </div>
  );
}
```

## Key Features

<CardGroup cols={3}>
  <Card title="ES6 Imports" icon="file-import">
    Import only what you need with modern ES6 import syntax
  </Card>

  <Card title="Context API" icon="diagram-nested">
    Configure icons globally with React Context
  </Card>

  <Card title="SVG Based" icon="vector-square">
    Crisp, scalable vector graphics at any size
  </Card>

  <Card title="Style Props" icon="paintbrush">
    Customize with size, color, className, and style props
  </Card>

  <Card title="SSR Compatible" icon="server">
    Works seamlessly with server-side rendering
  </Card>

  <Card title="MIT Licensed" icon="scale-balanced">
    Free and open source under MIT license
  </Card>
</CardGroup>

## Supported Icon Libraries

React Icons includes icons from these popular libraries:

* **Font Awesome 5 & 6** - 2,000+ icons including solid, regular, and brand variants
* **Material Design** - 4,000+ icons from Google's Material Design system
* **Heroicons** - Beautiful hand-crafted icons by the Tailwind CSS team
* **Bootstrap Icons** - 2,700+ icons from the Bootstrap framework
* **Feather** - Simply beautiful open source icons
* **Phosphor Icons** - 9,000+ flexible icon family
* **Tabler Icons** - 5,200+ pixel-perfect icons
* **Lucide** - 1,200+ beautiful & consistent icons
* And 20+ more icon packs...

<Card title="View All Libraries" icon="list" href="/icon-libraries/all-libraries">
  See the complete list of supported icon libraries
</Card>

## Next Steps

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/installation">
    Install react-icons in your project
  </Card>

  <Card title="Quick Start" icon="play" href="/quickstart">
    Build your first component with icons
  </Card>

  <Card title="Icon Imports" icon="file-import" href="/core-concepts/icon-imports">
    Learn about import patterns
  </Card>

  <Card title="Customization" icon="sliders" href="/guides/customizing-icons">
    Customize icons to match your design
  </Card>
</CardGroup>