Icon

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

Component Skill — components/icon/component-skill.md

Native basis

<i> element with data-lucide attribute. Icons are provided by the [Lucide](https://lucide.dev) icon library via CDN. Lucide replaces each <i data-lucide="name"> with an inline SVG on page load.

Web Platform APIs

<svg> aria-hidden currentColor prefers-reduced-motion forced-colors prefers-contrast

Data attributes

• data-lucide — icon name (required)

• data-size — xs | sm | md | lg | xl

• data-animate — spin

Notes

• Icons inherit currentColor for stroke — they automatically match the parent's text color

• Browse all available icons at lucide.dev/icons

• Lucide provides ~1,500 icons covering every common web app need

• The CDN script replaces <i data-lucide="name"> elements with inline SVGs on page load

• Use stroke-width attribute to adjust line thickness (default: 2)

• Prefer visually-hidden text (.sr-only) over aria-label for accessible standalone icons

• Animations (e.g., data-animate="spin") are suppressed when the user has prefers-reduced-motion enabled

• prefers-contrast: more increases stroke width to 2.5 for better visibility

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 data-size to control icon size.

xs (12px)

sm (14px)

default (16px)

md (20px)

lg (24px)

xl (32px)

<i data-lucide="star" data-size="xs"></i>
<i data-lucide="star" data-size="sm"></i>
<i data-lucide="star"></i>
<i data-lucide="star" data-size="md"></i>
<i data-lucide="star" data-size="lg"></i>
<i data-lucide="star" data-size="xl"></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" data-size="lg" style="color:oklch(0.72 0.19 142);"></i>
<i data-lucide="alert-triangle" data-size="lg" style="color:oklch(0.77 0.17 75);"></i>
<i data-lucide="x-circle" data-size="lg" style="color:var(--destructive);"></i>
<i data-lucide="info" data-size="lg" style="color:oklch(0.62 0.21 255);"></i>

Stroke width

Adjust line thickness with the stroke-width attribute. Default is 2.

1.5

<i data-lucide="heart" data-size="lg" stroke-width="1"></i>
<i data-lucide="heart" data-size="lg" stroke-width="1.5"></i>
<i data-lucide="heart" data-size="lg" stroke-width="2"></i>
<i data-lucide="heart" data-size="lg" stroke-width="3"></i>

Accessible icon

For standalone icons that convey meaning, use visually-hidden text or aria-label.

<!-- Preferred: visually-hidden text -->
<span style="display:inline-flex;align-items:center;">
  <i data-lucide="phone" aria-hidden="true"></i>
  <span class="sr-only">Phone number</span>
</span>

<!-- Alternative: aria-label -->
<i data-lucide="alert-triangle" aria-label="Warning" role="img"></i>

Animated (spinner)

Add data-animate="spin" for loading indicators. Animation is suppressed when the user has prefers-reduced-motion enabled.

<i data-lucide="loader-circle" data-size="md" data-animate="spin"></i>

<button class="btn" data-variant="outline" disabled>
  <i data-lucide="loader-circle" data-animate="spin"></i>
  Loading…
</button>

Filled icons

Use the fill and stroke-width attributes for filled icon variants. Works well with simple shapes.

<i data-lucide="star" data-size="lg" fill="currentColor" stroke-width="0"></i>
<i data-lucide="heart" data-size="lg" fill="currentColor" stroke-width="0"></i>

<!-- Filled with stroke outline -->
<i data-lucide="star" data-size="lg" fill="currentColor" stroke-width="1"></i>

Browse all icons

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

lucide.dev/icons

CSS view file

/* -- Icon component ---------------------------------------- */
/* Styling for Lucide CDN icons (<i data-lucide="name">).     */
/* Lucide replaces <i> with <svg>, these styles target that.  */

@layer components {
  [data-lucide] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    width: 1rem;
    height: 1rem;
    pointer-events: none;

    /* -- Sizes via data-size --------------------------------- */
    &[data-size="xs"] { width: 0.75rem; height: 0.75rem; }
    &[data-size="sm"] { width: 0.875rem; height: 0.875rem; }
    &[data-size="md"] { width: 1.25rem; height: 1.25rem; }
    &[data-size="lg"] { width: 1.5rem; height: 1.5rem; }
    &[data-size="xl"] { width: 2rem; height: 2rem; }

    /* -- Spin animation ------------------------------------- */
    &[data-animate="spin"] {
      animation: icon-spin 1s linear infinite;
    }
  }

  @keyframes icon-spin {
    to { transform: rotate(360deg); }
  }

  /* ---- Accessibility ---------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    [data-lucide] {
      animation: none !important;
      transition: none !important;
    }
  }

  @media (prefers-contrast: more) {
    [data-lucide] {
      stroke-width: 2.5;
    }
  }

  @media (forced-colors: active) {
    [data-lucide] {
      color: CanvasText;
    }
  }
}