Icons

A library of SVG icon components used throughout Vesper. Each icon renders as an inline <svg> element with currentColor fill, making it easy to style via CSS. An Icon component is also available for rendering icons dynamically by name.

import { Icon, ICON_KINDS } from "@tenstorrent/vesper/icons";
import { Tooltip } from "@tenstorrent/vesper/tooltip";

export default function IconsDemo() {
  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        gap: "var(--vesper-spacing-4)",
      }}
    >
      {ICON_KINDS.map((kind) => (
        <Tooltip key={kind} content={kind}>
          <Icon
            kind={kind}
            tabIndex={0}
            aria-label={`${kind} icon`}
            style={{ width: 24 }}
          />
        </Tooltip>
      ))}
    </div>
  );
}

Options

Each individual icon component (e.g., Add, Gear, Search) accepts all standard SVG element props (ComponentProps<"svg">).

The dynamic Icon component also accepts:

Prop	Type	Description	Default
`kind`	`IconKind`	The name of the icon to render. See the full list of available icon kinds in Storybook.	—

Examples

Rendering individual icons

You can import individual icons from @tenstorrent/vesper/icons on an as-needed basis. These imports are tree-shakeable, so your application can only bundle the icons that are actually used:

import { Add, Gear, Search } from "@tenstorrent/vesper/icons";

export default function IndividualIcons() {
  return (
    <div style={{ display: "flex", gap: "var(--vesper-spacing-2)" }}>
      <Add width={32} />
      <Gear width={32} />
      <Search width={32} />
    </div>
  );
}

Rendering icons dynamically

In addition to separate components for each individual icon, Vesper also exposes a dynamic Icon component which accepts a kind prop to determine which icon to render.

import { Icon } from "@tenstorrent/vesper/icons";

export default function DynamicIcons() {
  return (
    <div style={{ display: "flex", gap: "var(--vesper-spacing-2)" }}>
      <Icon kind="add" width={32} />
      <Icon kind="tenstorrent" width={32} />
      <Icon kind="model-llama" width={32} />
      <Icon kind="blackhole" width={32} />
      <Icon kind="board" width={32} />
    </div>
  );
}

See the full list of available icon kinds in Storybook.

Because the dynamic Icon component requires all icons to be available at runtime, it is not tree-shakeable and will increase bundle size more than if you were to import the icons that you need individually.

Coloring icons

By default, an icon component is rendered using the inherited current color of its parent. If you need to render an an icon in a different color other than the current color, you can use the color prop:

import { Globe, Icon } from "@tenstorrent/vesper/icons";

export default function ColoredIcons() {
  return (
    <div style={{ display: "flex", gap: "var(--vesper-spacing-2)" }}>
      <Globe color="var(--vesper-purple-500)" width={32} />
      <Icon kind="ai-video-gen" color="var(--vesper-amber-500)" width={32} />
    </div>
  );
}

Pre-colored icons

Some icons ship with both colored and uncolored versions. The colored icon component names are the same as their uncolored name suffixed with the word "Color". These are typically branded icons for different AI models, and should not have their colors overridden with CSS, inline styles, or the color prop:

import {
  ModelDeepSeekColor,
  ModelFalconColor,
  ModelGoogleColor,
  ModelLlamaColor,
  ModelQwenColor,
} from "@tenstorrent/vesper/icons";

export default function PreColoredIcons() {
  return (
    <div style={{ display: "flex", gap: "var(--vesper-spacing-2)" }}>
      <ModelDeepSeekColor width={32} />
      <ModelFalconColor width={32} />
      <ModelGoogleColor width={32} />
      <ModelLlamaColor width={32} />
      <ModelQwenColor width={32} />
    </div>
  );
}

import { Icon } from "@tenstorrent/vesper/icons";

export default function PreColoredDynamicIcons() {
  return (
    <div style={{ display: "flex", gap: "var(--vesper-spacing-2)" }}>
      <Icon kind="model-deepseek-color" width={32} />
      <Icon kind="model-falcon-color" width={32} />
      <Icon kind="model-google-color" width={32} />
      <Icon kind="model-llama-color" width={32} />
      <Icon kind="model-qwen-color" width={32} />
    </div>
  );
}