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

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()
  • 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.

  <title></title>
  
  
    
    <i data-feather="circle"></i>

    
  

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.

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 `

> [!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:

<i data-feather="circle"></i>

See the complete list of icons at feathericons.com.

4. Replace

Call the feather.replace() method:

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:

npm install feather-icons --save

2. Require

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

3. Use

feather.icons.x;
// {
//    name: 'x',
//    contents: '