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

npm

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

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