“Icons” Design Component

Accessibility

If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. For this reason, we use aria-hidden="true" attribute in our blade component and partial.

Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text. E.g. use aria-label attribute:

<a class="link" href="path/to/gift" aria-label="Gift">
    <x-svg-icon size="large" name="gift"/>
</a>