Discord
Source code

ThemeIcon

Render icon inside element with theme colors
Import

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:

Radius
Size
Color
<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';
Prop valueWidth and height
xs16px
sm20px
md26px
lg32px
xl40px

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:

Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback