How to change color and size of lightning icons?

Posted bySandeep KumarPosted inLightning

Do you have doubt regarding if we can change the color of utility icon in Salesforce? If yes, then definitely this post is for your. In this post, we will explain how color and size of all lightning icons can be changed.. So, lets dive into it-

Changing of Size:

We will use size attribute to change size of lightning-icons-

  • medium is the default size, which creates a 32px by 32px icon
  • small creates a 24px by 24px icon
  • x-small creates a 16px by 16px icon
  • xx-small creates a 14px by 14px icon
  • large creates a 48px by 48px icon

Changing of Color:

To change foreground color of utility icons use –sds-c-icon-color-foreground-default property.

To change foreground color of non-utility icons use –sds-c-icon-color-foreground property.

To change background color of any icon use –sds-c-icon-color-background property.

Example:

salesforce-icon-color-change.html

<template>
		<div class='slds-card'>
				
		
		<div>
				 Different Sizes
		</div>
		<lightning-icon size='large' icon-name="utility:check" ></lightning-icon>
		<lightning-icon size='medium' icon-name="utility:check" ></lightning-icon>
		<lightning-icon size='small' icon-name="utility:check" ></lightning-icon>
		<lightning-icon size='x-small' icon-name="utility:check" ></lightning-icon>
		<lightning-icon size='xx-small' icon-name="utility:check" ></lightning-icon>
		<div>
				 Utility Icons - Different Colors
		</div>
		<lightning-icon icon-name="utility:check" size="large" class='green-utility-icon' ></lightning-icon>
		<lightning-icon icon-name="utility:check" size="large" class='red-utility-icon' ></lightning-icon>
		<lightning-icon icon-name="utility:check" size="large" class='gray-utility-icon'></lightning-icon>
		<lightning-icon icon-name="utility:check" size="large" class='blue-utility-icon'></lightning-icon>
		<div>
				Other Icons - Different Colors
		</div>
		<lightning-icon icon-name="standard:address" size="large" class='green-non-utility-icon'></lightning-icon>
		<lightning-icon icon-name="standard:address" size="large" class='red-non-utility-icon'></lightning-icon>
		<lightning-icon icon-name="standard:address" size="large" class='gray-non-utility-icon'></lightning-icon>
		<lightning-icon icon-name="standard:address" size="large" class='blue-non-utility-icon'></lightning-icon>
		<div>
				 Different background colors
		</div>
		<lightning-icon icon-name="utility:check" size="large" class='green-background-icon' ></lightning-icon>
		<lightning-icon icon-name="utility:check" size="large" class='red-background-icon'></lightning-icon>
		<lightning-icon icon-name="utility:check" size="large" class='gray-background-icon'></lightning-icon>
		<lightning-icon icon-name="utility:check" size="large" class='blue-background-icon'></lightning-icon>
		<lightning-icon icon-name="standard:address" size="large" class='green-background-icon'></lightning-icon>
		<lightning-icon icon-name="standard:address" size="large" class='red-background-icon'></lightning-icon>
		<lightning-icon icon-name="standard:address" size="large" class='gray-background-icon'></lightning-icon>
		<lightning-icon icon-name="standard:address" size="large" class='blue-background-icon'></lightning-icon>		
		</div>
</template>

salesforce-icon-color-change.css

.green-utility-icon {
		--sds-c-icon-color-foreground-default: #49A54C;
}
.red-utility-icon {
		--sds-c-icon-color-foreground-default: #CB0015;
}
.gray-utility-icon {
		--sds-c-icon-color-foreground-default: #BEBEBE;
}
.blue-utility-icon {
		--sds-c-icon-color-foreground-default: blue;
}
.green-non-utility-icon {
		--sds-c-icon-color-foreground: #49A54C;
}
.red-non-utility-icon {
		--sds-c-icon-color-foreground: #CB0015;
}
.gray-non-utility-icon {
		--sds-c-icon-color-foreground: #BEBEBE;
}
.blue-non-utility-icon {
		--sds-c-icon-color-foreground: blue;
}
.green-background-icon{
    --sds-c-icon-color-background: #49A54C;
		padding: 0.3rem;
}
.red-background-icon{
    --sds-c-icon-color-background: #CB0015;
		padding: 0.3rem;
}
.blue-background-icon{
    --sds-c-icon-color-background: blue;
		padding: 0.3rem;
}
.gray-background-icon{
    --sds-c-icon-color-background: #BEBEBE;
		padding: 0.3rem;
}

salesforce-icon-color-change.xml

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>50</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__Tab</target>
	</targets>
</LightningComponentBundle>

Screenshot-

This screenshot shows icons displayed of different color and size which were created using above code example.

Published by Sandeep Kumar

He is a Salesforce Certified Application Architect having 11+ years of experience in Salesforce.

Leave a Reply