IconBox

Utility wrapper that gives an Icon a background, border, and radius

Is documented

Figma Link

Open in Figma

Figma

Up to date

Status

The component has a health status indicated

Stable

HTML

Not available

React

Up to date

Documentation link

Open page

Design Usage

IconBox enhances an Icon with visual framing (background, border, border radius) to improve contrast, balance, and emphasis. It’s useful for feature highlights or when an icon needs a consistent surface across varying backgrounds.

When to Use

To ensure the icon remains legible over busy/variable backgrounds.

To create consistent visual weight in grids, cards, or lists.

To present icons as features/benefits highlights or category markers.

When Not to Use

When a plain icon already has sufficient contrast and clarity.

As a replacement for semantic components (use Tag, Pill, or badge-like patterns for labeling; Card or Box for content framing).

Best Practices

There are general recommendations which doesn’t have to be tightly coupled to our implementation. If you find that some features are missing, please contact the Spirit team.

Choose background/border tokens that meet contrast with the icon and page background.

Keep sizing and corner radius consistent across a set.

Don’t overload with heavy borders or saturated backgrounds unless emphasis is intended.