data-display / stable

Icon

Optically sized Lucide glyphs and tinted tiles with semantic tones and accessible labels.

LIVE PREVIEW

Loading preview…

When to use

Icon beside text, in a labelled action, or as a standalone labelled image.
IconTile for empty states, settings rows, notifications and entity markers.

Consider an alternative

Actions without a Button — these display primitives have no keyboard interaction.
Colour alone to communicate status — keep a visible text label.

Import

import { Icon } from '@revido-llc/kit';

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


as	LucideIcon	—	Lucide component to render, e.g. `as={Inbox}`.
label	string	—	Accessible name for a standalone image. Omit beside visible text.
name	"bell" \| "check" \| "chevron-down" \| "chevron-left" \| "chevron-right" \| "chevron-up" \| "circle-help" \| "clipboard" \| "file-text" \| "flag" \| "folder-kanban" \| …	—	Registered Lucide kebab name for JSON composition. Supply name or as.
size	"lg" \| "md" \| "sm" \| "xl" \| "xs"	"md"	Optical size; md (16px) by default. Strokes are 1.25 / 1.5 / 1.75px.
tone	"danger" \| "default" \| "info" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning"	"default"	Semantic text colour; default uses foreground.
className	string	—

Related exports

IconTile

Examples

Sizes × tones

12 / 14 / 16 / 20 / 24px glyphs use non-scaling 1.25 / 1.5 / 1.75px strokes.

<Icon as={Inbox} />
<Icon as={Sparkles} size="xl" tone="primary" label="AI assistance" />

Tile shapes × variants

Soft tints, outlined markers and solid fills, with square or circular containers.

<IconTile as={Inbox} tone="primary" />
<IconTile as={Check} tone="success" shape="circle" variant="solid" />

Tile sizes

24 / 32 / 40px containers use 12 / 16 / 20px glyphs by default.

<IconTile as={Inbox} size="sm" />
<IconTile as={Inbox} size="lg" />

Named glyphs

Registered Lucide kebab names compose from JSON without importing components.

<Icon name="inbox" label="Inbox" />
<IconTile name="folder-open" tone="primary" label="Projects" />

In context

An empty inbox, a settings row and a notification keep their meaning in nearby text.

<IconTile as={Settings} tone="primary" />
<span>Workspace settings</span>

// Preserve stored identification colors; ordinary UI uses semantic tone.
<IconTile as={Layers} colors={{ background: moduleBackground, foreground: moduleForeground }} />
<IconTile variant="dot" colors={{ background: moduleColor }} />