Change Size of Icon (width & height)

[hairullana]

How to change size of lucide icon?
I have been set css font-size on i tags but it's not working
They still give the size 24x24 px

[karsa-mistmere]

Font size won't directly affect icon sizes, at least that's not our default behaviour.

To size an icon, you need to set the width and height of the inline SVG elements once replaced by Lucide. These will generally have a .lucide CSS class but you can also add classes to your <i> elements for several custom sizes that will be transferred to the <svg> elements (inline styles won't be transferred I believe).

Then in CSS, you can easily define the widths and heights in em units for a font size relative sizing using the appropriate class selectors.

E.g.:

<i icon-name="menu" class="lucide-relative"></i>

.lucide-relative {
  width: 1em;
  height: 1em;
}

[hairullana]

Font size won't directly affect icon sizes, at least that's not our default behaviour.

To size an icon, you need to set the width and height of the inline SVG elements once replaced by Lucide. These will generally have a .lucide CSS class but you can also add classes to your <i> elements for several custom sizes that will be transferred to the <svg> elements (inline styles won't be transferred I believe).

Then in CSS, you can easily define the widths and heights in em units for a font size relative sizing using the appropriate class selectors.

E.g.:

<i icon-name="menu" class="lucide-relative"></i>

.lucide-relative {
  width: 1em;
  height: 1em;
}

Thank you, that's work

[Zerotask]

Would be great to add a little explanation to documentation. I also stumbled about this

[karsa-mistmere]

The documentation is already being updated to include such information: #1521