Skip to main content
React Icons provides access to over 40,000 SVG icons from 30+ popular icon libraries. Each library is organized under its own import path, allowing you to include only the icons your project needs.

​
Import Pattern

All icons follow a consistent import pattern. Each icon library has a unique prefix and import path: 
import { IconName } from 'react-icons/[library-id]';

​
Common Import Examples

import { FaBeer, FaHeart, FaUser } from 'react-icons/fa6';

function App() {
  return (
    <div>
      <FaBeer />
      <FaHeart />
      <FaUser />
    </div>
  );
}

​
Library Prefixes

Each icon library uses a unique prefix to avoid naming conflicts:

Font Awesome

Prefix: Fa, FaRegImport: react-icons/fa6

Material Design

Prefix: Md, MdOutlineImport: react-icons/md

Heroicons

Prefix: Hi, HiOutline, HiMiniImport: react-icons/hi2

Bootstrap

Prefix: Bs, BsFillImport: react-icons/bs

Feather

Prefix: FiImport: react-icons/fi

Lucide

Prefix: LuImport: react-icons/lu

​
Icon Variants

Many libraries provide multiple variants of the same icon:

​
Filled vs Outline

import { BsHeart, BsFillHeart } from 'react-icons/bs';
import { HiHome, HiOutlineHome } from 'react-icons/hi2';
import { MdStar, MdOutlineStar } from 'react-icons/md';

​
Different Sizes

import { HiHome, HiMiniHome } from 'react-icons/hi2';
// Hi - 24px solid
// HiMini - 20px solid

​
Color Variants

import { AiFillHeart, AiOutlineHeart, AiTwotoneHeart } from 'react-icons/ai';
// AiFill - Filled
// AiOutline - Outline
// AiTwotone - Two-tone (supports color customization)

​
Library Selection Guide

​
Choose Based on Design System

Modern/Minimal

  • Heroicons: Clean, modern icons from Tailwind CSS team
  • Lucide: Community fork of Feather with more icons
  • Feather: Minimalist, consistent design

Material Design

  • Material Design Icons: Official Google icons
  • Matches Material-UI/MUI components
  • 4,300+ icons with multiple variants

Bootstrap Projects

  • Bootstrap Icons: Official Bootstrap icons
  • 2,700+ icons designed for Bootstrap
  • Consistent with Bootstrap components

Comprehensive

  • Font Awesome 6: 2,000+ popular icons
  • Tabler Icons: 5,200+ consistent icons
  • Phosphor Icons: 9,000+ flexible icons

​
Choose Based on Use Case

Branding & Logos 
import { SiReact, SiTypescript, SiGithub } from 'react-icons/si';
// Simple Icons - 3,200+ brand logos
Development Tools 
import { VscCode, VscTerminal, VscGit } from 'react-icons/vsc';
// VS Code Icons - 460+ editor icons
Gaming 
import { GiSword, GiShield, GiPotion } from 'react-icons/gi';
// Game Icons - 4,000+ gaming icons
Weather 
import { WiDaySunny, WiRain, WiSnow } from 'react-icons/wi';
// Weather Icons - 220+ weather conditions

​
Bundle Size Optimization

React Icons uses ES6 imports, so only the icons you import are included in your bundle.
// ✅ Good - Only imports FaBeer
import { FaBeer } from 'react-icons/fa6';

// ❌ Avoid - Can impact tree-shaking in some bundlers
import * as Icons from 'react-icons/fa6';

​
Tree-Shaking Support

React Icons is optimized for tree-shaking. Modern bundlers (Webpack 5+, Vite, Rollup) automatically:
  • Include only imported icons
  • Remove unused code
  • Optimize bundle size

​
Finding Icons

Browse the complete icon library at react-icons.github.io/react-icons Search features:
  • Search by keyword across all libraries
  • Filter by icon library
  • Preview icons before importing
  • Copy import statements

​
Next Steps

Explore Font Awesome

2,000+ popular icons with comprehensive coverage

Explore Material Design

4,300+ icons from Google’s design system

Explore Heroicons

800+ hand-crafted icons from Tailwind CSS

View All Libraries

Complete list of 30+ icon libraries

Build docs developers (and LLMs) love

Get started for freeTalk to us