All tools
Design tools

Icon Finder

Search 500+ open-source icons from Lucide, Heroicons and Feather — copy SVG code, download PNG or grab the React/Vue component import, all in one place.

500+ icons Lucide Heroicons Feather Copy SVG React import
Get started free Sign in

Free · No credit card · 50 credits/day

What you can do with each icon

📋

Copy SVG code

Copy the raw SVG markup — paste it directly into HTML, JSX or your design tool. No external dependency needed.

⬇️

Download PNG

Download the icon as a PNG at 16, 24, 32 or 64px — ready for Figma, Sketch, presentations and docs.

⚛️

React component

Copy the lucide-react or @heroicons/react import statement — paste it into your component and done.

🎨

Customize color

Change stroke color and width in the finder before copying — get exactly the variant your design needs.

🔍

Keyword search

Search by keyword (e.g. "arrow", "user", "settings") — the finder returns matches across all included icon sets.

📦

MIT licensed

All icons in the finder are MIT licensed — safe for commercial use in products, apps and client work without attribution.

Frequently asked questions

What is the best free icon library for web projects?

Most popular in 2024: Lucide (MIT, 1400+ icons, React/Vue/Svelte), Heroicons (MIT, by Tailwind team, 292 icons), Phosphor Icons (MIT, 9000+ icons), Tabler Icons (MIT, 5400+), Material Symbols (Apache 2.0, by Google). For minimal projects: Heroicons or Lucide. For comprehensive coverage: Phosphor or Tabler.

Should I use SVG icons or an icon font?

SVG icons are almost always better: accessible (actual shapes, not characters), render crisply at any size, styleable with CSS, don't block render, and don't cause the "invisible text flash" bug. Only use icon fonts (Font Awesome) for legacy codebases without a build step.

How do I make SVG icons accessible?

Decorative icons: aria-hidden="true". Icons carrying meaning without text: role="img" + aria-label="description". Icon buttons: add aria-label to the button element, not the SVG. Never rely on icon shape alone — pair with text labels for critical actions.

What size should icons be in a UI?

16px (inline text, dense UIs), 20px (nav items, buttons), 24px (most icon libraries' default — spacious and clear), 32–48px (feature highlights, empty states), 64px+ (hero illustrations). Minimum touch target for interactive icons: 44×44px per WCAG 2.5.5.

Related design tools

More tools for building UI assets.

SVG Optimizer

Remove metadata and reduce file size of SVG icons before shipping.

 Favicon Generator

Turn any icon SVG into a full set of favicons for your site.

 Color Palette Generator

Generate the brand colors to apply to your icon set.

Find the perfect icon in seconds

Free account. 50 credits per day. Access to 75+ tools instantly.

Create free account →