ThemeIcon

Usage

<ThemeIcon>
  <RocketIcon />
</ThemeIcon>

Color

ThemeIcon supports all colors from theme.colors, default color is theme.primaryColor:

Gradient variant

To use gradient as ThemeIcon background:

• set variant to gradient
• set gradient to { from: 'color-from', to: 'color-to', deg: 135 }, where
  • color-from and color-to are color from theme.colors
  • deg is linear gradient deg

<ThemeIcon variant="gradient" gradient={{ from: 'indigo', to: 'cyan' }}>{icon}</ThemeIcon>
<ThemeIcon variant="gradient" gradient={{ from: 'teal', to: 'lime', deg: 105 }}>{icon}</ThemeIcon>
<ThemeIcon variant="gradient" gradient={{ from: 'teal', to: 'blue', deg: 60 }}>{icon}</ThemeIcon>
<ThemeIcon variant="gradient" gradient={{ from: 'orange', to: 'red' }}>{icon}</ThemeIcon>
<ThemeIcon variant="gradient" gradient={{ from: 'grape', to: 'pink', deg: 35 }}>{icon}</ThemeIcon>

Size

ThemeIcon does not control icon size, specify it manually on icon component for better fit. ThemeIcon has 5 predefined sizes: xs, sm, md, lg, xl. Size controls width and height. Alternatively, a number can be used to set width and height in px:

<ThemeIcon size="lg" /> // -> theme predefined large size
<ThemeIcon size={10} /> // -> { width: 10, height: 10 }

Sizes from xs to xl:

Radius

xs, sm, md, lg, xl radius values are defined in theme.radius. Alternatively, a number can be used to set radius in px:

<ThemeIcon radius="lg" /> // -> theme predefined large radius
<ThemeIcon radius={10} /> // -> { borderRadius: 10 }
<ThemeIcon radius={0} /> // -> remove border-radius

Default radius from xs to xl for xl size: