Feather Icons

Stroke-based SVG icon set built on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility. Each icon uses outlines rather than fills, making it easy to scale and style via stroke-width and color. The collection ships as vanilla SVG files plus a small JavaScript API for client-side and Node usage.

Feather stands out among icon sets by staying framework-agnostic: use it via npm, CDN, or raw SVG sprites, with no React or Vue dependency at the core. A broad ecosystem of community wrappers brings the icons into Angular, React, Vue, Svelte, Astro, Django, and WordPress. The Figma component library lets designers and developers share the same assets.

Key features:

• Client-side replacement via data-feather attributes and feather.replace()
• Node API with feather.icons[name].toSvg() for programmatic SVG output with customizable attrs
• SVG sprite for inline or external use, CDN delivery via unpkg and jsDelivr
• Customizable stroke-width, color, and dimensions per icon
• Figma component library and framework-specific wrappers for major stacks

Fits well in navigation bars, buttons, form controls, dashboards, and status indicators. The stroke-based style suits minimal UI themes and pairs well with CSS variables for theming. Developers often combine it with Tailwind or utility CSS for quick icon styling.