React Icons

Common errors

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

  cause 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'

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

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

Warnings

• breaking Version 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.
• gotcha Each 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';`.
• deprecated The `@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.

Install

• npm install react-icons npm
• yarn add react-icons yarn
• pnpm add react-icons pnpm

Imports

• FaBeer
  wrong:

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

  correct:

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

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

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

  correct:

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

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

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

  correct:

  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.

Quickstart

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;