SVG icons in salesforce lightning

Updating the Salesforce icons was a huge priority for us as we embarked upon this work. Let’s face it, the existing “clip art” was looking a bit haggard and 90’s. Hence we are very excited to offer this set of exciting Technicolor icons covering a wide range of use cases for you to use in your own apps.

The Design System includes a varied supply of new icons divided into five categories:

1. Custom – These icons represent Custom Salesforce objects in our UI. They are the icons we make available to Salesforce Administrators when they are creating their Custom objects
   2. Doctype – Common document and file formats
   3. Standard – These icons cover all the Standard Salesforce objects in our UI
   4. Utility – We use these icons to represent interactions that the user can engage with in the UI – things like closing a modal, going back to a previous page, or opening a dropdown menu
   5. Action – And last, but not least, the good ol’ action category. We utilize these icons for a fairly specific use case within our mobile UI. You’ll notice some duplication here with the Standard and Custom sets – don’t panic, you’re not going crazy. It’s likely you can ignore this category altogether and still have enough icons for any use case you can dream up.

<span class=”slds-icon_container slds-icon-standard-account” title=”description of icon when needed”>
<svg aria-hidden=”true” class=”slds-icon”>
<use xlink:href=”{!URLFOR($Resource.REPLACE_WITH_NAME_OF_SLDS_STATIC_RESOURCE,
‘assets/icons/standard-sprite/svg/symbols.svg#account’)}”></use>
</svg>
<span class=”slds-assistive-text”>Account Icon</span>
</span>