Guide · Open source

How to use Feather icons: install, embed and style them

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Feather is a free, open-source collection of simple line icons, each drawn on a 24x24 grid. This guide explains how to add Feather icons to a plain HTML page, a JavaScript project or a Node.js script, and how to style them. By the end you will know which setup fits your project and how to swap in any icon by name.

Featherfeathericons/feather · ★ 26k · MIT Install options & downloads

Quick start

1Pick a setup. Choose the CDN script for a plain HTML page, or the npm package for a project. The npm route needs Node.js.
2Load the script. Add a script tag from unpkg or jsDelivr, or install feather-icons with npm.
3Mark an icon. Add a data-feather attribute with an icon name, such as circle, to an element.
4Call replace. Run feather.replace() so each marked element becomes SVG markup.
5Browse names. Look up icon names on feathericons.com before you use them.
6Style the output. Adjust colour, stroke-width and size with CSS or the toSvg attrs object.

What Feather is and what you need before you start

Feather is a collection of SVG icons. Because every icon is an SVG file, you can use it anywhere SVGs work on the web, including as an img, a background-image, inline markup, an object, an embed or an iframe.

The CDN method needs no install. The npm package and the Node.js usage require Node.js, which the source lists as a prerequisite for those methods only.

Plain HTML page: no install, just a script tag
npm or Node.js project: Node.js is required
Figma: a component library is available for designers

Add Feather icons to an HTML page with a script tag

Copy the quick start template into a blank html file. It loads the script from unpkg, marks an icon with a data-feather attribute and calls feather.replace() to swap the marker for SVG markup.

You can also load the script from jsDelivr instead of unpkg. Pick one of the two lines, not both.

Set the icon name in data-feather, for example circle
Call feather.replace() after the script loads
Find all icon names at feathericons.com

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

Install the npm package and use it in a project

Install the package with npm. The README uses the --save flag, which is shown here as in the source.

If you would rather not use npm, you can copy feather.js or feather.min.js into your project folder from the dist directory. You only need one of the two files.

Feather files are in the dist directory of the npm package
feather.min.js is the minified build

npm install feather-icons --save

Generate SVG markup in Node.js

In Node, require the package and read icons from feather.icons. Each icon has a toSvg() method that returns an SVG string, which you can write into HTML or a template.

Pass an attrs object to toSvg() to add or override attributes on the svg tag, such as class, color or stroke-width. Multi-word icon names such as arrow-right must use bracket notation, for example feather.icons['arrow-right'].

const feather = require('feather-icons');
feather.icons.x.toSvg() returns the SVG string
feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' }) adds your own attributes

const feather = require('feather-icons');

feather.icons.x.toSvg();

feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' });

Use an SVG sprite to avoid repeating attributes

An SVG sprite lets you reference icons by ID from one file. Copy feather-sprite.svg into your project, or install it with npm, then point a use element at the icon you want.

Feather's sprite markup sets the stroke and fill attributes on the svg element. To avoid repeating them, you can move the same values into a CSS class named feather.

Reference an icon with path/to/feather-sprite.svg#circle
Replace circle with any valid icon name
Apply the .feather class to set size, stroke and fill once

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

Style Feather icons with CSS and SVG attributes

Feather icons use stroke set to currentColor by default, so they take the text colour of their container. You can change the colour, width or line caps through CSS or through the attrs object in toSvg().

The README lists these SVG attributes as useful for adjusting icons: color, width, height, stroke-width, stroke-linecap and stroke-linejoin.

Set colour with CSS color on the parent, since strokes use currentColor
Use stroke-width to make lines thicker or thinner
Keep the 24x24 grid in mind when changing width and height

What people use it for

Adding clean line icons to a marketing or documentation page without designing them
Generating SVG strings in a Node.js build step or template
Using a shared sprite file so icons across a site use the same stroke settings
Matching icons in a Figma design by duplicating the Feather component library

Frequently asked questions

Is Feather free to use?

Feather is open source and released under the MIT licence, as stated in the project's listing. Check the LICENSE file in the repository for the full terms before you ship a product with it.

Do I need to install anything to use Feather icons?

No, if you use the CDN method you only add a script tag to your HTML. Installing with npm is optional and is useful for bundled projects or Node.js scripts.

What do I need to run feather-icons with npm?

You need Node.js for the npm or Node usage. The CDN method does not need Node.js.

How do I install feather-icons?

Run npm install feather-icons --save in your project folder. You can also copy feather.js or feather.min.js from the dist directory into your project instead.

Why does my multi-word icon not show when I use dot notation?

Icons with multi-word names such as arrow-right cannot be accessed with dot notation. Use bracket notation instead, for example feather.icons['arrow-right'].

How does Feather compare with Lucide, Heroicons or Tabler Icons?

Feather is a single line-style collection on a 24x24 grid. The project's listing names Lucide, Heroicons, Tabler Icons and Phosphor Icons as comparable projects, so compare them on style and icon coverage for your needs.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Feather suits web developers and designers who want a small, consistent set of MIT-licensed line icons and can use a script tag, npm package or SVG sprite. It is a poor fit if you need filled icons, multiple styles or a visual icon editor, since the README describes only this one line-style collection.

Install options & downloads