Icon Imports

React Icons provides a consistent import pattern across 30+ icon packs, making it easy to use icons from different libraries in your React application.

Basic Import Pattern

React Icons uses ES6 named imports with a clear, predictable pattern:

import { IconName } from 'react-icons/pack';

Where:

IconName is the specific icon component (e.g., FaBeer, MdHome, AiFillStar)
pack is the two-letter abbreviation for the icon pack (e.g., fa, md, ai)

Import Examples by Pack

Font Awesome
Material Design
Ant Design
Heroicons

import { FaBeer, FaHome, FaUser } from 'react-icons/fa';
import { FaHouse, FaCircleUser } from 'react-icons/fa6';

function App() {
  return (
    <div>
      <FaBeer />
      <FaHome />
      <FaUser />
      <FaHouse /> {/* Font Awesome 6 */}
      <FaCircleUser /> {/* Font Awesome 6 */}
    </div>
  );
}

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

function Navigation() {
  return (
    <nav>
      <MdHome size={24} />
      <MdSettings size={24} />
      <MdSearch size={24} />
    </nav>
  );
}

import { AiFillStar, AiOutlineStar, AiFillHeart } from 'react-icons/ai';

function Rating({ filled }) {
  return filled ? <AiFillStar /> : <AiOutlineStar />;
}

import { HiHome, HiUser } from 'react-icons/hi';
import { HiOutlineHome, HiOutlineUser } from 'react-icons/hi2';

function Menu() {
  return (
    <div>
      <HiHome /> {/* Heroicons v1 solid */}
      <HiOutlineHome /> {/* Heroicons v2 outline */}
    </div>
  );
}

Available Icon Packs

React Icons includes 40,000+ icons from 30+ popular icon packs. Here are the most commonly used:

Pack ID	Library	Count	Import Example
`ai`	Ant Design Icons	831	`import { AiFillStar } from 'react-icons/ai'`
`bi`	Bootstrap Icons	2,716	`import { BiHome } from 'react-icons/bi'`
`bs`	BoxIcons	1,634	`import { BsHeart } from 'react-icons/bs'`
`ci`	Circum Icons	288	`import { CiUser } from 'react-icons/ci'`
`fa`	Font Awesome 5	1,612	`import { FaBeer } from 'react-icons/fa'`
`fa6`	Font Awesome 6	2,045	`import { FaHouse } from 'react-icons/fa6'`
`fc`	Flat Color Icons	329	`import { FcHome } from 'react-icons/fc'`
`fi`	Feather	287	`import { FiHome } from 'react-icons/fi'`
`gi`	Game Icons	4,040	`import { GiSword } from 'react-icons/gi'`
`go`	Github Octicons	264	`import { GoRepo } from 'react-icons/go'`
`gr`	Grommet-Icons	635	`import { GrHome } from 'react-icons/gr'`
`hi`	Heroicons	460	`import { HiHome } from 'react-icons/hi'`
`hi2`	Heroicons 2	888	`import { HiOutlineHome } from 'react-icons/hi2'`
`im`	IcoMoon Free	491	`import { ImHome } from 'react-icons/im'`
`io`	Ionicons 4	696	`import { IoMdHome } from 'react-icons/io'`
`io5`	Ionicons 5	1,332	`import { IoHome } from 'react-icons/io5'`
`lu`	Lucide	1,215	`import { LuHome } from 'react-icons/lu'`
`md`	Material Design	4,341	`import { MdHome } from 'react-icons/md'`
`pi`	Phosphor Icons	9,072	`import { PiHouse } from 'react-icons/pi'`
`ri`	Remix Icon	2,860	`import { RiHome2Line } from 'react-icons/ri'`
`rx`	Radix Icons	318	`import { RxHome } from 'react-icons/rx'`
`si`	Simple Icons	3,209	`import { SiReact } from 'react-icons/si'`
`sl`	Simple Line Icons	189	`import { SlHome } from 'react-icons/sl'`
`tb`	Tabler Icons	5,237	`import { TbHome } from 'react-icons/tb'`
`ti`	Themify Icons	352	`import { TiHome } from 'react-icons/ti'`
`tfi`	Themify Icons	352	`import { TfiHome } from 'react-icons/tfi'`
`vsc`	VS Code Icons	461	`import { VscHome } from 'react-icons/vsc'`
`wi`	Weather Icons	219	`import { WiDaySunny } from 'react-icons/wi'`

View the complete icon catalog at react-icons.github.io/react-icons to search and browse all available icons.

Multiple Imports

You can import multiple icons from the same pack in a single statement:

import { 
  FaHome, 
  FaUser, 
  FaCog, 
  FaSignOutAlt,
  FaBell 
} from 'react-icons/fa';

Mixing Icon Packs

You can use icons from different packs in the same component:

import { FaGithub } from 'react-icons/fa';
import { MdEmail } from 'react-icons/md';
import { AiFillLinkedin } from 'react-icons/ai';

function ContactLinks() {
  return (
    <div className="social-links">
      <a href="https://github.com"><FaGithub size={24} /></a>
      <a href="mailto:[email protected]"><MdEmail size={24} /></a>
      <a href="https://linkedin.com"><AiFillLinkedin size={24} /></a>
    </div>
  );
}

Import from Specific Files (Alternative)

For projects with specific build requirements, you can import from individual icon files using the @react-icons/all-files package:

import { FaBeer } from '@react-icons/all-files/fa/FaBeer';
import { MdHome } from '@react-icons/all-files/md/MdHome';

This approach is not recommended for most projects. It has slower installation times and is only necessary for specific build systems like Meteor or Gatsby with older configurations.

Icon Naming Conventions

Icon names follow predictable patterns based on their source library:

Font Awesome

Solid icons: FaIconName (e.g., FaUser, FaHome)
Regular/Outline: Often same name or with suffix
Font Awesome 6: Fa prefix from react-icons/fa6

Material Design

All icons: MdIconName (e.g., MdHome, MdSettings)
Outlined/Filled variants use different names (e.g., MdFavorite vs MdFavoriteBorder)

Ant Design

Filled: AiFillIconName (e.g., AiFillStar)
Outlined: AiOutlineIconName (e.g., AiOutlineStar)
Two-tone: AiTwotoneIconName

Heroicons v2

Solid: HiIconName (e.g., HiHome)
Outline: HiOutlineIconName (e.g., HiOutlineHome)
Mini: HiMiniIconName

Ionicons 5

Default: IoIconName (e.g., IoHome)
Outline: IoIconNameOutline (e.g., IoHomeOutline)
Sharp: IoIconNameSharp (e.g., IoHomeSharp)

Finding Icons

To find the exact icon name you need:

Browse the official catalog: Visit react-icons.github.io/react-icons
Search by keyword: Use the search function to find icons by name
Filter by pack: Select specific icon packs to browse
Copy import statement: Click any icon to copy its import statement

Best Practices

Performance Tip: Import only the icons you need. React Icons uses ES6 imports with tree-shaking to ensure only imported icons are included in your bundle.

Organize Imports by Pack

// Good: Group imports by pack
import { FaGithub, FaTwitter, FaLinkedin } from 'react-icons/fa';
import { MdEmail, MdPhone } from 'react-icons/md';

// Avoid: Scattered imports
import { FaGithub } from 'react-icons/fa';
import { MdEmail } from 'react-icons/md';
import { FaTwitter } from 'react-icons/fa';

Create Icon Component Wrappers

For consistent styling across your app:

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

const Icon = ({ name, ...props }) => {
  const icons = {
    home: FaHome,
    user: FaUser,
    settings: FaCog,
  };
  
  const IconComponent = icons[name];
  return <IconComponent {...props} />;
};

// Usage
<Icon name="home" size={24} color="blue" />

Use Semantic Names

// Good: Descriptive variable names
const HomeIcon = FaHome;
const UserProfileIcon = FaUser;
const SettingsIcon = FaCog;

<HomeIcon />
<UserProfileIcon />
<SettingsIcon />

TypeScript Support

All icons are fully typed. See the TypeScript guide for detailed type information.

import { FaBeer } from 'react-icons/fa';
import type { IconType } from 'react-icons';

const BeerIcon: IconType = FaBeer;

Get Started

Core Concepts

Guides

Icon Libraries

Basic Import Pattern

Import Examples by Pack

Available Icon Packs

Multiple Imports

Mixing Icon Packs

Import from Specific Files (Alternative)

Icon Naming Conventions

Font Awesome

Material Design

Ant Design

Heroicons v2

Ionicons 5

Finding Icons

Best Practices

Organize Imports by Pack

Create Icon Component Wrappers

Use Semantic Names

TypeScript Support

Next Steps

Icon Context

Tree-Shaking

Build docs developers (and LLMs) love

Get Started

Core Concepts

Guides

Icon Libraries

​Basic Import Pattern

​Import Examples by Pack

​Available Icon Packs

​Multiple Imports

​Mixing Icon Packs

​Import from Specific Files (Alternative)

​Icon Naming Conventions

​Font Awesome

​Material Design

​Ant Design

​Heroicons v2

​Ionicons 5

​Finding Icons

​Best Practices

​Organize Imports by Pack

​Create Icon Component Wrappers

​Use Semantic Names

​TypeScript Support

​Next Steps

Icon Context

Tree-Shaking

Build docs developers (and LLMs) love

Basic Import Pattern

Import Examples by Pack

Available Icon Packs

Multiple Imports

Mixing Icon Packs

Import from Specific Files (Alternative)

Icon Naming Conventions

Font Awesome

Material Design

Ant Design

Heroicons v2

Ionicons 5

Finding Icons

Best Practices

Organize Imports by Pack

Create Icon Component Wrappers

Use Semantic Names

TypeScript Support

Next Steps