Icons | Athena UI

Bootstrap Icons In Athena UI

Athena ships Bootstrap Icons locally, so pages can use the bi classes without a network dependency. Treat icons as supporting cues: pair important meaning with visible text, a semantic label, or nearby copy.

Decorative Icons

Use aria-hidden="true" when the adjacent text already names the action or destination.

Executive Dashboard

Icon-Only Controls

Icon-only buttons need an accessible name and a visible focus state.

Inline Text

Use icons sparingly inside copy. They should support scanning without interrupting reading order.

Saved filters apply to this workspace only.

External Links

Use an icon with plain text when pointing to vendor documentation or live references.

Open icon library

Common Interface Patterns

Action Toolbar

Status Labels

Approved Pending Blocked

Form Hints

Email address

Use helper text for security guidance, not icons alone.

Metric Cards

Conversion rate

8.4%

Navigation And Lists

Documentation assets
Component examples
Integration checklist

Icon Sets By Purpose

Navigation

Data

Commerce

Security

Best Practice

Name The Control, Not The Icon

Use labels such as Refresh data or Open user menu. Avoid exposing icon names such as arrow clockwise to assistive technology.

Do Not Depend On Colour Alone

For status, combine text, shape, and an icon. A red warning icon still needs visible wording such as Blocked or Payment failed.

Keep Sizing Predictable

Match icons to the surrounding text scale. Use larger icons for feature headers and metric summaries, not dense tables or forms.

Protect Security Meaning

Icons can suggest trust, privacy, or risk, but backend controls must enforce authentication, authorisation, validation, logging, and session policy.

Code Patterns

<i class="bi bi-check-circle" aria-hidden="true"></i>
<button type="button" aria-label="Refresh data">
  <i class="bi bi-arrow-clockwise" aria-hidden="true"></i>
</button>

Assurance Note

These examples demonstrate source-level patterns for icon use. They are not a WCAG 2.2 conformance claim or an OWASP assurance. Manual keyboard, screen reader, contrast, zoom, target-size, motion, and backend security testing remain necessary in the integrated product.