ThemeIcon

Usage

Use ThemeIcon do display 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:

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 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 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: