I saw on Lightning design system that there is the option to put an icon inside a Badge


How can i actually do it in lightning component? I was looking for a way to put an icon inside this tag:

<lightning:badge label="Privacy OK" class="slds-theme_success" />
  • ootb, for a similar functionality, you might want to take a look at lightning:pillContainers
    – glls
    Commented Nov 6, 2018 at 15:43
  • So basically, i use pills without the remove option right?
    – Dylan
    Commented Nov 6, 2018 at 15:48

2 Answers 2


Similar, although not the same component, the lightning:pill supports adding icons within it:

<lightning:pill label="Pill Label">
    <aura:set attribute="media">
        <lightning:icon iconName="standard:account"  alternativeText="Account"/>

some styling is needed to hide the remove option though:

.THIS .slds-pill__remove{

Otherwise, you will have to tweak the SLDS Badge Blueprint - similar to what @codeyinthecloud posted.

  • +1 from me. I like this idea better! Commented Nov 6, 2018 at 15:58
  • Good answer!! but the CSS may is like that ----> .THIS .slds-pill__remove { display: none !important; }
    – Dylan
    Commented Nov 6, 2018 at 16:15
  • 1
    !important is never a good idea (bad practice) you just need to get the selector right, the above one i posted worked properly, not sure where you are applying the css rule
    – glls
    Commented Nov 6, 2018 at 16:16
  • Right! but your way just hide it, and you can still see it when u go hover with the mouse.
    – Dylan
    Commented Nov 6, 2018 at 16:20
  • i retested using .slds-pill__remove without !important, and it works
    – glls
    Commented Nov 6, 2018 at 16:24

As svg are not yet supported you can wrap a lightning:icon with the slds styling. You will have to fine tune the styling a little bit.

<span class="slds-badge slds-badge_lightest">
    <span class="slds-icon_container slds-icon-utility-world slds-m-right_xx-small" title="Description of icon when needed">
        <span class="slds-icon slds-icon_xx-small slds-icon-text-default">
            <lightning:icon iconName="utility:world" size="small" />
    </span>Icon on the left</span>
  • =P id say more than a little bit considering the minimum size supported by the lightning icon, and seting a min-width to it will screw up the dimensions and so on, but do-able .
    – glls
    Commented Nov 6, 2018 at 15:56
  • @glls I agree. The idea here is to show an alternative to svg hosting the icon on a badge. Commented Nov 6, 2018 at 15:58
  • Dear downvoter would love to understand the reason for downvote! Commented Nov 6, 2018 at 17:38

You must log in to answer this question.

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