CBARR
UI/UX design for digital products

WORDS

Icon Design in Sketch

 

I've been using Sketch for about a year and change. The app has streamlined my UI workflow. Goodbye crazy layers and pointless layer effects. 

I still move back and fourth between Illustrator, Photoshop (even less), and Sketch. As a test, I designed some fitness icons and documented the process just to figure out the complexities. 

set-of-fitness-icons

Fitness icons because …

The fitness figures provided a nice amount of simple and complex lines to test Sketch's capabilities.

I've also got back into exercising as of late. So why not fitness icons?

The problems with simple shapes

Simple shapes are readily drawn with Sketch's basic shape tools. They are a great starting place for any icon design. 

Level of difficulty icons.

Level of difficulty icons.

In the level icons, everything is built using rectangle and triangle tools. Strokes are applied with the border fills.

These icons were easy to draw but cannot be easily updated once built because outlined sections are separate layers from the filled layers. So, you'll need to update two styles for each the fill and outline.

Icon is broken into the filled and stroked parts. Each will need a single shared style to maintain and update. Not ideal.

Icon is broken into the filled and stroked parts. Each will need a single shared style to maintain and update. Not ideal.

Outlining the borders has no helpful affect. Sometimes the intersections of lines work properly and other times it holes appear in the intersections of the lines. I've only found outline helpful on text.

The problem with outlining strokes.

The problem with outlining strokes.

I wish flattening the outlines would remove the holes but it doesn't. Manually adjusting or cutting out the shapes from another fill shape could work but both are time consuming and give inconsistent results when editing across multiple icons and complex paths. And Sometimes borders just look better.

Added complexity with character icons

The great skill in editing an icon with human-like features is knowing when to bump in out out one or half a pixel. Sketch's vector tool hold up pretty well with a few exceptions and nuances. 

I created the figure icons only with the basic shapes to start. Points are add to draw out the length of the arm and legs leaving the ends of square to add the circle hands on.

Steps of creating the figure. This is what I call the push & pull technique.

Steps of creating the figure. This is what I call the push & pull technique.

I don't outline the figure with the vector tool because blocking out the angles felt right at the optimal size (24x24 square). Sketches rounded corners also came in helpful but not perfect. 

The arms and feet are made from perfect circles while the shoulders elbow and butt are all made with the rounded corner capability — use sparingly. For my optimal size and application it worked great, scaling creates issues in some areas. Particularly, the butt, where there is a slight indentation where the two angles come together. **Update: I've moved away from rounded corners completely on this icon. Scaled rounded corners produce some very unexpected results.**

Problems with rounded corners at joints intersecting at different angles. Not quite round or smooth.

Problems with rounded corners at joints intersecting at different angles. Not quite round or smooth.

To improve the problem areas I used perfect circles to cut and join with the line. Sketch doesn't work all that well because there's no smart guide that snaps to the line of the circle. Zooming in all the way can help and turn off pixel rounding. Just remember to turn it back on later.

By turning off pixel rounding you can get accurate enough results when joining strait to circled lines.

By turning off pixel rounding you can get accurate enough results when joining strait to circled lines.

This is becoming my preferred method of working with complex shape intersections. It helps get those curves perfectly smooth. Without this your anchor point jump to full or half pixels ruining the designs nuance. 

Turn off pixel rounding in Sketch to join straight to curved lines with more precision.

Turn off pixel rounding in Sketch to join straight to curved lines with more precision.

This technique performs best with large artwork. Try scaling your artwork up and down, zoom in and out, and turn on/off show pixels to make sure it's correct.  

An outline mode and smart guides for lines, like illustrator style, would be a huge improvement. Sketch's handle point options are a huge improvement over Illustrator.

My last complaint, Sketch's boolean operations don't always work according to plan. As in below, two shapes merged with the Union operation aren't merged. Changing the fill settings and path alignment can result in a successful merge.

Two merged shapes using the Union operation won't always play nice together. Adjusting the intersection and fill settings will sometimes resolve the issue.

Two merged shapes using the Union operation won't always play nice together. Adjusting the intersection and fill settings will sometimes resolve the issue.

If this doesn't work for you, try making your icon simpler, unlike me, or I've had success reordering the combined shape group's merged layers and toggling the affected layers boolean operation until the result I need is achieved.

But I gotta say — IT SHOULD NOT BE THAT HARD.

Conclusion

Icon design in Sketch seems to be built for simple executions. I'm all for simple, but sometimes you gotta have that flair. You can get precise icons, like these characters, out of it, even though it's also not the most precise tool. Establish some rules early on in your icon designs so they have a consistent look and feel to them. Adjust for visual continuity as needed.

Straight and 45° lines will connect the best to circles. Use rounded corner feature sparingly, if at all, or only on 90° angled joints for the best results. Always, always, always check your work between pixels and vector, large and small. 

For more complex icons I'll still use Illustrator or Photoshop. Flattening icons completely is still a must for me and Sketch can only flatten so far down.

If Sketch can turn up the features on the vector tools I could easily see myself not going anywhere else. 

How about adding some Illustrator-esque features or vector networks — I'm looking at you Figma — I'll have even fewer reasons to switch between other apps. 

Download the icons

If you made it this far here's a free download of the icons. They're free to use in your designs. Pay with a like, comment, or shout out.