How I Manage My Icons In Sketch. – Part 3.6 min read

Hello Again, Hope you are well and experienced the new icons technique that I showed in part 1 & part 2 . Cool! Right? In the meantime Sketch 52 is released and came off with a lot of features. I also lost a ton of money by replacing the display of my MacBook Pro 2017 (That appeared suddenly without any physical damage).  Anyway, that’s a different story. Sketch 52 has some improvements on layer style overriding, which makes the icon workflow more amazing & you won’t be needing to define the color layer. Check out Jesse Showalter’s video to learn the details. ( And some more Exciting Features.) 

However, the old technique will still work

Now, since you know all the available technique there is, you’ll be needing to handover the icons to the developers. Let’s dive deeper into  that.

Exporting

Your design could be for android, ios, web or any other media. Different type of developer might want a different type of assets & icons. 

However, for all kinds of exports & stuff. Two plugins will come in handy RenameIt, Select  Similar Layers. Keep those installed.

If you followed my previous articles of this series. you’ll have a lot of slash “/” for categorizing in the name of them. But Exporting them in this state will create subfolders which will be frustrating for the developer to find the desired icon. We also need all icons to the same folder for proceeding on with the article too. 

To Create Export

• First of all, I would recommend duplicating the main file (Cmd+Shift+S) and work with the duplicate file keeping the main file intact. (I didn’t find any workflow for continuously export the icons. Meaning- when you add/remove icons you need to follow the steps every time. But the process is very simple & will take you 5 mins(max) to do it)
• Use RenameIt’s find & Replace option to replace the “/” with “_”.  I also rename the “_24px” with blank field (Optional) . In that way, the exports will be on the same folder and won’t have that 24px in every icon
  

• Now if you export them in this state the mask will create problems when using them for icon font & development purposes. For solving that, you’ll need to select a color symbol layer then go to plugins>select similar layer> Class(type). That way all the colors will be selected, hide them or delete them. Now, pressing cmd+a will select all the icon shapes. Then, from the colors panel make all the icons black. ( Before sketch 52, Selecting a shape and then select similar layers > Class(type) worked but sketch 52 seems to treat singles paths differently. So, the previous system won’t work)  

• For a better selection, you’ll need to collapse all groups and export the icon artboards. View>Layer list> Collapse All groups will collapse them & then drag and select them all. [Or you can use Runner plugin to find options easily]

Exporting for android/ios as image assets

After selecting them press make exportable. After that click the preferences icon beside Presets and select ios preset for ios export>Export selected. For android export, you can select android preset, but remove all the smaller size keeping the highest size only. the android studio can make smaller size automatically from the larger one. You Can check Sketch’s Export Documentation for a better understanding of sketch’s export option 

[Bonus: If you want to create an asset export for react native, you can create a custom preset with the option of  @1x,2x,3x,4x,1.5x and you’re good to go] 

Exporting as an vector icon font (Recommended) 

Web & React Native developers will love an icon-font, but Android and iOS some developers want image assets, Other ones want icon font. 

In my opinion icon font is always better since you don’t need to worry about sizes, DPI, PPI & stuff ( they are vector) 

I’ve discovered two ways to create icon font from sketch

1. Icomoon Way(Easy)- Export your icons as svg. Via selecting the svg option. ( Only .svg is needed for creating the icon.) . Go to icomoon app. Select import icons > Select all the SVG icons you exported. A set will be created, rename the set & set a grid size from the right side . ( The artboard size of the icons, in our case its 24) . Then from the right side’s burger press select all. Then from the bottom click generate font. (Icomoon has many more options that this  tutorial wont cover, explore them yourself) . Download the font. And now give the zip file to the developer. 

2. Doing it locally(Bit Hard)- There are ways to doing it locally too, but you need to know a little bit of nodejs or grunt.

• Nodejs way – I’ve created a simple script with a npm library available at github with a test file. The instructions are also given there. Along with the web icons the library also provides glyph- maps which is useful for using the icon in react native with React-native vector icons. You can also check the package.json file in the repository for what did & change options,parameters etc. 
• Grunt way – Check this article.

I guess that’s it for the last part of the tutorial series. Let me know if you have any questions. I will definitely try to answer them. Experiment, explore & create amazing icon systems. See you in another article. Till then, take care. Goodbye 🙂