{"id":11721,"library":"react-icons","title":"React Icons","description":"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.","status":"active","version":"5.6.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-icons/react-icons","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-icons","lang":"bash","label":"npm"},{"cmd":"yarn add react-icons","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-icons","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for React component rendering.","package":"react","optional":false}],"imports":[{"note":"Icons are named exports from their respective icon pack sub-modules. CommonJS `require` is not supported since v5.","wrong":"const FaBeer = require('react-icons/fa').FaBeer;\nimport FaBeer from 'react-icons/fa';\nimport { FaBeer } from 'react-icons';","symbol":"FaBeer","correct":"import { FaBeer } from 'react-icons/fa';"},{"note":"Each icon set resides in its own sub-module, e.g., `fa` for Font Awesome, `md` for Material Design, `io` for Ionicons.","wrong":"const MdOutlineFastfood = require('react-icons/md').MdOutlineFastfood;","symbol":"MdOutlineFastfood","correct":"import { MdOutlineFastfood } from 'react-icons/md';"},{"note":"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.","wrong":"const IconContext = require('react-icons').IconContext;\nimport IconContext from 'react-icons';","symbol":"IconContext","correct":"import { IconContext } from 'react-icons';"}],"quickstart":{"code":"import React from 'react';\nimport { FaBeer } from 'react-icons/fa';\nimport { MdOutlineFastfood } from 'react-icons/md';\nimport { IconContext } from 'react-icons';\n\nfunction MyIconComponent() {\n  return (\n    <IconContext.Provider value={{ color: \"blue\", size: \"3em\", className: \"global-icons\" }}>\n      <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>\n        <h1>My Favorite Things</h1>\n        <p>\n          Let's go for a <FaBeer title=\"Beer icon\" /> and grab some <MdOutlineFastfood title=\"Fast food icon\" />.\n        </p>\n        <p style={{ color: \"green\", fontSize: \"2em\" }}>\n          You can also override global styles locally, like this <FaBeer />.\n        </p>\n        <p>\n          The icons automatically scale with the text size unless explicitly styled or controlled by context.\n        </p>\n      </div>\n    </IconContext.Provider>\n  );\n}\n\nexport default MyIconComponent;","lang":"typescript","description":"Demonstrates importing icons from different sets, using the `IconContext.Provider` for global styling, and applying local style overrides."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Always import icons from their specific sub-path, such as `import { FaBeer } from 'react-icons/fa';` or `import { MdHelp } from 'react-icons/md';`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"deprecated","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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.","error":"TypeError: require() of ES Module <path>/node_modules/react-icons/fa/index.js from <your-file>.js not supported."},{"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.","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`.","error":"Module not found: Error: Can't resolve 'react-icons/fa'"},{"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.","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.","error":"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."}],"ecosystem":"npm"}