Sketch Tutorials

The Most Efficient Way to Use Icons If You’re A Designer or Developer.

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

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 a 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.