yarn add feather-icons-react

This package lets you use Feather Icons as a React Component. It currently supports up to version 4.29.2

• Usage
• Contributing

You can use the default export and pass the 'icon' prop:

import FeatherIcon from 'feather-icons-react';
<FeatherIcon icon="close" />;

Or you can use the provided named export in place of the icon prop:

import { Close } from 'feather-icons-react';
<Close />;

This gives you the flexibility to dynamically change the icon if you want to use the default export (like in the Toggle Icon example below), or potentially save on size in your application bundle by not having to require all of the icons by using the default export.

Setting a size:

Size can be passed as either string or number.

e.g.: <FeatherIcon icon="copy" size="24" /> or <Copy size={24} />

Sizes can always be easily overridden by CSS.

Setting fill and other properties

Fill defaults to none, but can be passed as a React prop

<FeatherIcon icon="heart" fill="red" />

Addtionally, you can add any other SVG tag properties, and they will pass through.

Setting colors

Use CSS. The icons default to use currentColor. This is equivalent to whatever text color is being used in the icon's container.

Toggle icon example:

const ToggleIconContainer = () => {
  const [icon, setIcon] = useState('x');

  return (
    <div>
      <FeatherIcon icon={icon} />
      <ul>
        <li>
          <button onClick={() => setIcon('x')}>Make the Icon an X</button>
        </li>
        <li>
          <button onClick={() => setIcon('anchor')}>
            Make the Icon an Anchor
          </button>
        </li>
        <li>
          <button onClick={() => setIcon('box')}>Make the Icon a box</button>
        </li>
      </ul>
    </div>
  );
};

The icons are all square, based on a 24x24 grid.

The full list of icon names can be referenced at: feathericons.com

To build the bundled assets for consumption yarn build

The easiest way to update icons is to use the automated script:

npm run update-icons

This script will:

1. Install the latest feather-icons package as a devDependency
2. Extract the icons.json file from the package
3. Copy it to src/icons.json
4. Update the README with the new version
5. Run the build process to generate new icon components

If you prefer to update manually, you can generate a new icons.json and get a PR up so this package stays in sync with the latest feather icons. Go into your desired project directory (ideally one directory above where you have feather-icons-react saved)

1. git clone https://github.com/feathericons/feather.git
2. cd feather && npx install
3. npx babel-node bin/build-icons-json.js
4. cp dist/icons.json ../feather-icons-react/src/icons.json
5. Now open the file you just copied. Format the file, try to avoid entire green so the diff looks neat in the PR.

Alternatively, you can simply copy just the lines from the JSON file you know are missing. This is easier if you're just adding one new icon.

You can use the demo directory to verify your changes.

Build the main package first (if not already built):

yarn build

Navigate to the demo directory:

cd demo

Install demo dependencies:

yarn install

Start the dev server:

yarn dev

Run the test suite (builds the package first, then runs tests):

yarn test

Tests cover:

• Build scripts: generate-icon-exports.js creates src/IconComponents and appends named exports to src/index.ts; clean-icon-exports.js restores src/index.ts and removes src/IconComponents.
• Rendering: The default import (FeatherIcon with icon prop) and named imports (e.g. X) render the expected SVG output from the built package.