Free · 8 min read
How to draw icons: grid, strokes and SVG export
How to draw an icon set from scratch: a 24 × 24 grid, keyline shapes, consistent stroke weight, pixel snapping in Figma and SVG export. Five steps.
- Draw your first set of six icons, from sketch to SVG
- See why icons in a set look mismatched, and fix it
- Set up Figma so strokes stay crisp after export
- Free
- 1,504 members
- Join in 1 click
Your first icon set: 5 steps
- 1
Step 1
Pick a task and study how others do it
- 2
Step 2
Build the grid and keyline shapes
- 3
Step 3
Set your stroke rules
- 4
Step 4
Draw in Figma with pixel snapping
- 5
Step 5
Export to SVG and check the set
- 1,504
- community members
- 8,915
- messages with questions since July 2024
- 9
- design games since September 2024
- 759
- people wrote in the chat
This guide is for you if you are
Drawing your first icon
You want to know where to start: what size, what stroke weight and how to keep the icon from looking blurry.
A UI designer missing an icon
The ready-made sets don't have the icon you need, and you want to draw your own that fits the style.
Looking for a portfolio piece
You want an exercise that shows attention to detail and systems thinking, not just a pretty picture.
In short
- Interface icons are drawn on a grid: in Material Design, system icons are 24 × 24, with the content inside a 20 × 20 live area.
- Keyline shapes (circle, square, rectangles) help icons of different shapes look equally large.
- One stroke weight, the same corner radii and the same stroke ends across the whole set are what make icons a family.
- In Figma, turn on Pixel grid and Snap to pixel grid: lines land on whole pixels and don't blur.
- Your first project: a set of six icons in one style, exported to SVG and checked next to text.
Your first icon set: 5 steps
- 1
Step 1
Pick a task and study how others do it
An icon isn't a tiny illustration: it's a sign people have to recognize in a split second. For your first exercise, take a set of six system icons for an imaginary app: home, search, profile, notifications, settings, favorites. Before drawing, look at how the big systems are built:
- Material Symbols by Google: every icon has four variable settings (fill, weight, grade and optical size), and they can be downloaded for free as SVG or PNG under the Apache 2.0 license;
- SF Symbols by Apple: symbols come in nine weights and three scales and align with text automatically;
- compare the same icon (say, home) across several sets: what they share and where their character differs.
💡 Start with a pencil: sketch three or four versions of each icon on paper. The winner isn't the most detailed one but the one recognized at first glance.
- 2
Step 2
Build the grid and keyline shapes
Create a 24 × 24 frame in Figma, the base size for system icons in Material Design. Keep the icon's content inside the 20 × 20 live area in the center, leaving 2 pixels free on every side. Only go into that padding when a shape needs extra visual weight, and never outside the frame. Add keyline shapes, semi-transparent guides that every icon will rest on:
- a square, 18 × 18;
- a circle, 20 in diameter;
- a vertical rectangle, 16 × 20 (width × height);
- a horizontal rectangle, 20 × 16.
💡 Why the circle is bigger than the square: at equal dimensions a circle looks smaller. The keyline shapes already include that optical correction, so round and square icons look the same size.
Get a second pair of eyes on your set
In the community you can ask about grids, stroke weights or SVG export and share your first icon set for feedback. Post all six icons in one row and ask which one stands out.
Share your icon setFree. 1,504 designers are already in the community.
- 3
Step 3
Set your stroke rules
A set looks mismatched when its icons have different stroke weights, corners and ends. Write your rules down before drawing and stick to them in every icon. For reference, here are the Material Design rules for system icons and the matching Figma settings:
- stroke weight 2 everywhere: straight lines, curves, outer and inner outlines;
- outer corner radius 2, square inner corners;
- consistent stroke ends: in Figma you set the end points in the stroke settings (None, Round, Square);
- consistent joins: in Figma these are Miter, Bevel or Rounded.
💡 Material allows optical corrections when details don't fit: the paperclip and the microphone use strokes thinner than 2. But that's an exception for complex shapes, not a reason to change the weight at random.
- 4
Step 4
Draw in Figma with pixel snapping
Open the Zoom/view options menu and turn on Pixel grid (Cmd + ' on macOS, Ctrl + ' on Windows) and Snap to pixel grid (Cmd + Shift + ' on macOS, Ctrl + Shift + ' on Windows): objects snap to whole pixels, so lines stay crisp after export. The pixel grid shows at 400% zoom and above. Practice on a search icon with Figma's tutorial:
- with the Ellipse tool (O), hold Shift and draw a 16 × 16 circle, remove the fill and add a stroke with weight 2;
- with the Pen tool (P), draw a handle 4 pixels long, weight 2, Round end points;
- select both shapes and click Union selection: the bounding box then includes the stroke, so you can center the icon in the frame precisely, which a plain group doesn't allow;
- turn each icon into a component so the set is easy to use in mockups.
💡 Check the result in Pixel preview (Control + P on macOS, Ctrl + Alt + P on Windows): it shows how the icon will look as a raster on a standard screen and on a double-density one.
Icons blurry or mismatched? Show your set to the community → - 5
Step 5
Export to SVG and check the set
Select the icon frame, click the plus in the Export section on the right, choose SVG and click Export. Keep one thing about the format in mind: SVG only supports center strokes, so Figma simplifies inside or outside strokes on export. The icon looks the same, but the code gets more complex. If you need the lines to become regular shapes, choose Outline stroke from the right-click menu. Before calling the set done, check it:
- all six icons side by side in one row: the same visual weight, none of them shouting;
- next to the text of a button or a menu item;
- on light and dark backgrounds;
- in the interface: a 24 × 24 icon needs a 48 × 48 touch area around it, as Material Design recommends.
💡 Share the set in the community and ask for feedback on something specific: recognizability, consistent weight, or one icon that breaks the style.
You're not alone with these questions
We counted what people ask about most in our community. Learning, portfolios and Figma are the top three, and an icon set made in Figma covers all three at once.
Messages by topic in Spaceberry Community, July 2024 — November 2026. Keyword search.
Practice with a deadline and live feedback
The best teacher is a task with a deadline that other people see. That's why the community regularly runs design games: the same brief for everyone, a deadline and a vote.
Design game · January 2026
NAOMA website redesign
The academy's home page through the eyes of an applicant, a student and a teacher. Three finalists; the community chose the winner.
AI challenge · May 2025
A landing page made by AI
Logo, copy and visuals made only with AI tools. Four entries, an anonymous vote, and participants shared their prompts.
Workshop · April 2026
Figmosha: AI in Figma
The tool's author showed how to generate interfaces in Figma and analyze a design system.
Free. 1,504 designers are already in the community.
How to join: 1 minute
- 1
Tap the button
Telegram opens with the Spaceberry community.
- 2
Join
It's free: all you need is a Telegram account.
- 3
Introduce yourself
Say where you're starting from and ask your first question.
Questions and answers
Didn't find your answer? Ask it in the community.
Which app should I draw icons in?
Any vector editor works. For interface icons Figma is convenient: its free Starter plan has everything this guide uses, including frames, vectors, pixel snapping and SVG export. If you already work in Illustrator, the principles are the same: a grid, keyline shapes and consistent strokes.
What size should my icons be?
For interfaces, start with 24 × 24, the base size for system icons in Material Design. For dense desktop layouts, Material allows 20 × 20 with a 16 × 16 live area. Draw at 100% scale rather than drawing big and shrinking it: that way lines land on whole pixels.
Can I use ready-made icons instead of drawing my own?
Yes, and in real projects that's often the right call. Check each set's license: Material Symbols, for example, are distributed under the Apache 2.0 license. You need your own icons when a set lacks the sign you need, and they should follow the same grid and stroke rules.
How is an icon different from a logo?
A logo has to set a brand apart and be unique. A system icon, on the contrary, has to be recognizable and predictable: a magnifying glass means search in any app. So icons are about rules and consistency, logos about character. A logo can be drawn without a 24 × 24 grid, while an interface icon has to sit next to other icons and text. There's a separate [guide on logos](/en/guides/logo-design).
Is the Spaceberry community paid?
No, Spaceberry Community is completely free. It's supported by Spaceberry Foundation, a non-profit public organization. All you need to join is a Telegram account: tap the button on this page, introduce yourself and ask your first question. The community has 1,504 designers who share their work, give feedback and take part in design games with the same brief for everyone. Conversations are in Ukrainian.
Share your first icon set with the community
Join 1,504 designers who learn, share their work and play design games. Show your icon set and get feedback. The community talks in Ukrainian.
- Free
- 1,504 members
- Join in 1 click
Updated · Spaceberry Foundation
Sources:
- Material Design — Icons (system icons: grid, keylines, strokes)
- Material Design 2 — System icons
- Google Fonts — Material Symbols guide
- Apple Developer — SF Symbols
- Figma Learn — Design a search icon
- Figma Learn — Adjust your zoom and view options
- Figma Learn — Apply and adjust stroke properties
- Figma Learn — Export static designs from Figma
- Figma — Pricing