Skip to content
Components

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 "@instruments/materia-ui/components/icon-box".

Usage

import { IconBox, IconBoxProps } from "@instruments/materia-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

PropTypeDefaultDescription
icon(required)import("../../tokens/icon-component").IconComponent

Icon component from lucide-react or any SVG React component.

iconClassNamestring

Additional className for the icon itself.

iconSizeIconSize | 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