Resize SVG bootstrap icon

Question

Is it possible to resize a bootstrap icon in CSS? The icons are SVG. I am adding the icon in HTML, not via CSS.

Answer 1

Changing the font-size solve it for me:

<i class='bi bi-search' style='font-size:26px;'></i>

Answer 2

You can create your own css class:

svg.bi.bi-icon-sm {
    height: 8px !important;
    width: 8px !important;
}

...

svg.bi.bi-icon-xl {
    height: 32px !important;
    width: 32px !important;
}

Answer 3

It is possible to use the bootstrap predefined font sizes https://getbootstrap.com/docs/5.2/utilities/text/#font-size

E.g.:

<span class="bi bi-box-arrow-right fs-3"></span>