Accessibility of Icons

By using inline SVG, we have the possibility to make graphical assets both responsive and interactive. In order to do so, use the Icon or IconPrimary component. These components provide the needed runtime processing.

Decorative Icons

If your icons are purely decorative, you’ll need to manually add an aria-hidden (results in aria-hidden="true") attribute to each of your icons so your app is "accessible".

Responsive Icons

Use size="auto" to force the icon to inherit the size of its parent element.

My H1 with an icon

My H4 with the same icon

SVG Icons

Scalable Vector Graphics can be set up to be scalable and actually respond to the font-size.

- has a fixed size

- is responsive

- uses .dnb-icon