icon finder

How to use the icon finder

  1. Type a keyword — 'cart', 'user', 'chart' — and the finder returns matching icons across Lucide, Heroicons, Tabler, Phosphor, Feather, Material Symbols, and Font Awesome (free tier).
  2. Filter by library, style (outline, solid, duotone), and license.
  3. Click any icon to preview it at three sizes against a light and dark background.
  4. Copy the SVG source, the JSX component, or the CDN <i> tag.
  5. For multi-icon projects, add picks to a collection and export them all as a sprite sheet or a zip.

When to use it

The icon finder saves time when you don't know which library has the icon you want — searching 'kanban' across seven libraries returns matches in Lucide, Tabler, and Phosphor with a single query. Use the direct library sites (Lucide.dev, Heroicons.com) when you've already committed to one library for the whole project. Alternative: Iconfinder.com covers many more paid libraries but locks free icons behind attribution requirements.

Example

Search 'analytics' → returns chart-line (Lucide), presentation-chart-line (Heroicons), chart-bar (Tabler), chart-donut (Phosphor), trending-up (Feather). Copy the Phosphor JSX:

import { ChartDonut } from "phosphor-react";
<ChartDonut size={24} weight="regular" />

Frequently asked questions

Which icon library should I pick?
Lucide for general-purpose, modern-feel sets with 1,400+ icons. Heroicons if you're on a Tailwind stack. Phosphor for six weight variants. All three are MIT-licensed.
Are these icons free for commercial use?
Every library surfaced here is MIT or equivalent except Font Awesome Pro icons (not included). You can use them in commercial products without attribution.
How do I change the color?
Every icon is a single-color SVG — set color on the parent or fill="currentColor" and the SVG inherits it.
Can I import icons tree-shaken?
Yes for Lucide, Heroicons, and Phosphor. Import each icon by name (e.g., import { Menu } from 'lucide-react') rather than destructuring a barrel export to keep the bundle small.
What if I need a custom icon not in any library?
Use the SVG Optimizer on your own SVG and treat it the same way — inline it as a React component or reference it via <use>.

Related tools

Last updated: 2026-04-22