arrow-downarrow-leftarrow-rightarrow-upavatarcameracartchevron-upchevron-leftchevron-rightchevron-upclosecommentemailfullscreen-closefullscreen-opengridheadphonesheart-filledheart-openlockmap-geolocatormap-pushpinmenuminusng-borderpauseplayplusprintsearchsharefacebookgithubg+instagramlinkedinlinkedin_inpinterestpinterest_psnapchatsnapchat_2tumblrtwittervimeovinewhatsappspeakerstar-filledstar-openzoom-inzoom-out

Icons

Icons create a visual language for navigation and user interaction.

 

Usage

Mortar uses SVG sprites along with the <use> method to render icons. Icons can be sized small or large, with their default colors or reversed on a colored background. The SVG sprite will be embedded near the top of the body on any given page so if a camera icon is desired (e.g. ) then one need only use the following code:

<div class="mt2_bgcolor--neutral--xxxl mt2_color--neutral--xd">
  <svg class="mt2_icon--large">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#camera"></use>
  </svg>
</div>
<div class="mt2_bgcolor--neutral--d mt2_color--neutral--xxxl">
  <svg class="mt2_icon--large">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#camera"></use>
  </svg>
</div>
<div class="mt2_bgcolor--neutral--xxxl mt2_color--neutral--xd">
  <svg class="mt2_icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#camera"></use>
  </svg>
</div>
<div class="mt2_bgcolor--neutral--d mt2_color--neutral--xxxl">
  <svg class="mt2_icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#camera"></use>
  </svg>
</div>

Toggle the icons on this page:

 

General Icons

 

Social Icons

 

Using Icons With Labels

The following are examples of icons placed next to labels.

Back
Back
<div class="mt2_iconandlabel--horizontal">
  <svg class="mt2_icon--large mt2_icon--large--left">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#chevron-left"></use>
  </svg>
  <span class="mt2_subh4">Back</span>
</div>

<div class="mt2_iconandlabel--horizontal">
  <svg class="mt2_icon mt2_icon--left">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#chevron-left"></use>
  </svg>
  <span class="mt2_subh4">Back</span>
</div>

Share
Share
<div class="mt2_iconandlabel--horizontal">
  <span class="mt2_subh4">Share</span>
  <svg class="mt2_icon--large mt2_icon--large--right">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#share"></use>
  </svg>
</div>

<div class="mt2_iconandlabel--horizontal">
  <span class="mt2_subh4">Share</span>
  <svg class="mt2_icon mt2_icon--right">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#share"></use>
  </svg>
</div>

Scroll Down
Scroll Down
<div class="mt2_iconandlabel--vertical">
  <span class="mt2_subh4">Scroll Down</span>
  <svg class="mt2_icon--large mt2_icon--large--bottom">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#chevron-down"></use>
  </svg>
</div>

<div class="mt2_iconandlabel--vertical">
  <span class="mt2_subh4">Scroll Down</span>
  <svg class="mt2_icon mt2_icon--bottom">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#chevron-down"></use>
  </svg>
</div>

Scroll Up
Scroll Up
<div class="mt2_iconandlabel--vertical">
  <svg class="mt2_icon--large mt2_icon--large--top">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#chevron-up"></use>
  </svg>
  <span class="mt2_subh4">Scroll Up</span>
</div>

<div class="mt2_iconandlabel--vertical">
  <svg class="mt2_icon mt2_icon--top">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#chevron-up"></use>
  </svg>
  <span class="mt2_subh4">Scroll Up</span>
</div>