Feather

Simply beautiful open source icons

Icon setSVG
feathericons/featherfeathericons.com

README

Feather

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.

https://feathericons.com

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

Table of Contents


Quick Start
Usage
  Client-side JavaScript
  Node
  SVG Sprite
  Figma
API Reference
[feather.icons](#feathericons)
[feather.icons[name].toSvg()](#feathericonsnametosvgattrs)
[feather.replace()](#featherreplaceattrs)
[(DEPRECATED) feather.toSvg()](#deprecated-feathertosvgname-attrs)
Contributing
Related Projects
License

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

Usage


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 `