Is documented
undefined
Component checklist
Figma Link
undefined
Figma
undefined
Up to date
Status
The component has a health status indicated
Stable
HTML
undefined
-
React
undefined
Up to date
Documentation link
undefined
Design Usage
Icon Box 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.
- Place Icon inside Icon Box; treat the pair as a single visual unit in layout.