Components

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.

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.

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.

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

export default () => (
  <Card className="max-w-fit">
    <Flex className="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

client component