Here’s a nifty trick from Andy Bell that now seems a little obvious in hindsight: if you set an SVG to have a width and height of 1em then you can change the size of it with the font-size
property.
Try and change the font-size
on the body
element below to see the icon scale with the text:
See the Pen
Font size controlled icon by Andy Bell (@andybelldesign)
on CodePen.
You pretty much always want your icons to be aligned with text so this trick helps by creating that inherent relationship in your code. Pretty nifty, eh?