Size of icon button

[tvojtech]

Hi,

I have code like

<Button
  onClick={() => toggleDrawer()}
  aria-label="Open menu"
  className="lg:hidden"
  variant="link"
  size="icon"
  >
    <Menu /> // icon from lucide-react
</Button>

How can I make the icon bigger? size prop of the icon does not work. Setting width and height via className does not work on the icon or the button. The icon is still small. Can I somehow make it bigger?

[Chukwu3meka]

You can use the fontSize property

<Menu style={{fontSize: 40 // '40px' }} /> 

[HafidzNurmawanHakim]

you can use scale instead

<Bell className="scale-125" />
or
<Bell style={{ scale: 2 }} />

[katongole-isaac]

I also faced the same issue. I ignore the Button and used div

<div role="button" > <Menu size={30} /> </div> // it works fine

[jdgamble555]

The button base class is configured with the svg icon size, not intuitive at all. You can replace it with:

<Button href={`/deck/${id}/${slug}`} variant="ghost" class="[&_svg]:size-6">
	<X />
</Button>

J

[patrice012]

When using the Button just add [&_svg]:size-6 to the Button className to enable resizing just like

<Button
    variant="outline"
    size="icon"
    className="[&_svg]:size-6 w-1/10 h-16 px-6 border-none absolute right-4 top-1/2 transform -translate-y-1/2 hover:opacity-100 
      hover:bg-[#FFFFFF]"
  >
     <CameraIcon/>
  </Button>

[linpan]

[&_svg]:size-6 is nice.

[saskia002]

if you read through the css then this should be the correct way;

<Button variant="ghost" size="icon" asChild>
    <Link href="/">
      <ChevronsRight className="size-6" />
    </Link>
</Button>

just add className="size-*" to the icon and then it overrides def size value

[forrestwilkins]

This seems to be most correct and worked for me.

[wu0407]

only work on v4

[elisgrahn]

Thanks, this should be the marked answer!

[TranManhThang96]

Please add a non-existent class override, for example, [&_svg]:size-99, and your icon will work normally

<Button variant="ghost" class="[&_svg]:size-99">
	<X size={size}/>
</Button>

[cc-gperez]

I'd just go ahead and remove [&_svg]:size-4 from the button. You have control over the Button code. Why forcing the icon size? It makes lucide-react sizing mechanisms break.

You'll usually want to explicitly set the icons size, like <ImageIcon className="h-6 w-6" />

[jdgamble555]

People that update a lot don't change the code manually (keep up with bug fixes etc). I do think this is fixed in Tailwind 4. You could also do [&_svg]:size-auto to get rid of it.

[dannybunschoten]

The correct and intended way is to use the size-* class instead of the h-* and w-* classes.
So in your case, you could use:

<ImageIcon className="size-6" />

Check this Tailwind reference for more information: Tailwind Docs – Setting both width and height