How to Design icons
Icon design guide
Once you've created a few icons, the next step is building a set that feels unified. This means thinking beyond individual shapes and paying attention to the small details that hold everything together.
Use key shapes for visual harmony
Key shapes are like guidelines to make icons feel visually consistent, even when their designs differ. In Core, we use predefined key shapes to keep icon proportions balanced.
Circle and square: Circles should be slightly larger than squares to counter the illusion that makes them look smaller at equal size.
Rectangles: Use slightly narrower rectangles that are longer on the other axis. Their length should match the diameter of the circle to keep proportions in check.
Create series with symbols
Symbols add meaning to icons and make them more contextual. Ideally, place symbols inside the icon. If space is tight, position them in a corner (just make sure they don’t overlap key parts). Consistency in placement is key, especially for similar icons.
Add gaps for better clarity
When combining elements (like an icon with a symbol) a small gap helps define the separation between them. Gaps add clarity, improve legibility, and give each part room to breathe without making the design feel heavy.
Show negation with the same crossbar
To show negation or a disabled state, use a 45º line from top-left to bottom-right. This is a familiar visual cue, like the stroke in a “NO” symbol. Leave a gap beneath the crossbar to keep the icon visually clean and easy to understand.
Keep moving objects facing the same way
Directional icons, like arrows or moving objects, should follow a consistent orientation. In Core, we design them as if they move left to right, which reflects how most people read and aligns with standard UI patterns for forward motion.
Rotate icon to balance proportions
Icons that are too tall or thin may feel out of place in the grid. Rotating them 45º can help balance the space they occupy. Stick to a bottom-left to top-right angle for consistency, unless familiarity (like with pens or pins) suggests a different direction.
Use consistent typefaces
Text elements like letters or numbers can disrupt the flow of an icon set if they aren’t consistent. Using a custom typeface (like we do in Core) ensures that spacing, stroke weight, and legibility are all in harmony with the rest of the set.
Apply ink traps
In tight corners, strokes can build up and look heavier than intended. Ink traps (borrowed term from print typography) help avoid this by leaving extra space where needed. It’s a subtle but effective way to keep your line icons crisp and clean.
💡 Pro Tip: Know when to break the rules
Rules are useful, but rigidly sticking to them can sometimes hurt the final result. Designing a set of icons also relies on visual judgment. And sometimes, bending the rules leads to better clarity or familiarity.
Optical balance: Some icons may look off even if they align perfectly to the grid. Trust your eye and adjust for better visual balance.
Irregular shapes: Icons with complex or organic forms may need tweaks beyond the key shapes to stay visually consistent.
Familiar direction: Icons like pen, pin, or brush are always drawn tip-down because it matches how these tools are commonly used in real life (even if that breaks the usual rules).