README

Feather






 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

shell
npm install feather-icons


 Table of contents

- Quick start
- Usage
  - Client-side JavaScript
  - Node
  - SVG sprite
  - Figma
- API reference
  - feather.icons
  - [feather.icons[name].toSvg()](feathericonsnametosvgattrs)
  - feather.replace()
  - feather.toSvg() (DEPRECATED) 
- 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.

html


  
  
  
    
    

    
      feather.replace();
    
  



 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.

shell
npm install feather-icons --save


Or just copy feather.js or 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  tag:

html



 [!NOTE]
 feather.js and feather.min.js are located in the dist directory of the npm package.

Or load the script from a CDN provider:

html





After including the script, feather will be available as a global variable.

 3. Use

To use an icon on your page, add a data-feather attribute with the icon name to an element:

html



See the complete list of icons at feathericons.com.

 4. Replace

Call the feather.replace() method:

html

  feather.replace();



All elements that have a data-feather attribute will be replaced with SVG markup corresponding to their data-feather attribute value. See the API Reference for more information about feather.replace().

 Node

 1. Install

Install with npm:

shell
npm install feather-icons --save


 2. Require

js
const feather = require('feather-icons');


 3. Use

js
feather.icons.x;
// {
//    name: 'x',
//    contents: ',
//    tags: ['cancel', 'close', 'delete', 'remove'],
//    attrs: {
//      class: 'feather feather-x',
//      xmlns: 'http://www.w3.org/2000/svg',
//      width: 24,
//      height: 24,
//      viewBox: '0 0 24 24',
//      fill: 'none',
//      stroke: 'currentColor',
//      'stroke-width': 2,
//      'stroke-linecap': 'round',
//      'stroke-linejoin': 'round',
//    },
//    toSvg: [Function],
// }

feather.icons.x.toSvg();
// 

feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' });
// 


See the API Reference for more information about