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

  • (DEPRECATED)

    feather.toSvg()

• 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

  
  


<!-- example icon -->
<i data-feather="circle"></i>

<script>
  feather.replace()
</script>

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

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

feather.min.js

feather.js

feather.min.js

2. Include

Include

feather.js

feather.min.js

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:

After including the script,

feather

3. Use

To use an icon on your page, add a

data-feather

See the complete list of icons at feathericons.com.

4. Replace

Call the

feather.replace()

All elements that have a

data-feather

data-feather

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: '`,
//    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()
// <svg class="feather feather-x" ...><line ...><line ...>
feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' })
// <svg class="feather feather-x foo bar" stroke-width="1" color="red" ...><line ...><line ...>

See the API Reference for more information about the available properties and methods of the

feather

SVG Sprite

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-sprite.svg

2. Use

Include an icon on your page with the following markup:

Note:

circle

in the above example can be replaced with any valid icon name. See the complete list of icon names at feathericons.com.

However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:

.feather {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

Figma

Feather is available as a Figma component library. To use the components, log in to your Figma account and duplicate the file to your drafts.

API Reference

feather.icons

An object with data about every icon.

Usage

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.toString()
// '<line ...><line ...>'

Note:

x

in the above example can be replaced with any valid icon name. See the complete list of icon names at feathericons.com. Icons with multi-word names (e.g.

arrow-right

) cannot be accessed using dot notation (e.g.

feather.icons.x

). Instead, use bracket notation (e.g.

feather.icons['arrow-right']

).

View Source

feather.icons[name].toSvg([attrs])

Returns an SVG string.

Parameters

| Name | Type | Description | | --------- | ------ | ----------- | |

attrs

attrs

{ foo: 'bar' }

foo="bar"

attrs

Hint: You might find these SVG attributes helpful for manipulating icons: *

color

*

width

*

height

*

stroke-width

*

stroke-linecap

*

stroke-linejoin

Usage

feather.icons.circle.toSvg()
// ''

feather.icons.circle.toSvg({ 'stroke-width': 1 })
// ''
feather.icons.circle.toSvg({ class: 'foo bar' })
// ''

View Source

feather.replace([attrs])

Replaces all elements that have a

data-feather

data-feather

Parameters

| Name | Type | Description | | ---------- | ------ | ----------- | |

attrs

attrs

{ foo: 'bar' }

foo="bar"

attrs

Usage

Note:

feather.replace()

only works in a browser environment.

Simple usage: ```html <!-- will be replaced with: -->

You can pass `feather.replace()` an `attrs` object:
```html

All attributes on the placeholder element (i.e.

View Source

(DEPRECATED)

feather.toSvg(name, [attrs])

Note:

feather.toSvg()

is deprecated. Please use

feather.icons[name].toSvg()

instead.

Returns an SVG string.

Parameters

| Name | Type | Description | | --------- | ------ | ----------- | |

name

attrs

attrs

{ foo: 'bar' }

foo="bar"

attrs

Usage

feather.toSvg('circle')
// ''

feather.toSvg('circle', { 'stroke-width': 1 })
// ''
feather.toSvg('circle', { class: 'foo bar' })
// ''

View Source

Contributing

For more info on how to contribute please see the contribution guidelines.

Caught a mistake or want to contribute to the documentation? Edit this page on Github

Related Projects

• angular-feather - Feather icons for Angular applications
• elm-feather - Feather icons for Elm applications
• react-feather - Feather icons as React components
• sketch-feather - Feather icons as a Sketch library
• vue-feather-icons - Feather icons as Vue components
• php-feather - Feather icons as a PHP Library
• wp-php-feather - Feather icons as a WordPress template tag
• django-feather - Feather icons as Django Template Tag
• svelte-feather-icons - Feather icons as Svelte components

License

Feather is licensed under the MIT License.