Feather Icons

What Feather Icons is

Feather Icons is a free, open-source icon collection with 287 icons drawn on a 24×24 grid. Its simple, consistent style can be adjusted on the website through controls for icon size, stroke width, and color. The icons are SVG files, usable inline or in an image, background image, object, embed, or iframe. For JavaScript projects, Feather can be added with npm as feather-icons or loaded from a CDN for client-side use. The Node API provides icon data and SVG output, and feather.icons[name].toSvg([attrs]) returns an SVG string with optional attributes that override defaults. The project also documents SVG sprites using a use element and offers a Figma component library that can be duplicated to a user’s drafts after logging in to Figma. Feather.replace() works only in a browser environment. The project uses the MIT License, which permits use, copying, modification, distribution, sublicensing, and sale under its conditions; the license disclaims warranties and names Cole Bemis as copyright holder for 2013–2023.

Who it suits

Feather Icons suits designers and developers who need a free, customizable SVG icon set for web or JavaScript projects. It also fits Figma users who want to work with the icons as a component library.

Getting started

1. Open https://feathericons.com/ to browse the icon library.
2. Adjust icon size, stroke width, or color with the website controls.
3. Use SVG files directly, or add feather-icons through npm or a CDN.
4. For a Node project, require feather-icons and access icon data or SVG output through its API.
5. Use the documented SVG sprite approach with a use element, or duplicate the Figma component library to your drafts after logging in to Figma.

Verdict

Choose Feather Icons if you want a free, open-source SVG set with customization and several ways to use it in web projects. Look elsewhere if you need feather.replace() to work outside a browser environment.