Control icon size with font-size

A quick 🔥 CSS tip:

If you set your SVG icon’s width and height to 1em, you can then contextually size it with font-size.

It also means that your icon will always be predictably sized by default.

Update: Thanks to @fvsch’s excellent suggestion, I’ve created a fork that sets the width and height on the SVG itself: https://codepen.io/andybelldesign/pen/NoZzav.

https://codepen.io/andybelldesign/pen/WPqXYB

Hi đź‘‹
I’m Andy, a freelance web designer

I’m not currently booking new projects, but you can support my work by buying “Every Layout”.

Buy Every Layout