Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Use SLDS Icons in Visualforce

The Lightning Design System (SLDS) includes PNG and SVG (both individual and spritemap) versions of our action, custom, doctype, standard, and utility icons.

To use SVG spritemap icons in your Visualforce page, add the attributes xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"to the <html> tag.

1<span class="slds-icon_container slds-icon-standard-account" title="description of icon when needed">  
2  <svg aria-hidden="true" class="slds-icon">  
3    <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
4  </svg>  
5   <span class="slds-assistive-text">Icon Assistive Text</span> 
6</span>

Since the icon is standalone and carries meaning, we placed it inside an outer span with the slds-icon_container class.

The icons have no background color out of the box. To set a background color, we apply a second class to the span. To use the default color for a particular icon, construct the name of the icon's specific utility class by concatenating slds-icon-, the sprite map name, and -icon. Apply that class to the <span> element. In the example we are using the "standard" sprite map and the “account” icon so the class is slds-icon-standard-account.

Inside the <span>, we have a <svg> element with the slds-icon class. The <svg> element in turn contains a <use> tag that specifies the icon to display based on its xlink:href attribute.

To set the xlink:href path:

Select the icon you want to use from the icons page. Make a note of which category it’s in (action, custom, doctype, standard, or utility).
Complete the xlink:href attribute by concatenating the category sprite (for example, “standard-sprite”), /svg/symbols.svg# and the specific icon within it (for example, “account”). This gives us the path assets/icons/standard-sprite/svg/symbols.svg#account.

After the <svg> tag, the assistive text is within a span with the slds-assistive-text class.

Visualforce Developer Guide

Use SLDS Icons in Visualforce