Designing icons looks easy until you zoom in at 200% and notice blurry edges, inconsistent strokes and off-grid anchor points. This tutorial walks you through vector icon design in Figma the way it’s actually done in production teams: with a proper pixel grid, disciplined stroke rules, and export settings that survive both retina screens and Android density buckets.
No theory dumps. Just the exact steps, dimensions and shortcuts you need to ship a clean icon set today.
Before You Start: What Makes a Good Vector Icon
A good icon set follows three non-negotiable rules:
- Consistent canvas size across every icon (usually 24×24 px)
- Uniform stroke weight (1.5 px or 2 px, never mixed inside the same set)
- Anchor points snapped to whole pixels to avoid anti-aliasing blur
Once these are locked, everything else is just craft.
Step 1: Set Up Your Figma File and Pixel Grid
- Create a new Figma file and press A to grab the Frame tool.
- Draw a frame of 24 x 24 px. This is the industry standard used by Material Design, Feather, Lucide and most modern UI kits.
- Select the frame, open the right sidebar and click the + next to Layout Grid.
- Change grid type to Grid with a size of 1 px, color at 10% opacity. This gives you a per-pixel guide.
- Add a second grid: Rows and Columns, 2 px padding on each side. This creates a 20 x 20 px live area, the safe zone where your icon shape lives.
Turn pixel preview on with Ctrl/Cmd + Shift + P so you can see exactly how your icon will render.
Recommended Icon Grid Anatomy
| Zone | Size | Purpose |
|---|---|---|
| Canvas | 24 x 24 px | Full artboard, includes padding |
| Live area | 20 x 20 px | Where the icon shape sits |
| Padding | 2 px each side | Prevents visual clipping in UI |
| Key shapes | 18, 16, 20 px | Circle, square, rectangle reference |
Step 2: Draw Your First Vector Icon
Let’s build a simple home icon to demonstrate the workflow.
- Press P to activate the Pen tool.
- Click on the pixel grid to place anchor points. Always place them on whole pixel coordinates. If you see a decimal in the X or Y field, nudge it with the arrow keys.
- Close the path by clicking the first anchor.
- Remove the fill and add a stroke: Black, 2 px, Center alignment.
- Set stroke caps and joins to Round in the Advanced stroke panel. This is a defining choice for the visual style of your set.
Keyboard Shortcuts That Save Hours
- P: Pen tool
- V: Move tool
- R: Rectangle
- O: Ellipse
- L: Line
- Ctrl/Cmd + D: Duplicate in place
- Ctrl/Cmd + Shift + O: Outline stroke (flatten to fill)
- Ctrl/Cmd + E: Flatten selection
- Shift + Arrow: Nudge by 8 px (change to 1 px in preferences for pixel work)
Step 3: Enforce Stroke Consistency Across the Set
The most common beginner mistake is mixing stroke widths. Here’s how to prevent it:
- Create a local color style called Icon/Stroke so every icon references the same variable.
- Create a component for your base 24×24 frame with the grid already applied. Duplicate it with Ctrl/Cmd + Alt + drag for every new icon.
- Never scale an icon by dragging the corner. If you need a 16 px version, redraw or use Rescale mode (K) which scales strokes proportionally.
For pixel-perfect corners, avoid stroke corners under 2 px radius on a 2 px stroke. They render as fuzzy blobs at 1x.
Step 4: Outline Strokes Before Export
Live strokes cause rendering inconsistencies across browsers and Android WebView. Convert them to filled paths before you ship:
- Select the icon.
- Press Ctrl/Cmd + Shift + O to outline the stroke.
- Use Union Selection in the Boolean menu to merge overlapping shapes into a single path.
- Flatten with Ctrl/Cmd + E.
Pro tip: keep two versions of every icon, one with live strokes (for future edits) and one flattened (for export). Store them on separate pages.
Step 5: Export Settings That Actually Work
Figma’s export panel is where most icon sets die. Use these settings depending on your target platform:
| Use Case | Format | Settings |
|---|---|---|
| Web (React, Vue) | SVG | Outline strokes, include ID, no fill attribute |
| iOS | PDF or SVG | 1x, preserve vector data |
| Android | SVG (convert to VectorDrawable) | 1x, flatten paths |
| Presentation | PNG | 2x or 3x, transparent background |
Cleaning Your SVG Output
Figma’s SVG export includes redundant attributes. Before shipping, run your files through SVGO or the SVGOMG web app to strip metadata, reduce file size by 40 to 70%, and normalize path notation.
Step 6: Organize Your Icon Library as Components
Once you have five or more icons, turn them into a library:
- Select each icon frame and press Ctrl/Cmd + Alt + K to convert it into a component.
- Name components using a slash convention: icon/home, icon/search, icon/settings. Figma will auto-group them in the assets panel.
- Publish the file as a team library if you work with other designers.
- Add variants for filled, outlined and duotone styles when your set grows.
Common Mistakes to Avoid
- Placing anchor points on half pixels (0.5, 1.5, etc.)
- Mixing 1.5 px and 2 px strokes in the same set
- Using different stroke caps (round vs square) inconsistently
- Exporting at 2x or 3x for SVG (SVG is resolution independent)
- Forgetting to outline strokes before final export
- Scaling icons non-proportionally to fit a container
FAQ
What is the best canvas size for vector icons in Figma?
24×24 px is the most widely adopted standard. It works for web, iOS and Android, and it’s the size used by Material Symbols, Lucide, Feather and Phosphor. Use 16×16 for dense UI or 32×32 for larger touch targets. You can read more here.
Should I use stroke or fill for my icons?
Either works, but pick one style for the whole set. Outlined icons (strokes) feel lighter and more modern. Filled icons have stronger visual weight and work better at small sizes. Advanced sets use both as toggle states.
Why do my icons look blurry after export?
Nine times out of ten, the anchor points are not aligned to the pixel grid. Enable pixel preview with Ctrl/Cmd + Shift + P and check the X/Y coordinates of every anchor. All values should be whole numbers. figma.com has a solid rundown on this.
Can I use free Figma icon plugins instead of drawing my own?
Yes, plugins like Iconify, Material Symbols and Feather Icons give you thousands of ready-made icons. But if your product needs a distinctive visual identity, custom icons are worth the effort. You can also start from a plugin icon and customize it to match your style.
What’s the difference between SVG and PNG for icons?
SVG is a vector format, meaning it scales infinitely without quality loss and stays lightweight. PNG is raster, so it needs multiple exports at 1x, 2x and 3x for different screens. Use SVG whenever the platform supports it.
How long does it take to design a full icon set?
A polished set of 30 icons takes an experienced designer roughly 8 to 12 hours. Beginners should plan for 20 to 30 hours, mostly spent iterating on the first 5 icons that define the visual system.
Wrapping Up
Vector icon design in Figma is a discipline of small decisions repeated consistently. Nail the grid, lock the stroke weight, outline before export, and organize with components. Do that and your icons will look sharp on every screen, from a 1x web thumbnail to a 3x Android launcher.
Now open Figma, press A, draw that 24×24 frame, and start shipping. See magnific.com for their take.
