How to Design Mini Icons

Numbers of people have asked me how to design my popular Mini Pixel Icon pack. In fact, they are relatively easy. All you need is just some basic Photoshop skills. Here I will show you how to use the Pencil tool to design pixel icons, and then re-use them to create a full collection. This is the technique that I used to create over 320 icons within a day.

Download Photoshop file

1. Create a new document

In Photoshop, create a new document 14 x 14px size with transparent background.

2. Draw shape outline

Use the Pencil tool, select 1px brush from the palette. Pick a dark gray color and start drawing the outline of the page icon. To draw a straight line, first click at the starting point, then hold down shift key and click at the ending point.

Tips: At any time if you want to erase the pixels, use the Eraser tool, select Pencil mode and 1px brush size.

3. Base gradient

Make a selection of the empty cutout by the Magic Wand tool. Create a new layer. Set your foreground color to light gray and background to white. Use Gradient tool, drag from top corner to lower corner diagonally.

4. Highlight and shadow

Create a new layer. Draw a 1px white inner top border to create the highlight effect. Then, draw a medium gray inner bottom border.

5. Group all layers

In the Layers palette, select all layers and press Cmd+G to group all layers in a folder.

6. Draw a pencil

Again, start drawing the outline first and then fill the inner area with either solid color or gradient. When you are done, group these layers in a separate folder.

Tips: If you want to have consistent color throughout the icon set, store the colors that you have used in the color swatches.

7. Re-use them

Here shows how I re-used the layer groups to create entire collection:

8. Export for web

After you’ve done entire set, toggle (invisible / visible) the layer groups and save them for web (Cmd+Alt+Shift+S).

Too lazy to do this tutorial? You can download my free mini icon set.

Delicious Stumbleupon Digg

Design Process of WDW Startdrawing.org

Comments

There are 61 comments (+Add)

1 SasaVtec http://www.directorymix.com
July 30th, 2007 at 4:55 am

This is a very nice tutorial thank you
2 Nathan Chapman http://pixl.utopiaplanitia.org
July 30th, 2007 at 6:44 am

Makes sense what you’ve done. Good, I like
3 Brendan DeBeasi http://dealitin.com
July 30th, 2007 at 11:06 pm

THanks, this is really great stuff you’ve been doing, and I love almost all of your work!
4 Ines http://www.purepleasuredesign.com
July 31st, 2007 at 4:33 am

Great tutorial … very useful!
5 srinivasarao http://www.splitcolors.com
July 31st, 2007 at 4:44 am

looks very nice and gr8 job
6 Katie http://www.pibby.com
July 31st, 2007 at 10:52 pm

Great tutorial, will definitely give it a try sometime!
7 Craig http://www.craigsoup.com
August 1st, 2007 at 9:43 am

Great tutorial! I don’t know why I thought it should be harder than this.
8 Anon
August 2nd, 2007 at 1:27 pm

Verrry Useful!
9 no name
August 3rd, 2007 at 6:42 am

nice tutorial!!! Good job
10 orlin
August 3rd, 2007 at 3:11 pm

Thanks — I’ll give it a try…
11 Melfina http://celestial-star.net
August 3rd, 2007 at 4:03 pm

That’s a nice tutorial. I find making a pixel star the most difficult icon, I can’t manage to make a proper one, it always looks anything but a star.

P.D: This is such a gorgeous design! you did an amazing job!
12 patatomic http://www.patatomic.com
August 7th, 2007 at 1:37 am

Have you tried doing this in Fireworks? I know that familiarity is a big deal when choosing a tool, but I can just about promise you that once you use Fireworks you may never go back to Photoshop for this kind of work.

Great stuff, by the way. Keep ‘em coming.
13 CrazyLeaf http://www.crazyleafdesign.com/blog/
August 10th, 2007 at 2:51 pm

Interesting tutorial.
14 Joris http://www.33xit.fr
August 11th, 2007 at 9:05 pm

Great !
15 Mellie
August 14th, 2007 at 5:36 am

nice tut!
16 Pedro Cunha http://www.wedgeworkx.com/
August 17th, 2007 at 6:40 am

Great!
17 Jenny http://thesocalledme.net
August 19th, 2007 at 10:54 pm

Awesome. Thanks.
18 Michael http://www.aquilino.at
August 22nd, 2007 at 4:40 am

thx very nice!
19 markus http://www.webtagebu.ch
August 22nd, 2007 at 7:31 am

Very Nice!
20 Nathan Nash http://www.nathan-nash.com
August 26th, 2007 at 4:45 pm

very nice tutorial these will be fun to make.
21 John
August 30th, 2007 at 4:49 pm

I love your Mini Pixel Icons. I used them for an intranet system, and they were so nice to work with!
Now I’m trying to make my own Mini Pixel Icons with this super-tutorial!
22 BoltClock http://blog.NOVALISTIC.com
August 31st, 2007 at 10:51 am

Cool show/hide layer trick you got there sir I’ll be sure to give this a try when redesigning my site.
23 PoxLine http://www.poxline.com
September 1st, 2007 at 10:21 am

Oh god !, it’s so nice tut. ! Thank so much !
24 eshark http://esharkdesign.com
September 13th, 2007 at 12:52 am

320 icons within a day!! Man.. you’re really awesome! Great tutorials.. for sure I’ll try this one out. Thanks!!
25 Daniel
September 16th, 2007 at 12:28 pm

NEED TO RESIZE?

Go to image > image size > choose 700% > check resample image > select nearest neighbour (best for hard edges).

No need to put up with tiny gifs!

Excellent tutorial, I’m here trying out all sorts, this has really got me into Pixel Art, thanks.
26 Darren Summers http://darrensummers.co.uk
September 21st, 2007 at 11:08 am

Great tutorial, I’ve wanted to get into icon design for a quite a while now. This is a great start.

Thanks
27 GrantMc Designs http://www.grantmc.co.uk
October 3rd, 2007 at 2:53 pm

great tutorial, i don’t normally comment on this site but i have been looking at it for a couple of weeks now, i love the design!

great content, Great Design, Great people!
28 rAfA vAlDéS
October 4th, 2007 at 1:20 pm

very cute tutorial, wonder for my learning in Photoshop, but sometimes i get confused cuz you’re on Mac and me on Windows, but i’m learning Cmd = Ctrl and Opt = Alt.
29 Cheryl Hau
October 18th, 2007 at 6:52 am

Hi, can you send me some website on how to make design i find alot of website but it does not let me design online on computer please send me some website you can email me any time you what thank you. Please write your name so i will know who email me! Thank You
30 Azat http://deleted
November 30th, 2007 at 1:22 pm

THANKS I’ll try do this one!!
31 Hatkirby http://www.fourisland.com
December 3rd, 2007 at 4:19 am

This tutorial…. I’m amazed. Wow. I used it to draw the little icons at the top of my website (www.fourisland.com) and NO-ONE yet believes I drew them! Thanks so much for this tutorial!
32 Dodik http://wikna.biz
December 17th, 2007 at 8:49 pm

cool! I I will make an attempt repeat it. now and for me to turn out
33 Joomlabased http://www.joomlabased.com
January 4th, 2008 at 4:29 pm

I dont have any problem square corners, my problem with round corners I can’t create rounded corner icons .
34 readywpthemes http://readywpthemes.com
January 11th, 2008 at 7:28 am

Thanks for this great tutorial
35 Lazer Kesim http://www.somellazer.com/
January 25th, 2008 at 12:44 pm

hey you guyss,,this is a perfect tutorial thanks for that
36 Webmaster Search http://www.7-24.info
January 31st, 2008 at 8:47 pm

Just started to know your website.. it is a shame as a webmaster to have found you such a late stage.
37 Daily Common Sense http://www.dailycommonsense.com
February 18th, 2008 at 2:16 am

I really like your blog! Keep up the good work!
38 yoxx http://yoxx.blogspot.com
February 21st, 2008 at 12:49 am

very cute tutorial… thanks mate
39 hasan
February 29th, 2008 at 7:57 am

ia am a web writer
40 Dragolux http://www.tutorialwow.com/
March 3rd, 2008 at 8:58 pm

Very nice! Yet another great tutorial.
41 Kanal Açma Araçları http://www.berismakina.com/
March 5th, 2008 at 4:28 am

great tutorial very thanks to you..
42 Ze cesar
March 9th, 2008 at 9:54 am

Very nice tutorial. I´ll try to make my own set now. Thank YOU for the hints.
43 Mobil Hikaye http://www.mobilhikaye.com
April 12th, 2008 at 3:18 am

very good
44 Recabron
April 19th, 2008 at 2:04 pm

Thanx. New stuffs in photoshop always are welcome.
45 Human technology http://www.designforinteraction.eu/index.php/nl/Human-technology.html
April 19th, 2008 at 3:44 pm

Although I am not a fan of the ‘pixelish’ icons I always wondered how they are made. I didn’t expect them to be made in photoshop. Thanks.
46 php-web-developer http://www.php-web-developer.net
May 14th, 2008 at 8:39 am

since I am programmer, after reading this article tried this article and created some small icons..Really a great tutorial.keep it up.
47 SerpantiN http://sapehelp.ru
May 15th, 2008 at 3:56 am

Sweet. Thanks!
48 k00pa http://www.pelikoira.net
May 25th, 2008 at 5:40 am

Thanks for great tutorial!

It is so fun and easy to make icons! I must make my own icon pack!
49 sohil http://sohil.creative.googlepages.com/e-friendz
May 28th, 2008 at 6:39 am

fantastic
50 rukia_9
June 3rd, 2008 at 1:55 pm

wooooooooooow
soooo cuuuute ^^
thanks a looooot
51 Ahmed http://www.moondust.be/blog/
July 4th, 2008 at 5:38 pm

Pretty neat! You make it seem so easy.
52 JRSofty http://jrsofty1.stinkbugonline.com
July 9th, 2008 at 2:23 am

Thanks for putting me on the right track.
53 Iexhica http://superyessicanova.blogspot.com/
July 10th, 2008 at 4:07 pm

Muy buen tutorial!!!

Gracias por publicarlo
54 kral oyun http://www.rsoyun.com
July 13th, 2008 at 11:50 pm

Thanks for lesson.
55 bheema
July 18th, 2008 at 6:18 am

Great tutorial … very useful!
56 anjum
July 28th, 2008 at 6:23 am

wow good
57 Tom http://tomdoerr.net/blog
July 30th, 2008 at 11:45 am

Thanks for this!
58 People Search Dude http://www.spokeo.com
July 31st, 2008 at 12:50 pm

OMG! Right on…nice!
59 Splavek http://splavek.ic.cz
August 7th, 2008 at 3:13 am

Good lesson. Thanks.
60 Skezo
August 7th, 2008 at 8:29 am

Thx, nie tutorial, good start into icon-design
61 Baby boobs
August 15th, 2008 at 9:29 pm

omg… i really didnt now this
they should of said that before
im going to do a icon right now
wow!

(:
smile