Feather Icons — Simply Beautiful Open-Source Icons

Introduction

Feather Icons is a minimalist icon set of 280+ SVG icons, each drawn on a strict 24x24 pixel grid with consistent 2px strokes. The set covers common UI actions and objects while staying visually cohesive, making it a go-to choice for clean, modern interfaces.

What Feather Icons Does

• Provides 280+ hand-crafted SVG icons covering common UI patterns
• Delivers icons as inline SVG for full CSS styling (color, size, stroke width)
• Offers a JavaScript API that replaces placeholder elements with SVG markup
• Supports tree-shaking so bundlers include only the icons you actually use
• Works with React, Vue, Angular, and Svelte through community wrapper packages

Architecture Overview

Each icon is a standalone SVG file authored with consistent stroke widths, rounded caps, and a 24x24 viewBox. The JavaScript runtime scans the DOM for elements with data-feather attributes and replaces them with the corresponding inline SVG. Since icons are pure SVG, they scale to any size without quality loss and inherit CSS color properties. Build-time imports let bundlers eliminate unused icons.

Self-Hosting & Configuration

• Install via npm or include the CDN script tag — no build step required for basic use
• Call feather.replace() after DOM load to swap data-feather placeholders with SVGs
• Customize icon size and stroke width through feather.replace({ width: 32, height: 32 })
• Import individual icons in JS for tree-shaking: import { camera } from 'feather-icons/dist/icons'
• Use community React/Vue wrappers (react-feather, vue-feather) for component-based usage

Key Features

• Consistent 2px stroke and 24x24 grid across every icon for visual harmony
• Pure SVG output that responds to CSS color, transitions, and transforms
• Lightweight at roughly 50 KB for the entire set (before tree-shaking)
• MIT licensed with no attribution requirement
• Active community maintaining framework-specific wrapper packages

Comparison with Similar Tools

• Lucide — a community fork of Feather with 1,500+ icons and active expansion; choose Lucide for breadth and Feather for the original curated set
• Heroicons — Tailwind CSS team's icon set in two styles (outline and solid); Feather offers a single consistent stroke style
• Ionicons — Ionic's icon pack with 1,300+ icons; larger set but heavier and tied to the Ionic ecosystem
• Bootstrap Icons — official Bootstrap icon library with 2,000+ icons; more comprehensive but stylistically coupled to Bootstrap
• Material Design Icons — Google's extensive icon set; covers more use cases but carries a distinct Material Design aesthetic

FAQ

Q: Can I change the color and size of Feather icons? A: Yes. Icons render as inline SVG, so CSS color, width, height, and stroke-width all apply directly.

Q: How do I use Feather Icons in React? A: Install the react-feather package and import icons as React components: import { Camera } from 'react-feather'.

Q: Are Feather Icons free for commercial use? A: Yes. The entire set is MIT licensed with no restrictions on commercial or personal use.

Q: How does Feather compare to Lucide? A: Lucide is a community-driven fork of Feather that adds hundreds of new icons. Feather remains the original curated set; Lucide expands it.

Sources

• https://github.com/feathericons/feather
• https://feathericons.com/