1. Components
  2. Icons

Components

Icons

Decorate data and text with beautiful icon compositions.

Hover for info

   

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

Anatomy

How the basic component is pieced together displaying all properties with their default values.

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

export default () => (
  <Icon
    icon={undefined}
    variant="simple"
    tooltip=""
    size="sm"
    color="blue"
    marginTop="mt-0"
  />
);

Icon sizes

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

xs

sm

md

lg

xl

import { MailIcon } from "@heroicons/react/solid";
import { Icon } from "@tremor/react";

export default () => (
  <>
    <Icon size="xs" icon={MailIcon} />

    <Icon size="sm" icon={MailIcon} />

    <Icon size="md" icon={MailIcon} />

    <Icon size="lg" icon={MailIcon} />

    <Icon size="xl" icon={MailIcon} />
  </>
);

Built-in tooltip function

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

Hover over the icon

import { HandIcon } from "@heroicons/react/outline";
import { Icon } from "@tremor/react";

export default () => (
  <Icon
    icon={HandIcon}
    variant="solid"
    tooltip="Tooltip to place context information"
  />
);

Usage example

The example below shows a composition of a interactive KPI card by combining a Card, Text, Flex, and Metric component. To give it a little bit more punch we added an Icon with tooltip on hover.

Ticket Sales

$ 34,743

import { Card, Metric, Text, Flex, Icon } from "@tremor/react";
import { CashIcon } from "@heroicons/react/outline";

export default () => (
  <Card maxWidth="max-w-fit">
    <Flex alignItems="align-top" spaceX="space-x-6">
      <Icon
        icon={CashIcon}
        color="violet"
        variant="solid"
        tooltip="Sum of Sales"
        size="sm"
      />
      <div>
        <Text>Ticket Sales</Text>
        <Metric>$ 34,743</Metric>
      </div>
    </Flex>
  </Card>
);

API Reference: Icon

icon
Description
Set the displayed icon. This icon should be imported from a library. We recommend Heroicons.com.
Type
React.Element
Default
-
Values
E.g. { MailIcon }
variantoptional
Description
Sets the icon style.
Type
string
Default
simple
Values
simple, shadow, outlined, light, solid
tooltipoptional
Description
Set a tooltip on hover.
Type
string
Default
-
Values
sizeoptional
Description
Controls the icon size.
Type
string
Default
sm
Values
xs, sm, md, lg, xl
coloroptional
Description
Controls the overall color composition of the icon.
Type
string
Default
blue
Values
See color section
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0