Skip to main content

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

Quick Start

Get up and running with react-icons in minutes

Browse Icon Libraries

Explore 30+ icon packs including Font Awesome, Material Design, and more

API Reference

Learn about the IconContext and customization options

TypeScript Support

Full TypeScript support with complete type definitions

​
Why React Icons?

Only bundle the icons you use. ES6 imports enable automatic tree-shaking, ensuring your bundle size stays minimal.
Access Font Awesome, Material Design, Heroicons, Bootstrap Icons, Feather, and 25+ other popular icon packs through a single, unified API.
Written in TypeScript with complete type definitions for all icons and configuration options.
Configure size, color, className, and style through props or globally via React Context API.
Support for icon titles and ARIA attributes to ensure your icons are accessible to all users.
No external dependencies - just React as a peer dependency.

​
Quick Example

Here’s how simple it is to use react-icons in your React application: 
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

ES6 Imports

Import only what you need with modern ES6 import syntax

Context API

Configure icons globally with React Context

SVG Based

Crisp, scalable vector graphics at any size

Style Props

Customize with size, color, className, and style props

SSR Compatible

Works seamlessly with server-side rendering

MIT Licensed

Free and open source under MIT license

​
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…

View All Libraries

See the complete list of supported icon libraries

​
Next Steps

Installation

Install react-icons in your project

Quick Start

Build your first component with icons

Icon Imports

Learn about import patterns

Customization

Customize icons to match your design

Build docs developers (and LLMs) love

Get started for freeTalk to us