Iconography

Icons support visual communication in Amazium by reinforcing meaning, guiding interactions, and improving interface clarity. A consistent icon system ensures predictable sizing, alignment, and behaviour across components.

Basic

Icons use the .icon class as a base, providing a consistent default size and alignment within text and UI elements.

<svg class="icon">...</svg>

Sizes

Icon sizes are controlled using modifier classes to ensure consistent scaling across the interface.

Small (.icon--sm) – 12px
Medium (.icon--md) – 16px (default)
Large (.icon--lg) – 28px
Extra Large (.icon--xl) – 36px
Double Extra Large (.icon--xxl) – 64px

<svg class="icon icon--sm">...</svg>

<svg class="icon icon--md">...</svg>

<svg class="icon icon--lg">...</svg>

<svg class="icon icon--xl">...</svg>

<svg class="icon icon--xxl">...</svg>

Icon Placement & Alignment

Icons can be positioned alongside content to support readability and interaction. Spacing and alignment modifiers ensure consistent placement within components.

Left (.icon--left)
Right (.icon--right)
Align right (.icon--align-right)

Text here

<svg class="icon icon--left">...</svg>...

Text here

...<svg class="icon icon--right">...</svg>

<svg class="icon icon--align-right">...</svg>

Best Practices

Use icons purposefully to support meaning and improve usability. Icons should remain simple, consistent in style, and always supported by text or accessible labels where needed.