← Back to the icons

Lucide icons

Lucide is an open-source set of about 1,900 outline icons. It began as a community fork of Feather and is now one of the most complete sets of its kind, which makes it a safe default for interfaces.

Open this set in Icon Library

Other sets: Feather · Bootstrap Icons · Emoji

A sample of the set

What the style gives you

Every icon is drawn on a 24×24 grid with a 2-unit stroke, rounded ends and no fill. Because the shapes are lines, one icon can be made lighter or heavier by changing stroke-width, with no need for a second file. Icons use currentColor, so they follow the color of the text around them, including on hover and in dark mode.

The consistency is the main reason to choose it. If you mix a Lucide icon with one from a filled set, the difference in visual weight stands out at once.

License

Lucide uses the ISC license, a short permissive license: you can use the icons in personal and commercial projects, and modify them. Keep the license notice when you redistribute the package itself.

Using it in a project

For one or two icons, pasting the SVG is enough and adds no dependency:

<button aria-label="Search">
      <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24" fill="none"
           stroke="currentColor" stroke-width="2">…</svg>
    </button>

For many icons in React, the official package imports each one separately:

npm install lucide-react

    import { Search } from "lucide-react";

    <Search size={20} strokeWidth={1.5} />

There are official packages for other frameworks too. Check lucide.dev for the current list.

Lucide or Feather?

They look almost the same, because Lucide came from Feather. Lucide has more than six times as many icons, so it is more likely to have the one you need. Feather makes sense when you only need common icons and prefer a small, stable set, or when a project already uses it.

Common mistakes