Notice the first "Utility:success" icon. Why is my icon background is blurred ?

Below code renders the image as shown in picture.

<div class="slds-box slds-theme_success slds-theme_alert-texture">

                            <p> <span> <lightning:icon iconName="utility:success" size="small" class="slds-p-right--medium" /> </span><span>Opportunity <lightning:formattedUrl value="{!notif.Id}" label="{!notif.Name}" /> on Account </span>
                                <span><lightning:formattedUrl value="{!notif.AccountId}" label="{!notif.Account.Name}" /></span>
                                <span> and Status {!notif.StageName}</span>
                                <span> on  {!notif.LastModifiedDate}</span> </p>

Rendered utility:success

But in lightning design system the image is rendered with a bright background in the second picture enter image description here

1 Answer 1


Try setting your icon variant to success.



You must log in to answer this question.

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