$Asset

A global merge field to use when referencing images and other assets that are part of the Lightning Design System.

Usage

In a Visualforce page that uses <apex:slds>, $Asset.SLDS allows you to use the images, icons, and avatars that are part of the Lightning Design System. Use the URLFOR() formula function to reference assets using $Asset with dot notation.

To use SVG icons, add the required XML namespaces by using xmlns="http://www.w3.org/2000/svg" and xmlns:xlink="http://www.w3.org/1999/xlink" in the html tag.
Note

Note

Currently, if you are using the Salesforce sidebar, header, or built-in stylesheets, you can’t add attributes to the html . VG icons are only supported ifshowHeader, standardStylesheets, and sidebar set to false.

Example

The following markup references an 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/profile_avatar_96.png')}" alt="Contact Avatar" />
    </span>
</apex:page>

The following markup references the Lightning Design System’s SVG account icon.

<apex:page>
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <apex:slds />
        <span class="slds-icon_container slds-icon-standard-account">
            <svg aria-hidden="true" class="slds-icon">
                <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
            </svg>
             <span class="slds-assistive-text">Account Icon</span>
        </span>
    </html>
</apex:page>