Some design details behind Obra Icons

For a while I've been thinking about a new icon set. With Mono we made – in my opinion — a great icon set called Mono icons.

When we worked on that as a team, it was greatly inspired by Feather icons, and partially by Material icons.

My personal take on Feather is that some icons are too clunky. Then the problem with Mono icons is that there were not enough to choose from. 
My new design company is called Obra, so I thought I would continue with what we learned from that project and ship what is essentially a Mono Icons 2.0: this time called Obra Icons.

When we did Mono Icons I did not fully understand why a set like Feather would make all their icons stroke-based, but looking back the benefits are so obvious. To work stroke-based, you need to work a bit differently, but it makes for great scalability. 
For example I use this technique to create shapes with little vector dots of .01 by 01 pixels. Then I set the line end and line start to rounded, which renders a circle. The stroke of the dots is centered. This means I can change the stroke of the vector to 1, 1.5, 2... or any amount of pixels for that matter, and the icon scales up nicely.

You can easily make Obra Icons a “chunky” set or a very thin set, all from the same vectors. There is a stroke width for regular strokes, and a stroke width for internal shapes created with the “dot technique”.

In my research I found the awesome VectorSymbols plugin by CuriosityWen which has been a great help in setting up the correct exports. With this plugin you can set up individual stroke widths and set them in batch.

In the process towards perfection I've learned some new vector techniques, such as ways to apply better curvature to shapes. There is this awesome plugin for Figma called Curvature, which allows you to see the smoothness of a curve.

I made this little video in an attempt to explain it, but if you are interested at all in having smooth vectors, do yourself a favor and check out the plugin yourself.

Having icons drawn from strokes from the beginning means the same set can be re-purposed for, for example a 32px to 40px width set. You could of course go further, but when the icons get too big, I believe they have to be redrawn with a bit more detail to make sense.

For UI purposes the scalability I am talking about essentially means that for a typical phone UI, your tab bar icons could originate from the same vector set as your button and UI icons.

I also purposefully drew the icons at a 20px by 20px base size.

This is maybe a specifically-for-me thing, is that I don't really love how a lot of icons are drawn on a 24px grid. I get it, it's a nice multiple of 8, 6, 4 and 2.

But 20px is just that much more useful for me, especially with an inner padding of 2px. That means that the icon can sit alongside 16px text and look nice.

It's been a design conclusion for Apple in their SF Symbols set that ideally they want to match the weight of text alongside an icon, and have the icon sit on the baseline of the text. I love how that looks in Apple's work (i.e. iOS) and I was aiming to replicate that.

If you put the 20px icon in a 36px tall button, you can match the stroke size with the font weight of a relatively standard sans-serif font next to it (e.g. Inter at 16px) and it's perfect.

And then you could ask yourself, why do we need a 36px button? This is to have a nice balance between tappability for mobile, and at the same time getting enough content on the screen on common phone resolutions. Bootstrap and Material Design figured this out years ago and it's been my go-to button size ever since.

Whenever I take a set of 24, to make it not look awkward in a button, I have to resize it back to 20px. Why not natively draw at 20x20 then? That's one of the ideas behind Obra Icons.

The recent addition to Figma that makes an autolayout “wrap” has also been awesome. The frame where icons live in is essentially a big autolayout frame, which makes it easy to create the different sections and categorize the icons.