# React Icons — Popular Icon Packs as React SVG Components

> A single library that bundles icons from Font Awesome, Material Design, Heroicons, Feather, and dozens of other icon sets as importable React components.

## Install

Save as a script file and run:

# React Icons — Popular Icon Packs as React SVG Components

## Quick Use
```bash
npm install react-icons
```
```jsx
import { FaBeer, FaGithub } from 'react-icons/fa';
import { MdDashboard } from 'react-icons/md';

function App() {
  return (
    <div>
      <FaBeer size={32} color="orange" />
      <FaGithub size={32} />
      <MdDashboard size={32} />
    </div>
  );
}
```

## Introduction
React Icons aggregates icons from over 30 popular icon libraries into a single npm package. Each icon is an individually importable React component that renders an inline SVG, making it tree-shakable so only the icons you actually use end up in your bundle. It eliminates the need to manage multiple icon font or SVG sprite dependencies.

## What React Icons Does
- Provides access to icons from Font Awesome, Material Design, Heroicons, Bootstrap, Feather, Lucide, and more
- Renders each icon as an inline SVG React component
- Supports tree-shaking so unused icons are excluded from the production bundle
- Allows sizing and coloring via props or inherited CSS
- Wraps all icons in a consistent API regardless of the source library

## Architecture Overview
React Icons pre-processes icon sets from their upstream sources into individual ES module exports organized by icon library prefix (fa for Font Awesome, md for Material Design, etc.). Each export is a functional React component that returns an SVG element. An IconContext provider at the application level allows setting default size, color, className, and style that all child icon components inherit. Because each icon is a separate export, bundlers can tree-shake unused icons during the build.

## Installation & Configuration
- Install the package: `npm install react-icons`
- Import icons by library prefix: `import { FaHome } from 'react-icons/fa'`
- Use the IconContext.Provider to set default size, color, or className globally
- Override defaults per-icon with size, color, style, or className props
- Browse the full icon catalog at the react-icons documentation site

## Key Features
- Over 30 icon libraries in one package with a unified import API
- Full tree-shaking support keeps bundle size proportional to icons used
- IconContext provider for global defaults across all icons
- Each icon is a standard React component that accepts SVG attributes
- TypeScript definitions included for all icons and configuration

## Comparison with Similar Tools
- **Lucide React** — a focused single icon set with consistent design; fewer total icons
- **Heroicons** — Tailwind-aligned icon set; covers fewer use cases
- **@iconify/react** — renders icons from a CDN or local bundle; broader catalog via runtime loading
- **Font Awesome React** — official FA package; only covers Font Awesome icons
- **SVG sprite sheets** — manually managed; no component API or tree-shaking

## FAQ
**Q: How does tree-shaking work with React Icons?**
A: Each icon is a named export from a sub-path (e.g., react-icons/fa). Bundlers like webpack and Vite only include the exports you import.

**Q: Can I use icons from multiple icon packs in the same project?**
A: Yes. Import from different sub-paths and they coexist without conflict.

**Q: How do I set a default size for all icons?**
A: Wrap your app in an IconContext.Provider with a value like { size: "24px", color: "currentColor" }.

**Q: Does it support SSR?**
A: Yes. Icons render as inline SVG, which works with server-side rendering in Next.js and Remix.

## Sources
- https://github.com/react-icons/react-icons
- https://react-icons.github.io/react-icons

---
Source: https://tokrepo.com/en/workflows/asset-d56f63e8
Author: Script Depot