Feather
A free set of simple, consistent line icons you can drop into websites and apps.
- Stars
- 26k
- Forks
- 1.3k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 1.7 years ago
- Type
- Library
No commits in over a year — check for forks or alternatives before adopting.
What it is
Feather is a collection of open-source icons, each drawn on a 24x24 grid with a focus on simplicity and consistency. Because every icon is an SVG file, you can use them anywhere SVGs work on the web. The project also offers an npm package with JavaScript helpers for inserting icons into pages or generating SVG markup in Node.
- Add a settings or search icon to a web page with a single data-feather attribute and feather.replace()
- Generate SVG markup for an icon in a Node script using feather.icons[name].toSvg()
- Use an SVG sprite file to reference icons by name with a short CSS class for styling
- Start a browser prototype from the provided CodePen template
Great for
- Web developers who want a clean set of line icons without designing their own
- Designers who want matching icons in a Figma component library
- Developers building a page with plain HTML who can paste a single script tag
- Teams that want icons as SVG strings they can style with CSS
Not ideal for
- People who need a large icon set with filled or multi-style variants, since the README describes only this one line-style collection
- Anyone expecting a visual icon editor; the README covers usage, not design tools beyond the Figma library
How to get it
- 1
Install with a package manager
You'll need: Node.js (only needed for the npm or Node usage; the CDN method needs no install)
Install the npm package
npm install feather-icons --save - 2
Run it
- Open a blank HTML file and add the script tag from the Quick start section
- Add an element such as <i data-feather="circle"></i> to the page
- Call feather.replace() in a script tag at the end of the body to render the icon
- Browse icon names at feathericons.com and swap in another name
- 3
Get the most out of it
- Use the CSS class approach with the SVG sprite to avoid repeating attributes on every icon
- Pass attributes like color, width, or stroke-width to toSvg() to customize each icon
- Import the Figma component library to match icons in design files
- Use feather.icons[name].toSvg() in Node to generate static SVG markup at build time
Downloads
Strengths
- Simple, consistent 24x24 design that the README describes as a deliberate goal
- Flexible: works as plain SVG, a JavaScript library, or a sprite sheet
- MIT license and available via npm and CDN
Trade-offs
- The README is truncated, so the full icon count and list of features are not confirmed here
- Multi-word icon names need bracket notation in JavaScript, which is a small usability trade-off
- The README marks feather.toSvg() as deprecated, so newer code should use the icon-level API
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| feather (this) | 26k | Library | beginner | 1.7 years ago | Web developers who want a clean set of line icons without designing their own |
| heroicons | 23.9k | Library | beginner | 6 months ago | Web developers building interfaces who want clean, consistent icons |
| tabler-icons | 22.5k | App | beginner | 7 days ago | Web developers who need a consistent set of icons for buttons, menus, and dashboards |
| devicon | 11.9k | Library | beginner | 4 days ago | Web developers who want language or tool logos on a site or README |
| anime | 74.2k | Library | beginner | 3 months ago | Front-end developers adding motion to websites or web apps |
| rough | 21.3k | Library | intermediate | 2.3 years ago | Web developers who want a casual, hand-drawn look for diagrams or illustrations |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.