I'm trying to add a custom lightning-icon to my experience cloud lwc module, but I can't make it render properly. The custom icon is basically a blue background color with a white dash on the middle.

I followed the steps described here: https://developer.salesforce.com/docs/component-library/bundle/lightning-icon/documentation

I've uploaded an .svg image with a tag containing an id as a static resource, just like the documentation said, but the image will render only the blue color without anything else. Then, I change the .svg file (as I had noticed that the first image I had uploaded was square, instead of circular), and now the icon won't render at all.

If I try to open the file from the static resource on my org settings it will show the image properly.

2 Answers 2


this could be a problem of referencing your static resources in the component module of lwc.But you observe that the icon is visible when opening in personal org environment, that means your static resource may not be "public" in its cache control settings.

Go to Setup-->static resource---> Open your static resource file---> Click Edit and re-upload it---> Select "Public" in the cache control settings dropdown and Save!

enter image description here

  • 1
    Thanks for the answer, but the cache was actually on public. The issue ended up being the .svg file itself. Commented Nov 24, 2021 at 23:41

After getting my head around this issue a lot, I found out it was actually the code on the .svg file itself.

I used an online service to convert a .png file to .svg, and this caused a lot of weird code on the .svg file. LWC couldn't properly work with those files, and that's why it didn't render.

I ended up coding a .svg file myself (the image I needed was simple) and this ended up working fine.

You must log in to answer this question.

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