Media & Visual

Icon

Displays an icon from the Lucide icon library. All ~1,600+ Lucide icons are supported, referenced by their kebab-case name. Use icons to add visual context to labels, buttons, cards, and other elements.

<Icon name="map-pin" size="xl" color="primary" />

Props

Prop	Type	Default	Description
name	`string`	—	The icon to display. Accepts any Lucide icon name in kebab-case (e.g. `"heart"`, `"calendar-days"`, `"arrow-right"`) or a custom alias.
size	`"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"2xl"` \| `"3xl"`	`"md"`	Controls the rendered size of the icon.
stroke	`number`	`2`	Stroke width of the icon.
fill	`string`	`"transparent"`	Fill color of the icon. Use `"currentColor"` for a filled appearance.
color	`string`	—	Sets the icon color. Accepts theme tokens like `primary`, `secondary`, `success`, `danger`, etc.

Icon field format

When specifying an icon in component props that accept an icon value, you can use either format:

A plain string — just the icon name:
"heart"

An object — with optional styling overrides:

{ "name": "heart", "stroke": 1.5, "fill": "currentColor" }

Custom icon aliases

In addition to the full Lucide set, the following semantic aliases are available for convenience:

Alias	Lucide Icon
`agent`	`bot`
`analytics`	`chart-bar`
`batch`	`layers`
`bolt`	`zap`
`book-clock`	`book-marked`
`check-circle-filled`	`circle-check`
`circle-question`	`circle-help`
`confetti`	`party-popper`
`lifesaver`	`life-buoy`
`maps`	`map`
`mobile`	`smartphone`
`name`	`user`
`notebook-pencil`	`notebook-pen`
`page-blank`	`file`
`profile`	`user`
`profile-card`	`id-card`
`reload`	`refresh-cw`
`settings-slider`	`sliders-horizontal`
`sparkle-double`	`sparkles`
`sparkle`	`sparkles`
`square-code`	`code`
`square-image`	`image`
`square-text`	`text`
`star-filled`	`star`
`suitcase`	`briefcase`
`wreath`	`award`
`write`	`pencil`
`write-alt`	`pen-tool`
`write-alt2`	`square-pen`
`close`	`x`
`add`	`plus`
`remove`	`minus`
`delete`	`trash-2`
`edit`	`pencil`
`success`	`circle-check`
`error`	`circle-x`
`warning`	`triangle-alert`
`caution`	`triangle-alert`
`danger`	`octagon-alert`
`discovery`	`sparkles`
`back`	`arrow-left`
`forward`	`arrow-right`
`up`	`arrow-up`
`down`	`arrow-down`
`stop`	`square`
`paste`	`clipboard`
`attachment`	`paperclip`
`external`	`external-link`
`rain`	`cloud-rain`
`snow`	`snowflake`
`arrow-down-az`	`arrow-down-az`
`arrow-down-za`	`arrow-down-za`
`arrow-up-az`	`arrow-up-az`
`arrow-up-za`	`arrow-up-za`

Browse the full icon set at lucide.dev/icons. Any icon listed there can be used by its kebab-case name.

Image

Displays an image with flexible sizing, fitting, and theme-aware source support.

<Image src={productImage} width={120} height={120} radius="md" fit="cover" />

You can also provide separate images for light and dark themes:

<Image
  src={{ light: lightLogo, dark: darkLogo }}
  width={200}
  height={60}
  fit="contain"
/>

Props

Prop	Type	Default	Description
src	`string` \| `{ light: string, dark: string }`	—	Image source URL. Pass an object with `light` and `dark` keys to display different images based on the active theme.
alt	`string`	—	Alternative text for accessibility.
size	`number`	—	Square shorthand — sets both `width` and `height` to the same value.
width	`number`	—	Image width in pixels.
height	`number`	—	Image height in pixels.
minWidth	`number`	—	Minimum width constraint.
maxWidth	`number`	—	Maximum width constraint.
minHeight	`number`	—	Minimum height constraint.
maxHeight	`number`	—	Maximum height constraint.
minSize	`number`	—	Minimum size shorthand (applies to both dimensions).
maxSize	`number`	—	Maximum size shorthand (applies to both dimensions).
aspectRatio	`number`	—	Aspect ratio for the image container (e.g., `16/9`).
radius	`string`	—	Border radius token (e.g., `"sm"`, `"md"`, `"lg"`, `"full"`).
background	`string`	—	Background color behind the image.
flex	`number`	—	Flex grow/shrink value for layout sizing.
fit	`"cover"` \| `"contain"` \| `"fill"` \| `"scale-down"` \| `"none"`	—	How the image fills its container, matching the CSS `object-fit` property.
position	`"center"` \| `"top"` \| `"bottom"` \| `"left"` \| `"right"` \| `"top left"` \| `"top right"` \| `"bottom left"` \| `"bottom right"`	`"center"`	Alignment of the image within its container when `fit` causes cropping.
frame	`boolean`	—	When `true`, wraps the image in a subtle border frame.
flush	`boolean`	—	When `true`, removes default padding around the image.
onClickAction	`string`	—	Function name to invoke when the image is clicked.

Use fit="cover" with a fixed width and height to crop images into consistent thumbnails. Use fit="contain" when you need to show the full image without cropping.

Badge

A small label used to indicate status, categories, or tags.

<Badge label="Active" color="success" variant="soft" />

<Badge label="Overdue" color="danger" variant="solid" pill />

Props

Prop	Type	Default	Description
label	`string`	—	The text displayed inside the badge.
color	`"secondary"` \| `"success"` \| `"danger"` \| `"warning"` \| `"info"` \| `"discovery"`	`"secondary"`	Semantic color of the badge.
variant	`"solid"` \| `"soft"` \| `"outline"`	`"soft"`	Visual style. `solid` uses a filled background, `soft` uses a tinted background, and `outline` shows only a border.
size	`"sm"` \| `"md"` \| `"lg"`	`"sm"`	Controls the size of the badge.
pill	`boolean`	—	When `true`, applies fully rounded corners for a pill shape.

Combine badges with layout components to build tag lists or status indicators inside cards and tables.

Transition

Wraps a child element with a fade-in and fade-out animation. Use this to add polish when content appears or disappears — for example, when toggling visibility with states.

<Transition>
  <Text value="This fades in" />
</Transition>

The animation applies a 0.2-second fade with a slight vertical slide. There are no configurable props — simply wrap any element to enable the effect.

Transition works well with States to animate content that conditionally appears based on user input or data changes.

Getting Started

JavaScript Embed Features

API v1 Reference

Advanced Integration

Widgets

Icon

Props

Icon field format

Custom icon aliases

Image

Props

Badge

Props

Transition

​Icon

​Props

​Icon field format

​Custom icon aliases

​Image

​Props

​Badge

​Props

​Transition

Icon

Props

Icon field format

Custom icon aliases

Image

Props

Badge

Props

Transition