UX Power Tools – Medium | Jon Moore

Sketch Tutorials

Not just how to do it, but WHY it’s better than any other way.

Confession: This article is intentionally polarizing so that someone will write an angry comment and give me a more efficient solution.

Maybe it’s manipulation. I call it The Predictability of the Internet 😉

Icons are a huge pain in my ass:

• They have to look homogenous (similar visual style)
• They have to have bounding boxes
• They have to work when they’re really big and really small
• They have to be easy to design with
• They have to be easy to code with
• They have to be performant (side note: Peter Nowell is the king of SVGs)
• They have to not piss off your design team
• They have to not piss off your development team

Okay, so what about icon fonts?

Icon fonts like FontAwesome came out as way to soften the agony of working with icons, but they still aren’t perfect. Designing with them is just…okay; you still have to go look up the glyph, copy it, and paste it into the text layer. You can’t really symbolize them, and if you do, changing their color requires some text symbol trickery. Developing with icon fonts is simple, but not without issues. If the browser fails to load the icon font, then you’re up shit creek without a paddle. And you’re alone. In a kayak. Sad.

Well…now what?

So…use SVGs then?

Well for designers, SVGs are certainly easier to symbolize in Sketch, but it can be kind of a pain to change their color. So just don’t make them symbols, right? Then you can use layer styles to make them different colors! But what if you want to update the little dropdown arrow from a caret to a triangle? Well good luck finding all 398 occurrences of that little arrow and updating them one-by-one. So that’s…well, not great. And I know from experience that developers love nothing more than using standalone SVGs for each and every icon in my design. Don’t worry guys, there are only 207 unique icons. That shouldn’t affect page load. I promise. /s

Ugh, then what?!

Keep reading, knucklehead 🤗 And before we dive in, here’s something free. This will help you follow along with the rest of the tutorial.

My Workflow

My approach is divided into two parts: What I Do for Design and What I Do for Development. Neither technique is completely perfect, but it’s been successful so far, and makes the most people happy along the way.

That’s important!

What I Do For Designers

I absolutely love the Nucleo icon set. There are 8,300+ icons available in all kinds of different styles (outlined, solid, mini, full color, two-toned), and they’ve even included those pesky social icons that you need on pretty much every project. You can grab those below ($49 for a year, $129 for life). Full transparency, I get a small kickback. Not gonna lie to you nice folks.

Nucleo – 8000+ Vector icons for iOS, Android and web

The absolute fastest and most sustainable way to use icons in Sketch is by using color symbols and masks. You’ve seen this technique before thanks to by pal Francesco, but here’s a quick refresher:

Sketch: Tint icons using nested symbols – Design&Prototype – Medium

Step 1: Make symbols for the fill colors you want to use for your icons. Make sure every color symbol artboard is the same size.

Step 2: Make a new artboard for your icon symbol. Paste your icon onto your new artboard. If you’re using the Nucleo Icon desktop app, just drag the icon directly into Sketch, then put it on your new artboard.

Step 3: Make sure your icon is a single shape, and set it as a mask. If your icon isn’t a single shape, then select the different paths and union them.

Step 4: Insert any of the color symbols on top of your icon mask and resize it to the size of your artboard. You’ll be able to override this color whenever you add an instance of your icon!

Step 5 (Optional): If your icon is a logo (see above), set the mask fill to the brand color of the app. It’s easy to quickly find official brand colors over on brandcolors.net. This saves you from having to create color symbols for a bunch of different app colors — if you ever want to use the brand color, just turn OFF the color symbol override:

Warning: If you have color symbols with semi-transparent fills, you’ll be able to see the mask fill through the transparency. So if you want 25% black to be an available color, don’t use a fill on the mask.

Why This Works for Designers

• All of my icons are symbols, so if I ever want to update them, I can do it in one place and immediately see it update across all of my designs.
• I can quickly override the color from the inspector.
• If I update a color symbol, it will update all icons that use that color.
• I can nest icons inside of other symbols and quickly swap them out.

Why This Doesn’t Work for Developers

• Zeplin and InVision don’t read color overrides, so they’ll only ever show you the color you used in the base symbol.
• The color symbol + mask technique adds some bloat to the SVG file size.
• They’re all individual SVGs, so devs will want to jump off a bridge.

Side note: All of the icons in UX Power Tools are constructed this way. It’s super fast to swap colors, and even easier to swap icons inside of elements like buttons, fields, and notifications.

What I Do For Developers

Zeplin works incredibly well for layout, color, and typography, but isn’t terribly efficient for assets. Instead of having devs pull icons directly from Zeplin (or sending them a zip of SVGs), I use Nucleo to build an SVG sprite, then send that to developers. Not to brag, but they ❤️ me for it 😌

Step 1: Create a new project in the Nucleo web app.

Step 2: Add icons to your Nucleo project that you intend to use (or have already used) in your designs.

Step 3: Open the project, select all icons in the right panel, and click Download.

Step 4: Choose your export preferences. “Export as Symbol” uses xlink:href which is deprecated as of SVG 2, so I usually choose “Export CSS”. This creates a single SVG sprite, then creates a CSS file with classes for each icon.

But wait, that’s not even the best part!

Along with the SVG sprite and generated CSS, Nucleo also creates an HTML page showing off each icon, and the CSS class for using that icon in code.

Why This Works for Designers

• Your don’t have to change your design process
• There’s a beautiful GUI for choosing icons
• Adding new icons is simple for both parties

Why This Works for Developers

• It generates a single SVG sprite and the correct CSS
• It gives developers a GUI for finding icons and copying the code
• They can change the icon color and size in code. Hallelujah!

Summary

There are fast ways to design with icons, and fast ways to develop with them. It’s a little extra work to make things optimal for both parties, but it will make everyone’s lives a little bit easier.

If you’re not using Nucleo, you can find lots of services like Iconizr that will help you generate an SVG sprite. If you’re lucky enough to have your own icon designer(s), then you’ll have to do this anyway since everything will be custom! You lucky dog.

Check out UX Power Tools to see how you can use these icons in all kinds of sophisticated nested symbols. It’s truly the fastest way to design.

When I’m not battling with icons, I’m working on Sketch design tools at UX Power Tools to make you a better, more efficient designer.

Follow UX Power Tools on Twitter
Follow me on Twitter

The Most Efficient Way to Use Icons If You’re A Designer or Developer. was originally published in UX Power Tools on Medium, where people are continuing the conversation by highlighting and responding to this story.