IconContext in React Icons

When a toolbar or list uses many icons, styling each one gets repetitive. IconContext.Provider passes shared icon settings down to every icon inside it.

All React Icons examples React Icons: usage and stats

The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Wrap icons in a provider. IconContext is imported from the root react-icons package. Every icon rendered inside IconContext.Provider reads its value. [1]
Two groups, two styles. The toolbar provider sets a blue color and a size of 28px. The file list uses a second provider with amber, 18px icons. [1]
Add a class name. The list provider also sets className: "file-icon", and a small <style> rule uses that class to add spacing and align the icons. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { IconContext } from "react-icons";
import { FaHome, FaSearch, FaBell, FaUser, FaFolder, FaFileAlt } from "react-icons/fa";

const page = { minHeight: "100vh", background: "#111", display: "flex", alignItems: "center",
  justifyContent: "center", fontFamily: "system-ui, sans-serif" };
const card = { background: "#1e1e1e", color: "#e5e7eb", border: "1px solid #333", borderRadius: 12,
  padding: "20px 24px", boxSizing: "border-box" };

const css = ".file-icon { vertical-align: -3px; margin-right: 8px; }";

export default function App() {
  return (
    <div style={page}>
      <style>{css}</style>
      <div style={{ ...card, width: 320 }}>
        {/* Every icon inside gets this color and size */}
        <IconContext.Provider value={{ color: "#60a5fa", size: "28px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 18 }}>
            <FaHome /><FaSearch /><FaBell /><FaUser />
          </div>
        </IconContext.Provider>

        <IconContext.Provider value={{ color: "#f59e0b", size: "18px", className: "file-icon" }}>
          <div style={{ lineHeight: 2, fontSize: 15 }}>
            <div><FaFolder />src</div>
            <div><FaFolder />public</div>
            <div><FaFileAlt />package.json</div>
            <div><FaFileAlt />README.md</div>
          </div>
        </IconContext.Provider>
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Change the color in the first provider and all four toolbar icons update together. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with react-icons 5.7.0, react 19.3.0, react-dom 19.3.0. Needs WebGL.

More React Icons examples

Using an icon in React Icons Icons from different packs in React Icons Aligning icons with text in React Icons Icon size, color and title in React Icons

Sources

React Icons README (GitHub)

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with React Icons? Ask AgentGid →