βIconsβ Design Component
Design: zeplin.
SVG Icons
<x-svg-icon size="large" name="chevron-right"/>
List of icons
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>