Icons are often used as an accompaning element to enhance clarity and/or discoverability of the associated text. SVG files of the icons can be downloaded through WebDAM, please contact us if you need access to the files.
Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/icon-fonts.scss#L9
<!-- ui icons -->
<span class="icon-arrow-up" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-arrow-right" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-arrow-down" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-arrow-left" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-chevron-up" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-chevron-right" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-chevron-down" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-chevron-left" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-home" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-menu" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-search" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-arrow" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-external-link" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-lock" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-unlock" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-expand" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-collapse" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-upload" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-download" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-print" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-play" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-refresh" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-settings" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-cog" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-code" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-calendar-month" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-calendar-day" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-clock" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-copyright" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-trademark" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-feed" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-form" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-link" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-at" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-show" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-hide" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-pause" aria-hidden="true" focusable="false"><!--icon--></span>
Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/icon-fonts.scss#L56
<!-- ui icons -->
<span class="icon-help-fill" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-help-stroke" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-info-fill" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-info-stroke" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-success-fill" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-success-stroke" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-warning-fill" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-warning-stroke" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-danger-fill" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-danger-stroke" aria-hidden="true" focusable="false"><!--icon--></span>
Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/icon-fonts.scss#L76
<!-- filetype icons -->
<span class="icon-file-doc" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-file-word" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-file-excel" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-file-powerpoint" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-file-pdf" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-file-zip" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-file-css" aria-hidden="true" focusable="false"><!--icon--></span>
Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/icon-fonts.scss#L93
<!-- communication icons -->
<span class="icon-users" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-user-neutral" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-user-male" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-user-female" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-user-add" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-user-card" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-wheelchair" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-comment" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-comments" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-share-fill" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-share-stroke" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-email" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-phone" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-wifi" aria-hidden="true" focusable="false"><!--icon--></span>
Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/icon-fonts.scss#L117
<!-- academic icons -->
<span class="icon-award" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-trophy" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-bookmark" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-bookmarks" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-book" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-pencil" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-grad-hat" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-grad" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-scholarship" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-bell" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-microscope" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-beaker" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-camera" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-music" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-drama" aria-hidden="true" focusable="false"><!--icon--></span>
Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/icon-fonts.scss#L142
<!-- news and events icons -->
<span class="icon-newspaper" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-microphone" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-bullhorn" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-ticket" aria-hidden="true" focusable="false"><!--icon--></span>
Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/icon-fonts.scss#L156
<!-- place icons -->
<span class="icon-globe" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-location" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-location-add" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-direction-fill" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-direction-stroke" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-building" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-dorm" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-apartment" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-key" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-keys" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-food" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-utensils" aria-hidden="true" focusable="false"><!--icon--></span>
Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/icon-fonts.scss#L178
<!-- transportation icons -->
<span class="icon-walk" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-bicycle" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-car" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-bus" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-train" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-airplane" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-parking" aria-hidden="true" focusable="false"><!--icon--></span>
Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/icon-fonts.scss#L195
<!-- sustainability icons -->
<span class="icon-recycle" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-sun" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-snowflake" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-tree" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-leaf" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-tulip" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-flower" aria-hidden="true" focusable="false"><!--icon--></span>
Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/icon-fonts.scss#L212
<!-- commerce icons -->
<span class="icon-money" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-money-usd" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-savings" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-donate" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-calculator" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-shopping-cart" aria-hidden="true" focusable="false"><!--icon--></span>
<!-- credit card icons -->
<span class="icon-credit-card" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-cc-visa" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-cc-mastercard" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-cc-discover" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-cc-amex" aria-hidden="true" focusable="false"><!--icon--></span>
<!-- chart icons -->
<span class="icon-line-chart" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-line-chart-x" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-bar-chart" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-bar-chart-x" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-pie-chart" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-pie-one-eighth" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-pie-one-fourth" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-pie-three-eighths" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-pie-one-half" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-pie-five-eighths" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-pie-three-fourths" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-pie-seven-eighths" aria-hidden="true" focusable="false"><!--icon--></span>
Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/icon-fonts.scss#L249
<!-- miscellaneous icons -->
<span class="icon-reggie-head" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-asterisk" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-quote" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-checklist" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-lightbulb" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-flag" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-heart-fill" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-heart-stroke" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-star-fill" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-star-stroke" aria-hidden="true" focusable="false"><!--icon--></span>
Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/icon-fonts.scss#L269
<!-- social icons -->
<span class="icon-facebook" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-twitter" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-instagram" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-snapchat" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-linkedin" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-flickr" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-pinterest" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-youtube" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-vimeo" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-soundcloud" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-wordpress" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-tumblr" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-messenger" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-spotify" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-twitch" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-discord" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-behance" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-itchio" aria-hidden="true" focusable="false"><!--icon--></span>
<span class="icon-tiktok" aria-hidden="true" focusable="false"><!--icon--></span>