I looked into this to use illustration in my component. https://lightningdesignsystem.com/components/illustration/

As we can't use svg tag in lightning component, so is there any way by which we can make a use of this?

One solution I thought is copying the svg code in a file and added it to resource, and use the path in lightning:icon src attribute. Is there any other good solution for that if framework recommends?

  • lightning:icon is recommended way to use SVGs
    – Raul
    Aug 6 '18 at 7:00
  • @Raul illustrations aren't available as slds icons. Because image generated by Illustrations are pretty big and will become non-understanble in icons May 10 '19 at 11:57

I was wondering about it this weekend and I found out that you can simply use an image tag that points to a SVG file like this:

<div class="slds-illustration slds-illustration_large" aria-hidden="true">
    <img src="/img/chatter/OpenRoad.svg" class="slds-illustration__svg" alt=""/>
    <div class="slds-text-color_weak">
        <h3 class="slds-text-heading_medium">Some title</h3>

This works fine but you'll have to inspect the source of existing pages to figure out the proper SVG file names.

Update 14 April 2019: This is now documented in SLDS website.

Update 30 April 2021: This no longer seems to be documented in the SLDS website. I attempted to check the wayback machine to verify the change, but the snapshot from April 2019 didn't have the full page.

Let's catalog the image paths that everyone has found so far; if anyone finds more, please add them to this answer.

  • Open Road: /img/chatter/OpenRoad.svg
  • Desert: /img/chatter/Desert.svg
  • No Events: /projRes/ui-home-private/emptyStates/noEvents.svg
  • No Tasks: /projRes/ui-home-private/emptyStates/noTasks.svg
  • No Assistant: /projRes/ui-home-private/emptyStates/noAssistant.svg
  • 1
    Salesforce does it like this, and asks us to use the whole code in documentation, great!! I didn't get the code what I needed (gone fishing one), but some more references just in case anybody needs are /projRes/ui-home-private/emptyStates/noEvents.svg, /projRes/ui-home-private/emptyStates/noTasks.svg, /projRes/ui-home-private/emptyStates/noAssistant.svg etc! Aug 6 '18 at 10:43
  • @AdityaVijay Do you know the path for setup # ?? Aug 9 '18 at 7:33
  • @SagarThoriya not sure if I understood setup #? Aug 9 '18 at 11:27
  • @AdityaVijay here in the document they have svg image for setup lightningdesignsystem.com/components/illustration/#Setup i am looking for the same. Aug 9 '18 at 11:39
  • @SagarThoriya no I didn't find any for this, I pasted in my comment above which I found, just 3 as of now! :-) Aug 9 '18 at 13:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.