How can I change the size of an icon inside of a lightning:buttonIcon ?

<div class="slds-grid slds-grid--vertical">       
        <div class="slds-col">
            <lightning:buttonIcon class="slds-size_medium" size="large" iconName="utility:fallback" alternativeText="nah"/>

I am confused on how to properly style this. When the buttonIcon is inside a grid it doesn't seem to, rely on its own size attribute but by the size the grid assigns it. right ?

2 Answers 2


I don't think there is a standard solution for this.

You can do a little css hack:

define a unique class on you icon:

<lightning:buttonIcon iconName="utility:fallback" class="myUniqueClass" />

now add a css rule for the svg element that is inside your unique class:

.THIS .myUniqueClass svg {
    width: 3rem;
    height: 3rem;

I think that size 2rem is the default large icon, so play with the size yourself.

Be aware that any svg tag that will be inside an element with the myUniqueClass class will use that css rule!

  • looks good. lightning:buttonIcon has a 'iconClass' attribute. Does that do kinda the same thing ?
    – MadMax
    Jan 25, 2018 at 14:03
  • I am not really sure, you should try it Jan 25, 2018 at 14:13

change the class of the button icon

<lightning:buttonIcon iconClass="slds-size_large"... />
  • unfortunately that doesn't make the actual icon bigger
    – MadMax
    Jan 24, 2018 at 20:14

You must log in to answer this question.

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