Design a search icon

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. 

1. Click the Zoom/view options in the upper-right corner of the toolbar.
2. 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:

1. From the Shape tools in the toolbar, select Ellipse or press O.
2. Hold Shift, click and drag to create a 16 W x 16 H ellipse.
3. Drag the ellipse to the top-right edge of the icon grid.

Add stroke and remove fill

1. Click the plus in the Stroke section.
2. Change the stroke weight to 2.
3. Click the minus in the Fill section to remove the fill.

Create the search icon handle

1. Press Command + (Mac) or Control + (Windows) to zoom into the bottom-left of the icon grid.
2. Select the  Pen tool from the toolbar or press P.
3. Hover over the point where the orthogonal line intersects with the center of the ellipse stroke.
4. Click on the frame to create the first point of the line.
5. Move down the line 4 pixels, and click the frame again to add the second point.
6. Click Done button in the toolbar or press Enter to exit vector edit mode.
7. Change the stroke weight to 2.
8. 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.

1. Hold Shift and select both the lens and the handle.
2. Click Union selection in the toolbar. Notice that the two layers have been combined into a layer called Union in the left sidebar.
3. 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!

What’s next?

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.