The aqua color icon is visible on the UI, and I want a blue background. The flight white color is fine; only the background color has to change. using icon-name="custom:custom20"

enter image description here

 <c-Flight-Search obj-name="flight__c" search-placeholder="From" icon-name="custom:custom20" onclick={handleSet}>

1 Answer 1


Hi as per this documentation here, you can change the background colour using the css styling hooks

You can add this lines to your .css file

    --slds-c-icon-color-background: blue; 

Change the blue to preferred color, using whichever method you prefer :)

After adding the above css, this is how my icon looks like:
enter image description here

Hope it helps!



        <lightning-icon icon-name="custom:custom20" class="changethis">
        <lightning-icon icon-name="custom:custom20">


--slds-c-icon-color-background: blue;

this will make sure only the icon with the class="changethis" will have the background color changed.

  • :host impacted all other icons like dropdown icon also changed!!!. I want only airplane background color only @prem22 Commented Jul 5, 2023 at 12:29
  • then just add a class to the tags that you to change the colour and apply the css to those class only, I have edited my answer added some code examples for you above
    – prem22
    Commented Jul 5, 2023 at 15:19

You must log in to answer this question.

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