Feather Icons React

npm install --save feather-icons-react

This package lets you use Feather Icons as a React Component. Feather Icons is an svg font library by Cole Bemis.

Example usage:

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

Setting a size:

Size can be passed as either string or number.

e.g.: <FeatherIcon icon="copy" size="24" /> or <... 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.

Dynamically change icons

Toggle icon example:

class ToggleIconContainer extends Component {
  constructor() {
    super();

    this.state = {
      icon: 'x'
    };
  }

  toggleIcon = (icon) => {
    this.setState({
      icon
    });
  }

  render() {
    const { icon } = this.state;

    return (
      <div>
        <FeatherIcon icon={icon} />
        <ul>
          <li>
            <button onClick={() => this.toggleIcon('x')}>
              Make the Icon an X
            </button>
          </li>
          <li>
            <button onClick={() => this.toggleIcon('anchor')}>
              Make the Icon an Anchor
            </button>
          </li>
          <li>
            <button onClick={() => this.toggleIcon('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