Creating a Custom Button Icon in Figma
Iconography is a lost art. Illustration is super time-consuming, and there’s an abundance of resources out there already. So it’s not always worth reinventing the wheel. But we may need a specific art style, or the icon framework we’re using may not have the icon we want, so it’s worth diving into how illustration works in Figma a little bit. In this tutorial, we’ll learn how to draw and manipulate vectors in Figma as we create a heart-shaped icon to accompany the button.
Start by creating a 16×16 Frame, which will be the bounding box for our icon. Paul Wilshaw explains why it’s best to use 16×16 in his write-up on icon design.
Next, click on the + icon next to “Layout grid” in the Design panel to add a Grid to the Frame, click on the “Layout grid settings” icon, and then change the “Size” to 1 to make the individual square pixels clearer. To ensure the icon displays clearly at most sizes and screen resolutions, the objective will be to align the icon with the grid lines as much as possible.
Now for the icon itself. Start by creating a Rectangle shape and specifying the “W” as 16 and “H” as 10, and then click on the “Independent corners” icon before specifying the corner radii as 0, 5, 5, and 0 in that order (that is, clockwise starting from the top-left corner).
Next, duplicate the Layer and change the “Rotation” to 90.
After that, snap the Layer to the left edge of the Frame and the other Layer to the bottom edge of the Frame, and then, with both Layers selected, click on the “Union selection” icon in the horizontal toolbar to fuse the Layers into a single Layer.
Change the “Rotation” to 45—and that’s the heart shape done.
Before we make the heart shape fit into the Frame, add a Stroke (border) by clicking on the + icon next to “Stroke” in the Design panel, choosing 2 for the “Stroke width”. Later on, this will offer us the opportunity to use outlined icons as well as filled icons.
Note: to display icons at a different size, it’s best to scale them rather than resize them. The difference is that the Scale tool—under the “Move tools” icon in the horizontal toolbar (K)—also scales sizes such as Stroke width proportionally, whereas resizing doesn’t affect sizes such as Stroke width.
Next, right-click on the icon, and then choose Flatten (command + E / ctrl + E). We’ll see that, while the Rotation is no longer in effect, the Layer remains how we set it, which means that we can now resize it horizontally and vertically instead of diagonally (which yields an odd effect).
After that, click on the “Constrain proportions” icon in the Design panel, set the largest dimension (which should be “W”) to 16, click on the “Constrain proportions” icon once more (so that the dimensions are no longer constrained), round the “H” down to 14 (so that the icon only fills full pixels), drag-snap it into the center of the Frame, and then click on the — icon in the Fill section to remove the Fill.
When designing icons, we should try to use all available Frame space so that multiple icons can be aligned horizontally or vertically if needed. However, this isn’t always feasible, so it’s okay to resize icons slightly when necessary. Doing so doesn’t affect Stroke width, so we won’t need to worry about them looking inconsistent. To ensure that an icon scales with a Frame when we resize the Frame, change the “Left” and “Top” to “Scale” in the Design panel (in the Constraints section).
Finally, select the Frame and then click on the “Resize to fit” icon to trim the negative space, thus resizing the Frame.
We now have complete icon! We can also try our hand at drawing from scratch and/or using shapes and editing them. However, it does require quite a bit of skill and time to learn. Icon design itself is also very time-consuming, especially when there are so many free design resources out there. Figma has a video tutorial that walks us through this, but the Font Awesome plugin is probably the best solution for implementing icons today.
This article is a short extract from The Designer’s Guide to Figma, available on SitePoint Premium.
