Registry / web-framework / react-feather

react-feather

library2.0.10jsnpmunverified

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.

web-framework serialization

npm install react-feather

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-FEATHER

react-feather

web-frameworkjavascriptv2.0.10

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.

Camera

✓ import { Camera } from 'react-feather';

✗ import Camera from 'react-feather/Camera'; const Camera = require('react-feather').Camera;

This is the standard ES module named import for individual icons, recommended for modern React projects.

* as Icon

✓ import * as Icon from 'react-feather';

✗ import { Icon } from 'react-feather';

Imports all icons into a namespace `Icon`. Useful for dynamic icon rendering or when needing many icons from the library.

Camera (CommonJS)

✓ const Camera = require('react-feather/dist/icons/camera').default;

✗ const Camera = require('react-feather/icons/camera'); const Camera = require('react-feather/dist/icons/camera');

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.

This quickstart demonstrates how to import and use individual Feather icons as React components, customizing their appearance with props like `color`, `size`, and `strokeWidth`.

import React from 'react'; import { Camera, GitHub, Zap } from 'react-feather'; const App: React.FC = () => { return ( <div> <h1>My React Icons</h1> <p>A simple camera icon:</p> <Camera color="blue" size={36} strokeWidth={2} /> <p>A larger GitHub icon with custom styling:</p> <GitHub color="#333" size={64} style={{ border: '1px solid #eee', padding: '5px' }} /> <p>Another icon, just for fun:</p> <Zap color="orange" size={24} /> </div> ); }; export default App;

Debug

Known issues

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

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;`.

affects: >=2.0.0

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

fix

Use `const IconName = require('react-feather/dist/icons/icon-name').default;` for CommonJS imports of specific icons.

affects: >=1.0.0

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

fix

Ensure your project's `react` and `react-dom` versions are `>=16.8.6`. Upgrade React if necessary.

affects: <16.8.6

gotchaWhile `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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

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

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`).

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.

TypeError: (0, react_feather__WEBPACK_IMPORTED_MODULE_0__.Camera) is not a function

This error often occurs when an imported icon (like `Camera`) is treated as a function call `Camera()` instead of a JSX component `<Camera />`.

fix

Always use `react-feather` icons as JSX components: `<Camera />`.

Module not found: Error: Can't resolve 'react-feather'

The `react-feather` package has not been installed or is not correctly linked in your `node_modules`.

fix

Run `npm install react-feather` or `yarn add react-feather` in your project directory.

Upgrade

Version history

2.0.10latest on npm

Audit

Dependencies

reactrequiredRequired peer dependency for a React component library.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/feathericons/react-feather ↗

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