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

# Customizing Icons

> Learn how to customize React Icons with size, color, className, and style props

React Icons provides flexible customization options through the `IconBaseProps` interface, allowing you to adjust icons to match your design requirements.

## Available Props

Every icon component in React Icons accepts the following props:

| Prop        | Type                  | Default          | Description                            |
| ----------- | --------------------- | ---------------- | -------------------------------------- |
| `size`      | `string \| number`    | `"1em"`          | Sets both width and height of the icon |
| `color`     | `string`              | `"currentColor"` | Sets the icon color                    |
| `className` | `string`              | `undefined`      | Adds CSS class names                   |
| `style`     | `React.CSSProperties` | `undefined`      | Inline styles object                   |
| `title`     | `string`              | `undefined`      | Accessible title for screen readers    |

Additionally, all standard SVG attributes from `React.SVGAttributes<SVGElement>` are supported.

## Sizing Icons

<Tabs>
  <Tab title="String Values">
    Use any valid CSS size unit:

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

    function App() {
      return (
        <div>
          <FaBeer size="1em" />   {/* Default */}
          <FaBeer size="2em" />   {/* 2x size */}
          <FaBeer size="24px" />  {/* Fixed pixel size */}
          <FaBeer size="3rem" />  {/* Relative to root */}
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Numeric Values">
    Numbers are interpreted as pixels:

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

    function App() {
      return (
        <div>
          <FaReact size={16} />  {/* 16px */}
          <FaReact size={32} />  {/* 32px */}
          <FaReact size={64} />  {/* 64px */}
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

<Tip>
  Using `"1em"` (default) makes icons scale with the font size of their parent element, ensuring they align perfectly with text.
</Tip>

## Coloring Icons

React Icons use `currentColor` by default, inheriting the text color from their parent element.

<CodeGroup>
  ```jsx Default Behavior theme={null}
  import { FaHeart } from "react-icons/fa";

  function App() {
    return (
      <div style={{ color: "red" }}>
        <p>I <FaHeart /> React Icons</p>
        {/* Icon inherits red color */}
      </div>
    );
  }
  ```

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

  function App() {
    return (
      <div>
        <FaHeart color="red" />
        <FaHeart color="#3b82f6" />
        <FaHeart color="rgb(239, 68, 68)" />
      </div>
    );
  }
  ```

  ```jsx CSS Variables theme={null}
  import { FaStar } from "react-icons/fa";

  function App() {
    return (
      <div style={{ "--icon-color": "gold" }}>
        <FaStar color="var(--icon-color)" />
      </div>
    );
  }
  ```
</CodeGroup>

## Adding Classes

Use `className` to apply CSS classes for styling:

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

function App() {
  return (
    <div>
      <FaGithub className="icon-primary" />
      <FaGithub className="icon-secondary" />
      <FaGithub className="icon-animated" />
    </div>
  );
}
```

```css App.css theme={null}
.icon-primary {
  color: #1f2937;
  margin-right: 0.5rem;
}

.icon-secondary {
  color: #6b7280;
  opacity: 0.8;
}

.icon-animated {
  transition: transform 0.2s;
}

.icon-animated:hover {
  transform: scale(1.2);
}
```

<Warning>
  When using both `IconContext` and individual `className` props, classes are merged with the context class appearing first.
</Warning>

## Inline Styles

The `style` prop accepts any React CSS properties object:

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

function ContactButton() {
  return (
    <button>
      <FaEnvelope 
        style={{ 
          marginRight: "8px",
          verticalAlign: "middle",
          color: "white"
        }} 
      />
      Contact Us
    </button>
  );
}
```

<Steps>
  <Step title="Define styles">
    Create a styles object or use inline styles
  </Step>

  <Step title="Apply to icon">
    Pass the styles via the `style` prop
  </Step>

  <Step title="Override as needed">
    Style props override context styles, allowing per-icon customization
  </Step>
</Steps>

## Advanced: SVG Attributes

Since icons extend `React.SVGAttributes<SVGElement>`, you can use any SVG attribute:

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

function App() {
  return (
    <FaCircle
      stroke="blue"
      strokeWidth="2"
      fill="lightblue"
      opacity="0.8"
      onClick={() => console.log("Clicked!")}
      onMouseEnter={() => console.log("Hover!")}
    />
  );
}
```

## Combining Multiple Props

All props work together seamlessly:

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

function DownloadButton() {
  return (
    <button className="download-btn">
      <FaDownload
        size={20}
        color="white"
        className="download-icon"
        style={{ marginRight: "8px" }}
        title="Download file"
        aria-hidden="false"
      />
      Download
    </button>
  );
}
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Styling" icon="paintbrush" href="/guides/styling">
    Learn about global styling with IconContext
  </Card>

  <Card title="Accessibility" icon="universal-access" href="/guides/accessibility">
    Make your icons accessible to all users
  </Card>
</CardGroup>