Quick Start

Get started with React Icons in minutes

Quick Start Guide

Get React Icons up and running in your project with this step-by-step guide.

Prerequisites

• React 16.3 or higher
• npm, yarn, or pnpm

1. Install React Icons

   Install the package using your preferred package manager:

   npm

   npm install react-icons
   
2. Import and use an icon

   Import icons from their respective packs and use them as React components:

   App.jsx

   import { FaBeer } from "react-icons/fa";
   
   function App() {
     return (
       <div>
         <h3>Lets go for a <FaBeer />?</h3>
       </div>
     );
   }
   
   export default App;
   

   Icons are imported from sub-packages like /fa (Font Awesome), /md (Material Design), /hi2 (Heroicons 2), etc.

3. Customize your icons

   Icons accept props like size, color, className, and all standard SVG attributes:

   import { FaBeer } from "react-icons/fa";
   import { MdAlarm } from "react-icons/md";
   
   function App() {
     return (
       <div>
         {/* Size as number (pixels) */}
         <FaBeer size={24} />
         
         {/* Size as string */}
         <FaBeer size="2em" />
         
         {/* Color */}
         <MdAlarm color="red" />
         
         {/* Multiple props */}
         <FaBeer 
           size={32} 
           color="#61DAFB" 
           className="my-icon"
           style={{ marginRight: '10px' }}
         />
       </div>
     );
   }
   

Complete Example

Here’s a complete working example using multiple icon libraries:

App.jsx

import React from "react";
import { FaBeer, FaCoffee, FaHeart } from "react-icons/fa";
import { MdHome, MdSettings } from "react-icons/md";
import { HiOutlineMail } from "react-icons/hi2";

function App() {
  return (
    <div className="app">
      <header>
        <h1>
          <MdHome size={32} /> Welcome to My App
        </h1>
      </header>

      <nav>
        <button>
          <FaCoffee /> Menu
        </button>
        <button>
          <MdSettings /> Settings
        </button>
        <button>
          <HiOutlineMail /> Contact
        </button>
      </nav>

      <main>
        <p>
          Made with <FaHeart color="red" /> by our team
        </p>
        <p>
          Grab a <FaBeer size={24} color="#F7931E" /> with us!
        </p>
      </main>
    </div>
  );
}

export default App;

Icon Props Reference

All icons support these props:

Prop	Type	Default	Description
size	string | number	"1em"	Icon size (e.g., 24, "2em", "32px")
color	string	undefined	Icon color (any valid CSS color)
className	string	undefined	CSS class name
style	CSSProperties	undefined	Inline styles object
title	string	undefined	Accessible title for screen readers

Plus all standard SVG attributes: onClick, onMouseEnter, aria-label, etc.

Using IconContext for Global Styling

Configure icons globally using IconContext.Provider:

App.jsx

import { IconContext } from "react-icons";
import { FaBeer, FaCoffee } from "react-icons/fa";

function App() {
  return (
    <IconContext.Provider value={{ color: "blue", size: "2em" }}>
      <div>
        <FaBeer />   {/* Blue and 2em */}
        <FaCoffee /> {/* Blue and 2em */}
      </div>
    </IconContext.Provider>
  );
}

Individual icon props override the context values.

Import Patterns

React Icons organizes icons by library with predictable import patterns:

Library	Prefix	Import Example
Font Awesome	Fa	import { FaBeer } from "react-icons/fa"
Font Awesome 6	Fa	import { FaBeer } from "react-icons/fa6"
Material Design	Md	import { MdHome } from "react-icons/md"
Heroicons 2	Hi	import { HiHome } from "react-icons/hi2"
Lucide	Lu	import { LuHome } from "react-icons/lu"
Bootstrap Icons	Bs	import { BsHouse } from "react-icons/bs"
Feather	Fi	import { FiHome } from "react-icons/fi"

See all available libraries for the complete list.

Common Use Cases

Icon Buttons

import { FaTrash, FaEdit } from "react-icons/fa";

<button onClick={handleDelete}>
  <FaTrash /> Delete
</button>

<button aria-label="Edit" onClick={handleEdit}>
  <FaEdit />
</button>

Navigation Icons

import { FaHome, FaUser, FaCog } from "react-icons/fa";

<nav>
  <a href="/"><FaHome /> Home</a>
  <a href="/profile"><FaUser /> Profile</a>
  <a href="/settings"><FaCog /> Settings</a>
</nav>

Status Indicators

import { FaCheckCircle, FaTimesCircle } from "react-icons/fa";

{status === "success" ? (
  <FaCheckCircle color="green" />
) : (
  <FaTimesCircle color="red" />
)}

Loading Spinners

import { FaSpinner } from "react-icons/fa";

<FaSpinner className="animate-spin" />

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Next Steps

Core Concepts

Learn about import patterns and icon organization

Customization

Discover all the ways to customize icons

Browse Icons

Explore 40,000+ icons from 30+ libraries

API Reference

View complete API documentation