Feather Icons
Simply beautiful open source icons — the original minimal icon set
STATS
OVERVIEW
Feather Icons is the original minimal open-source icon library that inspired a generation of modern icon sets. Created by Cole Bemis, Feather established the design language of clean, consistent stroke-based icons that libraries like Lucide later built upon.
With 287 carefully crafted icons, Feather prioritizes quality and consistency over quantity. Every icon is designed on a 24x24 grid with a 2px stroke, rounded line caps, and rounded line joins — creating a cohesive, friendly aesthetic that works well for consumer-facing applications.
The react-feather package provides typed React components for all icons. Each component is tree-shakable and accepts size, color, strokeWidth, and className props. However the library has not received significant updates since 2020 and is considered feature-complete by its maintainer.
// VERDICTFeather Icons is a classic for a reason — the design quality is exceptional for its size. However for new projects in 2026, Lucide Icons is the better choice as it is a direct spiritual successor with 5x more icons, active maintenance, and the same design philosophy.
INSTALLATION
npm install react-feather
npm install react-feather // Note: Works with Next.js but note the library is no longer actively maintained. Consider Lucide Icons as a maintained alternative.
// No official Vue package. Use vue-feather community package or SVG files directly.
// No official Svelte package. Use SVG files directly from feathericons.com
npm install feather-icons
CODE EXAMPLES
import { Home, Settings, User } from 'react-feather'
export default function App() {
return (
<div>
<Home size={24} />
<Settings size={24} color="#6366f1" />
<User size={24} strokeWidth={1} />
</div>
)
}import { Bell } from 'react-feather'
export default function Navbar() {
return (
<button className="flex items-center gap-2 text-gray-500">
<Bell className="h-5 w-5" />
<span>Notifications</span>
</button>
)
}// Vanilla JS usage
const feather = require('feather-icons')
feather.replace()
// In HTML:
// <i data-feather="home"></i>