Design + Sketch App — Medium | Valentina Berois

The Most Efficient Way to Use Icons as a UX, UI or Digital Product Designer

In the last 10 years, we’ve started seeing icon packages for free download anywhere we looked around the internet. As this may be really great for inspiration, or for small start-ups or non-profit projects, it has become more than a dangerous temptation for designers working on retail or agencies environments.

If you are working on a school project, you probably have nothing to fear when it comes to permissions of usage or copyrights, but little by little, going from a stand-alone freelancer to an international growing digital agency, licences and usage permissions get more and more tricky, so much, that it’s always safer to just use only what’s owned or self-produced.

If you have visual designers with time in their hands to produce actual icon packs from scratch, you are probably a huge or really small company being able to afford this. But what happens to every Design Team environment that falls right in the middle?

From my experience working at a Digital Agency, among an Agile UX methodology environment, with a role focused not only in user experience but also user interface design, I’ve come to face the harsh reality of not having the time in my hands to produce barely any icon or graphic asset in a creative manner.

Producing icons is TOO time consuming for MVP projects

As my focus is now on the concept and design of digital products, I can not afford to spend hours producing icons, simply because this is never taken in count at the time of estimating time and materials for a project, specially not for minimum viable products.

In the best case, if the client is a big powerful corporation, with a strong and solid defined CI, you will have no problem at all, because the icons will come to you.

But what happens when this is not the case, and you have no time/budget to produce them, but it’s of course expected that you include these elements in your designs?

One thing is for sure, you need to get it from somewhere, and if you don’t want to spend millions in the future, you need to be really objective and mostly generic to select and acquire them.

For a start, there are some open source icon sets that are familiar for every user, and my favourite example is the Material Design Icons pack. Among these icons you will see that most of them are available in different styles, so you will find a bold and a light or line version for almost each one of them. This way you will be able to choose the style that fits better to your designs.

Icons from http://www.streamlineicons.com/ux/

Now it’s Icons Shopping time, but what are the key factors to have in mind at this point?

• Amount of styles available for pack (Multicolor , Duotone, Line, Filled…)
• Amount of icons in pack
• Amount of categories available (Communication, Health, Hardware, Image, Maps…)
• Amount of downloads/sales so far

How do you manage your icons?

1. IconJar Tool — 14 Days Free Trial (you’ll need €24.99 to take this as a permanent solution).

Now let’s suppose that you bought an icon set or downloaded an open source one. Probably what’s now a bunch of SVG’s that you need to somehow layout together, browse, select and pull every-time you need one. This tool will work this problem our for you, making it easy to integrate icons into your projects with little effort and maintain solid pixel perfect designs.

Here is all you need: Icon packs (recommendations available from article’s resources) and the magnificent tool: IconJar Download (you have a 30 days trial, and believe me, you should give it a go after that, it’s worth it!)

– IconJar Top features:

• Search engine
• Licence/Copyrights filtering
• Browsing by set & name
• Export size & color pre-setting
• Formats available for export: SVG, PNG, TIFF, WEBP, GIF, ICO, PDF, JPG and ORIG.
• Editable Tags and Description for each icon.
• Type (Vector or Bitmap) filtering.
• Icon Set Import feature — from .iconjar files, svg or bitmaps elements.
• Drag & drop feature for Sketch App.

2. Alternative Icons handling option (For Sketch App users only)

There is what I would call a solid alternative to IconJar, but you need to be a Sketch App user for this…

Sketch libraries allow us now to create our own icon sets with symbols to pull from different files later on.

1. Create a new Sketch file, add your SVG icons as individual symbols (icon in 20*20px with an invisible frame of 24*24px). Be careful to set them all with equal dimensions.
2. Name them with a common convention using slashes, for example: Icon/ Notifications/ Bell/ Active.
3. Install Sketch Runner plug-in
4. Name your Sketch library according to the set of icons you just added there, for example “Material Design Icons”.
5. Add the external Library to the Sketch files where you want to include these icons. Sketch Libraries — Quick Start guide.
6. Press (CMD + Shift + #) search and insert the icon you want to include. Sketch runner will open a dialog where you can easily browse or search and insert any of your library and local symbols into your file.

These are of course my favourite tips and workflows when it comes to icons handling. You can find some more interesting tools that might deserve to be tried out among this article’s resources shared below.

If you have further tools or tips in mind to manage icons in a solid manner please leave your comments and tips below! ⬇⬇⬇

YOU GET AN ICON, YOU GET AN ICON, EVERYONE GETS ICONS!

Gif animation by @FOXADHD

Icon Packages recommendations:

• 3,600 Icons With Personality
• Store all your icons in one place, just a click away with IconJar for macOS
• Material icons – Material Design
• 5,000 Vector Icons for IOS, Android and applications. The world’s largest icon collection.
• 4000 Material Design Icons. For Android, desktop and web applications
• 2,200,000+ free and premium vector icons. SVG, PNG, AI, CSH and PNG format.

Icon Package with Browser tool included:

Smashicons

Tools to manage your icons:

• Store all your icons in one place, just a click away with IconJar for macOS
• Noun Project
• Handling Icons

Pattern Generator online tool:

Seamless Background Pattern Generator & Maker v1.0

Largest online icons database:

Flaticon, the largest database of free vector icons

Sketch Plug-in for alternative Icon Library:

• AMoreaux/Sketch-Icons
• Introducing Sketch Icons

Icons handling – tools & tips ✔ was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.