Lucide

About Lucide

Lucide is one of the most popular open-source SVG icon libraries for modern web development, offering 1,500+ clean, consistent line icons free for personal and commercial use under the MIT license. Born as a community-maintained fork of Feather Icons after Feather development stalled, Lucide has grown into an independent icon system with a consistent 2px stroke, 24px grid, and rounded line caps — crisp at every size from 16px to 48px. Each Lucide icon is hand-crafted for optical balance, making the set feel cohesive across any interface. First-class packages for React, Vue, Svelte, and Angular are maintained alongside a plain JavaScript build. Search, copy SVG code, export as JSX or Base64, or download as PNG — all free. Compared with Heroicons, Lucide offers a wider catalog; compared with Tabler, it has a more refined aesthetic. Ideal for SaaS products, documentation sites, dashboards, and component libraries using Tailwind CSS or shadcn/ui. MIT licensed — no attribution required.

How to use Lucide icons

npm install lucide-react

import { Search, Home, Settings } from 'lucide-react';

export default function App() {
  return <Search size={24} strokeWidth={1.5} />;
}

<!-- Lucide via CDN (ES module) -->
<script type="module">
  import { createIcons, Search } from 'https://cdn.jsdelivr.net/npm/lucide@latest/dist/esm/lucide.js';
  createIcons({ icons: { Search } });
</script>
<i data-lucide="search"></i>

import { Icon } from '@iconify/react';

export default function App() {
  return <Icon icon="lucide:icon-name" width={24} />;
}

Compare Lucide with similar icon packs