Icon Finder

About the Lucide library

Lucide is an open-source library with over 1300 SVG icons, born as a Feather Icons fork and shipped under the ISC license. Every icon is precisely traced and already optimized.

Icons on this page load on demand. The copy button hands you either the SVG markup or just the name, which you can drop into React via lucide-react.

Taking it into your own project? npm i lucide is worth a look.

Lucide: the evolution of Feather Icons

Lucide is a community-maintained fork of the Feather Icons set that Cole Bemis built in 2013. Feather development went quiet around 2020, and a group of contributors picked it up, renamed it Lucide and kept the original look while growing the catalog from roughly 280 icons to more than 1,700 today. The search on this page runs on the official lucide-static package, so whatever you copy here matches what ships in the upstream library.

Every Lucide icon obeys the same rules: a 24x24 pixel canvas, a 2px stroke, rounded line caps and joins, and currentColor as the stroke value. That shared discipline is the whole point. Drop any icon into your layout and it carries the same line weight, optical balance and personality as the rest of the set, so nothing looks out of place. The project ships under the permissive ISC license, free for personal and commercial work, and comes with bindings for React, Vue, Svelte, Solid, Preact, Angular, Astro, React Native, Flutter and plain web components.

Why SVG, and not icon fonts or PNGs

SVG (Scalable Vector Graphics) is an XML-based vector format and a W3C standard. PNG and JPG store pixels; an SVG stores geometric instructions instead, so it stays sharp at any resolution, whether that's a 16px favicon or a billboard print. Stack it against icon fonts (Font Awesome 4, Glyphicons, and so on) and SVG comes out ahead on several fronts:

• True multi-color and gradients through inline fill, stroke or CSS variables.
• Accessibility: an SVG takes role, aria-label and a child <title> element. Icon fonts lean on pseudo-elements that screen readers sometimes skip.
• No FOIT/FOUT: the icon paints with the HTML; there's no font file to wait for.
• CSS animation: animate stroke-dasharray, transform and the rest.
• Smaller payloads: one Lucide icon runs about 300-500 bytes uncompressed, far below any font subset.

How to integrate Lucide into your project

1. Copy-paste the raw SVG

Quickest route: find the icon above, click to copy, and drop the markup straight into your HTML. There's no bundler and no build step. Since it uses stroke="currentColor", the SVG picks up color from the surrounding color CSS property.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
     viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>

2. npm package (recommended for SPAs)

Lucide publishes a package per framework. In React each icon is a tree-shakable component, so only the icons you import make it into the bundle.

npm install lucide-react

import { ArrowRight, Search } from 'lucide-react'

export default function CTA() {
  return <button>Buy now <ArrowRight size={18} strokeWidth={2} /></button>
}

3. CDN drop-in (no build step)

<script src="https://unpkg.com/lucide@latest"></script>
<i data-lucide="camera"></i>
<script>lucide.createIcons();</script>

4. Web component

When you want something framework-agnostic, Lucide ships a Custom Element you can drop into any HTML page or design system.

<script type="module" src="https://cdn.jsdelivr.net/npm/lucide-web@latest/+esm"></script>
<lucide-icon name="heart" color="crimson" size="32"></lucide-icon>

Comparison with other icon libraries

Choosing an icon set mostly comes down to look and how many icons you get. Here's the short version:

• Lucide — 1,700+ icons, one outline style, an adjustable strokeWidth. A solid default for modern dashboards and shadcn/ui-based UIs, at roughly 0.5 KB per icon gzipped.
• Heroicons — 292 hand-curated icons in outline (24px), solid (24px) and mini (20px). The Tailwind Labs team keeps it, and it lines up exactly with Tailwind UI.
• Phosphor — 7,700+ icons in six weights (thin, light, regular, bold, fill, duotone). The broadest range here, and the one to reach for when you want duotone or thin-line looks.
• Feather — the original 287-icon set. Lovely work, but it stalled in 2020; start new projects on Lucide instead.
• Material Symbols — Google's official set (3,400+ icons), driven by a variable font (weight, fill, grade, optical size). It slots right into Material 3.

Performance: tree-shaking, lazy loading, sprite sheets

There's no reason to ship all 1,700 icons when your page renders a dozen. A few approaches keep the payload small:

• Tree-shaking: import icons one at a time (import { Search } from 'lucide-react') and let the bundler drop the rest. ESM-only imports are what make it work; barrel re-exports like import * as Icons kill tree-shaking.
• Inline SVG: paste the markup straight into the HTML. No extra HTTP requests, full CSS control, at the cost of a few more bytes in the document.
• SVG sprite sheets: bundle icons into one file with <symbol id="..."> and pull them in via <use href="#...">. Cached once and reused everywhere, which pays off when an icon shows up dozens of times.
• Lazy loading: push icons that only appear on lower-priority routes into async chunks. In React, React.lazy or dynamic imports handle this.
• SVGO: run the icons through SVGO once to strip metadata, comments and unused attributes, which trims 10-30% off the size.

Accessibility checklist

• Decorative icons (sitting next to visible text): add aria-hidden="true" and focusable="false", since the label already lives in the text.
• Meaningful icons (icon-only buttons): give them role="img" plus aria-label="...", or nest a <title> element. Either way a screen reader gets a name to read.
• Contrast: WCAG 2.2 wants at least 3:1 for non-text UI components against their background. A pale gray icon on white usually fails, so push it to #525252 or darker.
• Hit area: an interactive icon needs a touch target of at least 24x24 CSS pixels, and 44x44 is the iOS recommendation. Wrap small icons in padded buttons.
• Don't rely on color alone: back up status icons (success, warning, error) with text or a shape that reads differently.

FAQ

Can I use Lucide icons commercially?

Yes. Lucide uses the ISC license, which in practice works like MIT. You can use it commercially, modify it and redistribute it, as long as the license notice stays in your source distributions.

How do I change icon color?

Lucide icons carry stroke="currentColor", so they take the CSS color of whatever contains them. Put color: #ef4444 on the button and the icon goes red on its own.

Can I request a new icon?

Yes. The Lucide GitHub repository takes issues and pull requests. Whatever you submit has to follow the design rules (24x24 grid, 2px stroke, rounded caps), and the docs include a contributor guide that spells it out.

Is Lucide better than Heroicons?

Neither one wins outright; they answer different needs. Heroicons (292 icons) is the better fit for Tailwind-first projects that care about polish over count. Lucide (1,700+) is the call when you need range and the ability to tune the stroke. The bundle-size gap between them barely registers.

Why does my icon look fuzzy?

Lucide icons are drawn for sizes that are multiples of 24px. Render one at 17px or 23px and the stroke can fall on half-pixel boundaries. Snap to 16/24/32/48, or set shape-rendering="geometricPrecision" to ease the antialiasing.