ThemeIcon

Render icon inside element with theme colors
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

Usage

Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Color
import { ThemeIcon } from '@mantine/core';
import { IconPhoto } from '@tabler/icons-react';


function Demo() {
  return (
    <ThemeIcon>
      <IconPhoto />
    </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
import { IconPhoto } from '@tabler/icons-react';
import { ThemeIcon } from '@mantine/core';


function Demo() {
  return (
    <>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: 'indigo', to: 'cyan' }}>
        <IconPhoto size="1.2rem" />
      </ThemeIcon>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: 'teal', to: 'lime', deg: 105 }}>
        <IconPhoto size="1.2rem" />
      </ThemeIcon>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: 'teal', to: 'blue', deg: 60 }}>
        <IconPhoto size="1.2rem" />
      </ThemeIcon>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: 'orange', to: 'red' }}>
        <IconPhoto size="1.2rem" />
      </ThemeIcon>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: '#ed6ea0', to: '#ec8c69', deg: 35 }}>
        <IconPhoto size="1.2rem" />
      </ThemeIcon>
    </>
  );
}
Go back
Spoiler – @mantine/core
Up next
Timeline – @mantine/core

ThemeIcon component props

NameTypeDescription
children *
ReactNode
Icon
color
MantineColor
Icon color from theme
gradient
MantineGradient
Controls gradient settings in gradient variant only
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Width and height of theme icon
variant
ThemeIconVariant
Controls appearance
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
Project
Mantine UIDocumentationGitHub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter