Skip to main content
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

npm install react-icons --save

​
Requirements

React Icons requires React 16.3 or higher as a peer dependency.
package.json
{
  "dependencies": {
    "react": "*",
    "react-icons": "^5.6.0"
  }
}
React Icons version 5.6.0 includes native TypeScript support. No need to install @types/react-icons separately.

​
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: 
npm install @react-icons/all-files --save
This package has not had a new release recently. See issue #593 for more information.

​
Usage with Individual Files

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:
1

Import an icon

Try importing an icon from any icon pack:
import { FaReact } from "react-icons/fa";
2

Use the icon component

Use it as a regular React component:
<FaReact />
3

Run your project

Start your development server and check that the icon renders correctly.

​
Next Steps

Quickstart Guide

Learn how to use React Icons with complete examples

Icon Packs

Explore all available icon packs and libraries