# Iconography

## Purpose

Icon style, grid, sizes and sourcing.

## Decisions

- **Source:** Tabler Icons (MIT licence, about 5,000 icons, drawn on a 24px grid).
- **Style:** outline (Tabler's outline set).
- **Line weight:** 2px (Tabler's default of 2 units on its 24-unit grid). The line **scales with the icon**: it is 2 units on the 24-unit grid, so a 16px icon has a thinner line (about 1.3px) and a 32px icon a thicker one (about 2.7px).
- **Line ends and corners:** round ends with mitre (sharp) corners, set with `stroke-linejoin: miter` on Tabler icons.
- **Sizes:** 16 / 20 / 24 / 32px. The default size follows the text the icon sits beside; in controls the pairing is 16 / 20 / 24px for Small / Medium / Large (see [Sizing](sizing.md)).
- **In buttons:** the icon sits to the left of the label with an 8px gap, and takes the button's semantic colour (soft white on the violet button). Icon-only buttons are square, the same height as other buttons.
- **Gradient:** icons are always a single colour. No gradient on icons.