Small Icon sizes such as 16×16 pixels are often neglected in Icon Design, in my opinion though, this is where the real skill lies. In most cases simply scaling down a larger icon is not going to work and is often why for 16×16 pixel icons it is acceptable to drawn them in a slightly different,  more 2D style, than larger icon sizes.

When designing small icons like 16×16 pixels, I prefer to design them in Adobe Photoshop using the Pencil tool. Note that you cannot really just draw your icon like you can when you have more pixel space available to you, you actually have to build it from individual square blocks, so each pixel is very important. It is clear that with using pixels you can easily create horizontal and vertical lines and rectangular forms but everything else is hard. This is the reason we tend to draw a very small icons in the frontal projection.

The following icon design tutorial shows an example of a small folder icon drawn in Photoshop, optimised for 16×16 pixel size.

First, draw the shape outline.

Select a color to paint by setting the foreground color. From the Draw section in the toolbox, select the Pencil tool. Sets the size of the brush — 1 px, and then drag within the image to paint.

To draw a straight line, click a starting point in the image. Then hold down Shift and click an ending point.

Second, paint the inside.

To fill part of the image, select the area with one of the selection tools. Otherwise, the gradient fill is applied to the entire active layer. Select the Gradient tool. In the Tool Options bar, click the Linear gradient type. Set your foreground color to dark yellow and background to light yellow. In the image, position the pointer where you want to set the starting point of the gradient, and drag to define the end point.

 To constrain the gradient angle to a multiple of 45°, hold down Shift as you drag.

Next, draw the front part of the folder.

Now, draw the highlight and shadow.

Create a new layer. Draw a 1px white inner top border to create the highlight effect and set Opacity 50% for this layer. Then, in a new layer, draw a medium yellow inner bottom border and choose Multiply Blending mode.

You can see the different steps of the icon design process in the 1:1 animation below:

Need small icons?

Need help making 16 x 16 pixels icons look great? We can help!

Get tiny icons designed

Finally, group all layers.

In the Layers palette, select all your folder-icon layers and press Ctrl+G (Windows) or Cmd+G (Mac OS) to group all layers in a folder.

It is often necessary to draw an additional element or ‘glyph’ in addition to the main icon element in order to attach an additional function to the icon, such as ‘open’, ‘close’ etc.

So, create new layer and draw small arrow. Now you can just copy the basic icon like folder or page and placed for example an arrow over the top.

When you need to create a 16×16 or small version of a larger icon, simply scaling down can introduce a number of problems, the most common being an image with too much detail, that just looks blurry.

The perfect small icon should be created from scratch with the larger icon as a basic guide only. Remember to keep only the main components of the image (large, and, if necessary, secondary objects), any fine detail should be dropped if it is not critical to the overall image/concept.