Required files

SVG icons

The below icon SVGs are included in the UI Toolkit. Icons can be added to the UI Toolkit as explained here

Inline SVGs are used for the icons and wrapped with an .icon element which defines the size

Modifying classes can be added to change the sizes .icon--sm, .icon--xs, .icon--xxs

Note: the global helper class .clickable can be used to show something is clickable even if it is not an anchor

Note: the loader icon has the helper class .rotating.

<i class="icon"><svg>[INSERT SVG CODE]</svg></i>

SVG icons colours

There are three colour modifying classes available, which will alter the fill colour of the svg .icon--base, .icon--inverted, .icon--primary.

Note that the base colour doesn't need that class unless you are trying to override.

Icons inline with text

Icons can be placed inline with text and they will scale relative to the size of the text

The svg icon should be wrapped in an inline element such as a <span> or <i> and then as above, apply the .icon class as well as the modifying class .icon--inline to that element and place inside the text element.

To create spacing between the text and the icon, you can either add a helper class eg. .m-l-xxs or there is an option to wrap the text in a <span> and a margin will be added dependant on which side the icon is of the text. This is useful when you have a link that you don't want the underline to extend.

<p>I am base font size with an inline icon <i class="icon icon--inline"><svg>[INSERT SVG CODE]</svg></i></p>

<p><a href="#"><span>I am a link with an inline icon</span><i class="icon icon--inline">[INSERT SVG CODE]</i></a></p>

Icons in circles

To create an icon in a circle, add a wrapping element to the .icon with the class of .circle-icon

You can use an inline svg or an image but if you use an image it required a class .icon__img.

<a class="circle-icon circle-icon--outlined" href="#"><i class="icon"><img alt="twitter" class="icon__img" src="path/to/icon/twitter.svg"></i></a>

<a class="circle-icon circle-icon--outlined" href="#"><i class="icon">[INSERT SVG CODE]</i></a>

Icons in circles - sizes

The alternative sizes available can be applied using the modifying classes .circle-icon--sm, .circle-icon--sm-resp, .circle-icon--lg, .circle-icon--lg-resp ('resp' meaning it has a different size on mobile and desktop)

There is also a mixin available to customise the circle icon size here

<a class="circle-icon" href="#"><i class="icon"><svg>[INSERT SVG CODE]</svg></i></a>

<a class="circle-icon circle-icon--sm-resp" href="#"><i class="icon"><svg>[INSERT SVG CODE]</svg></i></a>

<a class="circle-icon circle-icon--lg-resp" href="#"><i class="icon"><svg>[INSERT SVG CODE]</svg></i></a>

Icons in circles - colours

The colour variations can be applied using the modifying classes .circle-icon--primary, .circle-icon--outlined, .circle-icon--outlined--primary, .circle-icon--outlined--inverted, .circle-icon--white-outline

There is also a mixin available to customise the circle icon colour and border here

<a class="circle-icon circle-icon--primary" href="#"><i class="icon"><svg>[INSERT SVG CODE]</svg></i></a>

<a class="circle-icon circle-icon--outlined" href="#"><i class="icon"><svg>[INSERT SVG CODE]</svg></i></a>

<a class="circle-icon circle-icon--outlined--primary" href="#"><i class="icon"><svg>[INSERT SVG CODE]</svg></i></a>

<a class="circle-icon circle-icon--outlined--inverted" href="#"><i class="icon"><svg>[INSERT SVG CODE]</svg></i></a>