React Feather Icons

2.0.10 · active · verified Sun Apr 19

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.

Common errors

```
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
```
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`).

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

Warnings

breaking 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.
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;`.
gotcha 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.
Fix: Use `const IconName = require('react-feather/dist/icons/icon-name').default;` for CommonJS imports of specific icons.
gotcha 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.
Fix: Ensure your project's `react` and `react-dom` versions are `>=16.8.6`. Upgrade React if necessary.
gotcha 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.
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.

Install

npm install react-feather npm
yarn add react-feather yarn
pnpm add react-feather pnpm

Imports

Camera

wrong:

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

correct:

import { Camera } from 'react-feather';

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

* as Icon
wrong:
```
import { Icon } from 'react-feather';
```
correct:
```
import * as 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)
wrong:
```
const Camera = require('react-feather/icons/camera');
const Camera = require('react-feather/dist/icons/camera');
```
correct:
```
const Camera = require('react-feather/dist/icons/camera').default;
```
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.

Quickstart

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;

view raw JSON →