Building a consistent icon set in Figma is one of those tasks that looks simple until you ship the tenth icon and realize half of them feel off. Strokes don’t match, corners are inconsistent, optical sizes drift, and suddenly your product UI looks like it was designed by three different teams.
This guide is a hands-on walkthrough of the workflow we use at Osilly when designing icon libraries for clients. No theory dumps, no “download this pack and pray” shortcuts. Just the exact steps to set up a grid, lock down stroke rules, build components, and use variants so every icon you draw stays visually aligned with the rest.
Why Consistency Matters More Than Style
Designers often obsess over choosing the right icon style (outline, filled, duotone) but consistency is what makes a set feel professional. Users don’t consciously notice that your magnifying glass uses a 1.5px stroke while your trash bin uses 2px, but they feel that something is wrong.
A consistent icon set means:
- Same canvas size for every icon
- Same stroke weight across the library
- Same corner radius treatment
- Same optical padding inside the frame
- Same component structure so handoff and updates are painless
Step 1: Set Up Your Base Grid
Every great icon set starts with a grid. The grid is your safety net, it forces alignment whether you’re drawing a square shape or a curved one.
Choose Your Canvas Size
The industry standard is 24×24 pixels, used by Material, Feather, Lucide, and most modern UI kits. If you’re designing for marketing or larger surfaces, 32×32 or 48×48 also work, but pick one and stick to it.
Define the Keyline Shapes
Inside the 24×24 frame, leave a 2px padding on each side. That gives you a 20×20 “live area” where icons actually live. Then build keyline shapes as background guides:
| Keyline Shape | Dimensions | Use For |
|---|---|---|
| Square | 18×18 | Box, image, card icons |
| Circle | 20×20 | User, sun, badge icons |
| Vertical rectangle | 16×20 | Document, phone icons |
| Horizontal rectangle | 20×16 | Wallet, envelope icons |
Place these keylines on a locked layer in your master frame. They’re invisible in the final export but they keep your optical sizing consistent across shape types.
Step 2: Lock Down Your Stroke Rules
Stroke weight is the single biggest source of inconsistency. Decide on one weight and write it down somewhere visible.
Recommended Stroke Settings
- Weight: 1.5px for 24px icons (most balanced), 2px for chunkier styles
- Cap: Round
- Join: Round
- Align: Center
- Corner radius: 2px (inside corners and outside corners should match)
Pixel Alignment
Always draw on full pixel coordinates. If your stroke is 1.5px, you may need to nudge shapes by 0.25px to avoid blurry edges. Enable Pixel Grid in Figma (View menu) and zoom in to 800% during cleanup.
Step 3: Build Reusable Components
This is where most icon sets fall apart. Designers draw icons as raw vectors instead of components, then have to manually update 200 icons when the stroke weight changes.
The Component Structure
Every icon should follow the exact same layer structure:
- Frame (24×24, named after the icon, eg “icon-search”)
- Vector layer inside (the actual icon paths, named “icon”)
- No background rectangles, no extra groups, no nested frames
Convert each icon to a Component (Ctrl/Cmd + Alt + K). Place all components in a dedicated page called “Icons – Components” so they’re easy to maintain.
Naming Convention
Use a clear, slash-based naming system. Figma will automatically organize your library:
icon/action/searchicon/action/filtericon/navigation/arrow-lefticon/communication/mail
This structure makes the asset panel browsable and keeps things organized when your set grows past 100 icons.
Step 4: Use Variants for Style and State
Variants are the secret weapon for a truly scalable icon system. Instead of creating icon-search-outline and icon-search-filled as separate components, combine them as variants of a single component.
Recommended Variant Properties
| Property | Values |
|---|---|
| Style | Outline, Filled, Duotone |
| Size | 16, 24, 32 |
| State | Default, Active, Disabled |
When you build variants, your designers can swap an outline icon for a filled one with a single dropdown click in the right panel. No swapping instances, no breaking layouts.
Why Different Sizes Need Different Drawings
A 16px icon is not just a scaled-down 24px icon. At small sizes, you need to simplify details and sometimes increase relative stroke weight. Draw small sizes from scratch using the same grid principles. This is what separates a professional icon set from a hobby one.
Step 5: Apply Color With Styles, Not Fills
Never hardcode colors into your icon vectors. Use Figma color styles or, even better, variables (available in current Figma releases). This way, your icon library can adapt to dark mode, brand changes, or accessibility states without redrawing anything.
For stroke-based icons, the trick is to set the stroke color to a variable like icon/default and let consumers of the library override it through component properties.
Step 6: Publish and Maintain
Once your set is ready:
- Move all components to a dedicated Figma file
- Publish it as a Team Library
- Document your rules in the cover page (grid, strokes, naming)
- Set up a review process for new icons before they get merged in
Maintenance is what kills most icon libraries. Assign one person as the owner. Every new icon goes through them. No exceptions, no “quick additions” from random designers.
Common Mistakes to Avoid
- Mixing stroke and fill icons in the same set without variants
- Forgetting to outline strokes before exporting to developers (or doing it when you shouldn’t)
- Inconsistent canvas sizes, especially when importing icons from third-party sets
- Not testing icons at actual size. Always preview at 100% on a real UI screen
- Skipping the keyline grid, which leads to optical inconsistency even when math is correct
FAQ
What is the best canvas size for a Figma icon set?
24×24 pixels is the most widely supported size. It works with Material Design, iOS Human Interface Guidelines, and most web frameworks. If you need multiple sizes, build 16, 24, and 32 as separate variants.
Should I use stroke or filled icons?
Outline icons (stroke-based) are more flexible for modern UIs and easier to adjust. Filled icons read better at very small sizes and are great for active states. The best approach is to build both as variants of the same component.
How many icons should a library have to launch?
Start with the 20 to 30 most-used icons in your product: search, close, menu, arrows, user, settings, notifications, etc. Don’t try to ship 500 icons on day one. Expand based on real product needs.
Can I use free Figma icon libraries instead of building my own?
Yes, sets like Feather, Lucide, Phosphor, and Tabler are excellent starting points. However, you’ll almost always need to customize a few icons or add brand-specific ones. Even when starting from a free set, applying the workflow in this article ensures consistency stays intact.
How do I handle icons that need to break the grid?
Some icons (like a lightning bolt or star) won’t fit perfectly into keyline shapes. That’s fine. Focus on optical balance: the icon should feel the same size as the others, even if its bounding box is technically different. Trust your eye after locking down the math.
Wrapping Up
A consistent icon set in Figma is not magic, it’s discipline. Set your grid, define your strokes, build proper components, use variants, and maintain ownership. Follow this workflow and your icons will look like they were drawn by the same hand, even when your team scales.
Need help building or auditing your design system? Get in touch with the Osilly team and we’ll help you put a production-ready icon library together.
0 Comments