Create Vector Icons in 8 Easy Steps

I created a series of link icons while working on usability improvements for ClickTime's help system.

Look at my icons!

Look at my icons!

Making icons proved so simple and effective that I immediately started replacing other stock ClickTime icons with my own.

Even more icons!

Even more icons!

And a gif!

And a gif!

My goal is create a completely custom icon set that seamlessly integrates with the rest of ClickTime and I can resize or remix should the need arise (like creating graphics for screens with different pixel densities).

I think you should try to create your own icon set. The following is a 6 minute screencast to teach you how.

Screencast

Illustrated Transcript

Introduction

Hello and welcome to the first screencast for StasSays.com. I’m Stas, and today I’ll teach you to make simple but pretty vector icons.

I’ll be using Fireworks, but you can use other vector graphic editors like Illustrator or Inkscape.

By the time you’re done, you’ll have a series of hammer icons that look like this.

hammer icon vectors.fw.png

Let’s get started!

1. Create a new document

Create a new document with a canvass 500px square with a resolution of 72px per inch and a light grey canvas color.

 

0 canvas.png

2. Draw a circle

Select your ellipse tool and draw a circle 128px in diameter. You’re starting with a large drawing because it’s easier to manage and scaling images down generally produces better results than scaling images up.

Select your circle and apply a radial gradient to it. Don’t worry about the color yet, you’ll be creating a color palette later.

Take the center of the gradient and move it to the Northwest edge of your circle and extend the gradient to the Southeast edge of your circle in a 45 degree angle. This doesn’t need to be exact.

1 gradient.png

3. Create a color palette

Draw three squares on the canvas. Select one of the squares and fill it with a relatively dark color such as #29313C, which is a muted blue. This is our parent color.

Next create a child color a shade lighter than the parent color. Select another square and fill it with the parent color (#29313C). Reopen your fill color selector and open your HSB (or HSL, depending your editor) color tool, which is Hue, Saturation, and Lightness, and one of the ways to represent and manipulate colors.

To make something lighter by a shade, increase the color’s lightness by about 37 points. This doesn’t need to be exact, but a change of 30 to 60 points will work well. #576B89 is our lighter shade.

Finally create child color a shade darker than the parent color. Select the final square, apply the parent color (#29313C), open the HSB tool, and reduce the color’s lightness by 37 points. In this case, it brings the color to a pure black (#000).

This is our color palette.

2 palette.png

4. Apply colors to gradient

Select the circle and open up the gradient properties. Apply the light color (#576B89) to the center of the gradient and the parent color (#29313C) to the edge of the gradient using the eyedropper and the color squares you just created.

3 colored gradient.png

5. Draw a shape inside the circle

Copy the circle, shrink its diameter to 100px, and change its background color to red.

Take the two circles and center them vertically and horizontally on each other.

 

4 red circle.png

 The red circle is a temporary tool that defines the outer boundaries of the shape you’re drawing.

Select your rounded rectangle tool, draw the hammer head, and fill it with white.

5 hammer head.png

 Draw the handle of your rectangle and fill it with white as well. Finally center the handle horizontally on the head and make small size and position adjustment until everything fits nicely within the red circle. 

6 hammer handle.png

Select the hammer head and handle and combine their paths with a union. They are now one shape.

7 combined path.png

Finally, using your transformation tools, rotate the hammer counterclockwise by 45 degrees to make it a little more interesting. If the rotation shifts the hammer a bit, position it back into the boundaries of the red circle.

8 rotation.png

Now that you've finished drawing the hammer, delete the red circle.

6. Apply an inner shadow to the hammer

Select the hammer and apply an inner shadow to it, creating an indentation effect. The shadow color is the darkest color in your palette (black in this case), it’s distance is 4px, it’s softness is 8px, and it’s transparency is 65%.

9 hammer shadow.png

7. Add an outline and a drop shadow to the circle

Select the circle and give it a white outline 6px wide.

10 circle outline.png

Apply a drop shadow to the circle that matches the properties of the hammer’s inner shadow. The drop shadow color is black, it’s distance is 4px, it’s softness is 8px, and it’s transparency is 65%.

11 circle shadow.png

8. You’re done! Scale and export!

Congratulations, you just created a pretty awesome icon. You can scale this icon to any size you need and use it as a template for a variety of future icons. You can download my sources and the compressed, web-ready 128px, 64px, 32px, and 16px hammer icons below. Feel free to use them directly or as templates for your own designs. Thanks for watching.

hammer icon vectors.fw.png

Bonus Round

Whenever you scale your icons I recommend digging into them and making a few tweaks to their effects. Something that looked distinct and elegant at 128px might get lost at 16px.

I recommend exporting your icons as 24bit PNGs and using tinypng.org to compress them. This will preserve transparencies (important for shadows), reduce compression artifacts, and create relatively small file sizes.

Downloads

Vectors and web-ready hammer icons