Reference Lightning Design System Assets with the $Asset Global Variable

Use the $Asset global variable to access images, sprites, and other assets that are part of the Lightning Design System. Use it in Visualforce pages that also use the <apex:slds> component.

Use $Asset instead of $Resource. The variable takes dot notation and SLDS. For example, this markup references a JPG avatar in the Lightning Design System.

<apex:page>
    <apex:slds />
    <span class="slds-icon_container slds-icon--small slds-icon-standard-account" title="Contact Avatar">
        <img src="{!URLFOR($Asset.SLDS, 'assets/images/avatar1.jpg')}" alt="Contact Avatar" />
    </span>
</apex:page>