Lucide Icons

Guides

Practical walkthroughs for using Lucide icons in real projects: React, Vue and Svelte, plain HTML and the icon font, stroke width and size, choosing between icon sets, and licensing.

How to use Lucide icons in React and Next.js

Install lucide-react, import icons by name, set size, color and stroke width, apply defaults with LucideProvider, and load icons by name with DynamicIcon.

Lucide icons in Vue, Svelte, Angular and plain HTML

The current Lucide packages for Vue, Svelte 5 and Angular, how to use the icon font, and how to add icons to a page without a framework.

Lucide vs Heroicons: which icon set should you use?

Lucide and Heroicons compared on size, styles, frameworks, license and look, with a quick way to decide and how to switch from one to the other.

Lucide license: can you use Lucide icons commercially?

A plain-English look at the ISC License that covers Lucide, the MIT License on icons that came from Feather, and common questions about attribution and redistribution.