ThemeIcon
Render icon inside element with theme colors
Import
Source
Docs
Package
Usage
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Color
Shades
Color
ThemeIcon supports all colors from theme.colors
,
default color is theme.primaryColor
:
Gradient variant
To use gradient as ThemeIcon background:
- set
variant
togradient
- set
gradient
to{ from: 'color-from', to: 'color-to', deg: 135 }
, wherecolor-from
andcolor-to
are color fromtheme.colors
deg
is linear gradient deg
ThemeIcon component props
Name | Type | Description |
---|---|---|
children * | ReactNode | Icon |
color | MantineColor | Icon color from theme |
gradient | MantineGradient | Controls gradient settings in gradient variant only |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
size | number | "xs" | "sm" | "md" | "lg" | "xl" | Width and height of theme icon |
variant | ThemeIconVariant | Controls appearance |