Simply beautiful open source icons
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
Start with this CodePen Template to begin prototyping with Feather in the browser.
Or copy and paste the following code snippet into a blank
htmlfile.
<!-- example icon --> <i data-feather="circle"></i> <script> feather.replace() </script>
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.
Note: If you intend to use Feather with a CDN, you can skip this installation step.
Install with npm.
npm install feather-icons --save
feather.jsor
feather.min.jsinto your project directory. You don't need both
feather.jsand
feather.min.js.
Include
feather.jsor
feather.min.jswith a tag:
Note:
feather.jsandfeather.min.jsare located in thedistdirectory of the npm package.
Or load the script from a CDN provider:
After including the script,
featherwill be available as a global variable.
To use an icon on your page, add a
data-featherattribute with the icon name to an element:
See the complete list of icons at feathericons.com.
Call the
feather.replace()method:
All elements that have a
data-featherattribute will be replaced with SVG markup corresponding to their
data-featherattribute value. See the API Reference for more information about
feather.replace().
Install with npm:
npm install feather-icons --save
const feather = require('feather-icons')
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
featherobject.
Note: If you intend to use Feather with a CDN, you can skip this installation step.
Install with npm.
npm install feather-icons --save
feather-sprite.svginto your project directory.
Include an icon on your page with the following markup:
Note:
circlein 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; }
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.
feather.icons
An object with data about every icon.
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:
xin 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']).
feather.icons[name].toSvg([attrs])
Returns an SVG string.
| Name | Type | Description | | --------- | ------ | ----------- | |
attrs(optional) | Object | Key-value pairs in the
attrsobject 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
attrsobject. |
Hint: You might find these SVG attributes helpful for manipulating icons: *
color*width*height*stroke-width*stroke-linecap*stroke-linejoin
feather.icons.circle.toSvg() // ''feather.icons.circle.toSvg({ 'stroke-width': 1 }) // ''
feather.icons.circle.toSvg({ class: 'foo bar' }) // ''
feather.replace([attrs])
Replaces all elements that have a
data-featherattribute with SVG markup corresponding to the element's
data-featherattribute value.
| Name | Type | Description | | ---------- | ------ | ----------- | |
attrs(optional) | Object | Key-value pairs in the
attrsobject 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
attrsobject. |
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:
feather.toSvg(name, [attrs])
Note:
feather.toSvg()is deprecated. Please usefeather.icons[name].toSvg()instead.
Returns an SVG string.
| Name | Type | Description | | --------- | ------ | ----------- | |
name| string | Icon name | |
attrs(optional) | Object | Key-value pairs in the
attrsobject 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
attrsobject. |
feather.toSvg('circle') // ''feather.toSvg('circle', { 'stroke-width': 1 }) // ''
feather.toSvg('circle', { class: 'foo bar' }) // ''
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
Feather is licensed under the MIT License.