Tag Archives: Icons

Lightning Icons in Visualforce Page

Salesforce provides 5 different kind of Icons (Standart, Custom, Utility, Doctype, Action) which can be used in Lightning component and Visualforce page. Find SLDS Icons here.

Example:
Instead of uploading the Lightning Design System as a static resource, we can include apex:slds inside the head tag of Visualforce page to use Lightning Design System stylesheets in the page.

Visualforce Page:

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" docType="html-5.0" >
    
    <head>
        <apex:slds/> 
    </head>
    
    <body class="slds-scope">
        <div class="slds-m-around--xx-large">
            <article class="slds-card">
                <div class="slds-card__body">
                    <table class="slds-table slds-table_bordered">
                        <thead>
                            <tr class="slds-text-heading--label">
                                <th scope="col">NAME</th>
                                <th scope="col">CATEGORIES</th>
                                <th scope="col">ICON</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td scope="row">Account</td>
                                <td scope="row">Standard</td>
                                <td scope="row">
                                    <span class="slds-icon_container slds-icon-standard-account" >
                                        <svg aria-hidden="true" class="slds-icon slds-icon--small">
                                            <use xmlns:xlink="http://www.w3.org/2000/xlink" 
                                                 xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#account">
                                            </use>
                                        </svg>
                                        <span class="slds-assistive-text">Account</span>
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td scope="row">Custom1</td>
                                <td scope="row">Custom</td>
                                <td scope="row">
                                    <span class="slds-icon_container slds-icon-custom-custom1" >
                                        <svg aria-hidden="true" class="slds-icon slds-icon--small">
                                            <use xmlns:xlink="http://www.w3.org/2000/xlink" 
                                                 xlink:href="/apexpages/slds/latest/assets/icons/custom-sprite/svg/symbols.svg#custom1">
                                            </use>
                                        </svg>
                                        <span class="slds-assistive-text">Custom1</span>
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td scope="row">Email</td>
                                <td scope="row">Utility</td>
                                <td scope="row">
                                    
                                    <span class="slds-icon_container slds-icon-utility-email" >
                                        <svg aria-hidden="true" class="slds-icon slds-icon-text-default">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" 
                                                 xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#email">
                                            </use>
                                        </svg>
                                        <span class="slds-assistive-text">Email</span>
                                    </span>
                                    
                                </td>
                            </tr>
                            <tr>
                                <td scope="row">Priority</td>
                                <td scope="row">Action</td>
                                <td scope="row">
                                    <span class="slds-icon_container slds-icon-action-priority" >
                                        <svg aria-hidden="true" class="slds-icon  slds-icon--x-small">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" 
                                                 xlink:href="/apexpages/slds/latest/assets/icons/action-sprite/svg/symbols.svg#priority">
                                            </use>
                                        </svg>
                                        <span class="slds-assistive-text">Priority</span>
                                    </span>
                                    
                                </td>
                            </tr>
                            <tr>
                                <td scope="row">CSV</td>
                                <td scope="row">Doctype</td>
                                <td scope="row">
                                    <span class="slds-icon_container slds-icon-doctype-csv" >
                                        <svg aria-hidden="true" class="slds-icon ">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" 
                                                 xlink:href="/apexpages/slds/latest/assets/icons/doctype-sprite/svg/symbols.svg#csv">
                                            </use>
                                        </svg>
                                        <span class="slds-assistive-text">CSV</span>
                                    </span>
                                    
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </article>
        </div>
    </body>
</apex:page>

Output: