Icons

Icons are sourced from Figma. They are automatically synced on every pipeline run — no manual step needed.

Naming convention

One file per icon. SVG scales to any size without quality loss.

images/icons/heart.svg
images/icons/calendar.svg
images/icons/warning.svg

CDN path

https://assets.drdoctor.co.uk/v0.4/icons/heart.svg

How to use

Use the .icon base class with a size class, an icon class, and a colour utility class. The icon inherits currentColor — no inline styles needed.

<i class="icon icon--md icon--heart h-text-primary" aria-hidden="true"></i>

Always include aria-hidden="true" — icons in this system are decorative and should always be accompanied by visible text.

Live example:

h-text-primary
h-text-error
h-text-default
h-text-subtle

Icon set

Each icon shown at all four sizes: icon--lg (1.5em), icon--md (1.25em), icon--sm (1em), icon--xs (0.75em).