Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/feathericons/feather

Simply beautiful open-source icons
https://github.com/feathericons/feather

icons javascript svg

Last synced: 11 days ago
JSON representation

Simply beautiful open-source icons

Host: GitHub
URL: https://github.com/feathericons/feather
Owner: feathericons
License: mit
Created: 2014-05-28T19:49:55.000Z (over 10 years ago)
Default Branch: main
Last Pushed: 2024-05-06T18:50:57.000Z (6 months ago)
Last Synced: 2024-06-12T22:28:08.205Z (5 months ago)
Topics: icons, javascript, svg
Language: JavaScript
Homepage: https://feathericons.com
Size: 15.4 MB
Stars: 24,596
Watchers: 261
Forks: 1,205
Open Issues: 476
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

awesome - feathericons/feather - Simply beautiful open-source icons (JavaScript)
awesome - feathericons/feather - Simply beautiful open-source icons (JavaScript)
awesome - feather - Simply beautiful open source icons (JavaScript)
my-awesome-list - feather - source icons | feathericons | 24976 | (JavaScript)
Awesome - Feather - Simply beautiful open-source icons - [feathericons.com](https://feathericons.com) (Development / Icons)
awesome-icons - Feather - Simply beautiful open source icons. ([Website](https://feathericons.com)) (General)
awesome-ccamel - feathericons/feather - Simply beautiful open-source icons (JavaScript)
awesome-starred-test - feathericons/feather - Simply beautiful open-source icons (JavaScript)
awesome - feathericons/feather - Simply beautiful open-source icons (JavaScript)
awesome-github-star - feather - source icons | feathericons | 23919 | (JavaScript)
awesome-starts - feathericons/feather - Simply beautiful open source icons (JavaScript)
awesome-iconjar - Feather - 05-01 | 2024-05-13 | MIT | (IconSet Included)
awesome-list - feather
awesome-starred - feathericons/feather - Simply beautiful open-source icons (javascript)
StarryDivineSky - feathericons/feather

README

        # Feather

[![Coverage](https://img.shields.io/codecov/c/github/feathericons/feather/master.svg?style=flat-square)](https://codecov.io/gh/feathericons/feather)

[![npm downloads](https://img.shields.io/npm/dm/feather-icons.svg?style=flat-square)](https://www.npmjs.com/package/feather-icons)

[![npm version](https://img.shields.io/npm/v/feather-icons.svg?style=flat-square)](https://www.npmjs.com/package/feather-icons)

[![CDNJS version](https://img.shields.io/cdnjs/v/feather-icons.svg?style=flat-square)](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

  

  

  

    

    

    

      feather.replace();

    

  

```

## 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 `` tag:

```html

<script src="path/to/dist/feather.js">

```

> [!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

  feather.replace();

```

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 `` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `` tag can be overridden with the `attrs` object. |

> [!NOTE]

> You might find these SVG attributes helpful for manipulating icons:

>

> - [`color`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/color)

> - [`width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width)

> - [`height`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height)

> - [`stroke-width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width)

> - [`stroke-linecap`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap)

> - [`stroke-linejoin`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin)

#### Usage

```js

feather.icons.circle.toSvg();

// ''

feather.icons.circle.toSvg({ 'stroke-width': 1 });

// ''

feather.icons.circle.toSvg({ class: 'foo bar' });

// ''

```

[View Source](https://github.com/feathericons/feather/blob/master/src/icon.js)

---

### `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

> [!IMPORTANT] > `feather.replace()` only works in a browser environment.

Simple usage:

```html



  feather.replace();

```

You can pass `feather.replace()` an `attrs` object:

```html



  feather.replace({ class: 'foo bar', 'stroke-width': 1 });

```

All attributes on the placeholder element (i.e. ``) will be copied to the `` tag:


```html



  feather.replace();

```

[View Source](https://github.com/feathericons/feather/blob/master/src/replace.js)

---

### `feather.toSvg(name, [attrs])` (DEPRECATED)

> [!WARNING] > `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

```js

feather.toSvg('circle');

// ''

feather.toSvg('circle', { 'stroke-width': 1 });

// ''

feather.toSvg('circle', { class: 'foo bar' });

// ''

```

[View Source](https://github.com/feathericons/feather/blob/master/src/to-svg.js)

## Contributing

For more info on how to contribute please see the [contribution guidelines](https://github.com/feathericons/feather/blob/master/CONTRIBUTING.md).

Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/feathericons/feather/blob/master/README.md)

## Related projects

- [feathericons.dev](http://feathericons.dev) - Feather viewer featuring [30+ brand icons](https://feathericons.dev/?iconset=brands) and [40+ payment services icons](https://feathericons.dev/?iconset=payments)

- [angular-feather](https://github.com/michaelbazos/angular-feather) - Feather icons for Angular applications

- [elm-feather](https://github.com/1602/elm-feather) - Feather icons for Elm applications

- [react-feather](https://github.com/carmelopullara/react-feather) - Feather icons as React components

- [sketch-feather](https://github.com/odmln/sketch-feather) - Feather icons as a Sketch library

- [vue-feather-icons](https://github.com/egoist/vue-feather-icons) - Feather icons as Vue components

- [php-feather](https://github.com/Pixelrobin/php-feather) - Feather icons as a PHP Library

- [wp-php-feather](https://github.com/reatlat/wp-php-feather) - Feather icons as a WordPress template tag

- [django-feather](https://pypi.org/project/django-feather/) - Feather icons as Django Template Tag

- [svelte-feather-icons](https://github.com/dylanblokhuis/svelte-feather-icons) - Feather icons as Svelte components

- [gulp-feather](https://github.com/oToToT/gulp-feather) - Feather icons rendering using gulp

- [astro-feather](https://github.com/gabrlyg/astro-feather) - Feather icons as Astro components

- [qwik-feather-icons](https://github.com/yeyon/qwik-feather-icons) - Feather icons for Qwik, the Resumable Framework

- [figma-feather](https://github.com/kevintoepfer/figma-feather) – Feather icons as a Figma component

- [delphi-feather-icons](https://github.com/shaunroselt/Delphi-Feather-Icons) - Feather icons as a Delphi Library

- [eleventy-plugin-feathericons](https://github.com/reatlat/eleventy-plugin-feathericons) - Feather icons as a plugin for [11ty](https://github.com/11ty/eleventy)

## License

Feather is licensed under the [MIT License](https://github.com/feathericons/feather/blob/master/LICENSE).