Better Icons with Sketch Layer Styles

Managing Icons has always been a hassle. Even in prior version of Sketch, creating and managing an icon library was a bit of a hassle. If you are an avid Sketch user you may have used the color symbol hack to be able to have variation in your icons... well say goodbye to hacks and say hello to Layer Styles.

In todays video I show you a new iconography workflow using Sketch for Mac new Layer Style feature. When I say new I don't mean "Brand New". Layer styles have been around for a while, they just have not been as awesome as they are until now.

Applying Layer styles allows you to work fast and maintain an icon library like never before. Let me know your workflow in the comments.

------------------------------------------------------------------------------------

////////// Want to support my content and get extra goodies? Become a member and get perks like member-only content, behind the scenes, design files, and more...

////////// Connect with me here 👍🏼

////////// Sign up for my Monthly Newsletter 📫

////////// Music is from Musicbed click below for a free trial 👇🏼

////////// Equipment 📸

[stevestiles]

Amazing, I've been using the masked symbol for forever and was itching to update my icons with something a bit more streamlined. Great info man!

[xtraceyy]

I've only just learned about the masking with color swatch symbols method (I know, very late in the game). It seemed pretty cool as I was learning it, but something about it seemed odd. This way seems much cleaner. Thanks for sharing!

[watchandlol]

The layer nested symbols and styles capability is quite something especially on symbols... when it works! However, I can't seem to get it to work on symbols where there is more than one path. If there is a symbol with more than one path, then each path has to have its own layer style applied, rather than be able to apply it to the symbol. Is this a limitation of sketch, or am I doing something wrong?

[PaulGrantDesigns]

Suggest using inset stoke with creating icons, then ensure they are pixel-locked to your grid.

[daskhux]

Jesse, I was wondering if you have a preference to a specific icon library you keep in your arsenal? I have been either creating my own or using free ones, but this can lead to icons having an inconsistent overall look and feel at times. I am about to pull the plug and purchase a set and would like to hear any suggestions you might have. Thanks for the upload and any response in advance!

[ChristianBaptiste]

Are the layer styles per document or can they be shared like libraries? I've tried converting all my color symbols to layer styles on a new page in my color library file

[bobbleheadtrishp]

Whenever I try to add another layer, it’s gray and it doesn’t let me press it

[neptuneniq]

So would you implement this as part of the nested symbol process?

[arturodelaguardiacasaban]

Very instructive! Good job and thanks for the video!

[ltgsebg]

Anyone know what Sketch version is needed for this?

[linuslovbacka]

bro, use / instead of - then the styles will categorize better

[O.O-eyesopen]

Im sorry but that's absolute bs from sketch, I can accomplish that in seconds in figma or xd