Feather Icons as a React component.

Usage no npm install needed!

<script type="module">
  import appropriatedFeatherIconsReact from '';


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.

Dynamically change icons

Toggle icon example:

class ToggleIconContainer extends Component {
  constructor() {

    this.state = {
      icon: 'x'

  toggleIcon = (icon) => {

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

    return (
        <FeatherIcon icon={icon} />
            <button onClick={() => this.toggleIcon('x')}>
              Make the Icon an X
            <button onClick={() => this.toggleIcon('anchor')}>
              Make the Icon an Anchor
            <button onClick={() => this.toggleIcon('box')}>
              Make the Icon a box

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

The full list of icon names can be referenced at: