In this project, we’re going to make a search icon. If you follow along step-by-step, your icon will look like this:
Before you begin
You’ll need a 24 x 24 icon grid to complete this tutorial. You can find icon grid templates on the Figma Community or you can check out our Create a reusable icon grid mini project if you'd like to make your own.
You'll also want to make sure the Pixel grid and Snap to pixel grid settings are enabled to help align the elements of the search icon.
- Click the Zoom/view options in the upper-right corner of the toolbar.
- Make sure there is a check next to the Pixel grid and Snap to pixel grid settings. If there isn't, click each setting to enable them.
Create the search icon lens
Let’s start by creating an ellipse inside the frame:
- From the Shape tools in the toolbar, select Ellipse or press O.
- Hold Shift, click and drag to create a 16 W x 16 H ellipse.
- Drag the ellipse to the top-right edge of the icon grid.
Tip: Holding Shift helps maintain the proportions of the shape. You can always manually update the size of your shape by selecting the shape and dragging the handles of the bounding box, or updating the height and width using the settings in the right sidebar.
Add stroke and remove fill
- Click the plus in the Stroke section.
- Change the stroke weight to
- Click the minus in the Fill section to remove the fill.
Create the search icon handle
- Press Command + (Mac) or Control + (Windows) to zoom into the bottom-left of the icon grid.
- Select the Pen tool from the toolbar or press P.
- Hover over the point where the orthogonal line intersects with the center of the ellipse stroke.
- Click on the frame to create the first point of the line.
- Move down the line 4 pixels, and click the frame again to add the second point.
- Click Done button in the toolbar or press Enter to exit vector edit mode.
- Change the stroke weight to
- Change the end points of the line to Round.
Combine the shapes using a boolean operation
Now, let’s combine the lens and the handle so that they form a single shape.
- Hold Shift and select both the lens and the handle.
- Click Union selection in the toolbar. Notice that the two layers have been combined into a layer called Union in the left sidebar.
- Center the object using the alignment settings in the right sidebar. Now the icon is centered to the frame, within equal paddings on all sides.
Double-click on the frame name, rename it to “search-icon” and you’re all done!
Why use a boolean operation instead of a group? If you use a group to combine the layers, you’ll notice that something is off. When you select the grouped object, the bounding box does not include the stroke of the handle. This might not look like a big deal, but when you try to align the grouped object to the center of the frame, the padding is not equal on all sides. Using a boolean operation ensures that all parts of the combined shape are contained within the bounding box.
Congratulations on creating your search icon! If you want to challenge yourself, try making this pencil icon using the same things you learned in this tutorial.
If you want to learn more about the visual guidelines and best practices for icon design, check out Material Design's icon documentation →