---
schema_version: "1"
id: 48fb29aa35bf165a22d6e89a234b609f9caeb4d28c69b40dfa724eee157be587
title: $Asset
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/variables/pages-variables-global-asset.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-variables-global-asset.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 4738234cfb6d8013fcfef0e97222939dbef8a7313a2ff9374e930187a9c7797f
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# $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:** If you’re using the Salesforce sidebar, header, or built-in style sheets, you can’t add attributes to the `html`. VG icons are supported only if `showHeader`, `standardStylesheets`, and `sidebar` are set to `false`.

## Example

The following markup references an avatar in the Lightning Design System.

```visualforce
<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.

```visualforce
<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>
```

**See Also**  


-   [Using the Lightning Design System](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/styling/pages-styling-slds.md)