Tips for designing tiny icons? (16px x 16px)


I googled, but didn't seem to be anything out there.

I need to design a set of icons that will be functional at really tiny size (16px x 16px). I realized that a lot of the icons I designed starts out looking nice, but will look unrecognizable when I resize it at 16px x 16px.

I'm just wondering if anyone has any tips in the dos and don'ts for designing tiny things? To make it icons look good and functional at 16 x 16.

5/20/2015 5:21:00 PM

Accepted Answer

16x16 is a very small small amount of space for creating anything with detail. This is the size of favicons you see at the top of your browser window. You will notice how simplistic the icons are.

Here are some ideas to think about

  • 1-2 colors max, if using 2 colors, make sure they contrast like B&W (This is only a suggestion, you can certainly use more colors. But the more colors you use, the harder it may be to distinguish the different objects.)
  • Simplified shapes, make sure you use basic shapes to convey your icon and don't use too many.

Take font awesome home icon. The icon uses very basic shapes to convey the image of a home.

fa home icon

  • One style that might work for you is designing line-art icons. This technique uses thin lines for all parts of the icon design. If you place lines to close together, then the details might blend together and hard to distinguish.
5/20/2015 5:35:00 PM

Alright I'll try to help you out, in Illustrator.

First recommendation is to split screen when you design. Start with settings:

Illustrator New Document Settings

Now do: - Window → New Window. - Window → Arrange → Tile

Set up one of the windows as Actual Size and work in the other:

Illustrator Split Screen