Example

<a href="#" class="ys-shortcut">
    <figure class="ys-shortcut__icon-container" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" class="ys-icon ys-shortcut__icon">
            <use xlink:href="/assets/svg/sprite/icons.svg#ys-icon-music"></use>
        </svg>
    </figure>
    <span class="ys-shortcut__title">Music</span>
</a>

HTML Guidelines

1. Make sure you change the path in the xlink:href attribute to match your own SVG file. Copy the file from DNA (the node_modules folder) to your own solution. This is something you need to do automatically through webpack, gulp or another task-runner everytime you build your solution. Please don’t copy it manually because then it can get outdated.

2. Change the ID of the icon to match the one you want to use. E.g. #ys-icon-wifi would give you the wifi icon. For a full overview of all available icons, please visit Design Guidelines > Icons.

3. For IE11 support of SVG Sprites please include SVG for Everybody.

UX and Design Guidelines