Icon Context

The IconContext allows you to set default properties for all icons within your application or a specific component tree using React’s Context API.

Overview

Instead of passing the same props to every icon component, you can use IconContext.Provider to set defaults that apply to all icons within its scope.

Basic Usage

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

function App() {
  return (
    <IconContext.Provider value={{ color: 'blue', size: '2em' }}>
      <div>
        <FaHome /> {/* Inherits blue color and 2em size */}
        <FaUser /> {/* Inherits blue color and 2em size */}
        <FaCog />  {/* Inherits blue color and 2em size */}
      </div>
    </IconContext.Provider>
  );
}

IconContext Interface

The IconContext accepts the following properties:

interface IconContext {
  color?: string;
  size?: string;
  className?: string;
  style?: React.CSSProperties;
  attr?: React.SVGAttributes<SVGElement>;
}

Property Reference

Property	Type	Default	Description
`color`	`string`	`undefined` (inherits from CSS)	Sets the icon color. Can be any valid CSS color value
`size`	`string`	`'1em'`	Sets both width and height of the icon
`className`	`string`	`undefined`	CSS class name(s) to apply to all icons
`style`	`React.CSSProperties`	`undefined`	Inline styles to apply to all icons
`attr`	`React.SVGAttributes<SVGElement>`	`undefined`	Additional SVG attributes for all icons

The default size of 1em means icons scale with the font size of their parent element.

Configuration Examples

Global Icon Styling

Set consistent styling across your entire application:

import { IconContext } from 'react-icons';
import { FaBeer, FaCoffee, FaWineGlass } from 'react-icons/fa';

function App() {
  return (
    <IconContext.Provider value={{ color: '#4A5568', size: '1.5em' }}>
      <div className="app">
        <Navigation />
        <Content />
        <Footer />
      </div>
    </IconContext.Provider>
  );
}

Theme-Based Icons

Light Theme
Dark Theme

import { IconContext } from 'react-icons';
import { FaSun, FaMoon } from 'react-icons/fa';

function LightTheme() {
  return (
    <IconContext.Provider 
      value={{ 
        color: '#2D3748',
        size: '24px',
        className: 'light-theme-icon'
      }}
    >
      <div className="light-theme">
        <FaSun />
        <h1>Light Mode</h1>
        {/* All icons inherit the light theme colors */}
      </div>
    </IconContext.Provider>
  );
}

import { IconContext } from 'react-icons';
import { FaMoon } from 'react-icons/fa';

function DarkTheme() {
  return (
    <IconContext.Provider 
      value={{ 
        color: '#E2E8F0',
        size: '24px',
        className: 'dark-theme-icon'
      }}
    >
      <div className="dark-theme">
        <FaMoon />
        <h1>Dark Mode</h1>
        {/* All icons inherit the dark theme colors */}
      </div>
    </IconContext.Provider>
  );
}

Using className for Global Styling

Combine className with CSS for consistent icon styling:

import { IconContext } from 'react-icons';
import { FaFacebook, FaTwitter, FaInstagram } from 'react-icons/fa';
import './styles.css';

function SocialLinks() {
  return (
    <IconContext.Provider value={{ className: 'social-icon' }}>
      <div className="social-links">
        <a href="#"><FaFacebook /></a>
        <a href="#"><FaTwitter /></a>
        <a href="#"><FaInstagram /></a>
      </div>
    </IconContext.Provider>
  );
}

/* styles.css */
.social-icon {
  vertical-align: middle;
  transition: color 0.3s ease;
  color: #4A5568;
}

.social-icon:hover {
  color: #2B6CB0;
}

Using style for Inline Styling

Apply inline styles to all icons:

import { IconContext } from 'react-icons';
import { FaCheck, FaTimes, FaExclamation } from 'react-icons/fa';

function StatusIcons() {
  return (
    <IconContext.Provider 
      value={{ 
        style: { 
          verticalAlign: 'middle',
          marginRight: '8px'
        } 
      }}
    >
      <div>
        <p><FaCheck /> Success</p>
        <p><FaTimes /> Error</p>
        <p><FaExclamation /> Warning</p>
      </div>
    </IconContext.Provider>
  );
}

Nested Contexts

You can nest multiple IconContext.Provider components. Inner contexts override outer ones:

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

function App() {
  return (
    // Global context: blue icons, size 1.5em
    <IconContext.Provider value={{ color: 'blue', size: '1.5em' }}>
      <div>
        <FaHome /> {/* Blue, 1.5em */}
        <FaUser /> {/* Blue, 1.5em */}
        
        {/* Nested context: red icons, size 2em */}
        <IconContext.Provider value={{ color: 'red', size: '2em' }}>
          <div className="alerts">
            <FaBell /> {/* Red, 2em - overrides parent */}
            <FaCog /> {/* Red, 2em - overrides parent */}
          </div>
        </IconContext.Provider>
      </div>
    </IconContext.Provider>
  );
}

Override Context Props

Props passed directly to icon components override context values:

import { IconContext } from 'react-icons';
import { FaHeart } from 'react-icons/fa';

function LikeButton() {
  return (
    <IconContext.Provider value={{ color: 'gray', size: '24px' }}>
      <div>
        {/* Uses context: gray, 24px */}
        <FaHeart />
        
        {/* Overrides color: red, 24px */}
        <FaHeart color="red" />
        
        {/* Overrides both: red, 32px */}
        <FaHeart color="red" size="32px" />
      </div>
    </IconContext.Provider>
  );
}

Priority Order

When multiple sources define the same property, React Icons applies them in this order (highest priority first):

Direct props - Props passed directly to the icon component
Nested context - The closest IconContext.Provider in the component tree
Parent context - Outer IconContext.Provider components
Default values - Library defaults (size: '1em', color: currentColor)

import { IconContext } from 'react-icons';
import { FaStar } from 'react-icons/fa';

function PriorityDemo() {
  return (
    // Priority 3: Parent context
    <IconContext.Provider value={{ color: 'blue', size: '16px' }}>
      <div>
        {/* Priority 2: Nested context */}
        <IconContext.Provider value={{ color: 'red' }}>
          <div>
            {/* Result: green (priority 1), 16px (priority 3) */}
            <FaStar color="green" />
            
            {/* Result: red (priority 2), 24px (priority 1) */}
            <FaStar size="24px" />
            
            {/* Result: red (priority 2), 16px (priority 3) */}
            <FaStar />
          </div>
        </IconContext.Provider>
      </div>
    </IconContext.Provider>
  );
}

Real-World Examples

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

function Navigation({ isActive }) {
  return (
    <IconContext.Provider 
      value={{ 
        size: '20px',
        style: { marginRight: '12px', verticalAlign: 'middle' }
      }}
    >
      <nav className="sidebar">
        <a href="/" className={isActive === 'home' ? 'active' : ''}>
          <FaHome /> Home
        </a>
        <a href="/profile" className={isActive === 'profile' ? 'active' : ''}>
          <FaUser /> Profile
        </a>
        <a href="/settings" className={isActive === 'settings' ? 'active' : ''}>
          <FaCog /> Settings
        </a>
        <a href="/logout">
          <FaSignOutAlt /> Logout
        </a>
      </nav>
    </IconContext.Provider>
  );
}

Button Components

import { IconContext } from 'react-icons';
import { FaCheck, FaTimes, FaSpinner } from 'react-icons/fa';

function Button({ variant, loading, children, ...props }) {
  const iconConfig = {
    primary: { color: 'white', size: '16px' },
    secondary: { color: '#4A5568', size: '16px' },
    danger: { color: 'white', size: '16px' },
  };

  return (
    <IconContext.Provider value={iconConfig[variant]}>
      <button className={`btn btn-${variant}`} {...props}>
        {loading && <FaSpinner className="spinner" />}
        {children}
      </button>
    </IconContext.Provider>
  );
}

// Usage
<Button variant="primary">
  <FaCheck /> Save
</Button>
<Button variant="danger">
  <FaTimes /> Delete
</Button>

Card Components

import { IconContext } from 'react-icons';
import { FaInfoCircle, FaCheckCircle, FaExclamationTriangle } from 'react-icons/fa';

function Alert({ type, message }) {
  const configs = {
    info: { color: '#3182CE', icon: FaInfoCircle },
    success: { color: '#38A169', icon: FaCheckCircle },
    warning: { color: '#D69E2E', icon: FaExclamationTriangle },
  };

  const config = configs[type];
  const Icon = config.icon;

  return (
    <IconContext.Provider value={{ size: '24px', color: config.color }}>
      <div className={`alert alert-${type}`}>
        <Icon />
        <span>{message}</span>
      </div>
    </IconContext.Provider>
  );
}

Advanced: Using attr for SVG Attributes

The attr property allows you to pass custom SVG attributes to all icons:

import { IconContext } from 'react-icons';
import { FaStar } from 'react-icons/fa';

function AccessibleIcons() {
  return (
    <IconContext.Provider 
      value={{ 
        attr: { 
          'aria-hidden': 'true',
          'focusable': 'false'
        }
      }}
    >
      <div>
        <FaStar />
        {/* Renders: <svg aria-hidden="true" focusable="false" ...> */}
      </div>
    </IconContext.Provider>
  );
}

TypeScript Support

The IconContext is fully typed:

import { IconContext } from 'react-icons';
import type { IconContext as IconContextType } from 'react-icons';
import { FaHome } from 'react-icons/fa';

const iconConfig: IconContextType = {
  color: '#4A5568',
  size: '24px',
  className: 'custom-icon',
  style: { marginRight: '8px' },
  attr: { 'aria-hidden': 'true' },
};

function App() {
  return (
    <IconContext.Provider value={iconConfig}>
      <FaHome />
    </IconContext.Provider>
  );
}

See the TypeScript guide for complete type definitions and advanced TypeScript usage.

Best Practices

Use Context for Consistent Styling

// Good: Use context for consistent styling
<IconContext.Provider value={{ size: '20px', className: 'nav-icon' }}>
  <Navigation />
</IconContext.Provider>

// Avoid: Repeating props on every icon
<Navigation>
  <FaHome size="20px" className="nav-icon" />
  <FaUser size="20px" className="nav-icon" />
  <FaCog size="20px" className="nav-icon" />
</Navigation>

Scope Contexts Appropriately

// Good: Scope contexts to specific components
function Header() {
  return (
    <IconContext.Provider value={{ color: 'white', size: '24px' }}>
      <header>{/* Header icons */}</header>
    </IconContext.Provider>
  );
}

function Sidebar() {
  return (
    <IconContext.Provider value={{ color: 'gray', size: '20px' }}>
      <aside>{/* Sidebar icons */}</aside>
    </IconContext.Provider>
  );
}

// Avoid: Single global context with complex overrides

Use className for CSS-Based Styling

// Good: Use className for dynamic styles
<IconContext.Provider value={{ className: 'app-icon' }}>
  {/* Style via CSS */}
</IconContext.Provider>

// Avoid: Complex inline styles in context
<IconContext.Provider value={{ 
  style: { 
    /* Many inline styles */
  } 
}}>

Requirements

The IconContext requires React 16.3 or higher because it uses the React Context API.

Get Started

Core Concepts

Guides

Icon Libraries

Overview

Basic Usage

IconContext Interface

Property Reference

Configuration Examples

Global Icon Styling

Theme-Based Icons

Using className for Global Styling

Using style for Inline Styling

Nested Contexts

Override Context Props

Priority Order

Real-World Examples

Navigation Menu

Button Components

Card Components

Advanced: Using attr for SVG Attributes

TypeScript Support

Best Practices

Use Context for Consistent Styling

Scope Contexts Appropriately

Use className for CSS-Based Styling

Requirements

Next Steps

Icon Imports

TypeScript

Get Started

Core Concepts

Guides

Icon Libraries

​Overview

​Basic Usage

​IconContext Interface

​Property Reference

​Configuration Examples

​Global Icon Styling

​Theme-Based Icons

​Using className for Global Styling

​Using style for Inline Styling

​Nested Contexts

​Override Context Props

​Priority Order

​Real-World Examples

​Navigation Menu

​Button Components

​Card Components

​Advanced: Using attr for SVG Attributes

​TypeScript Support

​Best Practices

​Use Context for Consistent Styling

​Scope Contexts Appropriately

​Use className for CSS-Based Styling

​Requirements

​Next Steps

Icon Imports

TypeScript

Overview

Basic Usage

IconContext Interface

Property Reference

Configuration Examples

Global Icon Styling

Theme-Based Icons

Using className for Global Styling

Using style for Inline Styling

Nested Contexts

Override Context Props

Priority Order

Real-World Examples

Navigation Menu

Button Components

Card Components

Advanced: Using attr for SVG Attributes

TypeScript Support

Best Practices

Use Context for Consistent Styling

Scope Contexts Appropriately

Use className for CSS-Based Styling

Requirements

Next Steps