Know the tools

—
Frame & Grid

In Figma, the Frame acts as your canvas. Press F or select the Frame tool to create one, then use it like an artboard for your icon. The common frame size for icons are 14x14px, 24x24px, or 32x32px.

Grids help align icon elements with precision. Turning on a pixel or layout grid lets you snap shapes into place more easily. It helps you keep spacing clean and consistent across all icons.

Enable “Snap to pixel grid” to keep every point sharp and aligned. It helps avoid blurry or misaligned edges when exporting your icons.

—
Shapes & Pen Tool

Most icons begin with simple geometric shapes: rectangles, circles, and lines. These can be quickly created using Figma’s shape tools, either from the tool bar or with shortcuts like R for rectangle or O for ellipse. They’re the foundation for most grid-aligned icons.

For more custom or organic forms, use the Pen tool (P). It lets you plot paths point by point, giving you full control over curves and angles. It’s great for drawing unique silhouettes like arrows or leaves. It takes practice, but once mastered, it opens up endless possibilities.

—
Corner Radius, End Points, and Joins

Small details like corners and stroke ends can change how an icon feels. Figma lets you adjust the corner radius to make shapes smoother and more approachable (rounded corners are common in modern icon sets).

You can also control how strokes begin and connect: rounded, sharp, or beveled. Rounded ends feel friendlier, while sharp joins feel more technical. These subtle tweaks can shift the overall tone of your icons, so experiment and stay consistent.

—
Boolean Operations

Boolean operations let you combine or subtract shapes to create new forms. Figma offers four: Union, Subtract, Intersect, and Exclude. These are especially useful when designing icons that go beyond simple shapes, like cutting out a circle to make a gear or forming an arrow from basic parts.

They’re non-destructive, so you can still adjust the shapes after combining them (unless you flatten). This makes it easy to tweak your design without starting over and is perfect for creating clean, complex icons efficiently.

—
Component & Variants

Turning icons into components helps you stay consistent and save time. When you update the main component, all instances across your design update too. No need to redo each one manually.

Variants let you group different states of the same icon (like filled and outlined) under one component. This keeps things tidy and makes switching between styles easier. Together, components and variants help you manage a growing icon library more efficiently.

—
Auto layout

While not essential for drawing icons, Auto layout is useful for organizing and previewing them especially when building icon sets. It helps you create responsive frames that automatically adjust spacing, alignment, and padding as you add or arrange icons.

Use Auto layout to keep rows and columns aligned consistently. This makes it easier to review spacing, compare proportions, and ensure your icons feel balanced when viewed as a group.

—
💡 Pro Tip: Use shortcuts and plugins

Shortcuts in Figma can speed up your workflow and cut down on repetitive clicks. They’re especially useful for quick actions like switching tools or duplicating shapes. You don’t need to memorize everything, just start with basics like rectangle (R), ellipse (O), and pen (P). Over time, they’ll become second nature and help you stay in the flow.

Plugins can also make icon design faster and more consistent. They automate tasks like resizing, exporting, or even creating animations. Start with essentials like radial rotation, vector splitting, or SVG export. The right plugins save time and let you focus more on design than file management.