Sizing the icons?

[vayurobins]

Hi. How do I size the icons? I tried to size them with css width and height. I also tried to use inline width and height attributes and viewbox.

[Eriickson]

@vayurobins FontSize from css

[vayurobins]

Thanks! I'm not getting this to work though. I feel like I've tried everything. There is no fontSize set on the other icons and adding font-size doesn't make any difference. I can't change the size in the console either.

[vayurobins]

Is it really just me?

[thesmallweb]

Are you still having this problem? Maybe you could share some code to give an example of what goes wrong.

[vayurobins]

Thanks for asking. I got it fixed at last. It just that the SVG sizing is a bit confusing, making the size bigger, makes the icon smaller. :-)

<svg xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 27 27"><path fill="var(--white)" d="M5.41 16H18a2 2 0 0 0 2-2 1 1 0 0 1 2 0 4 4 0 0 1-4 4H5.41l2.3 2.3a1 1 0 0 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 1 1 1.42 1.4L5.4 16zM6 8a2 2 0 0 0-2 2 1 1 0 0 1-2 0 4 4 0 0 1 4-4h12.59l-2.3-2.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4L18.6 8H6z" class="heroicon-ui"></path></svg>

[ayushshrestha]

@vayurobins if you are using tailwind you can add ex.

         you can change according tailwind styles inside class 

[ayushshrestha]

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" /> </svg>

[bamoya]

if you want to change the font size in react, change the property of strokeWidth and it will work for you.