Control icon size with font-size

Andy Bell

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