<p>Published on <a href="https://blog.prototypr.io/introducing-sketch-icons-2074d9dc9ed2?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Valentin Chrétien <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sJHRrfHrv1YExZXbtGfoFg.jpeg"></p>
<h4>Generate a dynamic icons library in Sketch in less than 5 minutes.</h4>
<p>Since the arrival of nested symbols and Sketch libraries, our worfklow has been incredibly improved.</p>
<p>Today, <a href="https://medium.com/u/d39f69b23aa2">Sketch</a> allows you to build libraries containing your colors, your icons or your components. It’s super convenient if you work in a team and on different projects.</p>
<p>There are a lot of methods to efficiently build your symbols and libraries.</p>
<p>One of these methods is to create a dynamic icons library. For those who are not familiar with this technique, I recommend you to read these articles.</p>
<ul>
<li><a href="https://uxdesign.cc/dynamic-icons-in-sketch-29463c946434">Dynamic Icons in Sketch</a></li>
<li><a href="https://medium.com/design-prototype/sketch-tint-icons-using-nested-symbols-2d52867e0d29">Sketch: Tint icons using nested symbols</a></li>
<li><a href="https://medium.com/sketch-app-sources/icon-sets-with-color-override-in-sketch-f6c893278bd3">Icon Sets with color override in Sketch</a></li>
</ul>
<p>This method is really powerful: it allows you to nest your icons in your components and thus change the icon and its color on the fly thanks to the right panel.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3PCbDwTcUnWm2xMvsJh2lw.gif">Sketch overrides panel allows to select and edit your icon.</p>
<p>This also allows you to avoid inconsistencies as much as possible. By applying your colors only through the right panel, you limit the use of new colors that do not belong to your initial palette.</p>
<h4>Ok, fine. So, what’s the problem?</h4>
<p>Creating a dynamic icons library is time-consuming! <br />To create it correctly, you will certainly go through these steps:</p>
<ol>
<li>Create symbols with your colors 🎨👩‍🎨</li>
<li>Import your icons <strong>individually</strong> 😓</li>
<li>Apply on each of the icons a color mask <em>(from your previously created color symbols) </em>😰</li>
<li>Sometimes, icons have multiple layers, so you need to assemble them to apply the color mask 😭</li>
</ol>
<p>If you have a few hundred icons to import, be prepared to spend very long days repeating your actions…</p>
<h4>… That’s why we have created <a href="https://github.com/AMoreaux/Sketch-Icons">Sketch Icons</a>. 🤓✨</h4>
<p>To avoid having to spend time doing line work, we have created Sketch Icons plugin that allows you to automate these steps.</p>
<h3>⬇️ Import your icons with <a href="https://github.com/AMoreaux/Sketch-Icons">Sketch Icons</a></h3>
<p>As basic as it sounds, selecting and dropping a group of icons in Sketch does not work. If you want to create symbols for each of your icons, you will have to import manually.</p>
<p>With <a href="https://github.com/AMoreaux/Sketch-Icons">Sketch Icons plugin</a>, just go to Plugins -&gt; Sketch Icons -&gt; Import icons&#8230; and select your folder or your icons. You can also use the keyboard shortcut Cmd + Shift + I.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1828fOcSgZEapp23WyJ0ig.gif">Set an artboard size, select a color library and import your icons.</p>
<p>And… Voilà! Your dynamic icons library is ready.</p>
<h3>🎨 Apply a color mask on several icons</h3>
<p>If in the past you have already imported all of your icons without making them dynamic, do not worry.</p>
<p>You can apply a color mask to an icon, or a set of icons, using this feature: Plugins -&gt; Sketch Icons -&gt; Apply a color mask&#8230; You can also use the keyboard shortcut Cmd + Shift + M.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PO2qW6xHVuWAVTl7OBcP2w.gif">Turn your imported icons into dynamic icons.</p>
<h3>✏️ Replace several icons</h3>
<p>To save you even more time, we have designed a feature that allows you to replace or update icons already imported into your library. You will find this feature in Plugins -&gt; Sketch Icons -&gt; Replace icons&#8230;</p>
<p>It will be useful if you want to edit your icons without losing their nesting in your components.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*73W-xy7fSxLk691TKsywPw.gif">Replace your icons without losing their nesting in your components.</p>
<h3>⌛️ Bonus tip: Organize your icons with <a href="http://rodi01.github.io/RenameIt/">Rename It</a></h3>
<p>Once your icons are imported as a symbol, you will notice that they are displayed below each other in your symbol panel.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dDK04rpOgIahAYqVOZEPZg.png"></p>
<p>To tidy them quickly and efficiently, I use <a href="http://rodi01.github.io/RenameIt/">the famous Rename It plug-in</a> created by <a href="https://twitter.com/rodi01">Rodrigo Soares</a>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*H467f8riMq4kKh0Khuzofg.png"></p>
<p>I select my icons by category and rename them in this way:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*JUQ5lrtPNA-TeMdx2rhrnw.png"></p>
<p>Tadaaaaa! You just created an entire dynamic icons library in less than 5 minutes. 🎉</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*V-0QBojOzE2bMJ9ghDZ8yw.png"></p>
<p><strong>Thanks for reading!</strong> ❤️🤗</p>
<p>Give some claps 👏🏻 if you enjoyed the article, it might encourage us to keep creating tools!</p>
<h4>Did this plugin save you a lot of time? Feel free to share your experience <a href="https://twitter.com/search?src=typd&amp;q=sketch%20icons">on Twitter</a>! We love your feedback.</h4>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2074d9dc9ed2" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/introducing-sketch-icons-2074d9dc9ed2">Introducing Sketch Icons</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Introducing Sketch Icons

Generate a dynamic icons library in Sketch in less than 5 minutes.

Top Stories