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

github ↗package ↗

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

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

import { Camera } from 'react-feather';

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

import * as Icon from 'react-feather';

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.

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

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 footguns

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.

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.

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.

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.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

0 hits · last 30 days

No traffic data recorded yet.

Resources

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

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