A single well-designed icon is useful. A complete, consistent icon set is invaluable. Building an icon set requires establishing clear style rules and following them rigorously so that every icon feels like it belongs to the same family.
Establishing Style Rules
Before drawing your first icon, define the visual parameters that every icon in your set must follow. Document these rules and reference them throughout the process.
Core style decisions you need to make:
- Grid size — 24x24 is the safest default for UI icons
- Stroke or fill — Pick one primary style
- Stroke width — Common choices are 1.5px or 2px. Thinner strokes feel elegant but may disappear at small sizes. Thicker strokes feel bolder but reduce detail capacity.
- Corner radius — Sharp corners (0px) feel precise and technical. Rounded corners (1-2px) feel friendlier. Be consistent.
- Line caps and joins — Round caps and joins create a softer, more approachable feel. Butt caps and miter joins feel more geometric.
- Level of detail — Decide how simplified your icons should be. Fewer details means better readability at small sizes.
Consistent Stroke Width
Stroke width consistency is the single most important factor in making icons feel unified. Even a 0.5px difference between two icons is noticeable when they sit side by side.
Common mistakes to avoid:
- Using the design tool's default stroke width without checking it matches your rules
- Accidentally scaling an icon after drawing it, which changes the effective stroke width
- Mixing stroked and outlined paths — when you outline a stroke, the visual weight changes
Practical tip: In Figma, use a shared stroke style or variable for your icon stroke width. This ensures every icon references the same value and makes it easy to experiment with different weights across the entire set.
Corner Radius Consistency
Corners appear throughout your icons — on rectangles, at path intersections, and at the ends of lines. Keeping these consistent creates visual harmony.
For a friendly icon style, you might set:
- Rectangle corners: 2px radius
- Stroke line joins: Round
- Stroke line caps: Round
For a more precise, geometric style:
- Rectangle corners: 0px (sharp)
- Stroke line joins: Miter
- Stroke line caps: Butt or square
Whichever you choose, apply it everywhere. A single sharp-cornered icon in a set of rounded icons will look like a mistake.
Naming Conventions
As your icon set grows, clear naming becomes critical. A good naming system helps designers find icons quickly and helps developers reference them in code.
Recommended naming pattern: category-object-variant
nav-home— Navigation category, home iconaction-edit— Action category, edit iconaction-delete— Action category, delete iconmedia-play— Media category, play iconmedia-pause— Media category, pause icon
Rules to follow:
- Use lowercase with hyphens (kebab-case)
- Be descriptive but concise —
arrow-leftnotleft-pointing-arrow-icon - Group related icons with a shared prefix
- Avoid abbreviations that are not universally understood
Testing for Consistency
Once you have a dozen or more icons, test them together:
- Line them up in a row — Check that they feel the same visual weight
- View at target sizes — Preview at 16px, 24px, and 32px to catch clarity issues
- Place them in a UI mockup — Icons that look fine in isolation may not work in context
- Check on both light and dark backgrounds — Ensure readability in both themes
Key Takeaways
- Define style rules before you start drawing and document them
- Stroke width consistency is the most critical factor for visual unity
- Use a clear naming convention from the beginning — retrofitting names is painful
- Regularly test your icons together at real sizes in real UI contexts