UI
Icons
Decorate data and text with beautiful icon compositions.
import { RiShapesFill } from '@remixicon/react';import { Icon } from '@tremor/react';
export const IconHero = () => ( <> <div className="flex flex-wrap items-center justify-center space-x-3 sm:space-x-12"> <Icon icon={RiShapesFill} variant="simple" tooltip="simple" size="md" /> <Icon icon={RiShapesFill} variant="shadow" tooltip="shadow" size="md" /> <Icon icon={RiShapesFill} variant="outlined" tooltip="outlined" size="md" /> <Icon icon={RiShapesFill} variant="light" tooltip="light" size="md" /> <Icon icon={RiShapesFill} variant="solid" tooltip="solid" size="md" /> </div> </>);
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
import { RiShapesFill } from '@remixicon/react';import { Icon } from '@tremor/react';
export function IconUsageExampleWithSize() { return ( <div className="grid grid-cols-5 items-start"> <div className="mx-auto space-y-3"> <p className="text-center font-mono text-sm text-slate-500">xs</p> <Icon size="xs" icon={RiShapesFill} /> </div>
<div className="mx-auto space-y-3"> <p className="text-center font-mono text-sm text-slate-500">sm</p> <Icon size="sm" icon={RiShapesFill} /> </div>
<div className="mx-auto space-y-3"> <p className="text-center font-mono text-sm text-slate-500">md</p> <Icon size="md" icon={RiShapesFill} /> </div>
<div className="mx-auto space-y-3"> <p className="text-center font-mono text-sm text-slate-500">lg</p> <Icon size="lg" icon={RiShapesFill} /> </div>
<div className="mx-auto space-y-3"> <p className="text-center font-mono text-sm text-slate-500">xl</p> <Icon size="xl" icon={RiShapesFill} /> </div> </div> );}
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
import { RiToolsFill } from '@remixicon/react';import { Icon } from '@tremor/react';
export function IconUsageExampleWithTooltip() { return ( <div className="mx-auto grid grid-cols-1 gap-12"> <div className="space-y-3"> <p className="text-center font-mono text-sm text-slate-500"> Hover over the icon </p> <div className="flex justify-center space-x-6"> <Icon icon={RiToolsFill} variant="solid" tooltip="Tooltip to place context information" /> </div> </div> </div> );}
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
import { RiCashFill } from '@remixicon/react';import { Card, Icon } from '@tremor/react';
export function IconUsageExample() { return ( <Card className="mx-auto max-w-xs"> <div className="flex items-start space-x-6"> <Icon icon={RiCashFill} color="blue" variant="solid" tooltip="Sum of Sales" size="lg" /> <div> <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">Ticket Sales</p> <p className="text-xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">$34,743</p> </div> </div> </Card> );}
API Reference: Icon
client component- icon
- Set the displayed icon. This icon should be imported from a library. We recommend Heroicons.com.
Required
React.ElementType
- variant
- Sets the icon style.
string
Default: simple
- tooltip
- Set a tooltip on hover.
string
- size
- Controls the icon size.
string
Default: sm
- color
- Controls the overall color composition of the icon.
Color
Default: blue
Theming
Icon (Variant: Simple)
Element | Theme Token |
---|---|
Icon color colorstremor-brand-DEFAULT | colorstremor-brand-DEFAULT |
Icon (Variant: Light)
Element | Theme Token |
---|---|
Roundness borderRadiustremor-default | borderRadiustremor-default |
Icon color colorstremor-brand-DEFAULT | colorstremor-brand-DEFAULT |
Background color colorstremor-brand-muted | colorstremor-brand-muted |
Icon (Variant: Shadow)
Element | Theme Token |
---|---|
Roundness borderRadiustremor-default | borderRadiustremor-default |
Icon color colorstremor-brand-DEFAULT | colorstremor-brand-DEFAULT |
Background color colorstremor-background-DEFAULT | colorstremor-background-DEFAULT |
Border color colorstremor-border-DEFAULT | colorstremor-border-DEFAULT |
Shadow boxShadowtremor-card | boxShadowtremor-card |
Icon (Variant: Solid)
Element | Theme Token |
---|---|
Roundness borderRadiustremor-default | borderRadiustremor-default |
Icon color colorstremor-brand-inverted | colorstremor-brand-inverted |
Background color colorstremor-brand-DEFAULT | colorstremor-brand-DEFAULT |
Border color colorstremor-brand-inverted | colorstremor-brand-inverted |
Ring color colorstremor-ring | colorstremor-ring |
Icon (Variant: Outlined)
Element | Theme Token |
---|---|
Roundness borderRadiustremor-default | borderRadiustremor-default |
Icon color colorstremor-brand-DEFAULT | colorstremor-brand-DEFAULT |
Background color colorstremor-background-DEFAULT | colorstremor-background-DEFAULT |
Border color colorstremor-brand-subtle | colorstremor-brand-subtle |
Ring color colorstremor-brand-muted | colorstremor-brand-muted |