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.
//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 npm install feather-icons --save4 file.
<!DOCTYPE html> <html lang="en"> <title></title> <script src="//unpkg.com/feather-icons"></script> <body> <!-- example icon --> <i data-feather="circle"></i> <script> feather.replace() </script> </body> </html>
Usage
At its core, Feather is a collection of files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. npm install feather-icons --save5, npm install feather-icons --save6, npm install feather-icons --save7, npm install feather-icons --save8, npm install feather-icons --save9, <script src="path/to/dist/feather.js"></script>0). Here's a helpful article detailing the many ways SVGs can be used on the web:
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 <script src="path/to/dist/feather.js"></script>1 or <script src="path/to/dist/feather.js"></script>2 into your project directory. You don't need both <script src="path/to/dist/feather.js"></script>1 and <script src="path/to/dist/feather.js"></script>2.
2. Include
Include <script src="path/to/dist/feather.js"></script>1 or <script src="path/to/dist/feather.js"></script>2 with a <script src="path/to/dist/feather.js"></script>7 tag:
<script src="path/to/dist/feather.js"></script>
Note: <script src="path/to/dist/feather.js"></script>1 and <script src="path/to/dist/feather.js"></script>2 are located in the <!-- choose one --> <script src="//unpkg.com/feather-icons"></script> <script src="//cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>0 directory of the npm package.
Or load the script from a CDN provider:
<!-- choose one --> <script src="//unpkg.com/feather-icons"></script> <script src="//cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
After including the script, <!-- choose one --> <script src="//unpkg.com/feather-icons"></script> <script src="//cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>1 will be available as a global variable.
3. Use
To use an icon on your page, add a <!-- choose one --> <script src="//unpkg.com/feather-icons"></script> <script src="//cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>2 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 npm install feather-icons --save2 method:
<script> feather.replace() </script>
All elements that have a <!-- choose one --> <script src="//unpkg.com/feather-icons"></script> <script src="//cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>2 attribute will be replaced with SVG markup corresponding to their <!-- choose one --> <script src="//unpkg.com/feather-icons"></script> <script src="//cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>2 attribute value. See the for more information about npm install feather-icons --save2.
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: '<line ... /><line ... />`, // tags: ['cancel', 'close', 'delete', 'remove'], // attrs: { // class: 'feather feather-x', // xmlns: '//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 ... /></svg> 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 ... /></svg>
See the for more information about the available properties and methods of the <!-- choose one --> <script src="//unpkg.com/feather-icons"></script> <script src="//cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>1 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 <!-- choose one --> <script src="//unpkg.com/feather-icons"></script> <script src="//cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>8 into your project directory.
2. Use
Include an icon on your page with the following markup:
<!DOCTYPE html> <html lang="en"> <title></title> <script src="//unpkg.com/feather-icons"></script> <body> <!-- example icon --> <i data-feather="circle"></i> <script> feather.replace() </script> </body> </html>1
Note: <!-- choose one --> <script src="//unpkg.com/feather-icons"></script> <script src="//cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>9 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:
<!DOCTYPE html> <html lang="en"> <title></title> <script src="//unpkg.com/feather-icons"></script> <body> <!-- example icon --> <i data-feather="circle"></i> <script> feather.replace() </script> </body> </html>2
<!DOCTYPE html> <html lang="en"> <title></title> <script src="//unpkg.com/feather-icons"></script> <body> <!-- example icon --> <i data-feather="circle"></i> <script> feather.replace() </script> </body> </html>3
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
npm install feather-icons --save0
An object with data about every icon.
Usage
<!DOCTYPE html> <html lang="en"> <title></title> <script src="//unpkg.com/feather-icons"></script> <body> <!-- example icon --> <i data-feather="circle"></i> <script> feather.replace() </script> </body> </html>4
Note: <i data-feather="circle"></i>1 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. <i data-feather="circle"></i>2) cannot be accessed using dot notation (e.g. <i data-feather="circle"></i>3). Instead, use bracket notation (e.g. <i data-feather="circle"></i>4).
View Source
<i data-feather="circle"></i>5
Returns an SVG string.
Parameters
NameTypeDescription<i data-feather="circle"></i>6 (optional)ObjectKey-value pairs in the <i data-feather="circle"></i>6 object will be mapped to HTML attributes on the <i data-feather="circle"></i>8 tag (e.g. <i data-feather="circle"></i>9 maps to <script> feather.replace() </script>0). All default attributes on the <i data-feather="circle"></i>8 tag can be overridden with the <i data-feather="circle"></i>6 object.Hint: You might find these SVG attributes helpful for manipulating icons:
- <script> feather.replace() </script>3
- <script> feather.replace() </script>4
- <script> feather.replace() </script>5
- <script> feather.replace() </script>6
- <script> feather.replace() </script>7
- <script> feather.replace() </script>8
Usage
<!DOCTYPE html> <html lang="en"> <title></title> <script src="//unpkg.com/feather-icons"></script> <body> <!-- example icon --> <i data-feather="circle"></i> <script> feather.replace() </script> </body> </html>5
View Source
<script> feather.replace() </script>9
Replaces all elements that have a <!-- choose one --> <script src="//unpkg.com/feather-icons"></script> <script src="//cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>2 attribute with SVG markup corresponding to the element's <!-- choose one --> <script src="//unpkg.com/feather-icons"></script> <script src="//cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>2 attribute value.