20

Best practices for SVG icons

almost 2 years ago from , Product Designer @ BuzzFeed

Hey kids, I'm deep into exploring best practices for SVG (and not only) icons and have a very tempting question about the best way to align icons to other objects on the page.

I noticed that there are two ways to design an icon, you start with the canvas for it (16px, 24px, 36px) and then either include the canvas in the final export or don't.

Let's say you design something in 36px, you then export your icon without the 36x36px canvas around it. You icon might have slightly different dimensions — it can be 32x36px or maybe 34x30px.

The other way is to keep the canvas so the output is 36x36px icon no matter what's going on inside.

My gut tells me it's better to go the second route (that's what I've been doing all along) but I don't have any concrete arguments for it. Would love to hear folks who have more experience with designing the icons.

15 comments

  • Adam Wathan, almost 2 years ago

    As a developer who works with SVG icons provided by designers a lot, I can definitely say including the canvas makes things a lot easier on our end :thumbs_up:

    18 points
    • Jan ZhengJan Zheng, almost 2 years ago

      yeah same here. I like making my icons with the canvas so they're easy to position later, and I also like to just drop the optimized svg as a partial or component

      1 point
  • Marc EdwardsMarc Edwards, almost 2 years ago

    Definitely, absolutely keep all the icons the same size, unless you have a very good reason not to. I’d go one step further, and ensure you have some spare padding included, so you have enough space if an icon needs to extend further than your standard square or circular icons.

    In terms of exporting, different tools have different ways of handling padding.

    Sketch

    Use artboards or slices for exporting, so you get explicit padding control. Slices are good. Don’t forget about them. Be incredibly careful when exporting artwork with inner or outer strokes — SVG only supports centred strokes and the conversion from inner or outer to centered (as required) can mess things up very badly.

    Illustrator

    Use artboards and Export for Screens for exporting, so you get explicit padding control. If you don’t want to use artboards, and you do want to use the Asset Export panel, you can add rectangles with no fill to control the padding (gah!). And if you do that, you can name the unwanted objects “DELETE_ME” or similar, then batch grep to remove them from all your SVGs.

    Photoshop

    It’s probably best to not export SVGs from Photoshop. I’ve done a bit of testing and the results aren’t good, unless the icons are pretty simple.

    Adobe XD

    Artboards are the way to go, if you want padding control. You can also use the unstyled rectangle trick, if you want to use the standard layer and group exporting, but with padding control.

    Affinity Designer

    Use slices in the export persona to get explicit padding control. SVG exporting from Affinity Designer is pretty solid. Possibly the best of the bunch.

    10 points
  • Mike Wheaton, almost 2 years ago

    Keeping the canvas also allows you to shift the icon around so that it's visually centered. For example, a ▶ will need to be shifted to the right slightly to appear as if it's in the middle.

    2 points
  • Jan ZhengJan Zheng, almost 2 years ago

    I agree with everyone else. The one exception is if you want the svg to be animated (animated / drawn out on screen) or if it's not used as an box image (for example if text should wrap around the shape of a sphere), then the former option is better

    1 point
  • Ch'an Armstrong, almost 2 years ago

    Keeping the canvas is new to me - I'm going to try this method. Thanks!

    1 point
  • Steven CavinsSteven Cavins, almost 2 years ago

    Yup, what everyone else said. Keeping a wrapper leads to less issues in my experience.

    1 point
  • Miles ReiterMiles Reiter, almost 2 years ago

    I've always kept the canvas in there. If something needs to be resized, it's nice for the devs I work with to be able to do it without having to pay attention to uneven dimensions.

    Mileage may vary though depending on what the developers you work with currently expect and how they currently lay out icons. This seems like a good opportunity to connect with them and find out.

    1 point
  • Recep KütükRecep Kütük, almost 2 years ago

    I have a different question related to this (noobie alert!): do you embed the svg into html or use as background (say in psuedo classes) in css?

    0 points
  • Goran Tomicic, almost 2 years ago

    Better to leave the canvas in, it's definitely easier and more consistent for everyone to implement. I'm always going with the second route in my work.

    You could stumble upon some small spacing issues if you stack few icons horizontally (in case you have some kind of toolbars with bunch of icons in your design) because of the difference in width of each icon, but it's a lot smaller obstacle than having different heights.

    0 points
  • Wayne KWayne K, almost 2 years ago

    Keep a 1:1 aspect ratio. I find it's easier to maintain from a consistency point of view + scales the same as sibling icons when resized (either by width or height).

    0 points
  • R. KamushkenR. Kamushken, almost 2 years ago

    Indeed, bounds here is a must. Square aspect ratio makes it more tapable

    0 points
  • Souvik MaitySouvik Maity, almost 2 years ago

    I mostly use Adobe Illustrator when I have to create icons. While designing for websites: - I first create the icon in a 24x24 px canvas. - I convert all strokes & text to outlines (if any). - Resize them on a smaller artboard (5x5 px) and export them as svg. - After export, I run svg optimizer from terminal. - While coding, I use CSS to resize my svg icon based on design.

    Of course I use the artboard to export unless I am creating an animated svg icon. This way I ensure my site doesn't get heavy on file sizes.

    0 points