Accessibility

Accessibility is built into every GeoIcon. You choose decorative or meaningful with a single prop.

Decorative by default

With no aria-label, an icon renders aria-hidden="true" and is skipped by screen readers. Use this when the icon is purely visual and nearby text already conveys meaning:

<Fr /> France

Meaningful when labelled

Pass aria-label and the icon becomes an image with an accessible name. It renders role="img", an internal <title>, and aria-labelledby:

<Fr aria-label="France" />

Each icon namespaces its <title> id with a per-instance unique id, so rendering the same icon multiple times never produces duplicate DOM ids.