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 currently looking to book web design, training and consultancy projects from November 2019, onwards.

Hire me