Icon box

Icon box component for framing icons with color and shape variants.

Color variants

default
green
pink
purple
red
yellow
cyan

Each color variant uses the P3 color palette for both background and icon color, with dark mode support.

Sizes

Small (32px), medium (40px), and large (48px). Icon size scales automatically.

Shapes

Square (rounded corners) is the default. Circle for avatar-like treatments.

Usage examples

Home

123 Main street

Shipping

Estimated 3-5 business days

Account

Manage your profile

Icon boxes work well as leading visuals in list items, cards, and empty states.