Icon box

A square, tinted container for a single icon.

Default

A bare .icon-box renders a muted neutral tile. Use for non-semantic icons in a list or row.

<span class="icon-box"><i data-lucide="zap"></i></span>

Intent variants

Add an intent modifier like .icon-box--primary for a tinted tile in the matching brand color. The background sits at 15%, the icon holds the solid intent color.

<div class="demo-row">
  <span class="icon-box icon-box--primary"><i data-lucide="zap"></i></span>
  <span class="icon-box icon-box--success"><i data-lucide="check"></i></span>
  <span class="icon-box icon-box--warning"><i data-lucide="clock"></i></span>
  <span class="icon-box icon-box--danger"><i data-lucide="alert-triangle"></i></span>
  <span class="icon-box icon-box--info"><i data-lucide="info"></i></span>
</div>

Shape

Add .icon-box--round for a circle, or .icon-box--square for a hard square that ignores the radius token.

<div class="demo-row">
  <span class="icon-box icon-box--primary"><i data-lucide="bell"></i></span>
  <span class="icon-box icon-box--primary icon-box--round"><i data-lucide="bell"></i></span>
  <span class="icon-box icon-box--primary icon-box--square"><i data-lucide="bell"></i></span>
</div>

Sizes

Three sizes match the .btn family. Add .icon-box--sm or .icon-box--lg. Every dimension scales with --st-density.

<div class="demo-row demo-row--top">
  <span class="icon-box icon-box--primary icon-box--sm"><i data-lucide="zap"></i></span>
  <span class="icon-box icon-box--primary"><i data-lucide="zap"></i></span>
  <span class="icon-box icon-box--primary icon-box--lg"><i data-lucide="zap"></i></span>
</div>

Custom color

For one-off colors outside the shipped intents, set --icon-box-tone inline. The bg and icon color both derive from it.

<div class="demo-row">
  <span class="icon-box" style="--icon-box-tone: oklch(0.62 0.20 295);">
    <i data-lucide="sparkles"></i>
  </span>
  <span class="icon-box" style="--icon-box-tone: oklch(0.62 0.21 0);">
    <i data-lucide="heart"></i>
  </span>
  <span class="icon-box" style="--icon-box-tone: oklch(0.65 0.13 175);">
    <i data-lucide="leaf"></i>
  </span>
</div>

Customization

Six variables retune .icon-box without touching component CSS. Override on .icon-box itself, on a parent scope, or on :root. The cascade scopes the change.

Variable	Default	Use
`--icon-box-size`	calc(2.25rem * var(--st-density))	Outer square dimension; sm and lg reassign this
`--icon-box-icon-size`	1.125rem	Inner icon size
`--icon-box-radius`	var(--st-radius-sm)	Corner radius (per-component override via `--st-icon-box-radius`); `--round` forces 50%, `--square` forces 0
`--icon-box-tone`	var(--st-muted-foreground)	Color source the bg and icon derive from; intents reassign this
`--icon-box-bg`	color-mix(in oklch, var(--icon-box-tone) 15%, transparent)	Background tint
`--icon-box-color`	var(--icon-box-tone)	Icon color