IconContext

Global configuration context for React Icons

Overview

The IconContext is a React Context that allows you to configure default props for all icons in a component subtree. This is useful for setting consistent styling, sizing, or other attributes across multiple icons without repeating props on each icon component.

Usage

Basic Example

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

function App() {
  return (
    <IconContext.Provider value={{ color: 'blue', size: '2em' }}>
      <div>
        <FaBeer />
        <FaCoffee />
        <FaPizza />
      </div>
    </IconContext.Provider>
  );
}

All icons within the provider will inherit the color and size values unless overridden by individual icon props.

Nested Contexts

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

function App() {
  return (
    <IconContext.Provider value={{ color: 'gray', size: '1.5em' }}>
      <div>
        {/* These icons use gray color */}
        <FaHome />
        <FaUser />
        
        {/* Nested context overrides parent values */}
        <IconContext.Provider value={{ color: 'red', size: '2em' }}>
          <FaCog /> {/* Red and 2em */}
        </IconContext.Provider>
      </div>
    </IconContext.Provider>
  );
}

Overriding Context Values

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

function App() {
  return (
    <IconContext.Provider value={{ color: 'blue', size: '2em' }}>
      <div>
        {/* Uses context: blue, 2em */}
        <FaHeart />
        
        {/* Overrides context: red, 2em */}
        <FaHeart color="red" />
        
        {/* Overrides both: green, 3em */}
        <FaHeart color="green" size="3em" />
      </div>
    </IconContext.Provider>
  );
}

Configuration Options

The context value accepts an object with the following properties:

color · string

Default color for all icons in the context. Accepts any valid CSS color value (hex, rgb, named colors, etc.).

<IconContext.Provider value={{ color: '#3b82f6' }}>
  <FaIcon /> {/* Blue icon */}
</IconContext.Provider>

size · string

Default size for all icons in the context. Can be any valid CSS size unit (px, em, rem, etc.).

<IconContext.Provider value={{ size: '24px' }}>
  <FaIcon /> {/* 24px icon */}
</IconContext.Provider>

className · string

CSS class name(s) to apply to all icons in the context. These are merged with any className props on individual icons.

<IconContext.Provider value={{ className: 'my-icon' }}>
  <FaIcon /> {/* Has 'my-icon' class */}
  <FaIcon className="custom" /> {/* Has 'my-icon custom' classes */}
</IconContext.Provider>

style · React.CSSProperties

Inline styles to apply to all icons in the context. These are merged with any style props on individual icons, with icon-specific styles taking precedence.

<IconContext.Provider value={{ 
  style: { 
    verticalAlign: 'middle',
    marginRight: '8px'
  } 
}}>
  <FaIcon /> {/* Vertically aligned with right margin */}
</IconContext.Provider>

attr · React.SVGAttributes<SVGElement>

Additional SVG attributes to apply to all icons in the context. Useful for setting viewBox, preserveAspectRatio, or other SVG-specific attributes.

<IconContext.Provider value={{ 
  attr: { 
    strokeLinecap: 'round',
    strokeLinejoin: 'round'
  } 
}}>
  <FaIcon /> {/* Rounded stroke caps and joins */}
</IconContext.Provider>

Default Context

When no IconContext.Provider is used, icons use the default context values:

const DefaultContext: IconContext = {
  color: undefined,      // Uses currentColor
  size: undefined,       // Defaults to "1em"
  className: undefined,  // No default class
  style: undefined,      // No default styles
  attr: undefined,       // No default attributes
};

Advanced Patterns

Theme-Based Icon Styling

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

function ThemedSection({ theme }) {
  const iconConfig = {
    light: { color: '#fbbf24', size: '1.5em' },
    dark: { color: '#6366f1', size: '1.5em' }
  };

  return (
    <IconContext.Provider value={iconConfig[theme]}>
      <div>
        {theme === 'light' ? <FaSun /> : <FaMoon />}
      </div>
    </IconContext.Provider>
  );
}

Responsive Icon Sizing

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

function ResponsiveIcons() {
  return (
    <IconContext.Provider value={{ 
      style: { fontSize: 'clamp(1rem, 2vw, 2rem)' }
    }}>
      <div>
        <FaIcon /> {/* Responsive size */}
      </div>
    </IconContext.Provider>
  );
}

Consistent Animation

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

function LoadingSection() {
  return (
    <IconContext.Provider value={{ 
      className: 'animate-spin',
      size: '2em'
    }}>
      <div>
        <FaSpinner /> {/* Animated spinner */}
      </div>
    </IconContext.Provider>
  );
}

Implementation Details

• The context is a standard React Context created with React.createContext()
• Icons consume the context using IconContext.Consumer
• Context values are merged with icon props, with icon props taking precedence
• The context is optional; icons work without any provider
• Multiple providers can be nested, with inner providers overriding outer ones

Source Reference

For implementation details, see:

• iconContext.tsx:3-9 - IconContext interface definition
• iconContext.tsx:11-17 - DefaultContext values
• iconContext.tsx:19-20 - Context creation
• iconBase.tsx:42-72 - Context consumption in IconBase