React Icons

Q: What does IconContext.Provider do, and where should it be placed?

It sets default size, color, className, and style for all descendant icons. It uses React Context, so it must be a Client Component in Next.js App Router. Wrap it around any subtree where you want consistent icon styling.

Q: How do React Icons inherit their size and color by default?

Icons render as inline SVGs using 1em for size and currentColor for color. They inherit font-size and color from their parent element automatically.

Q: What TypeScript type should you use for a React Icons icon passed as a prop?

IconType is equivalent to React.ComponentType.

Q: What is IconBaseProps and what does it extend?

IconBaseProps extends SVGAttributes. It adds size, color, title, and className properties. IconContext is typed as React.Context.

Q: Does the size prop accept strings, numbers, or both?

It accepts both strings (e.g., "1.5rem") and numbers. When using a number, it maps to pixels.

Recipe

Install React Icons to access thousands of icons from popular icon families through a single package. Each icon family uses a two-letter prefix and its own import path for tree-shaking.

npm install react-icons

// app/components/icon-sampler.tsx
"use client";
 
import { FaGithub, FaTwitter } from "react-icons/fa";
import { MdEmail, MdSettings } from "react-icons/md";
import { HiOutlineSearch } from "react-icons/hi";
import { FiMenu } from "react-icons/fi";
 
export function IconSampler() {
  return (
    <div className="flex items-center gap-4 text-2xl">
      <FaGithub />
      <FaTwitter className="text-blue-400" />
      <MdEmail className="text-red-500" />
      <MdSettings className="text-gray-600" />
      <HiOutlineSearch />
      <FiMenu />
    </div>
  );
}

Available Icon Sets

Prefix	Icon Set	Icon Count	Style
Fa	Font Awesome 5	1,600+	Solid and regular
Fa6	Font Awesome 6	2,000+	Solid, regular, brands
Md	Material Design	4,300+	Filled and outlined
Hi	Heroicons v1	450+	Outline and solid
Hi2	Heroicons v2	600+	Outline, solid, mini
Fi	Feather Icons	280+	Stroke-based
Bs	Bootstrap Icons	1,800+	Filled and outline
Ai	Ant Design	780+	Filled and outlined
Si	Simple Icons (brands)	2,500+	Brand logos
Tb	Tabler Icons	4,600+	Stroke-based
Lu	Lucide	1,400+	Stroke-based

Working Example

A social media links bar using icons from multiple families:

// app/components/social-links.tsx
"use client";
 
import { FaGithub, FaLinkedinIn, FaYoutube } from "react-icons/fa";
import { FaXTwitter } from "react-icons/fa6";
import { SiBluesky, SiDiscord } from "react-icons/si";
import { IconContext } from "react-icons";
 
interface SocialLink {
  href: string;
  icon: React.ElementType;
  label: string;
  hoverColor: string;
}
 
const socialLinks: SocialLink[] = [
  { href: "https://github.com/username", icon: FaGithub, label: "GitHub", hoverColor: "hover:text-gray-900" },
  { href: "https://x.com/username", icon: FaXTwitter, label: "X (Twitter)", hoverColor: "hover:text-black" },
  { href: "https://linkedin.com/in/username", icon: FaLinkedinIn, label: "LinkedIn", hoverColor: "hover:text-blue-700" },
  { href: "https://youtube.com/@username", icon: FaYoutube, label: "YouTube", hoverColor: "hover:text-red-600" },
  { href: "https://bsky.app/profile/username", icon: SiBluesky, label: "Bluesky", hoverColor: "hover:text-blue-500" },
  { href: "https://discord.gg/invite", icon: SiDiscord, label: "Discord", hoverColor: "hover:text-indigo-500" },
];
 
export function SocialLinksBar() {
  return (
    <IconContext.Provider value={{ size: "1.5rem" }}>
      <nav aria-label="Social media links" className="flex items-center gap-6">
        {socialLinks.map(({ href, icon: Icon, label, hoverColor }) => (
          <a
            key={label}
            href={href}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={label}
            className={`text-gray-500 transition-colors ${hoverColor}`}
          >
            <Icon />
          </a>
        ))}
      </nav>
    </IconContext.Provider>
  );
}

Deep Dive

How It Works

React Icons bundles many icon libraries into a single npm package but organizes them by import path (react-icons/fa, react-icons/md, etc.).
Each import path corresponds to one icon family, and bundlers tree-shake unused icons within that family.
Icons render as inline SVG elements. They inherit font-size and color from their parent by default (using 1em and currentColor).
IconContext.Provider lets you set default size, color, className, and style for all descendant icons without repeating props.

Variations

Global styling with IconContext:

import { IconContext } from "react-icons";
 
export function IconProvider({ children }: { children: React.ReactNode }) {
  return (
    <IconContext.Provider
      value={{
        size: "1.25rem",
        className: "inline-block align-middle",
        style: { verticalAlign: "middle" },
      }}
    >
      {children}
    </IconContext.Provider>
  );
}

Comparing bundle size impact:

// GOOD: imports only FaGithub (~1KB)
import { FaGithub } from "react-icons/fa";
 
// BAD: still only imports FaGithub, but some older bundler configs
// may not tree-shake this correctly
import { FaGithub } from "react-icons";

Always import from the specific family path (react-icons/fa) rather than the package root.

TypeScript Notes

All icons are typed as React.ComponentType<IconBaseProps>.
IconBaseProps extends SVGAttributes<SVGElement> and adds size, color, title, and className.
IconContext is typed as React.Context<IconBaseProps>.

import type { IconType } from "react-icons";
 
interface NavItem {
  icon: IconType;
  label: string;
  href: string;
}

Gotchas

Importing from react-icons (the root) instead of a sub-path like react-icons/fa can bundle the entire library in some configurations. Always use the family-specific import path.
Different icon families have different default sizes and visual weights. A Font Awesome icon next to a Feather icon may look mismatched without explicit sizing.
IconContext uses React Context, so the provider component must be a Client Component in Next.js App Router.
Some icon families include filled variants only (Font Awesome solid) while others are stroke-based (Feather). Mixing styles can look inconsistent.
The size prop accepts a string (like "1.5rem") or number. When using a number, it maps to pixels.

Alternatives

Approach	Pros	Cons
React Icons	One package for many icon families	Large install size on disk, potential bundle bloat
Lucide React	Better tree-shaking, consistent style	Single icon style only
Direct icon library (@heroicons/react)	Official package, tighter integration	Only one icon family per package
SVG sprites	Smallest possible bundle	Manual setup, no component API

FAQs

How do you import icons from different families in React Icons?

Each family has its own import path using a two-letter prefix:

import { FaGithub } from "react-icons/fa";     // Font Awesome
import { MdEmail } from "react-icons/md";       // Material Design
import { HiOutlineSearch } from "react-icons/hi"; // Heroicons

What does `IconContext.Provider` do, and where should it be placed?

It sets default size, color, className, and style for all descendant icons.
It uses React Context, so it must be a Client Component in Next.js App Router.
Wrap it around any subtree where you want consistent icon styling.

Gotcha: What happens if you import from `react-icons` instead of `react-icons/fa`?

Importing from the package root instead of a sub-path can bundle the entire library in some configurations.
Always use the family-specific path (e.g., react-icons/fa, react-icons/md) for proper tree-shaking.

How do React Icons inherit their size and color by default?

Icons render as inline SVGs using 1em for size and currentColor for color.
They inherit font-size and color from their parent element automatically.

Why might icons from different families look mismatched when placed side by side?

Different families have different default sizes and visual weights.
Font Awesome icons are filled; Feather icons are stroke-based.
Use explicit sizing and consistent families, or normalize with IconContext.

What TypeScript type should you use for a React Icons icon passed as a prop?

import type { IconType } from "react-icons";
 
interface NavItem {
  icon: IconType;
  label: string;
  href: string;
}

IconType is equivalent to React.ComponentType<IconBaseProps>.

What is `IconBaseProps` and what does it extend?

IconBaseProps extends SVGAttributes<SVGElement>.
It adds size, color, title, and className properties.
IconContext is typed as React.Context<IconBaseProps>.

How do you set a global icon size and vertical alignment for all icons?

<IconContext.Provider
  value={{
    size: "1.25rem",
    className: "inline-block align-middle",
    style: { verticalAlign: "middle" },
  }}
>
  {children}
</IconContext.Provider>

Does the `size` prop accept strings, numbers, or both?

It accepts both strings (e.g., "1.5rem") and numbers.
When using a number, it maps to pixels.

Gotcha: Can you mix filled and stroke-based icon families without visual issues?

No. Mixing styles (e.g., Font Awesome solid with Feather stroke) looks inconsistent.
Stick to one icon family for a consistent visual weight, or carefully normalize sizes and strokes.

How many icon families does React Icons include, and which has the most icons?

React Icons includes 11+ icon families in a single package.
Tabler Icons (prefix Tb) has the most with 4,600+ icons.
Material Design (Md) follows with 4,300+ icons.

Recipe

Install React Icons to access thousands of icons from popular icon families through a single package. Each icon family uses a two-letter prefix and its own import path for tree-shaking.

npm install react-icons

// app/components/icon-sampler.tsx
"use client";
 
import { FaGithub, FaTwitter } from "react-icons/fa";
import { MdEmail, MdSettings } from "react-icons/md";
import { HiOutlineSearch } from "react-icons/hi";
import { FiMenu } from "react-icons/fi";
 
export function IconSampler() {
  return (
    <div className="flex items-center gap-4 text-2xl">
      <FaGithub />
      <FaTwitter className="text-blue-400" />
      <MdEmail className="text-red-500" />
      <MdSettings className="text-gray-600" />
      <HiOutlineSearch />
      <FiMenu />
    </div>
  );
}

Available Icon Sets

Prefix	Icon Set	Icon Count	Style
Fa	Font Awesome 5	1,600+	Solid and regular
Fa6	Font Awesome 6	2,000+	Solid, regular, brands
Md	Material Design	4,300+	Filled and outlined
Hi	Heroicons v1	450+	Outline and solid
Hi2	Heroicons v2	600+	Outline, solid, mini
Fi	Feather Icons	280+	Stroke-based
Bs	Bootstrap Icons	1,800+	Filled and outline
Ai	Ant Design	780+	Filled and outlined
Si	Simple Icons (brands)	2,500+	Brand logos
Tb	Tabler Icons	4,600+	Stroke-based
Lu	Lucide	1,400+	Stroke-based

Working Example

A social media links bar using icons from multiple families:

// app/components/social-links.tsx
"use client";
 
import { FaGithub, FaLinkedinIn, FaYoutube } from "react-icons/fa";
import { FaXTwitter } from "react-icons/fa6";
import { SiBluesky, SiDiscord } from "react-icons/si";
import { IconContext } from "react-icons";
 
interface SocialLink {
  href: string;
  icon: React.ElementType;
  label: string;
  hoverColor: string;
}
 
const socialLinks: SocialLink[] = [
  { href: "https://github.com/username", icon: FaGithub, label: "GitHub", hoverColor: "hover:text-gray-900" },
  { href: "https://x.com/username", icon: FaXTwitter, label: "X (Twitter)", hoverColor: "hover:text-black" },
  { href: "https://linkedin.com/in/username", icon: FaLinkedinIn, label: "LinkedIn", hoverColor: "hover:text-blue-700" },
  { href: "https://youtube.com/@username", icon: FaYoutube, label: "YouTube", hoverColor: "hover:text-red-600" },
  { href: "https://bsky.app/profile/username", icon: SiBluesky, label: "Bluesky", hoverColor: "hover:text-blue-500" },
  { href: "https://discord.gg/invite", icon: SiDiscord, label: "Discord", hoverColor: "hover:text-indigo-500" },
];
 
export function SocialLinksBar() {
  return (
    <IconContext.Provider value={{ size: "1.5rem" }}>
      <nav aria-label="Social media links" className="flex items-center gap-6">
        {socialLinks.map(({ href, icon: Icon, label, hoverColor }) => (
          <a
            key={label}
            href={href}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={label}
            className={`text-gray-500 transition-colors ${hoverColor}`}
          >
            <Icon />
          </a>
        ))}
      </nav>
    </IconContext.Provider>
  );
}

Deep Dive

How It Works

React Icons bundles many icon libraries into a single npm package but organizes them by import path (react-icons/fa, react-icons/md, etc.).
Each import path corresponds to one icon family, and bundlers tree-shake unused icons within that family.
Icons render as inline SVG elements. They inherit font-size and color from their parent by default (using 1em and currentColor).
IconContext.Provider lets you set default size, color, className, and style for all descendant icons without repeating props.

Variations

Global styling with IconContext:

import { IconContext } from "react-icons";
 
export function IconProvider({ children }: { children: React.ReactNode }) {
  return (
    <IconContext.Provider
      value={{
        size: "1.25rem",
        className: "inline-block align-middle",
        style: { verticalAlign: "middle" },
      }}
    >
      {children}
    </IconContext.Provider>
  );
}

Comparing bundle size impact:

// GOOD: imports only FaGithub (~1KB)
import { FaGithub } from "react-icons/fa";
 
// BAD: still only imports FaGithub, but some older bundler configs
// may not tree-shake this correctly
import { FaGithub } from "react-icons";

Always import from the specific family path (react-icons/fa) rather than the package root.

TypeScript Notes

All icons are typed as React.ComponentType<IconBaseProps>.
IconBaseProps extends SVGAttributes<SVGElement> and adds size, color, title, and className.
IconContext is typed as React.Context<IconBaseProps>.

import type { IconType } from "react-icons";
 
interface NavItem {
  icon: IconType;
  label: string;
  href: string;
}

Gotchas

Importing from react-icons (the root) instead of a sub-path like react-icons/fa can bundle the entire library in some configurations. Always use the family-specific import path.
Different icon families have different default sizes and visual weights. A Font Awesome icon next to a Feather icon may look mismatched without explicit sizing.
IconContext uses React Context, so the provider component must be a Client Component in Next.js App Router.
Some icon families include filled variants only (Font Awesome solid) while others are stroke-based (Feather). Mixing styles can look inconsistent.
The size prop accepts a string (like "1.5rem") or number. When using a number, it maps to pixels.

Alternatives

Approach	Pros	Cons
React Icons	One package for many icon families	Large install size on disk, potential bundle bloat
Lucide React	Better tree-shaking, consistent style	Single icon style only
Direct icon library (@heroicons/react)	Official package, tighter integration	Only one icon family per package
SVG sprites	Smallest possible bundle	Manual setup, no component API

FAQs

How do you import icons from different families in React Icons?

Each family has its own import path using a two-letter prefix:

import { FaGithub } from "react-icons/fa";     // Font Awesome
import { MdEmail } from "react-icons/md";       // Material Design
import { HiOutlineSearch } from "react-icons/hi"; // Heroicons

What does `IconContext.Provider` do, and where should it be placed?

It sets default size, color, className, and style for all descendant icons.
It uses React Context, so it must be a Client Component in Next.js App Router.
Wrap it around any subtree where you want consistent icon styling.

Gotcha: What happens if you import from `react-icons` instead of `react-icons/fa`?

Importing from the package root instead of a sub-path can bundle the entire library in some configurations.
Always use the family-specific path (e.g., react-icons/fa, react-icons/md) for proper tree-shaking.

How do React Icons inherit their size and color by default?

Icons render as inline SVGs using 1em for size and currentColor for color.
They inherit font-size and color from their parent element automatically.

Why might icons from different families look mismatched when placed side by side?

Different families have different default sizes and visual weights.
Font Awesome icons are filled; Feather icons are stroke-based.
Use explicit sizing and consistent families, or normalize with IconContext.

What TypeScript type should you use for a React Icons icon passed as a prop?

import type { IconType } from "react-icons";
 
interface NavItem {
  icon: IconType;
  label: string;
  href: string;
}

IconType is equivalent to React.ComponentType<IconBaseProps>.

What is `IconBaseProps` and what does it extend?

IconBaseProps extends SVGAttributes<SVGElement>.
It adds size, color, title, and className properties.
IconContext is typed as React.Context<IconBaseProps>.

How do you set a global icon size and vertical alignment for all icons?

<IconContext.Provider
  value={{
    size: "1.25rem",
    className: "inline-block align-middle",
    style: { verticalAlign: "middle" },
  }}
>
  {children}
</IconContext.Provider>

Does the `size` prop accept strings, numbers, or both?

It accepts both strings (e.g., "1.5rem") and numbers.
When using a number, it maps to pixels.

Gotcha: Can you mix filled and stroke-based icon families without visual issues?

No. Mixing styles (e.g., Font Awesome solid with Feather stroke) looks inconsistent.
Stick to one icon family for a consistent visual weight, or carefully normalize sizes and strokes.

How many icon families does React Icons include, and which has the most icons?

React Icons includes 11+ icon families in a single package.
Tabler Icons (prefix Tb) has the most with 4,600+ icons.
Material Design (Md) follows with 4,300+ icons.

React Icons

Search Documentation

React Icons