How To Create Website Icons

Use the shape tools in Adobe Illustrator to deftly combine vector shapes and design memorable icons for your next digital project.

For our sample project, we're designing a camera icon to use as a social media profile image, and for a button linking to a portfolio on a digital resume.

Launch Illustrator and click the Create new button, or press Control+N (Windows) or Command+N (macOS). Select the Web tab and enter a size on the right; we typed 400 px for Width and Height. Tip: It's helpful to work in a square format when creating icon designs.

Click Create.

First, you'll draw the camera body.

Select the Rectangle tool in the Tools panel. Click and drag a rectangle on the artboard.

Draw a second, smaller rectangle overlapping the top of the larger rectangle as shown.

You'll use Smart Guides to arrange the rectangles so their centers are aligned. Drag the center widget (circle in the center) of the smaller rectangle over the larger one until you see a vertical magenta guide.

Learn more about using Smart Guides in Illustrator.

Next, you'll add the flash.

Click and hold the Rectangle tool to access other shapes and select the Ellipse tool. Click and drag a circle until you see crosshair guides appear in the circle, indicating you are drawing a perfectly round circle. Release your cursor when it's a suitable size.

Tip: To resize the circle proportionally, press Shift and drag a corner widget.

If needed, drag the center widget to reposition the circle inside the larger rectangle.

Now, you'll create the lens shape.

With the Ellipse tool selected, hover over the larger rectangle until the word center appears. Press Alt (Windows) or Option (macOS) and drag a circle drawn from the center. Look for the crosshair guides and release your cursor when the circle is the right size.

Draw a smaller circle off to the side. Click in its center and drag it over the larger circle until you see the word intersect or center appear. Drop the smaller circle in place.

In this step, you'll merge the rectangle shapes.

Press V for the Selection tool. Click the large rectangle; then press Shift and click the small rectangle to select both. Select the Shape Builder tool and drag a line connecting both rectangles as shown.

Now, you'll apply a fill color and various stroke attributes to the shapes.

Press V to switch to the Selection tool. With the camera body selected, click the Fill Color swatch below Appearance in the Properties panel. Select the Swatches option on the right and click a color in the Swatches panel. Then, click the Stroke swatch and select None to remove the stroke.

Repeat for the flash circle: Apply a white fill and no stroke.

To color the lens, first select the outer circle; then press Shift and click the second circle to select it too. Apply no fill and a white stroke. Increase the Stroke weight to 5 pt.

You can round the shape corners to create a different look.

Select the camera body. Press A to switch to the Direct Selection tool, and drag a rounded corner widget to round all the corners at once.

If you need to resize your icon relative to the artboard, choose Select > All to select the entire icon. Press V to switch to the Selection tool. Press Alt+Shift (Windows) or Option+Shift (macOS) and drag a corner handle to resize it proportionally from the center. Finally, reposition the icon by dragging its center.

Choose File > Save. Give your project a unique name and save it in the Adobe Illustrator (AI) format. You can edit this file in Illustrator anytime.

To save a final version that's ready to post online, choose File > Export > Export for Screens. Choose a location and select the PNG format.

Tip: You can change the artboard size before exporting. Select Width or Height in the Scale drop-down menu and type a new size.

Click the gear icon and select Art Optimized (Supersampling) in the Anti-aliasing drop-down menu. Click Save Settings, and then click Export Artboard.