# 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.

```tsx demo
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](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking), so your application can only bundle the icons that are actually used:

```tsx demo
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.

```tsx demo
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](/storybook/?path=/story/components-icons--playground).

> [!WARNING]
>
> Because the dynamic `Icon` component requires all icons to be available at runtime, it is **not** [tree-shakeable](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value#currentcolor_keyword) 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:

```tsx demo
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:

```tsx demo
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>
  );
}
```

```tsx
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>
  );
}
```