Skip to content

Icons

Preview Available in release assets

Provide an auditable Lucide subset as currentColor standalone SVGs, inline snippets, and an optional same-origin sprite, plus a small presentation class.

Icons primary example

Show code
<div class="thin-cluster">
  <svg class="thin-icon" aria-hidden="true">
    <use href="/icons/sprite.svg#search">
    </use>
  </svg>
  <button class="thin-button" type="button" aria-label="Search">
    <svg class="thin-icon" aria-hidden="true">
      <use href="/icons/sprite.svg#search">
      </use>
    </svg>
  </button>
  <svg class="thin-icon" role="img" aria-labelledby="delivery-title">
    <title id="delivery-title">Delivery truck</title>
    <use href="/icons/sprite.svg#truck">
    </use>
  </svg>
</div>

Anatomy

  • 91 curated icons
  • 24 by 24 viewBox
  • currentColor stroke
  • Standalone SVG files
  • Same-origin sprite
  • Manifest, provenance, and license metadata

Variants and sizes

  • Decorative icon
  • Icon-only control
  • Meaningful standalone image
  • Inline standalone SVG
  • Same-origin sprite use

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • 16 to 48 CSS pixels
  • Light and dark themes
  • High contrast
  • Forced colors
  • Right-to-left directional review
  • Loading failure

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

SVGs add no interaction. The containing native link or button owns keyboard, pointer, disabled, and accessible-name behavior.

Accessibility

Hide decorative SVGs with aria-hidden=true. Give icon-only controls an accessible name on the control. For a meaningful standalone SVG, use role=img with a referenced title. Meaningful icons require 3:1 non-text contrast; never rely on an icon alone when text or state is required.

Contract
PLATFORM
Basis
Native CSS layout and document defaults over semantic HTML; no APG widget

API

Use /icons/svg/{name}.svg, copy a manifest snippet inline, or reference /icons/sprite.svg#{name} from the same origin. Apply class=thin-icon for 1em currentColor presentation. Review manifest metadata before choosing a directional icon.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Accessible text and control names communicate meaning if icons are unavailable.

Assets and dependencies

  • /foundation.css
  • /icons/manifest.json
  • /icons/sprite.svg
  • /icons/svg/*.svg

Dependencies: None

Source: packages/ui/src/icons/index.ts

Composition

Derived from the examples and style specs, not authored.

Composes