Best practices for SVG icons

over 4 years ago from ivan volca, Product Designer @ BuzzFeed

  • Marc EdwardsMarc Edwards, over 4 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