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

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

Color Theme

Set a consistent color scheme:

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>
);
}

Size Standardization

Ensure consistent icon sizing:

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>
);
}

Class-Based Styling

Apply CSS classes globally:

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>
);
}

App.css

.star-icon {
  color: gold;
  margin: 0 2px;
  transition: transform 0.2s;
}

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

Inline Global Styling

Use the style property in IconContext for inline CSS:

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>
  );
}

The style property in IconContext can override both size and color properties when specified.

Nesting Contexts

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

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:

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>
  );
}

1. Context sets defaults

   The IconContext.Provider establishes base styles

2. Icons inherit styles

   All icons within the provider inherit these defaults

3. Props override context

   Individual icon props take precedence over context values

CSS Class Merging

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

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>
  );
}

The context className comes first, followed by the individual className. This affects CSS specificity.

Vertical Alignment Fix

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

Global Inline Style

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>
  );
}

Advanced: Dynamic Theming

Create theme-aware icon styling:

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:

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>
  );
}

The attr property is overwritten by other attributes like style, color, and direct SVG props.

Best Practices

Use IconContext for consistency

Apply IconContext.Provider at the root or layout level to ensure consistent icon styling across your application.

Prefer className over inline styles

Using className with CSS files provides better performance and maintainability than inline styles.

Document your icon conventions

Establish and document icon sizing and color conventions for your team to maintain visual consistency.

Test context boundaries

Be mindful of where your IconContext.Provider boundaries are, especially in component libraries or shared components.

Next Steps

Customizing Icons

Learn about individual icon customization

Performance

Optimize bundle size and rendering performance