Sketch Icons 4 — Discover the brand new features

Now you can drag & drop a whole set of icons directly into Sketch ✨

Valentin Chrétien

Published in

Prototypr

4 min readMay 14, 2018

Last January, we released Sketch Icons 3 and many of you supported us, especially on Product Hunt:

So first of all… A big thank you for your support! We never imagined such a craze, so many thanks guys. 🙏

A few weeks ago, we released Sketch Icons 4 which is the biggest update of our plugin so far. We would like to talk to you about some new features.

Here is an overview:

Drag & Drop icons directly into Sketch 🌈
Settings Panel with many advanced features ⚙️
Support for new formats: Vector (.SVG, .PDF) and Bitmap (.PNG, .JPG) 🖼

🌈 Drag & Drop a set of icons directly into Sketch

This is the main feature of this update.

In our previous article, we told you that it was impossible to drag & drop icons into Sketch. This time is now gone thanks to our new feature Organize icons....

Just drag & drop your icons in Sketch, select them and launch the feature Plugins -> Sketch Icons -> Organize icons...

🎉 And the icing on the cake: this feature works with IconJar. 🎉

⚙️ Settings Panel and advanced features

We have also introduce a settings panel that allows you to access advanced features.

📦 Create Presets

Presets will save you a lot of time! You can now import your icons in different sizes, while choosing your padding.

By entering your dimensions as artboardSize-artboardPadding your import panel will look like this:

Your icons will be imported in the predefined dimensions! Here we have icons in 16dp (padding 0dp), in 20dp and in 24dp (padding 2dp):

📇 Add Prefix

Adding prefix was one of the most requested features! It was therefore important for us to add it.

From now on, you can choose the prefix you want directly in the settings panel — which will allow you to organize your icons faster!

💡 Tip: You can use the $size variable to sort your icons by the size of imported icons.

📐 Set Grid and Spacing

If you massively import icons, you will appreciate to be able to sublimate your grid by setting:

The number of icons per line
The size of the spacing between each icon

This last point allows you a fairly granular setting: in px or % (relative to the size of the artboard containing the icon).

👨‍🏫 Example: if your icons are imported in 16px—and you set a spacing equal to 200%, then you will have a spacing of 32px.

🔮 Convert Stroke to Fill

This last point is a little more delicate and deserves a dedicated article.

Know that it is simply impossible to apply a color mask over outlined icons. 👀

But if you still want to do it, you can use the Auto-Convert feature in the control panel.

We automatically transform your icons so that they can enjoy the benefits of dynamic color masks. ✨

Thanks for reading! ❤️🤗

Give some claps 👏 if you enjoyed the article (50 claps if you looooved it 😍), it might encourage us to keep creating tools!