> ## 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

> Type definition for the icon configuration context

## Type Definition

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

## Overview

The `IconContext` interface defines the shape of the configuration object that can be provided to the `IconContext.Provider`. It allows you to set default values for icon properties that will be inherited by all icons within the provider's component subtree.

## Properties

<ResponseField name="color" type="string" optional>
  Default color for all icons in the context.

  **Accepted Values:**

  * Hex colors: `"#3b82f6"`
  * RGB/RGBA: `"rgb(59, 130, 246)"`, `"rgba(59, 130, 246, 0.5)"`
  * Named colors: `"blue"`, `"red"`, `"currentColor"`
  * HSL: `"hsl(217, 91%, 60%)"`

  **Default:** `undefined` (icons use "currentColor")

  **Behavior:** Individual icon `color` props override this value.

  **Example:**

  ```tsx theme={null}
  <IconContext.Provider value={{ color: '#3b82f6' }}>
    <FaIcon /> {/* Blue */}
    <FaIcon color="red" /> {/* Red - overrides context */}
  </IconContext.Provider>
  ```
</ResponseField>

<ResponseField name="size" type="string" optional>
  Default size for all icons in the context.

  **Accepted Values:**

  * Any valid CSS size unit: `"24px"`, `"1.5em"`, `"2rem"`, `"100%"`

  **Default:** `undefined` (icons use "1em")

  **Note:** Unlike `IconBaseProps.size`, this only accepts strings, not numbers.

  **Behavior:** Individual icon `size` props override this value.

  **Example:**

  ```tsx theme={null}
  <IconContext.Provider value={{ size: '2em' }}>
    <FaIcon /> {/* 2em */}
    <FaIcon size="3em" /> {/* 3em - overrides context */}
  </IconContext.Provider>
  ```
</ResponseField>

<ResponseField name="className" type="string" optional>
  CSS class name(s) to apply to all icons in the context.

  **Default:** `undefined`

  **Behavior:** Merged with individual icon `className` props. Both context and icon classes are applied.

  **Merge Logic:**

  ```
  finalClassName = contextClassName + " " + iconClassName
  ```

  **Example:**

  ```tsx theme={null}
  <IconContext.Provider value={{ className: 'icon-base' }}>
    <FaIcon /> {/* class="icon-base" */}
    <FaIcon className="icon-special" /> {/* class="icon-base icon-special" */}
  </IconContext.Provider>
  ```
</ResponseField>

<ResponseField name="style" type="React.CSSProperties" optional>
  Inline styles to apply to all icons in the context.

  **Type:** Standard React CSS properties object

  **Default:** `undefined`

  **Behavior:** Merged with individual icon `style` props. Icon styles override context styles for the same property.

  **Merge Precedence:**

  1. Context styles (lowest priority)
  2. Icon `color` prop (applied to style.color)
  3. Icon `style` prop (highest priority)

  **Example:**

  ```tsx theme={null}
  <IconContext.Provider value={{ 
    style: { 
      verticalAlign: 'middle',
      marginRight: '8px',
      opacity: 0.8
    } 
  }}>
    <FaIcon /> 
    {/* style: verticalAlign: middle, marginRight: 8px, opacity: 0.8 */}
    
    <FaIcon style={{ opacity: 1 }} />
    {/* style: verticalAlign: middle, marginRight: 8px, opacity: 1 */}
  </IconContext.Provider>
  ```
</ResponseField>

<ResponseField name="attr" type="React.SVGAttributes<SVGElement>" optional>
  Additional SVG attributes to apply to all icons in the context.

  **Accepted Attributes:**

  * `viewBox`, `preserveAspectRatio`
  * `strokeLinecap`, `strokeLinejoin`, `strokeWidth`
  * `fill`, `fillRule`, `fillOpacity`
  * `stroke`, `strokeOpacity`, `strokeDasharray`
  * Any other valid SVG attributes

  **Default:** `undefined`

  **Behavior:** Merged with icon-specific attributes. Merge order:

  1. Context `attr` (lowest priority)
  2. Icon `attr` prop (if using IconBase)
  3. Other icon props (highest priority)

  **Example:**

  ```tsx theme={null}
  <IconContext.Provider value={{ 
    attr: { 
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      strokeWidth: '2'
    } 
  }}>
    <FaIcon /> {/* Rounded strokes, width 2 */}
  </IconContext.Provider>
  ```
</ResponseField>

## Default Values

When no `IconContext.Provider` is present, or when a property is not specified in the context value, icons use these defaults:

```typescript theme={null}
const DefaultContext: IconContext = {
  color: undefined,      // Icons use "currentColor"
  size: undefined,       // Icons default to "1em"
  className: undefined,  // No default classes
  style: undefined,      // No default styles
  attr: undefined,       // No default attributes
};
```

## Usage Examples

### Basic Configuration

```tsx theme={null}
import { IconContext } from 'react-icons';
import { FaBeer, FaCoffee } from 'react-icons/fa';

function App() {
  const iconConfig: IconContext = {
    color: 'blue',
    size: '1.5em'
  };
  
  return (
    <IconContext.Provider value={iconConfig}>
      <FaBeer />
      <FaCoffee />
    </IconContext.Provider>
  );
}
```

### Theme Integration

```tsx theme={null}
import { IconContext } from 'react-icons';

function ThemedApp() {
  const theme = useTheme();
  
  const iconConfig: IconContext = {
    color: theme.colors.primary,
    size: '1.25rem',
    style: {
      verticalAlign: 'middle',
      marginRight: theme.spacing.sm
    },
    className: theme.iconClass
  };
  
  return (
    <IconContext.Provider value={iconConfig}>
      <YourApp />
    </IconContext.Provider>
  );
}
```

### Accessibility Configuration

```tsx theme={null}
import { IconContext } from 'react-icons';

function AccessibleIcons({ children }) {
  const iconConfig: IconContext = {
    attr: {
      'aria-hidden': 'true',
      focusable: 'false'
    } as React.SVGAttributes<SVGElement>
  };
  
  return (
    <IconContext.Provider value={iconConfig}>
      {children}
    </IconContext.Provider>
  );
}
```

### Stroke Customization

```tsx theme={null}
import { IconContext } from 'react-icons';
import { FiHome, FiUser } from 'react-icons/fi';

function OutlineIcons() {
  const iconConfig: IconContext = {
    attr: {
      strokeWidth: '1.5',
      strokeLinecap: 'round',
      strokeLinejoin: 'round'
    } as React.SVGAttributes<SVGElement>,
    size: '24px'
  };
  
  return (
    <IconContext.Provider value={iconConfig}>
      <FiHome />
      <FiUser />
    </IconContext.Provider>
  );
}
```

### Responsive Sizing

```tsx theme={null}
import { IconContext } from 'react-icons';

function ResponsiveIcons({ children }) {
  const iconConfig: IconContext = {
    style: {
      fontSize: 'clamp(1rem, 2vw, 2rem)',
      transition: 'font-size 0.2s ease'
    }
  };
  
  return (
    <IconContext.Provider value={iconConfig}>
      {children}
    </IconContext.Provider>
  );
}
```

### Nested Contexts

```tsx theme={null}
import { IconContext } from 'react-icons';

function App() {
  const globalConfig: IconContext = {
    color: 'gray',
    size: '1em'
  };
  
  const headerConfig: IconContext = {
    color: 'white',
    size: '1.5em',
    style: { marginRight: '12px' }
  };
  
  return (
    <IconContext.Provider value={globalConfig}>
      <div>
        <IconContext.Provider value={headerConfig}>
          <Header /> {/* Icons use headerConfig */}
        </IconContext.Provider>
        
        <Main /> {/* Icons use globalConfig */}
      </div>
    </IconContext.Provider>
  );
}
```

## Type Usage in TypeScript

### Typing Context Configuration

```typescript theme={null}
import { IconContext } from 'react-icons';

const lightThemeIcons: IconContext = {
  color: '#1f2937',
  size: '1.25rem'
};

const darkThemeIcons: IconContext = {
  color: '#f9fafb',
  size: '1.25rem',
  style: { filter: 'drop-shadow(0 0 2px rgba(255,255,255,0.5))' }
};
```

### Helper Function

```typescript theme={null}
import { IconContext } from 'react-icons';

function createIconConfig(
  color: string,
  size: string,
  options?: Partial<IconContext>
): IconContext {
  return {
    color,
    size,
    ...options
  };
}

const config = createIconConfig('#3b82f6', '1.5em', {
  style: { marginRight: '8px' }
});
```

### Component Props

```typescript theme={null}
import { IconContext } from 'react-icons';
import { ReactNode } from 'react';

interface IconProviderProps {
  children: ReactNode;
  config: IconContext;
}

function IconProvider({ children, config }: IconProviderProps) {
  return (
    <IconContext.Provider value={config}>
      {children}
    </IconContext.Provider>
  );
}
```

## Merge Behavior

Understanding how context values merge with icon props:

| Property    | Merge Strategy                      | Example                                                                              |
| ----------- | ----------------------------------- | ------------------------------------------------------------------------------------ |
| `color`     | Icon prop overrides context         | Context: blue, Icon: red → **red**                                                   |
| `size`      | Icon prop overrides context         | Context: 2em, Icon: 3em → **3em**                                                    |
| `className` | Concatenated (context + icon)       | Context: "base", Icon: "special" → **"base special"**                                |
| `style`     | Merged (icon overrides on conflict) | Context: `{opacity: 0.8}`, Icon: `{opacity: 1}` → **`{opacity: 1}`**                 |
| `attr`      | Merged (icon overrides on conflict) | Context: `{strokeWidth: "2"}`, Icon: `{strokeWidth: "3"}` → **`{strokeWidth: "3"}`** |

## Source Reference

The `IconContext` interface is defined in:

* `iconContext.tsx:3-9` - Interface definition
* `iconContext.tsx:11-17` - DefaultContext constant
* `iconContext.tsx:19-20` - Context creation

```typescript theme={null}
export interface IconContext {
  color?: string;
  size?: string;
  className?: string;
  style?: React.CSSProperties;
  attr?: React.SVGAttributes<SVGElement>;
}
```