Icon

~1,500 Lucide icons via CDN. Write  — the Lucide CDN script replaces it with an inline SVG at page load. Requires the Lucide <script> tag (see Installation).

Component Specification — components/icon/icon.md

Native basis

 element with data-lucide attribute. Lucide CDN replaces it with an inline SVG.

Usage

•  — decorative (Lucide adds aria-hidden)

•  — meaningful

Sizing

Default is 24×24. Use Tailwind classes (w-4 h-4) or inline styles to resize.

Browse icons

lucide.dev/icons — ~1,500 icons, searchable

Basic usage

Use data-lucide with any icon name from lucide.dev/icons.

<i data-lucide="home"></i>
<i data-lucide="settings"></i>
<i data-lucide="user"></i>
<i data-lucide="search"></i>

Sizes

Use Tailwind width/height classes to control icon size.

w-3 h-3

w-4 h-4

w-5 h-5

w-6 h-6

w-8 h-8

<i data-lucide="star" class="w-3 h-3"></i>
<i data-lucide="star" class="w-4 h-4"></i>
<i data-lucide="star" class="w-5 h-5"></i>
<i data-lucide="star" class="w-6 h-6"></i>
<i data-lucide="star" class="w-8 h-8"></i>

With buttons

Icons inside buttons inherit the button's color.

<button class="btn" data-variant="default">
  <i data-lucide="save"></i>
  Save
</button>

<button class="btn" data-variant="outline" data-size="icon" aria-label="Settings">
  <i data-lucide="settings"></i>
</button>

Color

Icons inherit currentColor. Change color with text color utilities.

<i data-lucide="circle-check" class="text-green-500 w-6 h-6"></i>
<i data-lucide="alert-triangle" class="text-amber-500 w-6 h-6"></i>
<i data-lucide="x-circle" class="text-destructive w-6 h-6"></i>
<i data-lucide="info" class="text-blue-500 w-6 h-6"></i>

Browse all icons

Lucide provides ~1,500 icons. Browse and search the full set at:

lucide.dev/icons