Mantine UIFAQColors generator

ThemeIcon

Render icon inside element with theme colors

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

PackageIcon

@mantine/core

Usage

Radius
Size
Color
import { ThemeIcon } from '@mantine/core';
import { ImageIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <ThemeIcon>
      <ImageIcon style={{ width: '70%', height: '70%' }} />
    </ThemeIcon>
  );
}

Gradient variant

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 thegradient 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.

Gradient from
Gradient to
Gradient degree
import { ThemeIcon } from '@mantine/core';
import { HeartIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <ThemeIcon
      variant="gradient"
      size="xl"
      aria-label="Gradient action icon"
      gradient={{ from: 'blue', to: 'cyan', deg: 90 }}
    >
      <HeartIcon />
    </ThemeIcon>
  );
}

Customize variants colors

You can customize colors for ThemeIcon and other component variants by adding variantColorResolver to your theme.

import { ImageIcon, FingerprintIcon, WarningIcon } from '@phosphor-icons/react';
import {
  ThemeIcon,
  Group,
  MantineProvider,
  defaultVariantColorsResolver,
  VariantColorsResolver,
  parseThemeColor,
  rgba,
  darken,
} from '@mantine/core';

const variantColorResolver: VariantColorsResolver = (input) => {
  const defaultResolvedColors = defaultVariantColorsResolver(input);
  const parsedColor = parseThemeColor({
    color: input.color || input.theme.primaryColor,
    theme: input.theme,
  });

  // Override some properties for variant
  if (parsedColor.isThemeColor && parsedColor.color === 'lime' && input.variant === 'filled') {
    return {
      ...defaultResolvedColors,
      color: 'var(--mantine-color-black)',
      hoverColor: 'var(--mantine-color-black)',
    };
  }

  // Completely override variant
  if (input.variant === 'light') {
    return {
      background: rgba(parsedColor.value, 0.1),
      hover: rgba(parsedColor.value, 0.15),
      border: `1px solid ${parsedColor.value}`,
      color: darken(parsedColor.value, 0.1),
    };
  }

  // Add new variants support
  if (input.variant === 'danger') {
    return {
      background: 'var(--mantine-color-red-9)',
      hover: 'var(--mantine-color-red-8)',
      color: 'var(--mantine-color-white)',
      border: 'none',
    };
  }

  return defaultResolvedColors;
};

function Demo() {
  return (
    <MantineProvider theme={{ variantColorResolver }}>
      <Group>
        <ThemeIcon color="lime.4" variant="filled">
          <ImageIcon size={20} />
        </ThemeIcon>

        <ThemeIcon color="orange" variant="light">
          <FingerprintIcon size={20} />
        </ThemeIcon>

        <ThemeIcon variant="danger">
          <WarningIcon size={20} />
        </ThemeIcon>
      </Group>
    </MantineProvider>
  );
}

autoContrast

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.

import { FingerprintIcon } from '@phosphor-icons/react';
import { ThemeIcon, Group } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <ThemeIcon size="lg" color="lime.4">
        <FingerprintIcon size={20} />
      </ThemeIcon>
      <ThemeIcon size="lg" color="lime.4" autoContrast>
        <FingerprintIcon size={20} />
      </ThemeIcon>
    </Group>
  );
}

Spoiler

Timeline