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 itThe Predictability of the Internet:wink:
- They have to look homogenous (similar visual style)
- They have to have bounding boxes
- They have to work when they’re
- 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 isthe
- They have to not piss off your design team
- They have to not piss off your development team
Icon fonts like FontAwesome came out as a way to soften the agony of working with icons, but they still aren’t perfect.Designingwith 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.Developingwith 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 fordesigners, 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 thatdeveloperslove 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
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 approach is divided into two parts:What I Do for DesignandWhat 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.
Iabsolutely lovethe 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).
The absolute fastest and most sustainable way to use icons in Sketch is by usingcolor symbols and masks. You’ve seen this technique before thanks to my palFrancesco, but here’s a quick refresher:
Sketch: Tint icons using nested symbols - Design&Prototype - Medium_I always wanted to create a single version of an icon and apply different colors to, or tint it, to indicate its state…_freeandwilling.com
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 theNucleo Icondesktop 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 onbrandcolors.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:
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.
- 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.
- 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 inUX Power Toolsare constructed this way. It’s super fast to swap colors, and even easier to swap icons inside of elements like buttons, fields, and notifications.
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 useNucleoto build an SVG sprite, then send that to developers. Not to brag, but they :heart: me for it :relieved:
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 clickDownload.
Step 4:Choose your export preferences. “Export as Symbol” uses_xlink:hrefwhich will bedeprecated in SVG 2(not out yet). That being said, it’s just the“xlink”_portion that will no longer be needed, so “Export as Symbol” is still a safe option. I usually choose “Export CSS”, which 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.
- You don’t have to change your design process
- There’s a beautiful GUI for choosing icons
- Adding new icons is simple for both parties
- 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!
There are fast ways to_designwith icons, and fast ways todevelop_with them. It’s a little extra work to make things optimal for both parties, but it will make everyone’s lives easier.
If you’re not usingNucleo, you can find lots of services likeIconizrthat 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 outUX Power Toolsto see how you can use these icons in all kinds of sophisticated nested symbols. It’s truly the fastest way to design.