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.



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.