Customize Lightning Icons in Web Components

The use of icons is very common and Salesforce provides an excellent package of icons that we can use freely.

Of course, we can find many icons on other sites or create unique icons ourselves. The disadvantage in the first one is that you usually have to check if there are license matters, and in the second requires more efforts. Therefore, as much as possible it is recommended to use the Salesforce icons.

Salesforce icons have several limitations, which sometimes make developers less likely to use them, but those can often be overcome with simple customization.

Icon Color

The icons in the utility set are by default with grey color. This can be easily changed to either green/red/yellow using the variant property.

 <div style="background-color:white;">  
   
     <!--no color-->  
     <lightning-icon icon-name="utility:new" size="small">  
     </lightning-icon>  
   
     <!--green-->  
     <lightning-icon icon-name="utility:new" size="small" variant="success">  
     </lightning-icon>  
   
     <!--yellow-->  
     <lightning-icon icon-name="utility:new" size="small" variant="warning">  
     </lightning-icon>  
   
     <!--red-->  
     <lightning-icon icon-name="utility:new" size="small" variant="error">  
     </lightning-icon>  
   
   </div>  

Result: 

If we need higher level of customization, we can set any color using css and styling hooks.

Just add any color code in the css and use it as class for the icons

 .icon-custom-light-blue{  
   --lwc-colorTextIconDefault:#99ceff;  
 }  
 .icon-custom-purple{  
   --lwc-colorTextIconDefault:purple;  
 }  

 <div style="background-color:white;">  
     <!--Custom Colors-->  
     <lightning-icon icon-name="utility:new" size="small" class="icon-custom-light-blue">  
     </lightning-icon>  
   
     <lightning-icon icon-name="utility:new" size="small" class="icon-custom-purple">  
     </lightning-icon>  
   </div>  

Result:

Icon Size

The icon have property size, that can get text values: xx-small, x-small, small, medium, or large, however the size also can be customize to have specific value using styling hooks. Similar to the colors, we can set the specific size in css and then use it as a class.

icon

 .icon-tiny{  
   --lwc-squareIconSmallBoundary:0.8rem;  
 }  
 .icon-huge{  
   --lwc-squareIconSmallBoundary:4rem;  
 }  

 <div style="background-color:white;">  
     <!--Custom size-->  
     <lightning-icon icon-name="utility:new" size="small" class="icon-tiny">  
     </lightning-icon>  
   
     <lightning-icon icon-name="utility:new" size="small" class="icon-custom-purple icon-huge">  
     </lightning-icon>  
   </div>  

Result:

Inactive Icon

Unlike button, the icons doesn't have disable property. We can hide the entire icon using template element, but in some cases it is bad user experience and we really need to disable it. To get similar result, we can easily add opacity value to the icon and change the cursor pointer.

Of course, that in addition, if the icon has onclick event we will need to halt the code in case the icon is disable.

 .icon-enable{  
   opacity: 1;  
   cursor: pointer;  
 }  
   
 .icon-disable{  
   opacity: 0.5;  
 }  

 <div style="background-color:white;">  
     <!--Enable-->  
     <lightning-icon icon-name="utility:new" size="small" class="icon-enable">  
     </lightning-icon>  
   
     <lightning-icon icon-name="utility:new" size="small" class="icon-custom-purple icon-enable">  
     </lightning-icon>  
   
     <!--Disable-->  
     <lightning-icon icon-name="utility:new" size="small" class="icon-disable">  
     </lightning-icon>  
   
     <lightning-icon icon-name="utility:new" size="small" class="icon-custom-purple icon-disable">  
     </lightning-icon>  
   </div>  

Result: