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

# 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

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

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

<Info>
  The default size of `1em` means icons scale with the font size of their parent element.
</Info>

## Configuration Examples

### Global Icon Styling

Set consistent styling across your entire application:

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

<Tabs>
  <Tab title="Light Theme">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="Dark Theme">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>
</Tabs>

### Using className for Global Styling

Combine `className` with CSS for consistent icon styling:

```jsx theme={null}
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>
  );
}
```

```css theme={null}
/* 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:

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

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

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

<CodeGroup>
  ```jsx Priority Example theme={null}
  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>
    );
  }
  ```
</CodeGroup>

## Real-World Examples

### Navigation Menu

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

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

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

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

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

<Note>
  See the [TypeScript guide](/core-concepts/typescript) for complete type definitions and advanced TypeScript usage.
</Note>

## Best Practices

### Use Context for Consistent Styling

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

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

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

<Warning>
  The `IconContext` requires **React 16.3 or higher** because it uses the React Context API.
</Warning>

## Next Steps

<CardGroup cols={2}>
  <Card title="Icon Imports" icon="download" href="/core-concepts/icon-imports">
    Learn about importing icons from different packs
  </Card>

  <Card title="TypeScript" icon="code" href="/core-concepts/typescript">
    Explore TypeScript types and interfaces
  </Card>
</CardGroup>