Icon box

Stylized icon within a rounded box with customizable colors, sizes, and variants.

#Usage

#Colors

Choose from different color schemes to match different contexts and use cases.

#Sizes

Choose from five different sizes to fit various design needs. The default size is md.

#Variants

Use the inverted variant when representing a related model or if the designs indicate it should be subtle.

#Selection State

Use the selected state to indicate to the user it is active. Often used in Filter Popovers.

#Different Icons

IconBox works with any icon from the Hightouch UI icon library.

#Tooltips

Wrap a Tooltip to provide more information to the user.

#Guidelines

#When to use

• When marking an entity or resource type with a colored icon — for example in section headers, table cells, drawers, and picker rows.

#When not to use

• If the icon triggers an action on click, use an icon button instead.

#Box shadows and overflow

IconBox uses our theme button shadow, which means you cannot render it within a tightly bounded container with overflow="hidden". Ensure the box shadow is always visible when using IconBox.

#Props

Name	Default	Description
isSelected	false	boolean Selected icon boxes have a different background color.
color	—	"gray" | "indigo" | "green" | "blue" | "pink" | "orange" | "teal" | "yellow" | "red" The color shade of the IconBox determines the background, border, and icon color.
icon	—	ReactElement The icon to display.
size	"md"	"xs" | "sm" | "md" | "lg" | "xl" The size of the IconBox.
variant	"default"	"default" | "inverted" The variant determines the visual style of the IconBox. Inverted variants have a white background with colored borders and icons.