Skip to content


What component has

By default our Icon component has aria-hidden="true", because usually it serves as an additional visual clue in the interface.

Considerations for developers

According to the ARIA in HTML document, SVG has no default corresponding role, but you can set the role this icon has in the interface (for example, button, link).

  • The best way to make SVGs accessible to Assistive Technologies like screen readers and speech recognition tools is to put it directly into your HTML using the <svg> tag.
  • If you want to make the Icon interactive, add our interactive prop to it, and icon will get role="button" automatically.
  • If you use icon as a clickable element, always add an appropriate aria-label (recommend your designers to prepare it).
  • Avoid using <embed>, <object>, or <img> elements as they are not as supported by browsers as inline SVG.

Find live examples in the A11y style guide.

Roles and attributes

The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in the particular cases in your interfaces.

aria-hidden="true"img, svgHides images from the assistive technologies, because this element is auxiliary and shouldn't be played by a screen reader.
aria-labeldivDefines a string value that labels an interactive element. It is a required for buttons without text content.
aria-labelledbydivThe aria-labelledby attribute identifies the element (or elements) that labels the element it is applied to. It is a required for buttons without text content.
buttondiv, a, svgIcon gets role="button" automatically, if you add prop interactive to it. Identifies the element as a button. Accessible name for the button is defined by the text content of the element or by adding aria-label.
linkimg, svgIdentifies the img/svg element as a link.

Find live examples in the A11y style guide.

Considerations for designers

  • If an icon has a function in the interface, it should be conveyed to the user through assistive technologies. In this case you should provide an appropriate aria-label for it. For example, if Trash icon removes a table row in the interface, add aria-label="Remove row".
  • Check icon contrast against background. The contrast ratio should be at least 3:1.


Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.