react-icons 5.x

Complete instructions

Verified against react-icons@5.7.0 on 2026-09-07. 3 of 3 examples executed.

react-icons

Version and package boundary

This skill targets react-icons ^5.0.0, which stays within major version 5. The researched documented release is 5.7.0. React is a peer dependency, and the package publishes CommonJS, ES module, and TypeScript entry points. It declares sideEffects: false.

The icons are React components. Normal usage belongs in a React application or another React renderer. The standalone examples below create React elements and inspect the exported API; they do not attempt to render into a browser or server output.

Import icons from an icon-pack subpath

Use a named import from the pack subpath:

import { FaBeer } from "react-icons/fa";

The same pattern applies to other packs, for example:

import { ICON_NAME } from "react-icons/md";

The documented pack subpaths include ai, bi, bs, cg, ci, di, fa, fa6, fc, fi, gi, go, gr, hi, hi2, im, io, io5, lia, lu, md, pi, ri, rx, si, sl, tb, tfi, ti, vsc, and wi.

A typical React usage is:

import { FaBeer } from "react-icons/fa";

function Question() {
  return <h3>Lets go for a <FaBeer />?</h3>;
}

Common import mistake

Do not use the old pre-v3 per-file form:

import FaBeer from "react-icons/lib/fa/beer";

That shape was replaced by the named per-pack import:

import { FaBeer } from "react-icons/fa";

The v4-shaped named subpath imports remain the documented v5 shape. The v5.0.0 release specifically documents strict ESM loader compatibility rather than a new icon import migration.

Standalone import check

import assert from "node:assert/strict";
import { createElement } from "react";
import { FaBeer } from "react-icons/fa";

assert.equal(typeof FaBeer, "function");

const element = createElement(FaBeer, { title: "Beer" });
assert.equal(element.type, FaBeer);
assert.equal(element.props.title, "Beer");

Core component API

The core API exposes these types and functions:

• IconTree: { tag, attr, child } tree data for an icon.
• GenIcon(data): creates an icon component from an IconTree.
• IconBase: the base SVG component.
• IconType: a component accepting IconBaseProps.
• IconBaseProps: React SVG attributes plus optional children, size, color, and title.

The core exports are available from react-icons and react-icons/lib according to the package declarations. GenIcon is useful when icon tree data is available programmatically; normal consumers should generally import generated icons from their pack subpath.

size accepts a string or number. color and title are also supported alongside normal React SVG attributes.

import assert from "node:assert/strict";
import { createElement } from "react";
import { GenIcon } from "react-icons";

const Icon = GenIcon({
  tag: "path",
  attr: { d: "M0 0h10v10H0z" },
  child: [],
});

assert.equal(typeof Icon, "function");
const element = createElement(Icon, { size: 24, color: "blue", title: "Square" });
assert.equal(element.type, Icon);
assert.equal(element.props.size, 24);
assert.equal(element.props.color, "blue");
assert.equal(element.props.title, "Square");

Global icon context

Import IconContext and provide values around icons in a React tree:

import { IconContext } from "react-icons";

<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
  <div><FaFolder /></div>
</IconContext.Provider>

The context value can contain:

• color?: string
• size?: string
• className?: string
• style?: React.CSSProperties
• attr?: React.SVGAttributes<SVGElement>

DefaultContext is also exported. The context is a React context object, so provide it through React rather than treating it as a standalone plain-object configuration API.

import assert from "node:assert/strict";
import { createElement } from "react";
import { DefaultContext, IconContext } from "react-icons";

assert.equal(typeof IconContext.Provider, "object");
assert.equal(typeof DefaultContext, "object");

const child = createElement("span", null, "icon");
const provider = createElement(
  IconContext.Provider,
  { value: { color: "blue", className: "global-class-name" } },
  child,
);

assert.equal(provider.type, IconContext.Provider);
assert.equal(provider.props.value.color, "blue");
assert.equal(provider.props.value.className, "global-class-name");

Manifest declarations and runtime path

The research describes an IconManifestType with these fields:

interface IconManifestType {
  id: string;
  name: string;
  projectUrl: string;
  license: string;
  licenseUrl: string;
}

It also documents an IconsManifest declaration. However, the documented declaration path react-icons/lib/iconsManifest is not a runnable runtime module in the tested react-icons@5.7.0 installation. Do not make application code depend on that path without verifying the installed package exposes it. Manifest inspection is therefore not covered by a standalone example here.

Installation and packaging notes

The standard installation is:

npm install react-icons --save

or:

yarn add react-icons

There is also an @react-icons/all-files package with imports such as:

import { FaBeer } from "@react-icons/all-files/fa/FaBeer";

The researched documentation describes it as a separate, slower-to-install option for environments such as Meteor or Gatsby and warns that it has not had a new release for some time. Prefer the standard react-icons package unless that separate packaging mode is specifically required.

What this skill does not cover

• Rendering icons in a browser, server-rendering, or framework-specific integration.
• The behavior of every individual icon or icon-pack export.
• Choosing an icon by visual appearance or searching the manifest.
• Using IconsManifest at a runtime path not present in the tested installation.
• The internal SVG rendering details of IconBase.
• Building or modifying the icon database and repository development commands.
• The @react-icons/all-files package beyond its documented import shape.
• Any API or behavior not shown in the supplied v5 research.