Example

<svg xmlns="http://www.w3.org/2000/svg" class="ys-icon">
    <use xlink:href="/assets/svg/sprite/icons.svg#ys-icon-plus"></use>
</svg>

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

Icons are the visual expression of a brand’s products, services, and tools. Simple, bold, and friendly, they communicate the core idea and intent of a product. While each product icon is visually distinct, all product icons for a given brand should be unified through concept and execution.

Use these guidelines as a starting point to ensure that the products icon colors and key elements reflect the brand’s identity.

Icon style

All icons are drawn with a 2 pixel line thickness and occational small filled shapes. All icons should be in ys-color-grey-28 or ys-color-white (See color definitions) when used on dark backgrounds. Icons should reflect the text colour.