react-icons

library5.6.0jsnpmunverified

React Icons is a popular library for easily including a vast collection of SVG icons in React projects. It currently stands at stable version `5.6.0` and exhibits a very active release cadence, frequently updating to incorporate the latest versions of various icon libraries and maintain compatibility with modern React versions, such as the recent update for React 19 in v5.5.0. A key differentiator is its use of ES6 imports, enabling effective tree-shaking to include only the icons actively used in a project, thus optimizing bundle size. It aggregates icons from numerous popular sets like Font Awesome 5/6, Material Design, Ionicons, and Octicons, making a wide array of visual assets accessible through a consistent API. Unlike some icon solutions, React Icons directly provides SVG components, which offers high customization and styling flexibility.

web-framework

npm install react-icons

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-ICONS

react-icons

web-frameworkjavascriptv5.6.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

FaBeer

✓ import { FaBeer } from 'react-icons/fa';

✗ const FaBeer = require('react-icons/fa').FaBeer; import FaBeer from 'react-icons/fa'; import { FaBeer } from 'react-icons';

Icons are named exports from their respective icon pack sub-modules. CommonJS `require` is not supported since v5.

MdOutlineFastfood

✓ import { MdOutlineFastfood } from 'react-icons/md';

✗ const MdOutlineFastfood = require('react-icons/md').MdOutlineFastfood;

Each icon set resides in its own sub-module, e.g., `fa` for Font Awesome, `md` for Material Design, `io` for Ionicons.

IconContext

✓ import { IconContext } from 'react-icons';

✗ const IconContext = require('react-icons').IconContext; import IconContext from 'react-icons';

IconContext is a named export from the root `react-icons` package and provides a way to set default properties for all icons within its provider scope.

Demonstrates importing icons from different sets, using the `IconContext.Provider` for global styling, and applying local style overrides.

import React from 'react'; import { FaBeer } from 'react-icons/fa'; import { MdOutlineFastfood } from 'react-icons/md'; import { IconContext } from 'react-icons'; function MyIconComponent() { return ( <IconContext.Provider value={{ color: "blue", size: "3em", className: "global-icons" }}> <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}> <h1>My Favorite Things</h1> <p> Let's go for a <FaBeer title="Beer icon" /> and grab some <MdOutlineFastfood title="Fast food icon" />. </p> <p style={{ color: "green", fontSize: "2em" }}> You can also override global styles locally, like this <FaBeer />. </p> <p> The icons automatically scale with the text size unless explicitly styled or controlled by context. </p> </div> </IconContext.Provider> ); } export default MyIconComponent;

Debug

Known issues

breakingVersion 5.0.0 introduced 'Strict ESM loader compatibility', meaning that CommonJS `require()` statements for importing icons are no longer supported and will cause runtime errors.

fix

Migrate all icon imports from `require()` to ES Module `import` statements (e.g., `import { FaBeer } from 'react-icons/fa';`). Ensure your project's build setup supports ESM.

affects: >=5.0.0

gotchaEach icon package (e.g., Font Awesome, Material Design) resides in its own sub-module. Importing directly from `react-icons` (e.g., `import { FaBeer } from 'react-icons';`) will result in a module not found error.

fix

Always import icons from their specific sub-path, such as `import { FaBeer } from 'react-icons/fa';` or `import { MdHelp } from 'react-icons/md';`.

affects: >=1.0.0

deprecatedThe `@react-icons/all-files` package, which provides a single bundle of all icons, is not actively maintained and has not received new releases for some time. Its continued use is discouraged due to potential performance issues and lack of updates.

fix

Prefer the standard `react-icons` package and import individual icons from their specific sub-modules to leverage tree-shaking and ensure you are using the latest icon versions.

affects: All versions

Errors

Common errors & fixes

TypeError: require() of ES Module <path>/node_modules/react-icons/fa/index.js from <your-file>.js not supported.

Attempting to use CommonJS `require()` to import `react-icons` components in a project that is configured for ES Modules, or after upgrading to `react-icons` v5+ which is ESM-only.

fix

Update your import statements from `const { FaBeer } = require('react-icons/fa');` to `import { FaBeer } from 'react-icons/fa';` and ensure your project's build setup (e.g., webpack, Rollup, Vite) correctly handles ES Modules.

Module not found: Error: Can't resolve 'react-icons/fa'

This typically happens if the icon pack sub-module name is misspelled, or the package `react-icons` is not correctly installed or linked in `node_modules`.

fix

Double-check the icon pack prefix (e.g., `fa`, `md`, `io`, `bs`) against the official documentation. Ensure `react-icons` is installed (`npm install react-icons`) and your `node_modules` directory is correctly resolved by your bundler.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

This error often occurs when an icon component is imported as a default import when it should be a named import, or if the icon name is misspelled and results in an `undefined` import.

fix

Ensure you are using named imports for icons (e.g., `import { FaBeer } from 'react-icons/fa';` NOT `import FaBeer from 'react-icons/fa';`). Verify the exact capitalization and spelling of the icon name.

Upgrade

Version history

5.6.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency, required for React component rendering.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/react-icons/react-icons ↗

packagehttps://www.npmjs.com/package/react-icons ↗

homepagehttps://react-icons.github.io/react-icons ↗