How to Change lightning:Icon Color In Salesforce Lightning Component

Lightning Component

Salesforce Lightning provides more than 500 types of Icons, in different variants such as Action icons, Custom icons, Doctype icons, Standard icons and Utility icons.

you can find all of the available icons list here :

All salesforce lightning icons comes with some default standard colors and background, but you can modify the icon colors style.
So, today in this post we are going to learn that how we can change the ‘lightning:icon’ color in salesforce lightning component to make our component more tempting.

We can use lightning icons in our lightning component using lightning:icon component :

This will represents a visual element that provides context and enhances usability.




Step 1 : Create Lightning Component : iconColor.cmp

From Developer Console >> File >> New >> Lightning Compoenent

  • add class attribute to your lightning:icon tag , and in the css tab give style to your lightning icon.
Component CSS :

Step 2 : Create Lightning Application for Testing:

From Developer Console >> File >> New >> Lightning Application

Output : 

Check also : 3 Ways to Use CSS In Lightning Component.

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can share your thoughts  in comment box.

Happy Learning 🙂


Leave a Reply