Icon Libraries Overview

Learn how to import and use icons from 30+ icon libraries in React Icons

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

Font Awesome

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

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

Material Design

import { MdHome, MdSettings, MdSearch } from 'react-icons/md';

function App() {
  return (
    <div>
      <MdHome />
      <MdSettings />
      <MdSearch />
    </div>
  );
}

Heroicons

import { HiHome, HiOutlineHome, HiMiniHome } from 'react-icons/hi2';

function App() {
  return (
    <div>
      <HiHome /> {/* Solid */}
      <HiOutlineHome /> {/* Outline */}
      <HiMiniHome /> {/* Mini/20px */}
    </div>
  );
}

Bootstrap

import { BsHeart, BsFillHeart } from 'react-icons/bs';

function App() {
  return (
    <div>
      <BsHeart /> {/* Outline */}
      <BsFillHeart /> {/* Filled */}
    </div>
  );
}

Library Prefixes

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

Font Awesome

Prefix: Fa, FaReg

Import: react-icons/fa6

Material Design

Prefix: Md, MdOutline

Import: react-icons/md

Heroicons

Prefix: Hi, HiOutline, HiMini

Import: react-icons/hi2

Bootstrap

Prefix: Bs, BsFill

Import: react-icons/bs

Feather

Prefix: Fi

Import: react-icons/fi

Lucide

Prefix: Lu

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