Get 200+ icons, free for personal use: lovelicons.com

The constraints behind consistent icons

Dom HabersackFebruary 3, 2021
Icons can go no faster than this.

I announced Lovelicons as a set of “200+ icons” when all I had was about 70 good ones. Before I can release the set, it needs to live up to that initial promise. Luckily, many of the missing icons are easy to create. As I am drawing them, I still need to make sure they look like they belong together.

The icons need to share a style to feel like a complete set. In this week’s issue, I’m sharing some of the constraints I use when drawing icons that I want to look similar.

Size

I draw all icons on a canvas of 24×24 pixels. The outer 2 pixels are a reserved zone that most icons don’t reach into, leaving them a 20×20 pixel “safe zone”. Many icons don’t even need that space.

Most icons don’t reach into the outer 2px of the 24×24 pixel canvas.

Sometimes, an icon needs that little extra bit of space to work well. If a detail would not work inside the safe zone, the icon can reach beyond it. Ideally, only a few minor details make it outside of the safe zone:

Only minor details appear in the outer 2px.

It’s rare for icons to break out of the safe zone. I find it helpful to have that little bit of extra space when I need it, but I try to avoid it as much as I can.

Border radius

A big part of what makes the icons look similar are the rounded corners. The edges are slightly rounded off, with either a 1px or a 2px radius. With sharp corners, the set would give off a different vibe:

The square tail of the piggy bank is a joke. I felt like I needed to point that out.

The difference between these two versions is minimal:

The only difference between the two versions is in the rounded corners.

Both of these styles are fine. The rounded corners help give the icons the softer tone I am going for.

Picking the right border radius goes a bit beyond that, even. Some icons I brought in from abandoned projects also rounded the inner side of a corner. It’s not noticeable at small sizes, but becomes more obvious at larger sizes.

An inner border radius becomes more obvious at larger sizes.

It’s all about consistency. If only a few icons round the inside of a corner, they look out of place. As I’m writing this issue, I’m noticing that some icons still have the inner radius. I will remove those before the set launches.

Remixed elements

The biggest shortcut to fitting new icons into the set is to remix parts of existing icons into new ones. The desktop computer and webcam share the same stand, for example.

That’s either a really tiny monitor or a giant webcam.

The email and credit card share the same body:

Those are some of the few icons with 2px border radii as well.

The feet of the ghost are from the waves icon:

As if the ocean wasn’t scary enough already.

Many circles intentionally have the exact same size:

Coincidence? Honestly yeah, probably with this one.

None of these constraints are absolutely necessary to create a set. They help define the initial direction of an icon. The more similarities there are, the more the icons look like they belong together. If you combine icons from different sets, these differences make them feel inconsistent.

My goal for Lovelicons is to offer as many of the icons needed by most projects as I can. Do you use icons in your projects right now? I’d love if you could reply to this message with a few screenshots of your interfaces. Show me what icons you need and I’ll draw a version that fits with the set.

– Dom

Continue reading

#1September 11, 2019

Drawing sweet icons for you

I am often creating custom icons for my projects. Because many share a similar style, I will assemble them into a free icon pack.

#48August 5, 2020

Books for getting better at design

Design is not only about visuals. Start here to take your first steps into becoming a better designer.

#43July 1, 2020

Fat marker sketches are the better mockups

Before we spend too much time on the details, we need to figure out the overall structure of a design.