5 Ways to Create a Settings Icon

Learn to use an array of Illustrator features through this exercise

More in the iconography series:

The gear has become a ubiquitous symbol for settings in our digital applications.

Left to right, top to bottom: Google Calendar, Lyft, Dribbble, Facebook, ClassPass, Seamless, Telegram, Reddit, Duolingo, Dropbox, Instagram, Headspace, PayPal, Transit, WeChat

There are many interesting ways you can create this icon. We’ll walk though 5 of them in Adobe Illustrator, to pick up techniques you can take forward to any vector drawing.

(Keyboard shortcuts are shown in parentheses.)

Method 1: Rounded Star

This simple method is effective for a gear with pointed teeth.

Select the Star Tool and click anywhere on your canvas.

Play with the parameters.

Round the corners—with the Direct Selection Tool (A) selected, hover over the shape. Drag one of the little circular handles to modify all corners. Double click a handle to specify a precise corner radius.

Draw a smaller concentric circle with the Ellipse Tool (L) to create the eye.

You can draw the circle free-form or L + click anywhere on the canvas to specify the exact width and height.

Use the Transform panel to make any adjustments to the dimensions.

With both shapes selected, clean up the icon by subtracting the smaller circle from the rounded star (Pathfinder panel > Minus Front).

Voilà.

Method 2: Zig Zag

Let’s try something different to get to a similar effect.

Draw a circle (L) with a fill, no stroke.

Select the circle and apply a Zig Zag Effect (Effect > Distort & Transform > Zig Zag).

Play with the parameters with Preview toggled on.

Now we’ll try a smaller eye. Draw a concentric circle.

Select both shapes. Because we have used an effect, we’ll have to expand the appearance before we merge shapes. Go to Object > Expand Appearance.

Why? Effects are dynamic and non-destructive, which means you can go back and change the parameters at any time. Because of this, effects need to be expanded before performing further shape manipulation.

Similar to Method 1, we’ll clean up the icon by subtracting the smaller circle from the larger shape (Pathfinder panel > Minus Front).

Method 3: Additive Rotation

Here’s a more complex method that’ll allow us more customization in the gear teeth. We’ll go for a sharper look this time.

Draw a circle with a fill, no stroke.

Draw a rectangle with the Rectangle Tool (M) on top, centered to the circle.

'Bulge’ the rectangle. There are many ways to do this. You can select the rectangle and use the Bulge Effect (Effect > Warp > Bulge).

My preferred method is to add anchor points and use the Direct Selection Tool (A) to select specific ones to manipulate.

To add additional anchor points that are of equal distance from the current ones, select an object and use Object > Path > Add Anchor Points. You can also use the Pen Tool (P) to manually add points.

With your shape selected, press R for the Rotate Tool then option + click the center of the circle to set that as the reference point. The Rotate panel will come up.

Choose an angle. A 45° angle will create a gear with 8 teeth (360° divided by 8 is 45°).

Here’s the fun part.

Press Copy (not OK). This will copy your shape with the angle and reference point you specified.

Repeat the action by pressing Command + D (macOS) or Ctrl + D (Windows). Do this twice to complete the circle.

Alternatively, you can use the Transform Effect (Effect > Distort & Transform > Transform) to achieve the same rotational copies.

Effects are non-destructive; whenever you apply one, you can edit it in the Properties panel.

Time to clean up our shapes and add the inner circle.

Combine all shapes with Pathfinder panel > Unite.

Draw a smaller concentric circle.

Use Pathfinder panel > Minus Front to subtract the smaller circle from the larger shape.

Experiment! Different source shapes yield different end results.

Method 4: Subtractive Rotation

Method 4 is similar to Method 3.

Draw a circle with a fill, no stroke.

Draw a small circle aligned to the top.

Select the small circle, press R for Rotate, then option + click the center of the circle. Let’s try 6 teeth this time (360°/6). Illustrator will do the calculation for you if you type “360/6” directly.

Press Copy.

Repeat the action by pressing Command + D (macOS) or Ctrl + D (Windows) 4 times.

Use Pathfinder panel > Minus Front to subtract the small circles from the big circle.

Let’s round the corners. With the Direct Selection Tool (A), click + drag the little dots to adjust the corner radiuses.

Draw a smaller concentric circle for the eye and subtract the smaller circle from the larger shape.

A few more ideas (try different shapes):

Method 5: Intersect

For the last method we’ll bring back the Star Tool.

Draw a star.

Draw a concentric circle on top.

Select both shapes. Pathfinder panel > Intersect.

Draw another concentric circle on top like so:

Pathfinder panel > Unite. Now we have a silhouette of a gear.

You know what to do — draw a third concentric circle and subtract the smaller circle from the larger shape.

More with this method:

Experiment to Find Your Flow

Hope you learned a trick or two from this exercise. Similar methods may be applied in UI-focused vector software like Sketch or Figma, though Illustrator is more precise.

From here, explore different icon styles.

Bonus

Some more food for thought…

2 Squares = 1 Star

You can create an 8-pointed star by drawing 2 squares. Shift + drag with the Rectangle Tool (M) to create a square, select and shift + drag with the Rotate Tool (R) to rotate in 45° increments.

Roundabout Rounding

Once upon a time, I may have hacked rounded corners by adding a stroke — overcomplicated and imprecise. Oof.

Scribble to Shape

If you’re using a tablet or touch interface, you can use the wacky Shaper Tool (shift + N) to non-destructively combine or subtract shapes. Scribble over like so to ‘delete’ the desired areas. The original shapes will be preserved.

🎶 Written to the sounds of: Mogwai

🙏 Thanks to: Toby Fried, Tate Chow, Christine Lee, Pawel Piekarski, and Monica Chang

Designer/writer. Brand, product, systems. • helenazhang.comdribbble.com/minoraxisphosphoricons.com