Best Icon Sets for UI Designers

Choosing an icon set early saves hours of hunting and inconsistency later. These six sets cover most UI needs. The main variables: style (line vs fill vs mixed), license, and whether you need a React library.

Lucide (lucide.dev)

Style: Line icons, 2px stroke, 24x24px default grid.

License: MIT — free for commercial use, no attribution required.

Figma: Official Figma Community file with all icons as individual components. Search "Lucide Icons" in the Community tab.

React library: Yes — lucide-react. The best React icon library currently available. Tree-shakeable, TypeScript support, easy size and color props.

Why it's a top pick: Lucide started as a community-maintained fork of Feather Icons, and it now has 1,400+ icons covering essentially every common UI need. The stroke consistency across icons is excellent. If you're building a React product, Lucide is the default recommendation.

Feather Icons (feathericons.com)

Style: Line icons, minimal, clean.

License: MIT.

Figma: Available in Figma Community. Search "Feather Icons."

Why it's worth using: Feather is what Lucide is based on — a set of 280 very clean, very minimal icons. Fewer icons than Lucide, but tighter visual consistency. If you only need basic icons and want a lean set, Feather is still excellent.

Phosphor Icons (phosphoricons.com)

Style: Six weights — Thin, Light, Regular, Bold, Fill, Duotone.

License: MIT.

Figma: Official Figma file available on the Phosphor website. 9,000+ icons across all weights.

Why it's a top pick: The multi-weight system is Phosphor's major differentiator. You can use Light icons for decorative or secondary contexts and Bold or Fill for primary actions — within the same icon set, maintaining visual consistency. The Duotone weight (two-tone with opacity) works well for empty states and illustrations.

If your project needs icon weight variation, Phosphor is the choice.

Heroicons (heroicons.com)

Style: Two styles — Outline (24px, 1.5px stroke) and Solid (20px, filled).

License: MIT.

Figma: Official Figma file linked from heroicons.com.

React/Vue library: Yes — the official @heroicons/react and @heroicons/vue packages.

Why it's worth using: Made by the Tailwind CSS team, Heroicons pairs naturally with Tailwind-styled projects. The two-style system (outline for most use, solid for active/selected states) mirrors how most component libraries handle icon states. 292 icons — smaller set than the others, but covers common UI thoroughly.

Material Icons (fonts.google.com/icons)

Style: Five variants — Outlined, Rounded, Sharp, Two Tone, Filled. 2,500+ icons.

License: Apache 2.0 — free for commercial use.

Figma: Available via Google's official Figma Material Design kit.

Why it's worth using: Scale and completeness. If you need an obscure icon — a very specific device, a specialized action, a technical symbol — Material Icons probably has it. The breadth is unmatched.

The drawback: The default style can feel generic and "Google-ish." The Rounded variant is more neutral and works better in non-Material design systems.

Font Awesome (fontawesome.com)

Style: Solid, Regular, Light, Brands. 30,000+ icons in the Pro version; ~2,000 in the free version.

License: Free icons are CC-BY 4.0 (attribution required for some uses). Pro is $99/year.

Figma: Available in Figma Community.

Why it's worth using: The most recognizable icon set on the web. Every common icon is there — and many uncommon ones too. The Brands collection (logos for services, platforms, social networks) is particularly valuable.

When to use it: When you need an icon that smaller sets don't cover, or when you need platform/brand logos. Font Awesome free is fine for most projects; Pro adds icon variety rather than essential icons.

Use icons in Figma

Quick decision guide

• React project, needs a code library: Lucide
• Need multiple weights in one set: Phosphor
• Tailwind project: Heroicons
• Need maximum icon coverage: Material Icons or Font Awesome
• Minimal aesthetic, small set is fine: Feather