# Feather
[](https://codecov.io/gh/feathericons/feather)
[](https://www.npmjs.com/package/feather-icons)
[](https://www.npmjs.com/package/feather-icons)
[](https://cdnjs.com/libraries/feather-icons)
## 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
```shell
npm install feather-icons
```
## Table of contents
- [Quick start](#quick-start)
- [Usage](#usage)
- [Client-side JavaScript](#client-side-javascript)
- [Node](#node)
- [SVG sprite](#svg-sprite)
- [Figma](#figma)
- [API reference](#api-reference)
- [`feather.icons`](#feathericons)
- [`feather.icons[name].toSvg()`](#feathericonsnametosvgattrs)
- [`feather.replace()`](#featherreplaceattrs)
- [`feather.toSvg()` (DEPRECATED) ](#feathertosvgname-attrs-deprecated)
- [Contributing](#contributing)
- [Related projects](#related-projects)
- [License](#license)
## Quick start
Start with this [CodePen Template](https://codepen.io/pen?template=WOJZdM) to begin prototyping with Feather in the browser.
Or copy and paste the following code snippet into a blank `html` file.
```html
```
## Usage
At its core, Feather is a collection of [SVG](https://svgontheweb.com/#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](https://svgontheweb.com/#implementation)
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](https://docs.npmjs.com/getting-started/what-is-npm).
```shell
npm install feather-icons --save
```
Or just copy [`feather.js`](https://unpkg.com/feather-icons/dist/feather.js) or [`feather.min.js`](https://unpkg.com/feather-icons/dist/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 `
```
> [!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:
```html
```
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:
```html
```
See the complete list of icons at [feathericons.com](https://feathericons.com).
#### 4. Replace
Call the `feather.replace()` method:
```html
```
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](#api-reference) for more information about `feather.replace()`.
### Node
#### 1. Install
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm):
```shell
npm install feather-icons --save
```
#### 2. Require
```js
const feather = require('feather-icons');
```
#### 3. Use
```js
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();
//
feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' });
//
```
See the [API Reference](#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](https://docs.npmjs.com/getting-started/what-is-npm).
```shell
npm install feather-icons --save
```
Or just copy [`feather-sprite.svg`](https://unpkg.com/feather-icons/dist/feather-sprite.svg) into your project directory.
#### 2. Use
Include an icon on your page with the following markup:
```html
```
> [!NOTE] > `circle` in the above example can be replaced with any valid icon name. See the complete list of icon names at [feathericons.com](https://feathericons.com).
However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:
```css
.feather {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
```
```html
```
### Figma
Feather is available as a [Figma component library](https://www.figma.com/file/dyJRSFTIajik4cdkcXN8yA3K/Feather-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
```js
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();
// ''
```
> [!NOTE] > `x` in the above example can be replaced with any valid icon name. See the complete list of icon names at [feathericons.com](https://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](https://github.com/feathericons/feather/blob/master/src/icons.js)
---
### `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 `