Add an Icon

What You’ll Do

  • Add an icon to the page header

Step 1: Add an Avatar

Replace the code between the <!-- HEADING AREA --> 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.

Preview of Visualforce page after adding avatar to page header

Resources

The Design System site has more documentation and examples.

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities