DEV Community

loading...
Cover image for The constraints behind consistent icons

The constraints behind consistent icons

Dom Habersack
Frontend development 👨‍💻 Teaching everything I know 👨‍🏫 Friends with the best dog 🐶
Originally published at islovely.co ・3 min read

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 22×22 pixel “safe zone”. Many icons don’t even need that space.

The demilitarized zone around the 22*22px safe zone.

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:

A set of four icons, with the top row featuring rounded corners and the icons in the bottom row having sharp corners.

The difference between these two versions is minimal:

The different corners highlighted.

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.

Two corners shown at various sizes. The larger the size, the more obvious the rounded inner radius on the bottom row.

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.

The computer and webcam share the same stand.

The email and credit card share the same body:

The letter and credit card icons share the same body.

The feet of the ghost are from the waves icon:

The feet of the ghost are from the waves icon.

Many circles intentionally have the exact same size:

Many circles intentionally have the exact same size.

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

Discussion (0)