Published on

Using SVGs for icons

Authors

SVGs are great because they are smaller in size than PNGs and you can control them with your code.

Checkmark

Say you have a checkmark in your app. Sometimes, it's big, sometimes, it's small, sometimes, it's black and sometimes, it's blue. You can do all that with a single SVG. If you used PNGs, you'd need at least 2 PNGs: 1 for each color. To adjust the size, you'd have to downscale the higher resolution version whenever you needed something smaller.

To set the color of the SVG with CSS, we set fill="currentColor". Now, all we have to do is set the color of the containing element. Go ahead and try changing the color below.

SVGs are also easily scalable. The SVG root element needs to have a viewBox attribute. The graphical primitives can render anywhere on the XY coordinate system but your viewBox indicates which part of the coordinate system is shown to the user. In this case, 0 0 100 100 means bottom left is (0, 0) and the viewport extends 100 units up and to the left from there.

Once you have a viewbox, making the SVG bigger or smaller is really straightforward, all you have to do is modify the width and height attributes to the SVG root element.

Note that if the aspect ratio of your width & height don't match the viewBox, the browser won't distort the aspect ratio and instead will choose to maintain the aspect ratio and growing the size only as long as that's possible. You can control the aspect ratio behavior with the preserveAspectRatio attribute.

Transforms are also very powerful when combined with SVGs (yes, you can do this with images as well but they might end up pixelated if they're not large enough).

Say you have a chevron. For a back button, you want it pointing to the left and for forward movement in say a checkout flow, you'd want it pointing to the right. You can easily do that by just adding transform="rotate(180)".

But wait, there's a catch! SVG transforms don't work in Safari unfortunately. Not to fret, there's an easy solution. CSS transforms on HTML elements work just fine so we just need to move the transform to CSS by doing style="transform:rotate(180deg)" instead.

A couple more final tips when working with SVGs:

  • If you're working with a designer, you're most likely importing the SVG from Figma. I've run into this issue many items where the icon dimensions on Figma will be 50x50px, but when I export it, the resulting SVG will be 51x50px. Turns out there's an easy fix for this. If the object is positioned on an non-integer coordinate say X value is 10.12, this will happen. Once you adjust the X position to 10, you'll be exporting the right dimensions. Read more about this here.

  • Your SVGs can most likely be compressed significantly. Use svgo, the CLI version or its web GUI counterpart. If using the CLI, run svgo -f path -o output.