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-align-horizontal-center"></span>




<span class="fuelux-icon fuelux-icon-align-horizontal-left"></span>




<span class="fuelux-icon fuelux-icon-align-horizontal-right"></span>




<span class="fuelux-icon fuelux-icon-border-all"></span>




<span class="fuelux-icon fuelux-icon-border-bottom"></span>




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




<span class="fuelux-icon fuelux-icon-border-none"></span>




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




<span class="fuelux-icon fuelux-icon-border-top"></span>




<span class="fuelux-icon fuelux-icon-close-content-block"></span>




<span class="fuelux-icon fuelux-icon-content-cloud-upload"></span>




<span class="fuelux-icon fuelux-icon-content-image"></span>




<span class="fuelux-icon fuelux-icon-content-replace-hover"></span>




<span class="fuelux-icon fuelux-icon-content-replace"></span>




<span class="fuelux-icon fuelux-icon-content-text"></span>




<span class="fuelux-icon fuelux-icon-corner-radius"></span>




<span class="fuelux-icon fuelux-icon-dots-horizontal"></span>




<span class="fuelux-icon fuelux-icon-dots-verticle"></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-inverse-chevron-down-hover"></span>




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




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




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




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




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




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




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




<span class="fuelux-icon fuelux-icon-inverse-duplicate-white"></span>




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




<span class="fuelux-icon fuelux-icon-inverse-trashcan-white"></span>




<span class="fuelux-icon fuelux-icon-margin-all"></span>




<span class="fuelux-icon fuelux-icon-margin-bottom"></span>




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




<span class="fuelux-icon fuelux-icon-margin-none"></span>




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




<span class="fuelux-icon fuelux-icon-margin-top"></span>




<span class="fuelux-icon fuelux-icon-padding-all"></span>




<span class="fuelux-icon fuelux-icon-padding-bottom"></span>




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




<span class="fuelux-icon fuelux-icon-padding-none"></span>




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




<span class="fuelux-icon fuelux-icon-padding-top"></span>




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




<span class="fuelux-icon fuelux-icon-padlock-locked-red"></span>




<span class="fuelux-icon fuelux-icon-padlock-locked-white"></span>




<span class="fuelux-icon fuelux-icon-padlock-locked"></span>




<span class="fuelux-icon fuelux-icon-padlock-unlocked-white"></span>




<span class="fuelux-icon fuelux-icon-padlock-unlocked"></span>




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




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




<span class="fuelux-icon fuelux-icon-restricted-gray-background"></span>




<span class="fuelux-icon fuelux-icon-restricted-red-background"></span>




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