Simply beautiful open source icons



Build status Coverage npm downloads npm version CDNJS version Donate

What is Feather?

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.


  1. ``` sh
  2. npm install feather-icons
  3. ```

Table of Contents

[(DEPRECATED) feather.toSvg()](#deprecated-feathertosvgname-attrs)

Quick Start

Start with this CodePen Template to begin prototyping with Feather in the browser.

Or copy and paste the following code snippet into a blank html file.

  1. ``` html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <title></title>
  5.   <script src="https://unpkg.com/feather-icons"></script>
  6.   <body>
  7. <i data-feather="circle"></i>
  8. <script>
  9.       feather.replace()
  10.     </script>
  11.   </body>
  12. </html>
  13. ```


At its core, Feather is a collection of SVG files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g.img, background-image, inline, object, embed, iframe). Here's a helpful article detailing the many ways SVGs can be used on the web: SVG on the Web – Implementation Options

The following are additional ways you can use Feather.

Client-side JavaScript

1. Install

Note: If you intend to use Feather with a CDN, you can skip this installation step.

Install with npm.

  1. ``` sh
  2. npm install feather-icons --save
  3. ```

Or just copy [feather.js](https://unpkg.com/feather-icons/dist/feather.js) or [feather.min.js](https://unpkg.com/feather-icons/dist/feather.min.js) into your project directory. You don't need both feather.js and feather.min.js.

2. Include

Include `feather.js` or `feather.min.js` with a `