# Feather Icons — Simply Beautiful Open-Source Icons

> A collection of over 280 simply beautiful open-source icons designed on a 24x24 grid. Each icon emphasizes simplicity, consistency, and readability, making them ideal for web and mobile interfaces.

## Install

Save in your project root:

# Feather Icons — Simply Beautiful Open-Source Icons

## Quick Use
```bash
npm install feather-icons
```
```html
<!-- CDN usage -->
<script src="https://unpkg.com/feather-icons"></script>
<script>feather.replace()</script>
<!-- Place icons with data attributes -->
<i data-feather="arrow-right"></i>
<i data-feather="camera"></i>
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-21c8865f
Author: AI Open Source