Best Practices

The Ultimate Guide to Accessible Icons (A11y)

Flux Team

Icons are a vital part of modern UI, but they can be a barrier for users relying on screen readers if not implemented correctly. Flux Icons is built with accessibility in mind. Here is how to ensure your icons are accessible to everyone.

1. Decorative vs. Semantic Icons

The first step is deciding if an icon is decorative or functional.

  • Decorative: An icon next to a button label (e.g., a "Save" icon next to the text "Save"). It adds visual flair but no new information.
  • Semantic (Functional): A standalone icon button (e.g., a "Trash" icon with no text). The icon is the label.

2. Handling Decorative Icons

For decorative icons, you want screen readers to ignore them completely. Otherwise, a user might hear "Graphic, Save" instead of just "Save". In Flux Icons, SVGs are automatically set to `aria-hidden="true"` by default when no title is provided, but it's good practice to be explicit. 

<button>
  <FluxIcon name="save" aria-hidden="true" />
  Save Changes
</button>

3. Handling Semantic Icons

For standalone icons, you must provide a text alternative. Since Flux Icons renders inline SVGs, you can use `aria-label` on the wrapper button or link. 

<button aria-label="Delete Item">
  <FluxIcon name="trash-solid" />
</button>

4. Color Contrast

Don't rely on color alone to convey meaning. For example, in a form error, don't just turn the icon red. Use a specific "Error" icon (like `alert-circle`) combined with the color. Ensure your icon color has a contrast ratio of at least 3:1 against the background.

Summary

Making your web app accessible isn't just a legal requirement; it's the right thing to do. Flux Icons provides the raw SVG structure you need to build inclusive interfaces. Use `aria-labels`, check your contrast, and keep building for everyone.

Back to Blog