feather

Simply beautiful open-source icons

24,931

1,218

24,931

476

View on GitHub View on NPM

Top Related Projects

tabler-icons

17,904

A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.

ionicons

17,564

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

octicons

8,302

A scalable set of icons handcrafted with <3 by GitHub

Font-Awesome

73,502

The iconic SVG, font, and CSS toolkit

material-design-icons

50,411

Material Design icons by Google (Material Symbols)

RemixIcon

6,609

Open source neutral style icon system

Quick Overview

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. The project provides these icons in various formats and offers easy integration options for developers and designers.

Pros

Clean and minimalist design aesthetic
Extensive collection of icons (280+) covering various categories
Available in multiple formats (SVG, PNG, and icon font)
Easy to customize and integrate into projects

Cons

Limited color options (primarily monochrome)
May not have highly specialized icons for niche industries
Requires additional setup for some frameworks or environments

Code Examples

Using Feather icons with HTML and SVG:

<i data-feather="circle"></i>
<script src="https://unpkg.com/feather-icons"></script>
<script>
  feather.replace();
</script>

Using Feather icons with React:

import { Circle } from 'react-feather';

function MyComponent() {
  return <Circle />;
}

Using Feather icons with Vue.js:

<template>
  <feather-circle></feather-circle>
</template>

<script>
import { Circle } from 'vue-feather-icons'

export default {
  components: {
    FeatherCircle: Circle
  }
}
</script>

Getting Started

To use Feather icons in your project, you can follow these steps:

Install the package using npm:
```
npm install feather-icons
```

Import and use the icons in your JavaScript:

import feather from 'feather-icons';

// To replace all icons on the page
feather.replace();

// To create a specific icon
const circleIcon = feather.icons.circle.toSvg();

Alternatively, you can include Feather icons via CDN:

<script src="https://unpkg.com/feather-icons"></script>
<script>
  feather.replace();
</script>

For more detailed instructions and advanced usage, refer to the official documentation on the GitHub repository.

Competitor Comparisons

tabler-icons

17,904

A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.

Pros of Tabler Icons

Larger icon set with over 3,100 icons compared to Feather's 287
More diverse icon styles, including filled and outlined versions
Regular updates and active community contributions

Cons of Tabler Icons

Larger file size due to the extensive icon set
Less consistent design style across all icons
May require more time to find specific icons due to the larger collection

Code Comparison

Feather:

<i data-feather="user"></i>
<script>
  feather.replace()
</script>

Tabler Icons:

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <circle cx="12" cy="7" r="4" />
  <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>

Both icon sets offer high-quality SVG icons, but Tabler Icons provides more options and styles. Feather focuses on simplicity and consistency, making it easier to use and integrate. Tabler Icons offers more flexibility but may require additional effort to maintain a consistent look across your project. Choose based on your specific needs and design preferences.

ionicons

17,564

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

Pros of Ionicons

Larger icon set with over 1,200 icons, offering more variety
Includes both iOS and Material Design style icons
Supports SVG and web font formats, providing flexibility in implementation

Cons of Ionicons

Larger file size due to the extensive icon set
May require more time to find specific icons due to the larger collection
Some icons may have inconsistent styling across different design languages

Code Comparison

Feather:

<i data-feather="user"></i>
<script>
  feather.replace()
</script>

Ionicons:

<ion-icon name="person"></ion-icon>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

Both libraries offer simple implementation, but Ionicons requires additional script imports for full functionality. Feather's approach is more lightweight, while Ionicons provides more options for icon styles and formats.

Feather focuses on simplicity and consistency, with a smaller set of carefully designed icons. Ionicons offers a broader range of icons and styles, catering to different design languages and use cases. The choice between the two depends on project requirements, design preferences, and performance considerations.

octicons

8,302

A scalable set of icons handcrafted with <3 by GitHub

Pros of Octicons

Larger icon set with over 200 icons, providing more variety
Specifically designed for GitHub's UI, ensuring consistency with the platform
Offers multiple file formats (SVG, PNG, AI) for versatility

Cons of Octicons

More complex implementation due to multiple file formats and sizes
Heavier file size, potentially impacting load times
Less suitable for non-GitHub projects due to specific design language

Code Comparison

Feather:

<i data-feather="circle"></i>
<script>
  feather.replace()
</script>

Octicons:

<svg class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
  <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>

Font-Awesome

73,502

The iconic SVG, font, and CSS toolkit

Pros of Font-Awesome

Larger icon set with over 7,000 icons
Includes both free and paid premium icons
Supports multiple file formats (SVG, webfonts, etc.)

Cons of Font-Awesome

Larger file size due to extensive icon set
More complex implementation and customization
Steeper learning curve for advanced features

Code Comparison

Feather:

<i data-feather="user"></i>
<script>
  feather.replace()
</script>

Font-Awesome:

<i class="fas fa-user"></i>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Key Differences

Feather focuses on simplicity with a smaller, curated set of icons
Font-Awesome offers more variety and customization options
Feather uses JavaScript to replace elements, while Font-Awesome relies on CSS classes
Font-Awesome has a larger community and ecosystem

Use Cases

Feather: Ideal for projects requiring a minimalist design and smaller file sizes
Font-Awesome: Better suited for projects needing a wide variety of icons and styles

Both icon sets are popular and well-maintained, with active communities and regular updates. The choice between them depends on project requirements, design preferences, and performance considerations.

material-design-icons

50,411

Material Design icons by Google (Material Symbols)

Pros of Material Design Icons

Extensive collection with over 2,000 icons in various styles and themes
Comprehensive design system with guidelines for consistent usage
Regular updates and additions to the icon set

Cons of Material Design Icons

Larger file size due to the vast number of icons
May require more effort to customize or modify icons
Potential performance impact when loading many icons

Code Comparison

Material Design Icons:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">favorite</i>

Feather:

<script src="https://unpkg.com/feather-icons"></script>
<i data-feather="heart"></i>
<script>
  feather.replace()
</script>

Summary

Material Design Icons offers a vast collection of icons with comprehensive guidelines, making it suitable for large-scale projects adhering to Material Design principles. Feather, on the other hand, provides a smaller, more minimalist set of icons that are easier to customize and integrate into various design systems. The choice between the two depends on project requirements, design preferences, and performance considerations.

RemixIcon

6,609

Open source neutral style icon system

Pros of RemixIcon

Larger icon set with over 2,400 icons compared to Feather's 287
More diverse categories, including business, finance, and weather icons
Offers both line and filled versions of icons

Cons of RemixIcon

Larger file size due to the extensive icon set
Less minimalistic design approach compared to Feather's simplicity
May require more time to find specific icons due to the larger collection

Code Comparison

RemixIcon:

<i class="ri-home-line"></i>
<i class="ri-home-fill"></i>

Feather:

<i data-feather="home"></i>

Both libraries offer easy integration, but RemixIcon provides more flexibility with line and filled versions. Feather's implementation is slightly simpler, requiring only one line of code per icon.

RemixIcon offers a wider range of icons and styles, making it suitable for projects requiring diverse iconography. Feather, on the other hand, excels in simplicity and minimalism, ideal for clean, straightforward designs. The choice between the two depends on the specific needs of your project, balancing between variety and simplicity.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Feather

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

npm install feather-icons

Quick start
Usage
API reference
Contributing
Related projects
License

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 html file.

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://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 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.

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 feather.js or 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 <script> tag:

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

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

<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

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:

<i data-feather="circle"></i>

See the complete list of icons at feathericons.com.

4. Replace

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().

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: '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 ... /></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.

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 feather-sprite.svg into your project directory.

2. Use

Include an icon on your page with the following markup:

<svg
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <use href="path/to/feather-sprite.svg#circle" />
</svg>

[!NOTE] > circle 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:

.feather {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

<svg class="feather">
  <use href="path/to/dist/feather-sprite.svg#circle" />
</svg>

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

`feather.icons`

An object with data about every icon.

Usage

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',
//    },
//    toSvg: [Function],
// }

feather.icons.x.toString();
// '<line ... /><line ... />'

[!NOTE] > x 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. 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

`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 `<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] You might find these SVG attributes helpful for manipulating icons:

color

width

height

stroke-width

stroke-linecap

stroke-linejoin

Usage

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>'

View Source

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

Usage

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

View Source

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

Usage

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>'

View Source

Contributing

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

Related projects

feathericons.dev - Feather viewer featuring 30+ brand icons and 40+ payment services icons
angular-feather - Feather icons for Angular applications
elm-feather - Feather icons for Elm applications
react-feather - Feather icons as React components
sketch-feather - Feather icons as a Sketch library
vue-feather-icons - Feather icons as Vue components
php-feather - Feather icons as a PHP Library
wp-php-feather - Feather icons as a WordPress template tag
django-feather - Feather icons as Django Template Tag
svelte-feather-icons - Feather icons as Svelte components
gulp-feather - Feather icons rendering using gulp
astro-feather - Feather icons as Astro components
qwik-feather-icons - Feather icons for Qwik, the Resumable Framework
figma-feather â Feather icons as a Figma component
delphi-feather-icons - Feather icons as a Delphi Library
eleventy-plugin-feathericons - Feather icons as a plugin for 11ty

License

Feather is licensed under the MIT License.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Tabler Icons

Cons of Tabler Icons

Code Comparison

Pros of Ionicons

Cons of Ionicons

Code Comparison

Pros of Octicons

Cons of Octicons

Code Comparison

Pros of Font-Awesome

Cons of Font-Awesome

Code Comparison

Key Differences

Use Cases

Pros of Material Design Icons

Cons of Material Design Icons

Code Comparison

Summary

Pros of RemixIcon

Cons of RemixIcon

Code Comparison

Convert designs to code with AI

README

Feather

What is Feather?

Table of contents

Quick start

Usage

Client-side JavaScript

1. Install

2. Include

3. Use

4. Replace

Node

1. Install

2. Require

3. Use

SVG sprite

1. Install

2. Use

Figma

API reference

feather.icons

Usage

feather.icons[name].toSvg([attrs])

Parameters

Usage

feather.replace([attrs])

Parameters

Usage

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

Parameters

Usage

Contributing

Related projects

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days

`feather.icons`

`feather.icons[name].toSvg([attrs])`

`feather.replace([attrs])`

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