Trying to show custom icons from my static resource zip file using lightning:icon within a community, but it's not rendering the icons. It works for img tag, but I need to use fill to change the colour of the icons from css.

Sample Code:

<lightning:icon src="{!$Resource.StaticResource+'/y.svg'}"/> <!--not working--> <img src="{!$Resource.StaticResource+'/y.png'}"/> <!--works, but can't modify colour using fill css attribute-->

Not sure if using $Resource is the right approach but according to sf docs, I should be able to use it to reference path for a static resource asset https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_resource_value_provider.htm

Also saw the documentation around showing custom icons in lightning:icon which shows that you need to specify the path to your icon, but I don't know what path to use for my static resource. https://developer.salesforce.com/docs/component-library/bundle/lightning:icon/documentation

<lightning:icon src="path/to/customSvgSprite.svg#my-icon"/>

found some old posts around using custom icons in lightning component, but they are already outdated:

How can I use custom svg icons in a lightning component?

Can we use SVG icons outside those provided by SLDS?

  • your path should be something like resource/STATICRESOURCEFILENAME/PATHTOSVG
    – Eric
    Jul 31, 2018 at 3:17
  • @Eric, didn't work. again worked for <img> tag but not for <lightning:icon>, I thought there might be a different way of accessing static resources in communities which is related to this post: salesforce.stackexchange.com/questions/115772/… but it still didn't work for lightning:icon <lightning:icon src="/sfsites/c/resource/StaticResource/y.png"/> <img src="/sfsites/c/resource/StaticResource/y.png"/>
    – sfdx
    Jul 31, 2018 at 3:40
  • is the static resource public?
    – Eric
    Jul 31, 2018 at 3:41
  • @Eric yes, it is public.
    – sfdx
    Jul 31, 2018 at 3:42

2 Answers 2


I had the same issue and ask in Trailblazer Community here.

I got the answer from Greg Rewis: "You need to have an id on the <g> element of the SVG. Then, simply concatenate the name together like this: <lightning:icon src="{! $Resource.sign + '#custIcon'}" alternativeText="My Custom Icon" />."

To do that, you need to open your svg file with a text editor, and you'll see something like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"/>
        <path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="#FFFFFF"/>

Just add an id to the <g> tag, something like:

<g stroke="none" id="myAwesomeId" stroke-width="1" fill="none" fill-rule="evenodd">

And then add it to the name of your resource:

<lightning:icon src="{! $Resource.sign + '#myAwesomeId'}" alternativeText="My Custom Icon" />

Doc is supposed to be updated but you can add your voice to the thread :)

Also, I wasn't able to set the proper size to my svg as you'll see in the post, I'll be interested if you know how to do it :)

  • Thanks @Fabien, but I didn't get how to put an id on the g element of the svg. $Resource.<zipfilename> + '#custIcon'}", is the #custIcon the name of the svg file from the static resource zip file?
    – sfdx
    Jul 31, 2018 at 11:15
  • 1
    I've updated my answer :) Jul 31, 2018 at 11:36
  • worked, but got stuck with the same issue as yours. annoying
    – sfdx
    Jul 31, 2018 at 22:43
  • Feel free to add your voice to the Chatter post, maybe we’ll get an answer. Jul 31, 2018 at 22:44

I managed to add multiple icons (in the same svg) in a zipped static resource. This is what I did

Svg file configuration

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <symbol viewBox="0 0 260 260" fill-rule="evenodd" id="example1">
            <path d="m129.5,9.5c-66.3,0 -120,53.7 -120,120s53.7,120 120,120s120,-53.7 120,-120s-53.7,-120 -120,-120zm50,130.5l-40.5,0l0,50l-20,0l0,-50l-50,0l0,-20l50,0l0,-50l20,0l0,50l60.5,0l-20,20z"/>
        <symbol viewBox="0 0 260 260" fill-rule="evenodd" id="example2">
                <path d="m185.25,109.75a84.71,84.71 0 0 1 24.75,3.69l0,-93.44a10,10 0 0 0 -9.93,-10l-10.07,0l-10,10l-10,0l0,-10l-10,0l-10,10l-10,0l0,-10l-10,0l-10,10l-10,0l0,-10l-10,0l-10,10l-10,0l0,-10l-10,0l-10,10l-10,0l0,-10l-10.07,0a10,10 0 0 0 -9.93,10l0,220a10,10 0 0 0 9.93,10l10.07,0l10,-10l10,0l0,10l10,0l10,-10l10,0l0,10l10,0l6,-6a84.93,84.93 0 0 1 69.23,-134.23l0.02,-0.02zm-125.25,-49.75l110,0l-20,20l-90,0l0,-20zm0,80l0,-20l80,0l-20,20l-60,0z" class="cls-1"/>
                <path d="m185,130a65,65 0 1 0 65,65a65,65 0 0 0 -65,-65zm33.33,73.12l-25.2,0l0,31.88l-16.25,0l0,-31.88l-31.88,0l0,-16.25l31.88,0l0,-31.87l16.25,0l0,31.87l31.87,0l-6.67,16.25z" class="cls-1"/>

Aura Component

<lightning:icon src="{!$Resource.Static1 + '/icons/icons.svg#example1'}"
                size="x-small" class="grey-icon flip" />
<lightning:icon src="{!$Resource.Static1 + '/icons/icons.svg#example2'}"
                size="x-small" class="grey-icon flip" />

Wich results in this example.

enter image description here

For the ones with the size issue, I think it must be an incorrect configuration of the viewBox of the icon

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .