ThemeIcon

Usage

Use ThemeIcon to display an svg icon with theme color background and color. You can use icons from any react icons library, for example:

• radix icons (used in mantine packages)
• feather
• react-icons

<ThemeIcon>
  <RocketIcon />
</ThemeIcon>

Color

You can use any color 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

Note that component does not control icon size and you need to specify it manually on icon component for better fit. ThemeIcon has 5 predefined sizes: xs, sm, md, lg, xl. Size defines background width and height. Alternatively, you can use a number 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:

You can get default sizes for action icon by importing THEME_ICON_SIZES:

import { THEME_ICON_SIZES } from '@mantine/core';

Radius

xs, sm, md, lg, xl radius values are defined in theme.radius. Alternatively, you can use a number 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: