How to Create Great SVG Icons & a Checklist for Success
Great icons come from a great process. Learn about my philosophy regarding the icon creative process.
This posting expresses the views and opinions of the authors and does not necessarily reflect the views of Yext and its affiliates, employees, officers, directors or representatives.
As a user (and designer), I always love interacting with applications that utilize iconography to enhance the overall pleasure of the user experience. Iconography isn’t always necessary and can certainly “overstay” its welcome, but when applied elegantly to a design, it has the ability to change the whole personality of the application. There are a lot of apps and sites out there that successfully use iconography and so I made it my mission to discover the ins and outs of what it really takes to make functional cohesive icon sets.
My SVG Philosophy:
Before I get into the nitty gritty, there are three basic principles that I noticed all great icons and icon sets have in common. They are as follows:
- Symbolic
- Uniform
- Lean
At first glance these words sound vague, but don’t worry. I will explain each of them now and what they mean to me.
For an icon to be symbolic, it has to designate something or an idea of something. It should denote meaning or some function to groups of people.
For an icon to be uniform, it should have one overarching style or aesthetic that governs how it was designed and ultimately how it looks after it is complete. The obvious examples that come to mind are outline icon sets versus solid icon sets versus two-tone icon sets, and so on.
Finally, an icon should be lean. Lean can mean a couple of different things. The first definition that comes to mind is that one’s icon should be stripped of unnecessary fluff or details. There is a fine line between an icon that explains just enough and one that is overly descriptive or illustrative. Another way an icon can be lean is how it is built. Every time you create an icon in your favorite SVG editor, the application is translating your anchor points and paths to coordinates on a plane, which ultimately gets exported as code in the form of an SVG file format. As a result, some applications generate cleaner and more semantic code than others.
Now that I’ve briefly explained my philosophy on iconography and its role in modern applications, let’s dive into my checklist for creating great icons.
Note: I want to acknowledge that this is my personal icon workflow and there are many different ways to achieve the same results.
My two SVG editors of choice are Adobe Illustrator and Sketch, purely because of experience and familiarity of use with those applications. I am fully aware of Sketch’s shortcomings when it comes to generating complex or difficult SVGs, but, in my experience, if you get creative with your boolean operators you can create pretty much any icon. That said, Sketch has got nothing on Illustrator’s shape builder tool (or any of the cool Illustrator plugins available from companies like Astute Graphics).
My SVG Checklist:
Give Artboards & Layers Meaningful Names
While I don’t go poking around too often in the exported SVG code, I know some of my sloppy naming can make its way in there and I don’t want the developers I work with to get confused. Along the same lines, I want my icon to look as good on the inside as it does on the outside.
Use Standard & Consistent Artboard Sizes
I use standard artboard sizes for all icons, especially if the icon needs more or less detail at different sizes. The sizes that I have seen the most cited are: 16x16, 18x18, 24x24, 32x32, etc.
Any size will do as long as you are consistent in its usage. The sizes above are divisible by most common screen sizes. It is important to design for the sizes that icons will actually appear at. If you know all of your icons are going to appear at 16x16 or 24x24, then you will want to take that into account when you are designing them.
Ungroup Layers
Ungroup all layers prior to export.
Flatten Layers
Flatten (or expand) shape layers with flips or rotation transformations applied to them. This is particularly important for Sketch as it will export with those transformations into the SVG export, ultimately making the code a bit messier.
Avoid Clipping Masks
Reconstruct any masks using boolean operations, like Intersect, etc. I try to avoid any clipping masks in my exported icons as it leads to longer and messier code. It also runs the risks of not rendering correctly on the web.
Be Wary of Icon Strokes
When using strokes in your icon, favor center aligned strokes as opposed to inside or outside aligned strokes. In the web environment, the CSS stroke property will render as a center stroke.
Only convert strokes to outlines (or expanded shapes) when making a “shape” SVG. Doing this can be a destructive process as you will no longer be able to adjust the stroke’s thickness. I recommend keeping a stroked version of your outline style icons somewhere in your file in case you want to go back to adjust stroke weight.
Merge & Simplify Icon Fills
If you have multiple fills or effects to a shape, then you will want to merge those down. In Illustrator, that will mean checking your appearance panel and seeing if there are different appearance “layers” on any given shape. If there is more than one, then you will want to flatten or expand those so that the shape only has one appearance. In Sketch, just be sure to check the inspector panel and see if a selected shape has more than one fill, stroke, etc. and flatten it if it does.
Optimize the Code
Optimize SVGs with an online tool like SVGOMG. Optimizers like this can clean up your code and file size without changing how the icon looks.
Start Big Before Going Small
When using boolean operators (especially in Sketch where things can get finicky), be sure to execute them in a methodical way. Selecting 8 shapes that are all stacked on top of each other attempting to form a single icon and clicking “Union” might get you the desired result sometimes, but knowing Sketch there will be a time where selecting one of the boolean operators will yield a result you weren’t expecting. That is why I recommend starting from big to small. Start with the big shapes, then stack the smaller shapes on top of that before you union, subtract, etc. This is especially crucial for smaller shapes that are subtracted from a larger shape. Illustrator doesn’t really have this issue in my experience, but it is still a good methodology to follow.
Reverse Path Directions if Necessary
Vector shapes — even closed ones — have beginning and end points and a direction. In Sketch, there will come a time where you may get bizarre overlap issues as a result of a boolean operation. In this scenario, reversing the path direction can resolve a lot of overlap issues. In both Illustrator and Sketch there is an option to reverse the path direction.
Set Handle Coordinates if Necessary
The final tip is more of a fun one that can help with those who are obsessed with precision. We all know that vector points have their own coordinates; however, each of a point’s Bézier handles also has a set of coordinates that can be set. Being able to set each handle to specific coordinates can be a powerful asset when trying to maintain uniformity across multiple icons, especially those that have rounded paths and eyeballing the length of the handles just won’t cut it.
Overall, this has been my icon workflow for some time now. I’m always eager to learn new tips and tricks. If you have a better understanding of any of the points above, please let me know in the comments!
