IconBox

Renders an icon inside a styled surface box — for empty states, feature highlights, and status indicators. Icon size defaults to the box size. Import from "@desk/ui/components/icon-box".

Usage

import { IconBox, IconBoxProps } from "@desk/ui/components/icon-box";

Best practices

Reach for IconBox for a framed-icon surface (empty states, feature highlights) instead of wrapping Icon in a hand-styled div — it owns the size→radius and box→icon-size pairings.
Set colour via tone, not a hex/bg-* className — tone carries the paired surface+foreground tokens, including the dark-mode variants.
Let iconSize default from the box size; override only when the glyph must break the built-in BOX_TO_ICON_SIZE ratio.

Props

Prop	Type	Description
icon(required)	`import("../../tokens/icon-component").IconComponent`	Icon component from lucide-react or any SVG React component.
iconClassName	`string`	Additional className for the icon itself.
iconSize	`IconSize \| undefined`	Size of the icon inside the box. Defaults based on box size.
tone	`"neutral" \| "brand" \| "danger" \| "warning" \| "success" \| "info" \| null \| undefined`
radius	`"rounded" \| "square" \| "full" \| null \| undefined`
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| null \| undefined`
emphasis	`"outline" \| "solid" \| "ghost" \| "soft" \| null \| undefined`

Also exports

interfaceIconBoxProps

Composition

Builds on

Icon

Used by

Empty, Item