> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/react-icons/react-icons/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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:

<ParamField path="color" type="string" optional>
  Default color for all icons in the context. Accepts any valid CSS color value (hex, rgb, named colors, etc.).

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

<ParamField path="size" type="string" optional>
  Default size for all icons in the context. Can be any valid CSS size unit (px, em, rem, etc.).

  ```tsx theme={null}
  <IconContext.Provider value={{ size: '24px' }}>
    <FaIcon /> {/* 24px icon */}
  </IconContext.Provider>
  ```
</ParamField>

<ParamField path="className" type="string" optional>
  CSS class name(s) to apply to all icons in the context. These are merged with any className props on individual icons.

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

<ParamField path="style" type="React.CSSProperties" optional>
  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.

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

<ParamField path="attr" type="React.SVGAttributes<SVGElement>" optional>
  Additional SVG attributes to apply to all icons in the context. Useful for setting viewBox, preserveAspectRatio, or other SVG-specific attributes.

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

## Default Context

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

```typescript theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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