I'm a developer

feather

by feathericons

feathericons /feather

Simply beautiful open source icons

18.9K Stars 831 Forks Last release: 6 months ago (v4.28.0) MIT License 629 Commits 50 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

npm install feather-icons

Table of Contents

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. 
  
  



<!-- 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
). 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 
 tag:





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





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: '`,
//    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
 object.


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
 into your project directory.



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
 (optional) | Object |  Key-value pairs in the 
attrs
 object will be mapped to HTML attributes on the 
 tag (e.g. 
{ foo: 'bar' }
 maps to 
foo="bar"
). All default attributes on the 
 tag can be overridden with the 
attrs
 object. |




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
 attribute with SVG markup corresponding to the element's 
data-feather
 attribute value.


Parameters



| Name       | Type   | Description |
| ---------- | ------ | ----------- |
| 
attrs
 (optional)  | Object | Key-value pairs in the 
attrs
 object will be mapped to HTML attributes on the 
 tag (e.g. 
{ foo: 'bar' }
 maps to 
foo="bar"
). All default attributes on the 
 tag can be overridden with the 
attrs
 object. |


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. 
) will be copied to the 
 tag:








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
    | string | Icon name   |
| 
attrs
 (optional) | Object |  Key-value pairs in the 
attrs
 object will be mapped to HTML attributes on the 
 tag (e.g. 
{ foo: 'bar' }
 maps to 
foo="bar"
). All default attributes on the 
 tag can be overridden with the 
attrs
 object. |


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





License



Feather is licensed under the MIT License.

  
   
   
   
   



 We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.