{"id":11705,"library":"react-feather","title":"React Feather Icons","description":"react-feather is a widely used React component library offering a collection of Feather icons, meticulously designed on a 24x24 grid for optimal simplicity, consistency, and readability. Currently at version 2.0.10, the library is actively maintained and provides a stable solution for integrating vectorized icons into React applications. It differentiates itself by providing each icon as an individual React component, allowing for easy customization through standard React props like `color`, `size`, and `strokeWidth`. This approach ensures that icons can be styled dynamically and rendered as inline SVGs, leveraging all the advantages of vector graphics without complex build steps. The package ships with TypeScript types, facilitating robust development, and supports modern ES modules for efficient bundling while also offering CommonJS compatibility for legacy setups.","status":"active","version":"2.0.10","language":"javascript","source_language":"en","source_url":"https://github.com/feathericons/react-feather","tags":["javascript","react","icons","svg","inline","feather","design","typescript"],"install":[{"cmd":"npm install react-feather","lang":"bash","label":"npm"},{"cmd":"yarn add react-feather","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-feather","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for a React component library.","package":"react","optional":false}],"imports":[{"note":"This is the standard ES module named import for individual icons, recommended for modern React projects.","wrong":"import Camera from 'react-feather/Camera';\nconst Camera = require('react-feather').Camera;","symbol":"Camera","correct":"import { Camera } from 'react-feather';"},{"note":"Imports all icons into a namespace `Icon`. Useful for dynamic icon rendering or when needing many icons from the library.","wrong":"import { Icon } from 'react-feather';","symbol":"* as Icon","correct":"import * as Icon from 'react-feather';"},{"note":"For CommonJS environments, individual icons must be imported from the `dist` folder and access their `.default` export. This is generally discouraged in favor of ESM in new projects.","wrong":"const Camera = require('react-feather/icons/camera');\nconst Camera = require('react-feather/dist/icons/camera');","symbol":"Camera (CommonJS)","correct":"const Camera = require('react-feather/dist/icons/camera').default;"}],"quickstart":{"code":"import React from 'react';\nimport { Camera, GitHub, Zap } from 'react-feather';\n\nconst App: React.FC = () => {\n  return (\n    <div>\n      <h1>My React Icons</h1>\n      <p>A simple camera icon:</p>\n      <Camera color=\"blue\" size={36} strokeWidth={2} />\n      <p>A larger GitHub icon with custom styling:</p>\n      <GitHub color=\"#333\" size={64} style={{ border: '1px solid #eee', padding: '5px' }} />\n      <p>Another icon, just for fun:</p>\n      <Zap color=\"orange\" size={24} />\n    </div>\n  );\n};\n\nexport default App;","lang":"typescript","description":"This quickstart demonstrates how to import and use individual Feather icons as React components, customizing their appearance with props like `color`, `size`, and `strokeWidth`."},"warnings":[{"fix":"Migrate your icon imports to named imports (e.g., `import { Camera } from 'react-feather';`) or use the wildcard import (`import * as Icon from 'react-feather';`). If using CommonJS, explicitly target `require('react-feather/dist/icons/icon-name').default;`.","message":"Version 2.x introduced breaking changes, primarily moving away from a single `icon` prop for dynamic rendering and removing the main package's default export. Icons must now be imported as named exports or from the `dist` folder for CommonJS.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use `const IconName = require('react-feather/dist/icons/icon-name').default;` for CommonJS imports of specific icons.","message":"When using CommonJS `require`, directly importing from the package root like `require('react-feather').Camera` will not work. You must import individual icons from their specific paths within the `dist` directory and access their `.default` export.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your project's `react` and `react-dom` versions are `>=16.8.6`. Upgrade React if necessary.","message":"The library depends on React v16.8.6 or newer. Using it with older React versions might lead to compatibility issues or unexpected behavior due to reliance on Hooks and other modern React features.","severity":"gotcha","affected_versions":"<16.8.6"},{"fix":"Verify your Webpack/Rollup configuration supports tree-shaking for ES modules. For some setups, specific Babel plugins (e.g., `babel-plugin-import`) might be needed for optimal bundle size when importing many icons.","message":"While `react-feather` provides components, for tree-shaking effectiveness (especially with older bundlers or complex setups), ensure your build configuration is set up to correctly handle ES module named exports to avoid bundling the entire icon library.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Double-check the icon name for typos. Ensure you're using `import { IconName } from 'react-feather';` for ESM or `const IconName = require('react-feather/dist/icons/icon-name').default;` for CommonJS.","cause":"This usually indicates an incorrect import, where the imported icon component is `undefined`. Common causes include trying to import a non-existent icon, a typo in the icon name, or incorrect CommonJS `require` usage (e.g., missing `.default`).","error":"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."},{"fix":"Always use `react-feather` icons as JSX components: `<Camera />`.","cause":"This error often occurs when an imported icon (like `Camera`) is treated as a function call `Camera()` instead of a JSX component `<Camera />`.","error":"TypeError: (0, react_feather__WEBPACK_IMPORTED_MODULE_0__.Camera) is not a function"},{"fix":"Run `npm install react-feather` or `yarn add react-feather` in your project directory.","cause":"The `react-feather` package has not been installed or is not correctly linked in your `node_modules`.","error":"Module not found: Error: Can't resolve 'react-feather'"}],"ecosystem":"npm"}