I'm using the helper component suggested on the Lightning Design System Icon documentation page for adding icons to Community components. I'd like to change the color of the icon, and not use a background (box), but rather just display the colored icon, itself.

Is this behavior supported with this helper component? If not, how would I modify the helper code to support it?


2 Answers 2


Have you thought of using CSS? If you have the ability to modify/append the CSS you could edit the CSS class for the "box" that contains the icon, then change icon color. For example:

.slds-icon-action-add-contact { background-color: none; }

Then set the CSS color for the icon:

.slds-icon { fill: #SomeColorHere; }

There are a few ways this could be accomplished.

My 2 cents.

  • I guess I was expecting the CSS class structure to be included in the SLDS. Seems like a pretty common usage. But perhaps not. Nov 11, 2016 at 16:00
  • I found the SLDS very limited for some of the things I've been working on. Every time I work on Salesforce stuff I feel I'm time traveling back considering how ui technology has evolved in the last few years. Still, SLDS is a big step forward for SF. You probably seen this page about the SLDS icon component: lightningdesignsystem.com/components/icons/#flavor-icon-colors
    – Omar Salas
    Nov 12, 2016 at 6:31

There's now a standard lightning:icon Component you can use instead of implementing your own component for svg support. to style the icon, you'd use the css portion of your lightning component bundle, similar to what Omar mentioned.

Here's what your component might look like:

<aura:component implements="forceCommunity:availableForAllPageTypes">
    <lightning:icon iconName="utility:close" size="small" class="iconStyle"/>

And here's what the .css portion would look like:

.THIS .iconStyle svg{
    fill: #ffffff;

You must log in to answer this question.

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