Use the brand icon font for single color iconography. There are two methods for including icons on a page. Usually you should use the .icon- classes on elements. For example, to display a cart icon, use the following HTML:

<span class="icon-shopcart"></span>

You can also reference icons in the stylesheets using SCSS mixins. To include an icon this way, add the following mixins to a style block:


The icomoonFont() mixin adds required rules for the icon font, and the "\e623" is the brand-specific character code for the icon. These should be avioded however as they are subject to change without notice and projects using them may break.

  • .icon-arrow-up-indicator
  • .icon-arrow-right-indicator
  • .icon-arrow-down-indicator
  • .icon-arrow-left-indicator
  • .icon-arrow-up-indicator-open
  • .icon-arrow-right-indicator-open
  • .icon-arrow-down-indicator-open
  • .icon-arrow-left-indicator-open

  • .icon-add-user
  • .icon-bookmark
  • .icon-shopcart
  • .icon-wishlist
  • .icon-menu
  • .icon-search
  • .icon-location
  • .icon-account
  • .icon-help
  • .icon-gift
  • .icon-star
  • .icon-close
  • .icon-check
  • .icon-play
  • .icon-mail
  • .icon-print
  • .icon-info
  • .icon-chat