Using Custom SVG Icons

This video demonstrates how to use custom SVG icons in Headline and Buttons block.

I followed the instructions in this video, but when I use the Boostrap icons, they appear tiny and don’t scale. Fontawesome appears ok. What am I doing wrong?

Boostrap SVG Code:
<svg class="bi bi-lightning-fill" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M5.52.359A.5.5 0 016 0h4a.5.5 0 01.474.658L8.694 6H12.5a.5.5 0 01.395.807l-7 9a.5.5 0 01-.873-.454L6.823 9.5H3.5a.5.5 0 01-.48-.641l2.5-8.5z"></path></svg>

Fontawesome SVG Code:
<svg viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg" class="svg-inline--fa fa-bolt fa-w-10" data-icon="bolt" data-prefix="fas" aria-hidden="true"><path d="M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z" fill="currentColor"></path></svg>

Edit: I think I just spotted it. Is it the height/width declarations in the Boostrap SVG code causing the trouble?

Edit 2: Nope, it’s not the height/width declaration. It still appears small. Am I missing a step from the Boostrap icon site to the SVGOMG website?

With Bootstrap icons don’t bother passing it through SVGOMG just copy and paste the HTML they provide.

1 Like

Thanks but I tried using the unmodified HTML directly from Bootstrap and it’s still appearing small.

It looks like the SVG HTMl is referencing a 16px size, but changing it to 512px doesn’t work, either.

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" fill="currentColor" class="bi bi-lightning-fill" viewBox="0 0 512 512">

Odd as i tried the original HTML and it worked for me.
Leave the viewbox size at 512 and try changing width and height to “1em”