Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

UX Power Tools – Medium | Jon Moore
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 😉
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?
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
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 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!
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.
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.
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.
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.
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.
AI-driven updates, curated by humans and hand-edited for the Prototypr community