Styled Icon Box
v1.1.0Icon containers with background variants.
Aesthetic Variants Matrix
Four different icon container styles to choose from.
Semantic Color Contexts
Icons adapt to semantic color contexts.
primary
secondary
destructive
muted
API Reference
All available props for this component.
Property | Type | Default | Description |
|---|---|---|---|
| icon | React.ReactNode | required | The interface vector or icon component node to clean up and inject into the scaling mask. |
| variant | 'solid' | 'outline' | 'ghost' | 'glass' | 'ghost' | Dictates the basic background layering architecture and opacity configurations. |
| color | 'primary' | 'secondary' | 'destructive' | 'muted' | 'primary' | Applies targeted semantic palette matrices across the component's fill and stroke states. |
| size | 'sm' | 'md' | 'lg' | 'md' | Configures parent box framing proportions while updating layout dimensions via structural variables. |
| roundness | 'none' | 'md' | 'full' | 'md' | Controls border-radius constraints along the outer edges of the wrapper asset box. |