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';


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';
import { ThemeIcon } from '@mantine/core';


function Demo() {
  return (
    <>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: 'indigo', to: 'cyan' }}>
        <IconPhoto size={20} />
      </ThemeIcon>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: 'teal', to: 'lime', deg: 105 }}>
        <IconPhoto size={20} />
      </ThemeIcon>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: 'teal', to: 'blue', deg: 60 }}>
        <IconPhoto size={20} />
      </ThemeIcon>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: 'orange', to: 'red' }}>
        <IconPhoto size={20} />
      </ThemeIcon>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: '#ed6ea0', to: '#ec8c69', deg: 35 }}>
        <IconPhoto size={20} />
      </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"
Predefined border-radius from theme.radius or number for border-radius in px
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Predefined width and height or number for width and height in px
variant
"outline" | "light" | "default" | "filled" | "gradient"
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