feather-icons
Advanced tools
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 readability.
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 html file.
<!DOCTYPE html>
<html lang="en">
<title></title>
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
<body>
<!-- example icon -->
<i data-feather="circle"></i>
<script>
feather.replace()
</script>
</body>
</html>
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
Or just copy feather.js or feather.min.js into your project directory. You don't need both feather.js and feather.min.js.
Include feather.js or feather.min.js with a <script> tag. These files are located in the dist directory of the npm package.
<script src="path/to/dist/feather.js"></script>
Or load the script from a CDN provider.
<!-- choose one -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
After including the script, feather will be available as a global variable.
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.
Call the feather.replace() method.
<script>
feather.replace()
</script>
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().
Install with npm.
npm install feather-icons --save
const feather = require('feather-icons')
feather.icons.x
// {
// name: 'x',
// contents: '<line ... /><line ... />`,
// 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',
// }
// }
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 API Reference for more information about the available properties and methods of the feather object.
feather.iconsAn object with information about every icon.
feather.icons.x
// {
// name: 'x',
// contents: '<line ... /><line ... />`,
// 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',
// }
// }
feather.icons.x.toString()
// '<line ... /><line ... />`
feather.icons[name].toSvg([attrs])Returns an SVG string.
| Name | Type | Description |
|---|---|---|
attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object. |
feather.icons.circle.toSvg()
// '<svg class="feather feather-circle" 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"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.icons.circle.toSvg({ 'stroke-width': 1 })
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.icons.circle.toSvg({ class: 'foo bar' })
// '<svg class="feather feather-circle foo bar" 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"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.replace([attrs])Replaces all elements that have a data-feather attribute with SVG markup corresponding to the element's data-feather attribute value.
| Name | Type | Description |
|---|---|---|
attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object. |
Note:
feather.replace()only works in a browser environment.
Simple usage:
<i data-feather="circle"></i>
<!--
<i> will be replaced with:
<svg class="feather feather-circle" 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"><circle cx="12" cy="12" r="10"></circle></svg>
-->
<script>
feather.replace()
</script>
You can pass feather.replace() an attrs object:
<i data-feather="circle"></i>
<!--
<i> will be replaced with:
<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->
<script>
feather.replace({ class: 'foo bar', 'stroke-width': 1 })
</script>
All attributes on the placeholder element (i.e. <i>) will be copied to the <svg> tag:
<i data-feather="circle" id="my-circle" class="foo bar" stroke-width="1"></i>
<!--
<i> will be replaced with:
<svg id="my-circle" class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->
<script>
feather.replace()
</script>
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 attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object. |
feather.toSvg('circle')
// '<svg class="feather feather-circle" 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"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.toSvg('circle', { 'stroke-width': 1 })
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.toSvg('circle', { class: 'foo bar' })
// '<svg class="feather feather-circle foo bar" 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"><circle cx="12" cy="12" r="10"></circle></svg>'
<feather-icon> web componentFor 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.
FAQs
Simply beautiful open source icons
The npm package feather-icons receives a total of 50,479 weekly downloads. As such, feather-icons popularity was classified as popular.
We found that feather-icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.