How to Create Icons in Figma: Step-by-Step Guide
To create an icon in
Figma, start by using the Shape and Pen tools to draw your design on the canvas. Then, customize colors and strokes, group elements if needed, and export your icon as SVG or PNG using the Export panel.Syntax
Creating an icon in Figma involves these main steps:
- Shape tools: Use rectangles, circles, lines to build basic parts.
- Pen tool: Draw custom vector paths for unique shapes.
- Grouping: Combine multiple shapes into one icon.
- Styling: Adjust fill colors, strokes, and effects.
- Export: Save your icon as SVG, PNG, or other formats.
text
1. Select Shape tool (R for rectangle, O for ellipse) 2. Draw shapes on canvas 3. Use Pen tool (P) to draw custom paths 4. Select elements and press Ctrl+G (Cmd+G on Mac) to group 5. Style fills and strokes in right panel 6. Click Export button to save icon
Example
This example shows how to create a simple home icon using basic shapes and the pen tool.
text
1. Press <code>R</code> and draw a square for the house base. 2. Press <code>P</code> and draw a triangle on top for the roof. 3. Select both shapes and press <code>Ctrl+G</code> (or <code>Cmd+G</code>) to group. 4. Change fill color to blue and stroke to black. 5. Click <code>Export</code> and choose SVG format.
Output
A grouped icon of a blue house with a black outline, ready to use in designs.
Common Pitfalls
- Not grouping shapes can make moving or resizing the icon difficult.
- Using too many small shapes can clutter the icon and reduce clarity.
- Forgetting to set consistent stroke widths and colors can make the icon look unprofessional.
- Exporting at the wrong size can cause pixelation or blurriness.
text
Wrong way: - Drawing separate shapes and exporting without grouping Right way: - Group shapes with Ctrl+G before exporting
Quick Reference
| Action | Shortcut / Location | Description |
|---|---|---|
| Rectangle Tool | R | Draw rectangles or squares |
| Ellipse Tool | O | Draw circles or ellipses |
| Pen Tool | P | Draw custom vector paths |
| Group | Ctrl+G / Cmd+G | Combine selected shapes into one group |
| Fill Color | Right panel > Fill | Set the inside color of shapes |
| Stroke Color | Right panel > Stroke | Set the outline color and width |
| Export | Right panel > Export | Save icon as SVG, PNG, etc. |
Key Takeaways
Use shape and pen tools to build your icon design in Figma.
Group related shapes to keep your icon organized and easy to edit.
Consistently style fills and strokes for a clean, professional look.
Export icons at the correct size and format for your project needs.