Add an Icon

What You’ll Do

Add an icon to the page header

Step 1: Add an Avatar

Replace the code between the  comments with the following:

<!-- HEADING AREA -->
<!-- MEDIA OBJECT = FIGURE + BODY -->
<div class="slds-media slds-no-space slds-grow">
  <div class="slds-media__figure">
    <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact">
      <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use>
    </svg>
  </div>
  <div class="slds-media__body">
    <p class="slds-text-title_caps slds-line-height_reset">Contacts</p>
    <h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="My Contacts">My Contacts</h1>
  </div>
</div>
<!-- / MEDIA OBJECT -->
<!-- /HEADING AREA -->

Step 2: Preview

Save your page, and click the Preview button.

Resources

The Design System site has more documentation and examples.

Media Objects