Use Icon

<jangle-icon> renders a local icon inside a predictable square box. It does not create a button, link, keyboard behavior, or click target; put interaction and its accessible name on the control that owns the Icon.

Add Icon

Configure package access and install Components and Tokens, then load the theme and Icon registration entry:

import '@jangle-ui/tokens/tokens.css';
import '@jangle-ui/components/icon/register';

Use any kebab-case name from the default Lucide icon catalog:

<jangle-icon name="alarm-clock"></jangle-icon>
<jangle-icon name="circle-check" size="lg"></jangle-icon>

Icon definitions come from the installed package. The default provider has no dependency on a third-party icon service or CDN; your bundler may still load its local code chunks at runtime.

Choose an icon name

Use a provider-native Lucide name for ordinary application work. Use a system:* name only when the meaning needs to remain stable if the application changes icon providers. Use an app:kebab-case name for trusted 24-by-24 artwork registered by your application through @jangle-ui/icons.

Provider-native names are intentionally provider-specific. The small system:* set is a portability layer for shared meanings, not a replacement catalog.

Set size and color

Choose xs, sm, md, lg, or xl; the default is sm. These names map to the released Jangle UI size scale. Icon inherits currentColor, so the surrounding text or owning component controls its color.

<p style="color: var(--jangle-color-content-high)">
  <jangle-icon name="info" size="sm"></jangle-icon>
  Review the account details before continuing.
</p>

Choose decorative or meaningful use

Icon is decorative by default. Leave label empty when adjacent text or an owning control already communicates the meaning:

<span>
  <jangle-icon name="circle-check"></jangle-icon>
  Saved
</span>

When a standalone icon communicates information that is not available elsewhere, provide a concise label. Icon then exposes image semantics with that accessible name:

<jangle-icon name="shield-check" size="lg" label="Workspace access is protected"></jangle-icon>

Explore the complete reference

Open Icon in the public Storybook to search the installed Lucide catalog, compare sizes and system icons, test directionality, and review missing-name and accessibility behavior. Storybook is public and does not require a Jangle UI account.