Select a title

UI Toolkit

v3.1.5

Graphics

Sprites

SVG Sprites are fixed dimension, fixed colour vector based graphics, applied as the background of an html element in the same way a more traditional image based sprite works. As SVGs are vector based there is no requirement for alternative resolution versions for standard/retina displays.

For some background on this technique see this article by Chris Coyier.

All SVG Sprites

Svg-amex-logo
Svg-document-agents
Svg-document-default
Svg-document-tenants
Svg-error-404
Svg-gear-wheel
Svg-gocardless
Svg-logo-bare
Svg-logo-large
Svg-logo-medium
Svg-logo-small
Svg-logo-white-bare
Svg-logo-white-large
Svg-logo-white-medium
Svg-logo-white-small
Svg-mastercard-logo
Svg-stripe
Svg-visa-logo
Svg-zero-marker

Example

<div class="Svg Svg-logo-small"></div>

Icons

Font based icons auto generated from SVGs.

Icons-burger
Icons-calendar
Icons-cc-amex
Icons-cc-default
Icons-cc-diners
Icons-cc-discover
Icons-cc-jcb
Icons-cc-mastercard
Icons-cc-visa
Icons-close
Icons-context-menu
Icons-delete
Icons-direct-debit
Icons-down
Icons-edit
Icons-email
Icons-error
Icons-expand-down
Icons-expand-up
Icons-fattick
Icons-file
Icons-folder-open
Icons-folder
Icons-grid3x3
Icons-help
Icons-menu-down
Icons-next-step
Icons-next
Icons-power
Icons-prev-step
Icons-prev
Icons-resend
Icons-search
Icons-settings
Icons-social-facebook
Icons-social-linkedin
Icons-social-twitter
Icons-tick-inverse
Icons-tick
Icons-tool-bell
Icons-tool-help
Icons-trash
Icons-up
Icons-video-play
Icons-view

Example

<i class="Icons-calendar"></i>