MC Theme
  • Bootstrap CSS
  • Bootstrap Components
  • Bootstrap Javascript
  • Fuel UX Controls
  • Typography
  • Iconography
MC Theme
  • Bootstrap CSS
  • Bootstrap Components
  • Bootstrap Javascript
  • Fuel UX Controls
  • Typography
  • Iconography
  • Core Icons
  • Content
Examples for each icon are displayed below in context of a button and a link, however they may also be used in other contexts.




<span class="fuelux-icon fuelux-icon-add-hover"></span>




<span class="fuelux-icon fuelux-icon-add"></span>




<span class="fuelux-icon fuelux-icon-arrow-east-hover"></span>




<span class="fuelux-icon fuelux-icon-arrow-east"></span>




<span class="fuelux-icon fuelux-icon-arrow-north-hover"></span>




<span class="fuelux-icon fuelux-icon-arrow-north"></span>




<span class="fuelux-icon fuelux-icon-arrow-south-hover"></span>




<span class="fuelux-icon fuelux-icon-arrow-south"></span>




<span class="fuelux-icon fuelux-icon-arrow-west-hover"></span>




<span class="fuelux-icon fuelux-icon-arrow-west"></span>




<span class="fuelux-icon fuelux-icon-breadcrumb"></span>




<span class="fuelux-icon fuelux-icon-calendar-hover"></span>




<span class="fuelux-icon fuelux-icon-calendar"></span>




<span class="fuelux-icon fuelux-icon-caret-down-hover"></span>




<span class="fuelux-icon fuelux-icon-caret-down"></span>




<span class="fuelux-icon fuelux-icon-caret-left-hover"></span>




<span class="fuelux-icon fuelux-icon-caret-left"></span>




<span class="fuelux-icon fuelux-icon-caret-right-hover"></span>




<span class="fuelux-icon fuelux-icon-caret-right"></span>




<span class="fuelux-icon fuelux-icon-caret-up-hover"></span>




<span class="fuelux-icon fuelux-icon-caret-up"></span>




<span class="fuelux-icon fuelux-icon-channel-pin-blue"></span>




<span class="fuelux-icon fuelux-icon-channel-pin-green"></span>




<span class="fuelux-icon fuelux-icon-channel-pin-red"></span>




<span class="fuelux-icon fuelux-icon-channel-pin"></span>




<span class="fuelux-icon fuelux-icon-checkbox-active-hover"></span>




<span class="fuelux-icon fuelux-icon-checkbox-active"></span>




<span class="fuelux-icon fuelux-icon-checkbox-checked-disabled"></span>




<span class="fuelux-icon fuelux-icon-checkbox-checked-hover-active"></span>




<span class="fuelux-icon fuelux-icon-checkbox-checked-hover"></span>




<span class="fuelux-icon fuelux-icon-checkbox-checked"></span>




<span class="fuelux-icon fuelux-icon-checkbox-disabled"></span>




<span class="fuelux-icon fuelux-icon-checkbox-hover"></span>




<span class="fuelux-icon fuelux-icon-checkbox-indeterminate-disabled"></span>




<span class="fuelux-icon fuelux-icon-checkbox-indeterminate-hover"></span>




<span class="fuelux-icon fuelux-icon-checkbox-indeterminate"></span>




<span class="fuelux-icon fuelux-icon-checkbox"></span>




<span class="fuelux-icon fuelux-icon-checked-indicator-green"></span>




<span class="fuelux-icon fuelux-icon-checked-indicator-grey"></span>




<span class="fuelux-icon fuelux-icon-checked-indicator-white"></span>




<span class="fuelux-icon fuelux-icon-checked-indicator"></span>




<span class="fuelux-icon fuelux-icon-chevron-down-hover"></span>




<span class="fuelux-icon fuelux-icon-chevron-down"></span>




<span class="fuelux-icon fuelux-icon-chevron-left-hover"></span>




<span class="fuelux-icon fuelux-icon-chevron-left"></span>




<span class="fuelux-icon fuelux-icon-chevron-right-hover"></span>




<span class="fuelux-icon fuelux-icon-chevron-right"></span>




<span class="fuelux-icon fuelux-icon-chevron-thin-down-hover"></span>




<span class="fuelux-icon fuelux-icon-chevron-thin-down"></span>




<span class="fuelux-icon fuelux-icon-chevron-thin-left-hover"></span>




<span class="fuelux-icon fuelux-icon-chevron-thin-left"></span>




<span class="fuelux-icon fuelux-icon-chevron-thin-right-hover"></span>




<span class="fuelux-icon fuelux-icon-chevron-thin-right"></span>




<span class="fuelux-icon fuelux-icon-chevron-thin-up-hover"></span>




<span class="fuelux-icon fuelux-icon-chevron-thin-up"></span>




<span class="fuelux-icon fuelux-icon-chevron-up-hover"></span>




<span class="fuelux-icon fuelux-icon-chevron-up"></span>




<span class="fuelux-icon fuelux-icon-clock"></span>




<span class="fuelux-icon fuelux-icon-copy-hover"></span>




<span class="fuelux-icon fuelux-icon-copy"></span>




<span class="fuelux-icon fuelux-icon-danger"></span>




<span class="fuelux-icon fuelux-icon-default-size-hover"></span>




<span class="fuelux-icon fuelux-icon-default-size"></span>




<span class="fuelux-icon fuelux-icon-delete"></span>




<span class="fuelux-icon fuelux-icon-desktop-grey"></span>




<span class="fuelux-icon fuelux-icon-desktop-white"></span>




<span class="fuelux-icon fuelux-icon-dot-hover"></span>




<span class="fuelux-icon fuelux-icon-dot"></span>




<span class="fuelux-icon fuelux-icon-download-document-hover"></span>




<span class="fuelux-icon fuelux-icon-download-document"></span>




<span class="fuelux-icon fuelux-icon-download-hover"></span>




<span class="fuelux-icon fuelux-icon-download"></span>




<span class="fuelux-icon fuelux-icon-drag-handle-squares-hover"></span>




<span class="fuelux-icon fuelux-icon-drag-handle-squares"></span>




<span class="fuelux-icon fuelux-icon-email-hover"></span>




<span class="fuelux-icon fuelux-icon-email"></span>




<span class="fuelux-icon fuelux-icon-facebook-page"></span>




<span class="fuelux-icon fuelux-icon-facebook"></span>




<span class="fuelux-icon fuelux-icon-folder-close"></span>




<span class="fuelux-icon fuelux-icon-folder-open"></span>




<span class="fuelux-icon fuelux-icon-full-size-hover"></span>




<span class="fuelux-icon fuelux-icon-full-size"></span>




<span class="fuelux-icon fuelux-icon-gear-blue"></span>




<span class="fuelux-icon fuelux-icon-gear-grey"></span>




<span class="fuelux-icon fuelux-icon-gear-white"></span>




<span class="fuelux-icon fuelux-icon-gears-blue"></span>




<span class="fuelux-icon fuelux-icon-gears-grey"></span>




<span class="fuelux-icon fuelux-icon-gears-white"></span>




<span class="fuelux-icon fuelux-icon-gridview-columns-configure"></span>




<span class="fuelux-icon fuelux-icon-gridview-columns"></span>




<span class="fuelux-icon fuelux-icon-gridview-list"></span>




<span class="fuelux-icon fuelux-icon-gridview-paragraph"></span>




<span class="fuelux-icon fuelux-icon-gridview-performance"></span>




<span class="fuelux-icon fuelux-icon-gridview-thumbnail"></span>




<span class="fuelux-icon fuelux-icon-help-hover"></span>




<span class="fuelux-icon fuelux-icon-help"></span>




<span class="fuelux-icon fuelux-icon-info"></span>




<span class="fuelux-icon fuelux-icon-line"></span>




<span class="fuelux-icon fuelux-icon-loader"></span>




<span class="fuelux-icon fuelux-icon-message-type-in"></span>




<span class="fuelux-icon fuelux-icon-message-type-out"></span>




<span class="fuelux-icon fuelux-icon-minus-sign-disabled"></span>




<span class="fuelux-icon fuelux-icon-minus-sign-grey"></span>




<span class="fuelux-icon fuelux-icon-minus-sign-white"></span>




<span class="fuelux-icon fuelux-icon-minus-sign"></span>




<span class="fuelux-icon fuelux-icon-mobile-drag"></span>




<span class="fuelux-icon fuelux-icon-mobile-grey"></span>




<span class="fuelux-icon fuelux-icon-mobile-push"></span>




<span class="fuelux-icon fuelux-icon-mobile-sms-deprecated"></span>




<span class="fuelux-icon fuelux-icon-mobile-sms"></span>




<span class="fuelux-icon fuelux-icon-mobile-white"></span>




<span class="fuelux-icon fuelux-icon-multimail"></span>




<span class="fuelux-icon fuelux-icon-new-window"></span>




<span class="fuelux-icon fuelux-icon-notification-orange"></span>




<span class="fuelux-icon fuelux-icon-notification"></span>




<span class="fuelux-icon fuelux-icon-pencil-hover"></span>




<span class="fuelux-icon fuelux-icon-pencil"></span>




<span class="fuelux-icon fuelux-icon-people"></span>




<span class="fuelux-icon fuelux-icon-person"></span>




<span class="fuelux-icon fuelux-icon-plus-sign-disabled"></span>




<span class="fuelux-icon fuelux-icon-plus-sign-grey"></span>




<span class="fuelux-icon fuelux-icon-plus-sign-white"></span>




<span class="fuelux-icon fuelux-icon-plus-sign"></span>




<span class="fuelux-icon fuelux-icon-radio-button-active-hover"></span>




<span class="fuelux-icon fuelux-icon-radio-button-active"></span>




<span class="fuelux-icon fuelux-icon-radio-button-checked-disabled"></span>




<span class="fuelux-icon fuelux-icon-radio-button-checked-hover-active"></span>




<span class="fuelux-icon fuelux-icon-radio-button-checked-hover"></span>




<span class="fuelux-icon fuelux-icon-radio-button-checked"></span>




<span class="fuelux-icon fuelux-icon-radio-button-disabled"></span>




<span class="fuelux-icon fuelux-icon-radio-button-hover"></span>




<span class="fuelux-icon fuelux-icon-radio-button"></span>




<span class="fuelux-icon fuelux-icon-refresh-disabled"></span>




<span class="fuelux-icon fuelux-icon-refresh-hover"></span>




<span class="fuelux-icon fuelux-icon-refresh"></span>




<span class="fuelux-icon fuelux-icon-remove-hover"></span>




<span class="fuelux-icon fuelux-icon-remove"></span>




<span class="fuelux-icon fuelux-icon-return-to-top-hover"></span>




<span class="fuelux-icon fuelux-icon-return-to-top"></span>




<span class="fuelux-icon fuelux-icon-schematic"></span>




<span class="fuelux-icon fuelux-icon-search-active-hover"></span>




<span class="fuelux-icon fuelux-icon-search-active"></span>




<span class="fuelux-icon fuelux-icon-search-hover"></span>




<span class="fuelux-icon fuelux-icon-search"></span>




<span class="fuelux-icon fuelux-icon-sort-by-alphabet"></span>




<span class="fuelux-icon fuelux-icon-spyglass-green"></span>




<span class="fuelux-icon fuelux-icon-spyglass-grey"></span>




<span class="fuelux-icon fuelux-icon-spyglass-white"></span>




<span class="fuelux-icon fuelux-icon-spyglass"></span>




<span class="fuelux-icon fuelux-icon-subtract-hover"></span>




<span class="fuelux-icon fuelux-icon-subtract"></span>




<span class="fuelux-icon fuelux-icon-success"></span>




<span class="fuelux-icon fuelux-icon-thumbs-down-blue"></span>




<span class="fuelux-icon fuelux-icon-thumbs-down-green"></span>




<span class="fuelux-icon fuelux-icon-thumbs-down-grey"></span>




<span class="fuelux-icon fuelux-icon-thumbs-down-orange"></span>




<span class="fuelux-icon fuelux-icon-thumbs-down-red"></span>




<span class="fuelux-icon fuelux-icon-thumbs-down-white"></span>




<span class="fuelux-icon fuelux-icon-thumbs-up-blue"></span>




<span class="fuelux-icon fuelux-icon-thumbs-up-green"></span>




<span class="fuelux-icon fuelux-icon-thumbs-up-grey"></span>




<span class="fuelux-icon fuelux-icon-thumbs-up-orange"></span>




<span class="fuelux-icon fuelux-icon-thumbs-up-red"></span>




<span class="fuelux-icon fuelux-icon-thumbs-up-white"></span>




<span class="fuelux-icon fuelux-icon-trash-hover"></span>




<span class="fuelux-icon fuelux-icon-trash"></span>




<span class="fuelux-icon fuelux-icon-triangle-east-hover"></span>




<span class="fuelux-icon fuelux-icon-triangle-east"></span>




<span class="fuelux-icon fuelux-icon-triangle-north-hover"></span>




<span class="fuelux-icon fuelux-icon-triangle-north"></span>




<span class="fuelux-icon fuelux-icon-triangle-south-hover"></span>




<span class="fuelux-icon fuelux-icon-triangle-south"></span>




<span class="fuelux-icon fuelux-icon-triangle-west-hover"></span>




<span class="fuelux-icon fuelux-icon-triangle-west"></span>




<span class="fuelux-icon fuelux-icon-twitter"></span>




<span class="fuelux-icon fuelux-icon-warning"></span>




<span class="fuelux-icon fuelux-icon-x-blue-disabled"></span>




<span class="fuelux-icon fuelux-icon-x-blue"></span>




<span class="fuelux-icon fuelux-icon-x-grey"></span>




<span class="fuelux-icon fuelux-icon-x-white"></span>




<span class="fuelux-icon fuelux-icon-zoom-in"></span>




<span class="fuelux-icon fuelux-icon-zoom-out"></span>