# 0037. Design icons are inline SVGs drawn in currentColor

- **Status:** Accepted
- **Date:** 2026-09-24

## Context

The 2026 redesign brought its own icon set (search, storage, service, question, indoor, outdoor, user), exported
from Illustrator in up to three colour variants each. The site's icons were FontAwesome Pro classes, plus a few
`<img src="/images/icon-*.svg">` with the colour baked in. The same glyph now appears green on white, grey on a
card and white on a dark band.

## Decision

One file per icon in `web/svg-icons/<name>.svg`, cleaned to `fill="currentColor"`, inlined by
`app\helpers\SvgIcon::render()` — `svg( $name, $cssClass )` in `functions.php`. CSS colours it through `color`.
FontAwesome stays for everything the design did not replace.

## Alternatives

- **`<img>` per colour variant.** Three files per glyph, and a new colour means a new export.
- **An SVG sprite with `<use>`.** One request, but a build step or a hand-maintained sprite for seven icons.
- **`mask-image` in CSS.** Colourable, but every icon needs its own CSS rule and the markup says nothing.

## Consequences

- The markup carries the whole path data: fine for a handful of icons per page, wrong for a long list.
- The exports keep Illustrator's 100×100 artboard padding, so a large rendering crops it with a negative margin
  (`big-navigation-widget.scss`).
- The helper refuses any name that is not a plain slug — the name reaches a file path.