Skip to main content

​
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