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

# Styling

> Apply global styles to all icons using IconContext and CSS techniques

React Icons provides powerful styling capabilities through the `IconContext` API, allowing you to set default styles for all icons within a component tree.

## IconContext Provider

The `IconContext.Provider` lets you configure default props for all icons in its subtree.

### Basic Usage

```jsx theme={null}
import { IconContext } from "react-icons";
import { FaFolder, FaFile, FaImage } from "react-icons/fa";

function App() {
  return (
    <IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
      <div>
        <FaFolder />
        <FaFile />
        <FaImage />
        {/* All icons inherit blue color and className */}
      </div>
    </IconContext.Provider>
  );
}
```

### Available Context Options

The `IconContext` interface supports the following properties:

| Property    | Type                              | Default               | Description                    |
| ----------- | --------------------------------- | --------------------- | ------------------------------ |
| `color`     | `string`                          | `undefined` (inherit) | Default color for all icons    |
| `size`      | `string`                          | `1em`                 | Default size for all icons     |
| `className` | `string`                          | `undefined`           | CSS class applied to all icons |
| `style`     | `React.CSSProperties`             | `undefined`           | Inline styles for all icons    |
| `attr`      | `React.SVGAttributes<SVGElement>` | `undefined`           | SVG attributes for all icons   |

## Global Styling Patterns

<Tabs>
  <Tab title="Color Theme">
    Set a consistent color scheme:

    ```jsx theme={null}
    import { IconContext } from "react-icons";
    import { FaHome, FaUser, FaCog } from "react-icons/fa";

    function Navigation() {
    return (
    <IconContext.Provider value={{ color: "#3b82f6", size: "1.5em" }}>
      <nav>
        <FaHome />
        <FaUser />
        <FaCog />
      </nav>
    </IconContext.Provider>
    );
    }
    ```
  </Tab>

  <Tab title="Size Standardization">
    Ensure consistent icon sizing:

    ```jsx theme={null}
    import { IconContext } from "react-icons";
    import { FaBeer } from "react-icons/fa";

    function Question() {
    return (
    <IconContext.Provider value={{ size: "2em" }}>
      <h3>
        Lets go for a <FaBeer />?
      </h3>
    </IconContext.Provider>
    );
    }
    ```
  </Tab>

  <Tab title="Class-Based Styling">
    Apply CSS classes globally:

    ```jsx theme={null}
    import { IconContext } from "react-icons";
    import { FaStar } from "react-icons/fa";
    import "./App.css";

    function Rating() {
    return (
    <IconContext.Provider value={{ className: "star-icon" }}>
      <div>
        <FaStar />
        <FaStar />
        <FaStar />
      </div>
    </IconContext.Provider>
    );
    }
    ```

    ```css App.css theme={null}
    .star-icon {
      color: gold;
      margin: 0 2px;
      transition: transform 0.2s;
    }

    .star-icon:hover {
      transform: scale(1.2);
    }
    ```
  </Tab>
</Tabs>

## Inline Global Styling

Use the `style` property in `IconContext` for inline CSS:

```jsx theme={null}
import { IconContext } from "react-icons";
import { FaCheckCircle, FaTimesCircle } from "react-icons/fa";

function StatusIndicators() {
  return (
    <IconContext.Provider 
      value={{ 
        style: { 
          verticalAlign: 'middle',
          marginRight: '8px'
        } 
      }}
    >
      <div>
        <p><FaCheckCircle /> Success</p>
        <p><FaTimesCircle /> Error</p>
      </div>
    </IconContext.Provider>
  );
}
```

<Tip>
  The `style` property in `IconContext` can override both `size` and `color` properties when specified.
</Tip>

## Nesting Contexts

You can nest multiple `IconContext.Provider` components to create hierarchical styles:

```jsx theme={null}
import { IconContext } from "react-icons";
import { FaFolder, FaFile } from "react-icons/fa";

function FileExplorer() {
  return (
    <IconContext.Provider value={{ size: "1.5em" }}>
      <div>
        {/* Folders are blue */}
        <IconContext.Provider value={{ color: "blue" }}>
          <div>
            <FaFolder /> Documents
            <FaFolder /> Images
          </div>
        </IconContext.Provider>
        
        {/* Files are gray */}
        <IconContext.Provider value={{ color: "gray" }}>
          <div>
            <FaFile /> readme.txt
            <FaFile /> data.json
          </div>
        </IconContext.Provider>
      </div>
    </IconContext.Provider>
  );
}
```

## Overriding Context Styles

Individual icon props always override context values:

```jsx theme={null}
import { IconContext } from "react-icons";
import { FaHeart } from "react-icons/fa";

function App() {
  return (
    <IconContext.Provider value={{ color: "blue", size: "1em" }}>
      <div>
        <FaHeart />                    {/* Blue, 1em */}
        <FaHeart color="red" />        {/* Red (overridden), 1em */}
        <FaHeart size="2em" />         {/* Blue, 2em (overridden) */}
        <FaHeart color="green" size="3em" /> {/* Fully overridden */}
      </div>
    </IconContext.Provider>
  );
}
```

<Steps>
  <Step title="Context sets defaults">
    The `IconContext.Provider` establishes base styles
  </Step>

  <Step title="Icons inherit styles">
    All icons within the provider inherit these defaults
  </Step>

  <Step title="Props override context">
    Individual icon props take precedence over context values
  </Step>
</Steps>

## CSS Class Merging

When both context and individual icons have `className`, they are merged:

```jsx theme={null}
import { IconContext } from "react-icons";
import { FaBeer } from "react-icons/fa";

function App() {
  return (
    <IconContext.Provider value={{ className: "global-icon" }}>
      <FaBeer className="beer-icon" />
      {/* Renders with class="global-icon beer-icon" */}
    </IconContext.Provider>
  );
}
```

<Warning>
  The context className comes first, followed by the individual className. This affects CSS specificity.
</Warning>

## Vertical Alignment Fix

<Note>
  From version 3+, `vertical-align: middle` is not applied by default. Use `IconContext` to add it globally:
</Note>

<CodeGroup>
  ```jsx Global Inline Style theme={null}
  import { IconContext } from "react-icons";
  import { FaBeer } from "react-icons/fa";

  function Question() {
    return (
      <IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
        <h3>
          Lets go for a <FaBeer />?
        </h3>
      </IconContext.Provider>
    );
  }
  ```

  ```jsx Global className theme={null}
  import { IconContext } from "react-icons";
  import { FaBeer } from "react-icons/fa";
  import "./App.css";

  function Question() {
    return (
      <IconContext.Provider value={{ className: 'react-icons' }}>
        <h3>
          Lets go for a <FaBeer />?
        </h3>
      </IconContext.Provider>
    );
  }
  ```

  ```css App.css theme={null}
  .react-icons {
    vertical-align: middle;
  }
  ```
</CodeGroup>

## Advanced: Dynamic Theming

Create theme-aware icon styling:

```jsx theme={null}
import { IconContext } from "react-icons";
import { FaSun, FaMoon } from "react-icons/fa";
import { useState } from "react";

function ThemedApp() {
  const [theme, setTheme] = useState("light");
  
  const iconTheme = {
    light: { color: "#1f2937", size: "1.5em" },
    dark: { color: "#f9fafb", size: "1.5em" }
  };
  
  return (
    <IconContext.Provider value={iconTheme[theme]}>
      <div className={theme}>
        <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
          {theme === "light" ? <FaMoon /> : <FaSun />}
          Toggle Theme
        </button>
      </div>
    </IconContext.Provider>
  );
}
```

## SVG Attributes via Context

Set default SVG attributes for all icons:

```jsx theme={null}
import { IconContext } from "react-icons";
import { FaCircle } from "react-icons/fa";

function App() {
  return (
    <IconContext.Provider 
      value={{ 
        attr: { 
          stroke: "currentColor",
          strokeWidth: "0",
          fill: "currentColor"
        } 
      }}
    >
      <FaCircle />
    </IconContext.Provider>
  );
}
```

<Tip>
  The `attr` property is overwritten by other attributes like `style`, `color`, and direct SVG props.
</Tip>

## Best Practices

<AccordionGroup>
  <Accordion title="Use IconContext for consistency">
    Apply `IconContext.Provider` at the root or layout level to ensure consistent icon styling across your application.
  </Accordion>

  <Accordion title="Prefer className over inline styles">
    Using `className` with CSS files provides better performance and maintainability than inline styles.
  </Accordion>

  <Accordion title="Document your icon conventions">
    Establish and document icon sizing and color conventions for your team to maintain visual consistency.
  </Accordion>

  <Accordion title="Test context boundaries">
    Be mindful of where your `IconContext.Provider` boundaries are, especially in component libraries or shared components.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Customizing Icons" icon="sliders" href="/guides/customizing-icons">
    Learn about individual icon customization
  </Card>

  <Card title="Performance" icon="gauge-high" href="/guides/performance">
    Optimize bundle size and rendering performance
  </Card>
</CardGroup>