Icon Imports

Learn how to import icons from different icon packs in React Icons

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

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>
  );
}

Material Design

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

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

Ant Design

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

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

Heroicons

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:[e-mail]"><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:

1. Browse the official catalog: Visit react-icons.github.io/react-icons
2. Search by keyword: Use the search function to find icons by name
3. Filter by pack: Select specific icon packs to browse
4. 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;

Next Steps

Icon Context

Configure default props for all icons

Tree-Shaking

Optimize your bundle size