You’re busy creating a set of icons. The goals have been established and you know exactly what to do in order to communicate a clear message. After working on your set for quite some time, you realize something looks off about them. They don’t look as though they belong together so, in your frustration, you assume the shapes are just wrong. How can you create a balance set of icons?
Chances are, the icon shapes you’ve selected aren’t wrong at all, they just need to be balanced. This will make the entire set flow naturally and those subtle flaws you’re seeing will disappear.
Creating a cohesive icon set is an art in itself. The representations you choose vary in both shape and size so controlling them takes practice. A good balance involves making both calculated and instinctive decisions. In other words, your icons won’t always conform to a rule book. Visual balance is just as important as technical balance. However, there are some guiding principles you can use to make your sets come alive.
Focus on Width and Height
All icons must fit into a square container. This can be a real challenge when a predominantly vertical icon and predominantly horizontal icon need to sit side by side. It can feel somewhat like trying to fit a square peg into a round hole.
To prevent imbalance, make sure your icon is aligned to the center of it’s box. This begins to create a nice flow between vertical and horizontal icons, while also respecting your width and height constraints.
The best way to remember this concept is to imagine a plus sign. At it’s core, this symbol is made of two rectangles equal in length, intersecting at a mid point, and visually filling a square. It’s counterpart, the minus sign, simply removes the vertical rectangle, making the two both visually and technically cohesive.
The hub of this balance can be found at the center of the plus, where the two rectangles intersect. This box defines the balance for any other symbol that comes along. It’s where your grid begins.
Create a Simple Grid
Grids don’t have to be complicated. In fact, the type of grid I usually create is extremely simple. A complicated grid forces the composition into tight constraints that don’t always work best for every icon in a set. Simply defining key constraints is much more productive.
Start with a full size box and create a guide for the narrowest width and height from there. In this example I’m using a 64×64 pixel icon size and making the inner box 48×48 pixels.
Remember that a grid for an icon set is simply a guideline. Sometimes an icon will break this mold while still remaining visually balanced and that’s okay. Your main objective is to stay within the outer box.
Try Different Angles
If an icon needs to be a specific shape that doesn’t fit within your width and height constraints, consider angling it. This will allow the icon to fill more of it’s allotted space while remaining cohesive with other icons in your set.
Pay attention to the angles you use. Two icons with opposite angles will look out of place. This is something I like to call the dueling icon effect. When two icons compete for an angle, neither wins.
Don’t Sacrifice Clarity for Cohesion
If an icon needs to speak a very specific message but isn’t fitting into your overall set, don’t get rid of it. Be creative and find a way to work it in. If you sacrifice presenting a clear message just to make the overall set look good, you’re favoring aesthetic over function.
Strike a balance between the two and look at your icon size as an opportunity. This is your chance to be creative with what you have. It’s these challenges that will push you further.
I enjoy the process of designing icon sets and I hope these tips will make the experience more enjoyable for you as well. Creating a cohesive set takes patience and attention to detail. A good foundation will go far.