Icons

Application

The icon set (with the exception to certain full-color variants like credit card logos) should be monochromatic. The color of the icons should be able to change for hover/active effects or to be used on a dark background.

Toggle the color of this section to see if the icons have exported correctly.

alert
arrow-down-double-line
arrow-left
arrow-left-to-line
arrow-path
arrow-right
arrow-right-to-line
box
checked-box
checkmark
chevron-down
chevron-left
chevron-right
chevron-up
chevrons-up-down
clock
close
exclamation-circle
external-link
eye
eye-slash
gear
gift
home
information-circle
light-bulb
lock
logomark
member-price
membership
menu-burger
menu-search-combo
minus
pause
pencil
play
plus
question-mark
search
shopping-cart
shopping-tag
skip-right
sliders-horizontal
sparkle
trash
trophy
truck
user
zoom

Social

social-facebook
social-facebook-circle
social-instagram
social-instagram-circle
social-pinterest
social-pinterest-circle
social-x
social-x-circle
social-youtube
social-youtube-circle

Credit Cards

credit-card-amex
credit-card-default
credit-card-discover
credit-card-mastercard
credit-card-visa

Usage

Included by attribute 

1

<span class="u-size-6" custicon="exclamation-circle" custicon-svg-classes="c-red" custicon-svg-title="Important"></span>

As a custicon element 

1

<custicon icon="exclamation-circle"></custicon>

Loading

Dark 

1

<span class="u-size-6" custicon="loading-spinner-dark"></span>

Light 

1

<span class="u-size-6" custicon="loading-spinner-light"></span>