Trello had an icon problem. Well, we had a few icon problems. First, our icons didn’t have any visual consistency across apps. Android, iOS, and the web all had different icons made by different people at different times. Some icons were simple and filled, some had hard edges, some had a thick outline, and some were hairline thin. Sometimes we weren’t even visually consistent within the same app.
Secondly, it wasn’t easy to update or import icons. On the web, we used an icon font and we had to use special (and expensive) font editing software that not everyone on the team had. On mobile, we updated files individually and the source was kept in a shared folder. Overwriting a file was destructive; you couldn’t go back to an old version of the file. We also had to cut different sizes for various places in the app.
Ugh. Exports? File formats? Versioning? Visualization? That sounds like computer work.
Enter Automation
To take the pain out of the process, I wrote a little script, which turned into a big script, which turned into a codebase. It works like this…
Each icon has its own Sketch file. There is an artboard for each weight, the weight being the thickness of the line in the icon. Heavier weights are used on the web and thinner weights are used on mobile.
We have a gulp script that takes the exports and cuts different sizes for each weight. Then it formats the output for Android, iOS, and the web. For example, small Android icons will be in /build/weights/100/16pt18box/android/. We also output the full SVG and an icon font for each weight.
It also runs a small web app that lets you see all the icons together. We can compare the icons side-by-side for visual consistency and test to make sure the output is clean.
Everything lives in a repository under version control, so we can see what changed and when. It also means we’re able to go back and undo mistakes.
For the design team, it’s easy to update and add icons. Just add another Sketch file with a couple artboards for different weights and the script takes care of the rest. Because they are just sketch files, we can easily drag icons into mockups. Maybe most importantly, we no longer have to slice and dice all kinds of exports for production, which is a huge time saver. Developers get files they can drop into the codebase with no fuss, all sized up correctly and in the right format. Phew!
Seeing It All Together
This is our icon demo. It’s a little web app that you run locally. You can toggle between SVG and icon font sizes to get a sense of what works (or what’s totally broken). You see everything together at once. The app itself isn’t so pretty, but this is an internal thing that gets the job done. You were never supposed to see this…
This was totally impossible before. It’s easy to grab screenshots and share and talk about all the icons together.
We’ve started rolling out the icons across most of our apps. We’re not 100% there, but you can see the icons in action in card badges, search, and menus.
Welcome Iconathon, our open source icon task runner.
We think every product team can use something like this, so we’ve open sourced the code under the MIT license. We call this project Iconathon, because it’s an icon task runner… like a marathon… get it? Alright.
The code includes a few sample icons, an extensive readme, and plenty of code comments. You should have everything you need to get started. If you want to know how it works, you can dig into the code to see the details. Fork away!
The Future
We realize this code isn’t all that sophisticated. It clumsily grew into what it is today after much trial and error. There are a few places that could be sped up. It doesn’t plug into any build tools. It only works with OSX and Sketch. It doesn’t output to every format you might want. It’s mostly just an internal script that gets the job done for us, which is all we ask of it.
So while the code is open source, we won’t be poring over issues and pull requests (we’ll check them out, though). Take the code and make it yours. This is supposed to be a starting point.
This method gives us a lot of flexibility, confidence, security, and saves a bunch of time. Iconathon has been a big win for us. By making it open source, I hope it is for you, too.
Good or bad, we’d love to hear your thoughts. Find us on Twitter (@trello)!
