Icons should help personalize communication, be used with discretion and quickly identifiable, and always display as a single color.
To add an icon to an element, a class of .icon must be used along with an icon class name. Additionally, a color class may be added to change the inherited color of its parent. For example:
<div class="icon [icon class name] [color override]* ">
*Color override is optional
Icons are available to use in five different colors; each designed for a specific purpose. To utilize one of these colors, add one of the following classes to your icon:
default
link
.linkdisabled
.disabledsuccess
.validation__successerror
.validation__error