How to Build an Icon Set for Your Family of Products
My previous article explored how to lay the groundwork for a rock-solid set of icons, including key tips to manipulate the keyline and grid systems. If you haven’t read it yet, stop right here and go back. If you’ve done your homework and you’re feeling adventurous, let’s dive into what comes next: how to create a cohesive family of icons. At Lightspeed, we’ve adopted a 7‑step process that helps us ensure eye-catching icon sets for all our products.
Lightspeed is home to over 25 different products. While many products were created in-house, some are the result of acquisitions over the years. Because one single visual language is essential to any brand, we embarked on a huge One Lightspeed redesign. As you can imagine, this is a massive undertaking with various components across content and design, and icons are just one piece of the puzzle. Our goal for this particular project: one set of icons across all Lightspeed products.
7 steps to a cohesive set of icons
- Find your keyline system
- Collect references
- Agree on a style
- Research metaphors
- Create a guide
- Scale your set
- Share the knowledge
Of course, it’s a little more complicated than a simple list. Let’s go through the details of each step.
Find your keyline
Step one is always find your keyline (I cover this in my previous article) — it’s how you set the foundation for your icon set. We found that, on average, most icons across the Lightspeed family of products were 20×20 px. So, it just made sense to start with a set of this size.
Pro tip: Leave the 2 px safe area. There should be ample room for 20–24 px icons, but if you’re working with bigger icons, make more space. For example, a 48×48 px icon will require a safe area of 4 px. At Lightspeed, we didn’t know whether our basic corners would be rounded or sharp, so we started with a 1 px radius for corners.
Collect references
Ask any creator, and they’ll tell you inspiration is important to the creative process. Before you start sketching, look for inspiration. We sifted through dozens of gorgeous icon sets and then loaded our moodboard with filled, outlined, sharp and very soft icons. Try to collect as many references as possible — you’ll need them when you start building your style and uncovering metaphors.
Agree on a style
To narrow the scope of the exploration, we focused on our top 10 most used icons — laying the groundwork for the new set. Once we were happy with the designs for this small group, we could test the design and guidelines and expand slowly beyond that.
We knew we wanted Lightspeed’s family of icons to be clean, simple and clear, without complex metaphors. We hadn’t yet settled on outlined or filled, so we decided to create a set of each and make final decisions later.
Based on our research, I suggested 3 different styles:
- Straight & aggressive
- Rounded & cute
- Curved & sharp
Tiny details like these can help make your brand shine:
- Rounded or sharp corners
- Rounded or square line ends
- Oblong, rounded, square or curved shapes
- Thickness of lines and slits
For us, it was unanimous: Curved and sharp won. Why? Because it contained unique elements found in the Lightspeed flame.
Taking our brandmark as inspiration, I combined sharp and rounded angles and added “flame” stroke ends to some shapes. The team loved the idea! We were completely on brand.
Next, it was time to choose between outlined or filled. And to make the decisions a little easier, we tested different combinations:
- Link with icon
- Button with icon
- Navigation on light background
- Navigation on dark background
Finally, we agreed that filled icons were more legible and provided more consistency across all combinations.
Research metaphors
Once you’ve agreed on the style, it’s time to play with metaphors (my favorite part). Most of the time, you can find a variety of different metaphors for each icon. For example, the “Help” icon can be illustrated using a question mark, lifebuoy or chat bubble while your “Reporting” icon can be represented using a dozen different chart styles.
Pro tip: Before you start looking at metaphors, you should clarify the purpose of the icon. Only when you fully understand what action, property or page will be affiliated with this icon can you suggest a relevant metaphor.
Certain metaphors sparked HOT 🔥 discussions. While a metaphor may have a primary, hit‑you‑over‑the‑head meaning, we also considered the possibility of a secondary meaning, which could perhaps better serve another icon.
To help pinpoint the best‑fitting metaphors, I put together a list of examples. At this point, we extended our list beyond the original set of 10, using real navigation icons from a Lightspeed product.
Create a guide
We’re almost there! We’ve aligned on a consistent style and system, and tested it out by intuitively applying some rules. Now it’s time to document all those rules into one clear guide that will take out the guesswork for future designers and make sure all of our icons look and feel consistent. For Lightspeed, this is what our guide looked like:
Canvas
- Icon size: 20×20 px
- Safe area: 2 px
Metaphors
- Avoid mixed metaphors and use the minimum detail required to ensure the meaning is clear.
- Сonsider if a metaphor has a secondary meaning, which could perhaps better serve another icon.
- Think outside the box if some objects or actions don’t have general metaphors.
Shapes
- Shapes should be as simple as possible without extra details.
- Aim for not just clear but beautiful and elegant shapes. Use curved elements when appropriate.
- Strictly follow the pixel grid.
Fill rules
- Fill all shapes and avoid outlined details when unnecessary.
- Slits between elements should be 1 px thick.
- If a shape contains a stroke, it should be 2 px thick.
- If a shape consists of strokes only, try to highlight some elements using a 3 px stroke for the illusion of a filled icon. Exceptions are arrows and arithmetic signs (use 2 px strokes).
Corners
- As a general rule, corners that are sharp in the physical world should be sharp in icons too.
- Use rounded corners for objects that are rounded in the real world.
- Using both sharp and rounded corners can soften shapes or add contrast when appropriate.
Ends
- As a general rule, square your ends.
- Use round ends for objects that are rounded in the real world.
- Flame ends when appropriate and noticeable for a unique set.
Now it’s time to polish our final icons and ensure that each shape:
- Follows the style guide
- Is balanced and accurate
- Fits the pixel grid
- Has a correct visual weight
- Is vertically and horizontally centred (“center of gravity”, not geometric center)
(Review this guide to #3 #4 and #5)
Scale your set
Hooray, our first icons are ready! A beautiful set of 12 filled icons and a detailed process for creating even more.
Next, you’ll want to test drive your style guide. At Lightspeed, I grabbed another batch of icons and redesigned them in the new style. It turns out our rules were scalable, and we were able to continue.
Share the knowledge
At the end of the day, we proved that our guide works and that one designer can extend the set. But asking one designer to draw hundreds of icons is a little too much, no? That’s why sharing your learnings and teaching others is so critical. Three new designers, one masterclass and several review sessions later, we had our complete icon set. And you couldn’t tell who was responsible for which icon.
Finally, sprinkle the entire process with patience
From start to finish, our icon rebrand took approximately five months — that’s 150 days or almost half a year. No matter how you look at it, as a result of our patience (and dedication to great design), we came out the other side with 42 high-quality icons, plus a comprehensive guide with a clear set of rules and examples. Best of all, we made it easy to pass the icon baton to any one of our designers at Lightspeed. Isn’t that the dream?
