Based on the documentation, you can set a background color on an SVG icon by appending a class name of the icon container element using the following pattern:

.slds-icon-[sprite name]-[icon name]

Which is great and according to the example it works:


When I try to do the same thing for the custom sprite and one of the 100 custom icons:


It does not work.

Is the documentation wrong or am I missing something trivial here?

1 Answer 1


Ok, so I had to open the .css file from the lightning design system and search for these class names. It turns out that either documentation is a bit out of whack, or whoever was writing the class names became a little lazy :).

So, in order to set a background of an icon from the custom sprite, you only need to specify the icon NUMBER and not the whole icon name. For an example if you want to use the icon custom15, the class name will be:

.slds-icon-custom-15 and not .slds-icon-custom-custom15

You must log in to answer this question.

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