v4.2.12

ThemeIcon

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

Usage

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


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


function Demo() {
  return (
    <>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: 'indigo', to: 'cyan' }}>
        <Photo size={20} />
      </ThemeIcon>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: 'teal', to: 'lime', deg: 105 }}>
        <Photo size={20} />
      </ThemeIcon>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: 'teal', to: 'blue', deg: 60 }}>
        <Photo size={20} />
      </ThemeIcon>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: 'orange', to: 'red' }}>
        <Photo size={20} />
      </ThemeIcon>
      <ThemeIcon size="lg" variant="gradient" gradient={{ from: '#ed6ea0', to: '#ec8c69', deg: 35 }}>
        <Photo size={20} />
      </ThemeIcon>
    </>
  );
}
Go back
Spoiler – @mantine/core
Up next
Timeline – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
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