Render icon inside element with theme colors
When the variant prop is set to gradient , you can control the gradient with the gradient prop, which accepts an object with from , to and deg properties. If the gradient prop is not set, ThemeIcon will use theme.defaultGradient which can be configured on the theme object . The gradient prop is ignored when variant is not gradient .
Note that variant="gradient" supports only linear gradients with two colors. If you need a more complex gradient, use the Styles API to modify ThemeIcon styles.
You can customize colors for ThemeIcon and other component variants by adding variantColorResolver to your theme.
ThemeIcon supports the autoContrast prop and theme.autoContrast . If autoContrast is set either on ThemeIcon or on the theme, the content color will be adjusted to have sufficient contrast with the value specified in the color prop.
Note that the autoContrast feature works only if you use the color prop to change the background color. autoContrast works only with the filled variant.