How to Lay the Groundwork for a Solid Icon Set
Graphic design speaks louder than words (shhh… don’t tell the copywriters). Especially when it comes to icons. When designed right, icon sets have the unique ability to transcend language.
If you’re reading this, chances are you’ve Googled “icon set design tips,” “please tell me there’s an easier way to create a proper icon set,” or something similar. You’ve likely stumbled on tons of articles detailing the typical icon grid system. Super helpful, but how do you apply it in practice? How do you nail down a visual balance if your icons are of different shapes and proportions? How should the safe area be used? What happens when a 2 px stroke is too thick but 1 px is too thin?
Good news! Icon sets are something I love to discuss. Instead of sharing design secrets with unsuspecting guests at a random dinner party, I’m putting it all on the table here. Something tells me you’ll appreciate it more.
Whether you’ve been tasked to create a whole new set of interface icons or to fill in some holes (some icons are always missing), these tips will help you deliver icons that are technically rock solid.
First things first: Find your keyline
Kickstart your process with a search for interface icons and you’ll inevitably discover the icon keyline system, used to maintain visual weight between shapes/icons.
Notice the “invisible” white area around the grid? We’ll get to that a little later on.
The keyline system dictates the ideal dimensions for basic shapes (round, square or rectangular). Of course, the majority of icons are made using shapes that are more complex. No big deal — I’ll show you how it’s done, using 20×20 px icons for simplicity.
5 secrets to a technically solid icon set
Secret #1: Start with basic shapes
I always recommend starting with basic shape icons (circle, square, rectangle) — even if you don’t need (or plan on needing) them in your set. With a set of 3–4 simple shapes, you’ll start feeling the visual weight of the selected keyline system.
As the caffeine starts to wear off and the pixels make your eyes cross, you may start having doubts about whether certain shapes should be bigger or smaller. These foundational icons will be your point of reference. Use the visual weight standards to gauge proportions of more complex icon shapes and to evaluate whether or not your new icon looks similar in size (trust me, you’ll know).
Secret #2: Play with the safe area
Let’s start with the anatomy of an icon canvas
Trim area: Everything outside this area will be trimmed.
Live area: Icon content should remain within the live area where your image is unlikely to be hidden from view (e.g. when sidebars appear upon scrolling).
Safe area: Consider this your padding between the trim area and live areas.
The majority of shapes fit nicely inside the live area, giving the illusion that you don’t need the safe area. A less experienced designer might completely crop it out. Here’s the problem: One day, you’ll run into a shape that looks smaller than the others in your set, but there’s no space to make it bigger. You’ll be stuck with two less than ideal solutions — rework the entire set or settle on a low visual weight balance. That’s why I never crop the safe area, ever.
In terms of alignment, we usually try to place the icon in the center of the canvas, leaving the same padding on either side. However, sometimes our eyes play tricks on us, right? What the grid says is centred, unfortunately, might not LOOK centred.
See the gray line striking through the center height of the icon and the label? Because of its asymmetrical nature and overhangs that bust the focus area, the icon appears weighted down and off center. Easy fix. Just shift the icon’s “center of gravity” up towards the center of the grid to compensate.
How to nail down the right position for a shape
- Place your new icon next to a symmetrical icon and compare
- Place your new icon in a perfect circle or square
You’ll know right away whether or not you need to compensate. And don’t forget to play with the safe area.
As you can see, the initial bin icon doesn’t look bad in the square. But when placed next to a symmetrical icon or text, the alignment issue becomes obvious. So to be 100% sure, use both ways to find alignment issues.
Secret #3: Always follow the pixel grid
To ensure high‑quality icons across all screens and formats, we must strictly follow the pixel grid. Each vertical or horizontal line should line up with the rules of the grid (no exceptions!).
The illustrations below show how matching (or ignoring) the pixel grid can affect icon quality after rasterizing. Even if your icon looked ultra‑precise close-up in your vector editor, the quality would suffer after rasterizing in a browser (yes, even if you keep the icon in the SVG format).
When you’re sloppy, the technology knows.
The final quality is linked directly with how carefully you followed the pixel grid rules. If working with rounded ends, make sure the pixel grid rule is suitable, plus try to match your circles with the pixel grid.
Secret #4: Bend the rules with 1 px and 1.5 px icons
The most popular and simple example is the 2 px stroke icon. Alignment is always so obvious. But what about 1 px icons? Thinner, more delicate, stylistically different and able to accept more detail. Placing 1 px lines directly in the center of the canvas forces us to choose between symmetry and grid alignment. Not an ideal trade‑off.
Faced with these two options, I always opt for grid alignment. I recommend shifting your shape left or up by 0.5 px. This will help make the strokes fit the pixel grid. You get a higher quality icon upon rasterizing, and almost nobody will notice the 0.5 px compromise in placement.
Whatever you do, try not to put these icons in small circles or squares. Otherwise, you’ll highlight the asymmetry.
Figma uses 1 px stroke icons, but sometimes they break the pixel grid rules. Maybe they assume all users have retina displays!
But wait, what if 2 px is too thick and 1 px is too thin? Good thing there are 1.5 px strokes, and they follow the same guidelines. Your icons won’t be as precise as 1 px or 2 px, but the icon will be clear enough if the outer border fits the pixel grid.
Pro tip: Have doubts about the final icon’s quality? Press ^p in Figma to switch on the pixel preview mode.
Secret #5: Get creative with filled icons
I absolutely love creating and playing with filled icons. There’s a lot of room for innovation, and — bonus — the same grid rules apply.
At Lightspeed, the filled icon is the icon of choice — and it’s a whole other animal. Jump to my next article, where I spill some of our biggest icon design secrets: How to build an icon set for your family of products.
Let’s wrap it up with a cheat sheet for your next icon set
Save and use these secrets to create better icons
- Start with basic shapes: Starting with a circle, square and rectangle will help you set standards for your collection and gauge proportions for future, more complex shapes.
- Play with the safe area: Use it to increase visual weight or fix vertical/horizontal alignment, but never crop it out — even if your original icons fit inside the live area.
- Always follow the pixel grid: Even if your icon looks awesome close-up in your vector editor, the quality will suffer post rasterizing.
- Bend the rules with 1 px and 1.5 px icons: When placing 1px lines at the center of the canvas, shift left or up by 0.5 px to ensure your strokes fit the pixel grid. Do not put these icons in small circles or squares — you’ll only highlight the asymmetry. Follow the same guidelines for 1.5 px — the icon will be clear enough if the outer border fits the pixel grid.
- Get creative with filled icons: They follow the same grid rules. but they’re so much more fun to create.
