Icon Colors (dataviz)

The dataviz icon colors are used on icons representing data values or trends. For design guidelines, see Color Guidelines > Text & Icons

For actual icons to use, see Components > Icons. For dataviz, the most relevant icons are probably TrendUp, TrendFlat, TrendDown.

Visual overview

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