Activity Forums Salesforce® Discussions SVG icons in salesforce lightning Reply To: SVG icons in salesforce lightning

  • Satyakam

    Member
    January 3, 2017 at 8:44 am

    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>