Icons

Example markup

<p class="icon-inline--left icon--web-dark"><a href="http://www.providerwebsite.ac.uk">www.providerwebsite.ac.uk</a></p>

Note: to be used on block-level elements.

Inline icons

bookmark-monza

check-dark

check-monza

chevron-down-light

chevron-left-light

chevron-left-dark

chevron-right-dark

chevron-right-dark

chevron-up-light

close-dark

error

error-light

filter-light

filter-dark

heart-monza

heart-outline-dark

heart-outline-light

help-circle-light

web-dark

map-marker-light

map-marker-dark

menu-light

menu-dark

phone-dark

phone-monza

plus-dark

plus-light

success

success-light

bookmark-monza

check-dark

check-monza

chevron-down-light

chevron-left-light

chevron-left-dark

chevron-right-dark

chevron-right-dark

chevron-up-light

close-dark

error

error-light

filter-light

filter-dark

heart-monza

heart-outline-dark

heart-outline-light

help-circle-light

web-dark

map-marker-light

map-marker-dark

menu-light

menu-dark

phone-dark

phone-monza

plus-dark

plus-light

success

success-light

bookmark-monza

check-dark

check-monza

chevron-down-light

chevron-left-light

chevron-left-dark

chevron-right-dark

chevron-right-dark

chevron-up-light

close-dark

error

error-light

filter-light

filter-dark

heart-monza

heart-outline-dark

heart-outline-light

help-circle-light

web-dark

map-marker-light

map-marker-dark

menu-light

menu-dark

phone-dark

phone-monza

plus-dark

plus-light

success

success-light

Inline icons optional

To use these icons, bring in the icons--optional.css file. See the head documentation.

airballoon-dark

airballoon-monza

airballoon-light

alert-circle-dark

alert-circle-monza

alert-circle-light

barley-dark

barley-monza

barley-light

book-open-page-variant-dark

book-open-page-variant-monza

book-open-page-variant-light

calendar-multiple-dark

calendar-multiple-monza

calendar-multiple-light

camera-iris-dark

camera-iris-monza

camera-iris-light

cash-dark

cash-monza

cash-light

certificate-dark

certificate-monza

certificate-light

city-dark

city-monza

city-light

cog-dark

cog-monza

cog-light

comment-alert-dark

comment-alert-monza

comment-alert-light

comment-question-outline-dark

comment-question-outline-monza

comment-question-outline-light

compass-dark

compass-monza

compass-light

cube-outline-dark

cube-outline-monza

cube-outline-light

earth-dark

earth-monza

earth-light

forum-dark

forum-monza

forum-light

history-dark

history-monza

history-light

human-dark

human-monza

human-light

library-dark

library-monza

library-light

magnify-dark

magnify-monza

magnify-light

message-text-dark

message-text-monza

message-text-light

menu-dark

menu-monza

menu-light

microphone-variant-dark

microphone-variant-monza

microphone-variant-light

movie-dark

movie-monza

movie-light

pen-dark

pen-monza

pen-light

routes-dark

routes-monza

routes-light

run-dark

run-monza

run-light

school-dark

school-monza

school-light

telegram-dark

telegram-monza

telegram-light

television-guide-dark

television-guide-light

television-guide-monza

voice-dark

voice-monza

voice-light

wrench-dark

wrench-monza

wrench-light

airballoon-dark

airballoon-monza

airballoon-light

alert-circle-dark

alert-circle-monza

alert-circle-light

barley-dark

barley-monza

barley-light

book-open-page-variant-dark

book-open-page-variant-monza

book-open-page-variant-light

calendar-multiple-dark

calendar-multiple-monza

calendar-multiple-light

camera-iris-dark

camera-iris-monza

camera-iris-light

cash-dark

cash-monza

cash-light

certificate-dark

certificate-monza

certificate-light

city-dark

city-monza

city-light

cog-dark

cog-monza

cog-light

comment-alert-dark

comment-alert-monza

comment-alert-light

comment-question-outline-dark

comment-question-outline-monza

comment-question-outline-light

compass-dark

compass-monza

compass-light

cube-outline-dark

cube-outline-monza

cube-outline-light

earth-dark

earth-monza

earth-light

forum-dark

forum-monza

forum-light

history-dark

history-monza

history-light

human-dark

human-monza

human-light

library-dark

library-monza

library-light

magnify-dark

magnify-monza

magnify-light

message-text-dark

message-text-monza

message-text-light

menu-dark

menu-monza

menu-light

microphone-variant-dark

microphone-variant-monza

microphone-variant-light

movie-dark

movie-monza

movie-light

pen-dark

pen-monza

pen-light

routes-dark

routes-monza

routes-light

run-dark

run-monza

run-light

school-dark

school-monza

school-light

telegram-dark

telegram-monza

telegram-light

television-guide-dark

television-guide-light

television-guide-monza

voice-dark

voice-monza

voice-light

wrench-dark

wrench-monza

wrench-light

airballoon-dark

airballoon-monza

airballoon-light

alert-circle-dark

alert-circle-monza

alert-circle-light

barley-dark

barley-monza

barley-light

book-open-page-variant-dark

book-open-page-variant-monza

book-open-page-variant-light

calendar-multiple-dark

calendar-multiple-monza

calendar-multiple-light

camera-iris-dark

camera-iris-monza

camera-iris-light

cash-dark

cash-monza

cash-light

certificate-dark

certificate-monza

certificate-light

city-dark

city-monza

city-light

cog-dark

cog-monza

cog-light

comment-alert-dark

comment-alert-monza

comment-alert-light

comment-question-outline-dark

comment-question-outline-monza

comment-question-outline-light

compass-dark

compass-monza

compass-light

cube-outline-dark

cube-outline-monza

cube-outline-light

earth-dark

earth-monza

earth-light

forum-dark

forum-monza

forum-light

history-dark

history-monza

history-light

human-dark

human-monza

human-light

library-dark

library-monza

library-light

magnify-dark

magnify-monza

magnify-light

message-text-dark

message-text-monza

message-text-light

menu-dark

menu-monza

menu-light

microphone-variant-dark

microphone-variant-monza

microphone-variant-light

movie-dark

movie-monza

movie-light

pen-dark

pen-monza

pen-light

routes-dark

routes-monza

routes-light

run-dark

run-monza

run-light

school-dark

school-monza

school-light

telegram-dark

telegram-monza

telegram-light

television-guide-dark

television-guide-light

television-guide-monza

voice-dark

voice-monza

voice-light

wrench-dark

wrench-monza

wrench-light

Example inline SVG

Generally we have avoided this (as it would be an implementation headache) but will start using it in HTML served up by the Content API.

Ruby code for examples on mockup pages:

html_svg_image('custom/alert-warning.svg')