IconBox
A fixed-size, token-driven container for displaying a single icon, typically used as a leading visual in list rows or feature callouts. Vajra UI ships no bundled icons: icon accepts any component matching TVajraIconComponent. The examples below use @devraj-labs/vajra-ui-icons, a small set of Lucide icons pre-adapted to that contract.
Basic usage
import { StarIcon, CheckCircleIcon, AlertCircleIcon } from '@devraj-labs/vajra-ui-icons';
<IconBox icon={StarIcon} />
<IconBox icon={CheckCircleIcon} bg="successSubtle" iconColor="success" />
<IconBox icon={AlertCircleIcon} bg="errorSubtle" iconColor="error" />
Custom size
<IconBox icon={StarIcon} w={32} h={32} iconSize={14} />
<IconBox icon={StarIcon} w={64} h={64} iconSize={28} rounded="r-4" />
Props
IconBox accepts all Box props (TUiBoxProps, excluding children) in addition to:
| Prop | Type | Default | Description |
|---|---|---|---|
icon | TVajraIconComponent | Required. Icon component to render; receives size, width, height, and color. | |
iconSize | number | 20 | Size passed to the icon. |
iconColor | TVajraColors | 'primary' | Color passed to the icon. |
bg | TVajraColors | 'primarySubtle' | Background color (inherited from Box). |
rounded | TRoundedToken | 'r-3' | Corner radius (inherited from Box). |
w | DimensionValue | 44 | Width of the container. |
h | DimensionValue | 44 | Height of the container. |