Bootstrap Icons

Home / Guides / How to Make SVG Icons Accessible

How to Make SVG Icons Accessible

An icon is only useful if everyone can understand it. Mark decorative icons, label meaningful ones and keep focus visible.

Decorative icons

When text already explains the action, hide the icon from assistive technology.

<svg aria-hidden="true" focusable="false">...</svg>

Meaningful icons

Give icon-only buttons an accessible name.

<button aria-label="Search"><svg aria-hidden="true">...</svg></button>

Contrast and focus

Keep enough contrast and a visible focus ring.

button:focus-visible { outline: 3px solid #7c5cff; }

Names for icon-only controls

A button that shows only an icon must still have a name. Add aria-label to the button, or include visually hidden text inside it. Avoid placing the label on the SVG itself when the button already has one.

Do not rely on the icon alone

Many people read icons differently. Pair important actions with visible text, and never use color alone to show state: add a shape, label or pattern too.

Test with real tools

Tab through the page with only the keyboard, then try a screen reader such as NVDA or VoiceOver. Confirm that every control is reachable, announced clearly and visibly focused.

Quick checklist

  • Decorative icons are hidden with aria-hidden
  • Icon-only buttons have names
  • Focus rings are visible
  • Contrast meets WCAG guidelines
  • The page was tested with keyboard and screen reader

Common mistakes to avoid

Adding an aria-label to both the button and the SVG so the name is read twice, leaving decorative icons exposed to screen readers, and removing focus outlines for visual polish. Another slip is using an icon with no text for an uncommon action.

Conclusion

Accessible icons come down to three habits: hide the decorative ones, name the meaningful ones and keep focus and contrast clear. Test with a keyboard and a screen reader before you ship, because automated checks cannot catch everything.

Frequently asked questions

Next steps

Try these ideas with real icons in the icon browser, or review the categories. See the license page for usage terms.

Related guides