ThemeIcon
Renders a themed container that wraps an icon with a colored background. Uses the same visual variants as ActionIcon and supports a gradient variant for vivid multi-color backgrounds.
Variants
filled
light
outline
subtle
transparent
white
default
<ThemeIcon variant="filled" color="blue">⭐</ThemeIcon>
<ThemeIcon variant="light" color="blue">⭐</ThemeIcon>
<ThemeIcon variant="outline" color="blue">⭐</ThemeIcon>
<ThemeIcon variant="subtle" color="blue">⭐</ThemeIcon>Colors
<ThemeIcon color="blue" variant="filled">★</ThemeIcon>
<ThemeIcon color="violet" variant="filled">★</ThemeIcon>
<ThemeIcon color="green" variant="filled">★</ThemeIcon>Gradient
<ThemeIcon variant="gradient" gradient={{ from: 'blue', to: 'violet' }}>⚡</ThemeIcon>
<ThemeIcon variant="gradient" gradient={{ from: 'green', to: 'teal', deg: 135 }}>🌿</ThemeIcon>Sizes and radius
<ThemeIcon size="xs" color="blue">★</ThemeIcon>
<ThemeIcon size="xl" color="blue">★</ThemeIcon>
<ThemeIcon radius="50%" color="violet">▲</ThemeIcon>Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs'|'sm'|'md'|'lg'|'xl'|number|string | — | Width and height of the icon container |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Border-radius of the container shape |
variant | 'filled'|'light'|'outline'|'subtle'|'transparent'|'white'|'default'|'gradient' | 'filled' | Visual style variant |
color | string | — | Theme color; ignored when variant is 'gradient' |
gradient | { from: string; to: string; deg?: number } | — | Gradient config used when variant is 'gradient' |
component | string | 'div' | HTML element to render as root |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |
children | ReactNode | — | Icon content inside the themed container |