UI

Icons

Decorate data and text with beautiful icon compositions.

Import Icon

Tremor exports one icon component with the following styles: simple, shadow, outlined, light, and solid. Note that we do not ship any icons ourselves. Understand the icon component as a wrapper for any icons you wish to include.

import { Icon } from '@tremor/react';

Icon sizes

Each icon component has five different sizes: xs, sm, md, lg, and xl.

xs

sm

md

lg

xl

Built-in tooltip function

The icon component has a tooltip property allowing you to place context information, which is displayed as a tooltip.

Hover over the icon

Usage example

The example below shows a composition of a KPI card by combining a Card with an Icon component and text elements.

Ticket Sales

$34,743

API Reference: Icon

client component
icon
Required
React.ElementType
Set the displayed icon. This icon should be imported from a library. We recommend Heroicons.com.
variant
string
Sets the icon style.
tooltip
string
Set a tooltip on hover.
size
string
Controls the icon size.
color
Color
Controls the overall color composition of the icon.

Theming

Icon (Variant: Simple)

Icon color
colorstremor-brand-DEFAULT

Icon (Variant: Light)

Roundness
borderRadiustremor-default
Icon color
colorstremor-brand-DEFAULT
Background color
colorstremor-brand-muted

Icon (Variant: Shadow)

Roundness
borderRadiustremor-default
Icon color
colorstremor-brand-DEFAULT
Background color
colorstremor-background-DEFAULT
Border color
colorstremor-border-DEFAULT
Shadow
boxShadowtremor-card

Icon (Variant: Solid)

Roundness
borderRadiustremor-default
Icon color
colorstremor-brand-inverted
Background color
colorstremor-brand-DEFAULT
Border color
colorstremor-brand-inverted
Ring color
colorstremor-ring

Icon (Variant: Outlined)

Roundness
borderRadiustremor-default
Icon color
colorstremor-brand-DEFAULT
Background color
colorstremor-background-DEFAULT
Border color
colorstremor-brand-subtle
Ring color
colorstremor-brand-muted