Icon Context

Configure default properties for all icons using React Context API

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

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

Dark Theme

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

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

Priority Example

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

Navigation Menu

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.

Next Steps

Icon Imports

Learn about importing icons from different packs

TypeScript

Explore TypeScript types and interfaces