Skip to main content

How to Use Salesforce Lightning Design System (SLDS) Icons in Visualforce Pages

By Vinod Tiwari

Even if you are working on legacy Visualforce pages, you do not have to settle for the outdated Classic look. By integrating the Salesforce Lightning Design System (SLDS), you can give your Visualforce pages the modern look and feel of Lightning Experience—including standard SLDS SVG icons, card components, and grid layouts.

In plain words: The <apex:slds /> tag imports Salesforce's official Lightning Design System CSS directly into Visualforce. Wrapping your content inside an <html> tag with XML namespaces and an slds-scope container allows you to render native Lightning UI elements like SVG icons and cards seamlessly.
Salesforce Lightning Design System in Visualforce Page

Key Elements for SLDS in Visualforce

To ensure SLDS styles and SVG icons render correctly without conflicting with standard Salesforce stylesheets, include these four essential elements in your markup:

  • <apex:page lightningStylesheets="true" ...>: Suppresses legacy Classic styles and enables automatic Lightning styling for standard inputs.
  • <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">: Adds the XML namespaces required for SVG <use> tags to render SLDS sprite icons.
  • <apex:slds />: Placed inside the <head> section to load official SLDS CSS, fonts, and icon paths.
  • <div class="slds-scope">: Wraps your entire page body so that SLDS CSS scoping applies cleanly to your custom markup.

Complete Code Example: SLDS Card with SVG Icon

Here is a complete, ready-to-use template displaying an SLDS Card component along with a native standard SVG account icon fetched directly from the host environment.

Real-Life Example: Visualforce Page with SLDS Card & SVG Icons
This complete page markup demonstrates how to construct an SLDS card header featuring an SVG icon sprite path: 
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" lightningStylesheets="true">    
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    
        <head>
            <title>SLDS Visualforce Page</title>
            <apex:slds />
        </head>    
        <body>    
            <!-- Scope container for SLDS styling -->
            <div class="slds-scope">

                <!-- SLDS Card Component -->
                <article class="slds-card">
                    <div class="slds-card__header slds-grid">
                        <header class="slds-media slds-media_center slds-has-flexi-truncate">
                            
                            <!-- SVG Icon Figure -->
                            <div class="slds-media__figure">
                                <span class="slds-icon_container slds-icon-standard-account" title="account">
                                    <svg class="slds-icon slds-icon_small" aria-hidden="true">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" 
                                             xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#account">
                                        </use>
                                    </svg>
                                    <span class="slds-assistive-text">account</span>
                                </span>
                            </div>

                            <!-- Card Header Title -->
                            <div class="slds-media__body">
                                <h2 class="slds-card__header-title">
                                    <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Contacts">
                                        <span>Contacts</span>
                                    </a>
                                </h2>
                            </div>

                            <!-- Header Action Button -->
                            <div class="slds-no-flex">
                                <button class="slds-button slds-button_brand">Create New</button>
                            </div>
                        </header>
                    </div>

                    <!-- Card Body Content -->
                    <div class="slds-card__body slds-card__body_inner">
                        Your custom content or data table goes here.
                    </div>

                    <!-- Card Footer -->
                    <footer class="slds-card__footer">
                        <a class="slds-card__footer-action" href="javascript:void(0);">View All
                            <span class="slds-assistive-text">Contacts</span>
                        </a>
                    </footer>
                </article>

            </div>  
        </body>
    </html>
</apex:page>
Common Developer Pitfalls:
  • Missing XML Namespace: Forgetting xmlns:xlink="http://www.w3.org/1999/xlink" on the <html> tag will cause SVG icons to fail silently or throw XML parsing errors in strict mode.
  • Hardcoding Static Resource Paths: Use Salesforce's dynamic endpoint /apexpages/slds/latest/assets/icons/... rather than manual static resource ZIP files to ensure icon sprites stay updated across platform releases.
  • Forgetting the Scope Container: Without <div class="slds-scope">, utility classes like grid layouts, typography, and margins will not take effect.
Always include assistive text (<span class="slds-assistive-text">...</span>) alongside icons for accessibility and screen reader compliance.
360 Summary Card
  • Import Tag: <apex:slds />
  • Scope Class: slds-scope
  • Icon Sprite URL: /apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#[icon-name]
  • Primary Use Case: Modernizing Visualforce pages with native Lightning Design System components
Labels:
Continue learning

Continue exploring the ideas and topics in this article.

Explore article topics