Icons
To use an SVG icon inline with text, add the with-icon class to the parent container (e.g. link or button). This will add some inline flex and alignment styles to help things line up nicely. It also uses the margin-inline-end CSS logical property to add spacing between the text and icon, irrespective of text direction.
It is preferable to use SVGs inline, because:
- It eliminates a separate HTTP request
- Background images are eliminated for users of Window's high contrast mode
Use SVGOMG to optimise your SVG files.
SVG icons used within interactive elements, such as links and buttons, should include the attributes focusable="false" aria-hidden="true" as per the advice from Scott O'Hara on Contextually marking up accessible images and SVGs.
If the icon is to be used without visible text, you can either use <span class="visuallyhidden"> alongside the SVG to provide a screen reader friendly label for the link/button, or add the aria-label attribute to the link/button, e.g. aria-label="Search".
Try to avoid specifying colours for SVGs within the SVG file itself. Preferably, use fill="currentColor" in the SVG because it allows us to set a CSS colour on the parent element, which the SVG will inherit. It also allows us to use the same SVG file in multiple places, and adjust the styles for interactive states such as hover.