When we talk about using grids in design, we usually refer to Foundation, our responsive CSS framework. But grids are just a tool to create alignment and visual rhythm in any composition. And even then, they’re guides, not rules. Sometimes we may adhere to the grids more than what they represent.

They’re the same size — according to a strict grid. But people don’t see pixels or grids. They see forms, colors, contrast — what we call visual weight. Take away the guides to reveal how much (or little) mass each icon appears to have in relation to its neighbors:

When designing icons, you can't just make shapes that adhere to guides in your drawing tool of choice. A set of icons should look like a harmonious family in the finished product. Icon design is one thing. Family design is another. Here are four techniques to make a group of icons feel like family.

1. Don’t judge an icon by itself.

Critique every icon against one another. And not just random pairings: Compare as many combinations of three, four, five or more icons as you can. (This is why you find few large successful icon families.) Look at the icons above. Which set feels more similar?

Also try them in context of elements other than icons. For example, if you intend the icons to appear next to text, then test their weight against a few letters or numbers.

2. Test small.

Viewing icons at different sizes than they’re created will reveal hidden problems — especially when they’re small. Icons smaller than 16 pixels wide lose their ornate details. Nothing shows mismatched weights quite like checking our work at different sizes.

3. Use common traits.

Round corners vs. sharp points. A common angle. A particular curve. Incorporate the same detail or two in as many of the icons as possible to keep a note of familiarity.

4. Trust your eyes.

Train yourself to judge visual weight. Grids and guides are helpful, but your main tool for judging if a set of icons works together is your experience. Try squinting at a set of icons — both on screen and on paper. They won’t all look the same, but when blurry, no single icon should be especially light or dark.

---