Icon <l-icon>

Renders icons from any Iconify icon set. Icons are loaded on demand from the Iconify CDN. By default all icons are scaled to 1em height — use font-size to control icon size.

HTML tag<l-icon>

⏣Native HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Custom Element · Shadow DOM

INFO

l-icon uses Iconify under the hood. Browse all available icons at icon-sets.iconify.design.

Options

Code

HTML

<l-icon
  name="lucide:home"
  class="text-4xl"
></l-icon>

Sizes

Icons scale with font-size. Use Tailwind text-* classes.

Code

HTML

<div class="flex items-center gap-4">
  <l-icon
    name="lucide:home"
    class="text-sm"
  ></l-icon>
  <!-- 14px -->
  <l-icon
    name="lucide:home"
    class="text-xl"
  ></l-icon>
  <!-- 20px -->
  <l-icon
    name="lucide:home"
    class="text-3xl"
  ></l-icon>
  <!-- 30px -->
  <l-icon
    name="lucide:home"
    class="text-5xl"
  ></l-icon>
  <!-- 48px -->
</div>

Icon sets

Use any icon from the Iconify library with the prefix:name format.

Code

HTML

<div class="flex items-center gap-4 text-2xl">
  <l-icon name="lucide:heart"></l-icon>
  <l-icon name="mdi:home"></l-icon>
  <l-icon name="tabler:star"></l-icon>
  <l-icon name="ph:lightning-bold"></l-icon>
</div>

Accessible icons

Icons are decorative by default (aria-hidden="true"). Add label for meaningful icons.

Code

HTML

<l-icon
  name="lucide:alert-triangle"
  label="Warning"
  class="text-2xl text-amber-500"
></l-icon>

Accessibility

Criteria

Decorative icons

Icons are hidden from assistive technology by default via aria-hidden="true"

WCAG1.1.1

RGAA1.1

Meaningful icons

Set label to convey meaning — adds aria-label and removes aria-hidden

WCAG1.1.1

RGAA1.1

API reference

Importing

JS

import 'luxen-ui/icon';

Attributes & Properties

nameName

Icon name in Iconify format (prefix:name). Example: lucide:home

labelName

Accessible label. When set, icon becomes meaningful (role="img" + aria-label). When absent, icon is decorative

CSS custom properties

--colorName

The color of the icon. Defaults to currentColor