---
url: /docs/foundations/data-visualization/tokens/icon.md
---
# Icon Colors (dataviz)

The dataviz `icon` colors are used on icons representing data values or trends. For design guidelines, see [Color Guidelines > Text & Icons](/foundations/data-visualization/color/text-icons/)

For actual icons to use, see [Components > Icons](/components/icons/overview.md). For dataviz, the most relevant icons are probably `TrendUp`, `TrendFlat`, `TrendDown`.

::: details Visual overview
![Preview of Primary, Secondary, Category and Evaluation colors for light mode and dark mode](/foundations/dataviz/token-overview-icon.png)
:::

## Naming pattern for icon colors

| Method | Pattern | Example |
| ----- | ------ | ------ |
| Figma | `../Icon/[semantic-color])` | `../Icon/Primary` |
| CSS variable | `var(--w-dv-s-color-icon-[semantic-color])` | `var(--w-dv-s-color-icon-primary)` |
| HTML class | `dv-s-icon-[semantic-color]` | `dv-s-icon-primary` |
| SVG fill class | `dv-s-fill-icon-[semantic-color]` | `dv-s-fill-icon-primary` |
| SVG stroke class | `dv-s-stroke-icon-[semantic-color]` | `dv-s-stroke-icon-primary` |
| iOS | `icon[SemanticColor]` | `iconPrimary` |

## Primary Icon (dataviz)

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Icon/Primary` |  | `--w-dv-s-color-icon-primary` | `dv-s-icon-primary` | `dv-s-fill-icon-primary` | `dv-s-stroke-icon-primary` |
| `Icon/Primary-highlight` |  | `--w-dv-s-color-icon-primary-highlight` | `dv-s-icon-primary-highlight` | `dv-s-fill-icon-primary-highlight` | `dv-s-stroke-icon-primary-highlight` |

## Secondary Icon (dataviz)

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Icon/Secondary` |  | `--w-dv-s-color-icon-secondary` | `dv-s-icon-secondary` | `dv-s-fill-icon-secondary` | `dv-s-stroke-icon-secondary` |
| `Icon/Secondary-highlight` |  | `--w-dv-s-color-icon-secondary-highlight` | `dv-s-icon-secondary-highlight` | `dv-s-fill-icon-secondary-highlight` | `dv-s-stroke-icon-secondary-highlight` |

## Category Icon (dataviz)

### Category1: Indigo

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Icon/Category1` |  | `--w-dv-s-color-icon-category1` | `dv-s-icon-category1` | `dv-s-fill-icon-category1` | `dv-s-stroke-icon-category1` |
| `Icon/Category1-highlight` |  | `--w-dv-s-color-icon-category1-highlight` | `dv-s-icon-category1-highlight` | `dv-s-fill-icon-category1-highlight` | `dv-s-stroke-icon-category1-highlight` |

### Category2: Yellow

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Icon/Category2` |  | `--w-dv-s-color-icon-category2` | `dv-s-icon-category2` | `dv-s-fill-icon-category2` | `dv-s-stroke-icon-category2` |
| `Icon/Category2-highlight` |  | `--w-dv-s-color-icon-category2-highlight` | `dv-s-icon-category2-highlight` | `dv-s-fill-icon-category2-highlight` | `dv-s-stroke-icon-category2-highlight` |

### Category3: Pink

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Icon/Category3` |  | `--w-dv-s-color-icon-category3` | `dv-s-icon-category3` | `dv-s-fill-icon-category3` | `dv-s-stroke-icon-category3` |
| `Icon/Category3-highlight` |  | `--w-dv-s-color-icon-category3-highlight` | `dv-s-icon-category3-highlight` | `dv-s-fill-icon-category3-highlight` | `dv-s-stroke-icon-category3-highlight` |

### Category4: Green

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Icon/Category4` |  | `--w-dv-s-color-icon-category4` | `dv-s-icon-category4` | `dv-s-fill-icon-category4` | `dv-s-stroke-icon-category4` |
| `Icon/Category4-highlight` |  | `--w-dv-s-color-icon-category4-highlight` | `dv-s-icon-category4-highlight` | `dv-s-fill-icon-category4-highlight` | `dv-s-stroke-icon-category4-highlight` |

### Category5: Orange

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Icon/Category5` |  | `--w-dv-s-color-icon-category5` | `dv-s-icon-category5` | `dv-s-fill-icon-category5` | `dv-s-stroke-icon-category5` |
| `Icon/Category5-highlight` |  | `--w-dv-s-color-icon-category5-highlight` | `dv-s-icon-category5-highlight` | `dv-s-fill-icon-category5-highlight` | `dv-s-stroke-icon-category5-highlight` |

### Category6: Teal

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Icon/Category6` |  | `--w-dv-s-color-icon-category6` | `dv-s-icon-category6` | `dv-s-fill-icon-category6` | `dv-s-stroke-icon-category6` |
| `Icon/Category6-highlight` |  | `--w-dv-s-color-icon-category6-highlight` | `dv-s-icon-category6-highlight` | `dv-s-fill-icon-category6-highlight` | `dv-s-stroke-icon-category6-highlight` |

### Category7: Blue

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Icon/Category7` |  | `--w-dv-s-color-icon-category7` | `dv-s-icon-category7` | `dv-s-fill-icon-category7` | `dv-s-stroke-icon-category7` |
| `Icon/Category7-highlight` |  | `--w-dv-s-color-icon-category7-highlight` | `dv-s-icon-category7-highlight` | `dv-s-fill-icon-category7-highlight` | `dv-s-stroke-icon-category7-highlight` |

### Category8: Gray

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Icon/Category8` |  | `--w-dv-s-color-icon-category8` | `dv-s-icon-category8` | `dv-s-fill-icon-category8` | `dv-s-stroke-icon-category8` |
| `Icon/Category8-highlight` |  | `--w-dv-s-color-icon-category8-highlight` | `dv-s-icon-category8-highlight` | `dv-s-fill-icon-category8-highlight` | `dv-s-stroke-icon-category8-highlight` |

## Evaluation Icon (dataviz)

### Negative: Red

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Icon/Negative` |  | `--w-dv-s-color-icon-negative` | `dv-s-icon-negative` | `dv-s-fill-icon-negative` | `dv-s-stroke-icon-negative` |
| `Icon/Negative-highlight` |  | `--w-dv-s-color-icon-negative-highlight` | `dv-s-icon-negative-highlight` | `dv-s-fill-icon-negative-highlight` | `dv-s-stroke-icon-negative-highlight` |

### Neutral: Gray

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Icon/Neutral` |  | `--w-dv-s-color-icon-neutral` | `dv-s-icon-neutral` | `dv-s-fill-icon-neutral` | `dv-s-stroke-icon-neutral` |
| `Icon/Neutral-highlight` |  | `--w-dv-s-color-icon-neutral-highlight` | `dv-s-icon-neutral-highlight` | `dv-s-fill-icon-neutral-highlight` | `dv-s-stroke-icon-neutral-highlight` |

### Positive: Green

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Icon/Positive` |  | `--w-dv-s-color-icon-positive` | `dv-s-icon-positive` | `dv-s-fill-icon-positive` | `dv-s-stroke-icon-positive` |
| `Icon/Positive-highlight` |  | `--w-dv-s-color-icon-positive-highlight` | `dv-s-icon-positive-highlight` | `dv-s-fill-icon-positive-highlight` | `dv-s-stroke-icon-positive-highlight` |

### Warning: Yellow

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Icon/Warning` |  | `--w-dv-s-color-icon-warning` | `dv-s-icon-warning` | `dv-s-fill-icon-warning` | `dv-s-stroke-icon-warning` |
| `Icon/Warning-highlight` |  | `--w-dv-s-color-icon-warning-highlight` | `dv-s-icon-warning-highlight` | `dv-s-fill-icon-warning-highlight` | `dv-s-stroke-icon-warning-highlight` |