Icon

Icons are a fundamental visual element that aid quick recognition and navigation. Diwa uses the Lucide icon set — a consistent, open-source library built on a 24×24 grid with 2px strokes.

Screen reader behaviour

The diwa-icon component chooses between two ARIA modes depending on whether a label prop is provided.

Scenario	ARIA attributes applied
Decorative (no label)	`aria-hidden="true"` — the SVG is hidden from assistive technologies.
Semantic (label provided)	`role="img"` + `aria-label="…"` — the SVG is announced with the given label.

WCAG 2.2 compliance

✓

1.4.3 Contrast (Minimum) — AAPass

When the icon is used semantically (with a label), its colour inherits from the surrounding text which must meet the 4.5:1 minimum ratio.

✓

1.1.1 Non-text Content — APass

Decorative icons are automatically hidden from assistive technologies via aria-hidden="true". Semantic icons expose role="img" and aria-label so screen readers can announce them.

✓

1.4.11 Non-text Contrast — AAPass

As a graphical element, the icon requires ≥ 3:1 contrast against its background when it conveys meaning. currentColor ensures this when the parent text colour meets AA.

✓

2.1.1 Keyboard — APass

The icon is non-interactive and receives no keyboard focus. No keyboard interaction is required or expected.

✓

4.1.2 Name, Role, Value — APass

Decorative icons use aria-hidden="true". Semantic icons automatically receive role="img" and aria-label from the label prop.

Best practices

Decorative icons

When an icon is purely visual and its meaning is conveyed by accompanying text (e.g. a download icon next to the word "Download"), omit the label prop. The component will hide the icon from screen readers automatically.

<diwa-icon name="download"></diwa-icon> Download

Standalone / semantic icons

When the icon is the only visual indicator of an action or concept (e.g. a bell icon without a visible "Notifications" label), set the label prop to a descriptive string so screen readers can announce it.

<diwa-icon name="bell" label="Notifications"></diwa-icon>

Keyboard interaction

diwa-icon is a purely presentational component — it renders an <svg> and is not focusable by default. There are no keyboard interactions to document. If you need an icon-only button, wrap the icon in a <diwa-button> with hide-label set and provide a visible label for accessibility.

Automated tests

Test	Result
Decorative icon has aria-hidden="true"	Pass
Semantic icon has role="img" and aria-label matching label prop	Pass
Icon is not focusable via keyboard	Pass