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.

step 1

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.

step 2

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.

step 3

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.

step 4

5. Group all layers

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

step 5

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.

step 6

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:

step 7

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).

step 8

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


Jul 30, 2007 at 4:55 am

This is a very nice tutorial thank you :)

Nathan Chapman
Jul 30, 2007 at 6:44 am

Makes sense what you’ve done. Good, I like

Brendan DeBeasi
Jul 30, 2007 at 11:06 pm

THanks, this is really great stuff you’ve been doing, and I love almost all of your work!

Jul 31, 2007 at 4:33 am

Great tutorial … very useful!

Jul 31, 2007 at 4:44 am

looks very nice and gr8 job

Jul 31, 2007 at 10:52 pm

Great tutorial, will definitely give it a try sometime!

Aug 1, 2007 at 9:43 am

Great tutorial! I don’t know why I thought it should be harder than this.

Aug 2, 2007 at 1:27 pm

Verrry Useful!

no name
Aug 3, 2007 at 6:42 am

nice tutorial!!! Good job

Aug 3, 2007 at 3:11 pm

Thanks — I’ll give it a try…

Aug 3, 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!

Aug 7, 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.

Aug 10, 2007 at 2:51 pm

Interesting tutorial.

Aug 11, 2007 at 9:05 pm

Great !

Aug 14, 2007 at 5:36 am

nice tut!

Pedro Cunha
Aug 17, 2007 at 6:40 am


Aug 19, 2007 at 10:54 pm

Awesome. Thanks.

Aug 22, 2007 at 7:31 am

Very Nice!

Nathan Nash
Aug 26, 2007 at 4:45 pm

very nice tutorial these will be fun to make.

Aug 30, 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!

Aug 31, 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.

Sep 1, 2007 at 10:21 am

Oh god !, it’s so nice tut. ! Thank so much !

Sep 13, 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!!

Sep 16, 2007 at 12:28 pm


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. :)

Darren Summers
Sep 21, 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.


GrantMc Designs
Oct 3, 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!

rAfA vAlDéS
Oct 4, 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. ;)

Cheryl Hau
Oct 18, 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

Nov 30, 2007 at 1:22 pm

THANKS I’ll try do this one!!

Dec 3, 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 ( and NO-ONE yet believes I drew them! Thanks so much for this tutorial!

Dec 17, 2007 at 8:49 pm

cool! I I will make an attempt repeat it. now and for me to turn out

Jan 4, 2008 at 4:29 pm

I dont have any problem square corners, my problem with round corners I can’t create rounded corner icons :( .

Jan 11, 2008 at 7:28 am

Thanks for this great tutorial :)

Lazer Kesim
Jan 25, 2008 at 12:44 pm

hey you guyss,,this is a perfect tutorial thanks for that

Webmaster Search
Jan 31, 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.

Daily Common Sense
Feb 18, 2008 at 2:16 am

I really like your blog! Keep up the good work!

Feb 21, 2008 at 12:49 am

very cute tutorial… thanks mate

Feb 29, 2008 at 7:57 am

ia am a web writer

Mar 3, 2008 at 8:58 pm

Very nice! Yet another great tutorial. :)

Kanal Açma Araçları
Mar 5, 2008 at 4:28 am

great tutorial very thanks to you..

Ze cesar
Mar 9, 2008 at 9:54 am

Very nice tutorial. I´ll try to make my own set now. Thank YOU for the hints.

Mobil Hikaye
Apr 12, 2008 at 3:18 am

very good

Apr 19, 2008 at 2:04 pm

Thanx. New stuffs in photoshop always are welcome.

Human technology
Apr 19, 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.

May 14, 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.

May 15, 2008 at 3:56 am

Sweet. Thanks!

May 25, 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!

May 28, 2008 at 6:39 am


Jun 3, 2008 at 1:55 pm

soooo cuuuute ^^
thanks a looooot

Jul 4, 2008 at 5:38 pm

Pretty neat! You make it seem so easy.

Jul 9, 2008 at 2:23 am

Thanks for putting me on the right track.

Jul 10, 2008 at 4:07 pm

Muy buen tutorial!!!

Gracias por publicarlo :D

kral oyun
Jul 13, 2008 at 11:50 pm

Thanks for lesson.

Jul 18, 2008 at 6:18 am

Great tutorial … very useful!

Jul 28, 2008 at 6:23 am

wow good

Jul 30, 2008 at 11:45 am

Thanks for this!

People Search Dude
Jul 31, 2008 at 12:50 pm

OMG! Right on…nice!

Aug 7, 2008 at 3:13 am

Good lesson. Thanks.

Aug 7, 2008 at 8:29 am

Thx, nie tutorial, good start into icon-design

Baby boobs
Aug 15, 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


Naseer Ahmad Mughal
Sep 9, 2008 at 9:42 am

nice tutorial man, i like it. :)

Sam Yong
Sep 10, 2008 at 7:44 am

hey great tutorial! i am using it on Fireworks instead of Photoshop haha.
anyway great website design plus website coding.

the comment preview comes out immediately!

Iso 9001 Kalite Belgesi
Sep 11, 2008 at 2:06 am

I can make my own site now. Thank you

Özel Dedektif
Sep 19, 2008 at 4:24 am

thank you very much

Sep 20, 2008 at 2:27 pm

its useful. THX

Nov 16, 2008 at 4:07 pm

nice job.

ISO 14001 Belgelendirme
Nov 23, 2008 at 2:15 pm

I can make my own site now. Thank you

Nov 23, 2008 at 2:17 pm

nice tutorial man, i like it.

Nov 30, 2008 at 5:10 am

Added to

Dec 4, 2008 at 11:39 pm

strong design man i like it very much

Dec 17, 2008 at 5:17 pm

thx bro

Dec 31, 2008 at 3:49 am

Marvellous tutorial … thank you so much!!!

ce belgesi
Jan 10, 2009 at 8:40 am

great tutorial, but I don’t use photoshop , I use psp,

Jan 12, 2009 at 4:01 pm

I used gimp and I was able to get similar results, very good tutorial. thank you!

Jan 12, 2009 at 4:04 pm

I forgot to say I didn’t want to create a icon for a desktop application, I wanted to create a favicon for a web site… and it was very useful, by the way I love your comment system, is it a widget for wordpress?

Feb 5, 2009 at 1:07 pm

Good tutrials for beginners.

Needle Detector Machine
Feb 20, 2009 at 9:57 pm

I can make my own site now. Thank you

Feb 23, 2009 at 10:51 am

Sweet thanks.

Vijay Anand
Mar 6, 2009 at 1:38 am

Hey man i was blinking how peoples are doing this.. you are Great man… thx for the Best tutorial. Love you man.
Mar 24, 2009 at 9:59 am

thank you

Apr 2, 2009 at 12:20 am

Can any body from u give the icon of word (MRP III)

Jul 20, 2009 at 2:27 am

I’m a Chinese designer,thank you very much! Your way is the best to desin 16X16 mini icon!

Aug 5, 2009 at 5:40 pm


discount voucher codes
Aug 28, 2009 at 12:57 am

great post! I like it!

Krutika Suchak
Aug 28, 2009 at 1:22 am

Nice tutorials.. Thanks.. :)

Sep 4, 2009 at 10:07 pm

Cute, they are really mini.

Sep 4, 2009 at 10:08 pm

I can make my own site now. Thank you

Sep 7, 2009 at 12:47 am

gr8 tutorial, after long time, now i know how to create really small icon

Sep 10, 2009 at 7:14 pm

Thank you for this great tut. I love it.

Sep 21, 2009 at 12:28 pm

Great , How to Design Mini Icons
Great article. CSS saved web design

Oct 6, 2009 at 2:59 am

Woow .. So nice
Thank you so much ^-^

Oct 9, 2009 at 6:44 am

Awesome! just what I was looking for to make. Thank!

Oct 14, 2009 at 9:27 am

hi i am trying to make an icon in photoshop but i cant get the sizes right as i have types a name and changed it to a flame graphic in photoshop is their any way i can convert the file into a 35 by 35 pixel without the image being blurred out or do i have to start from scratch at 35 pixels to make the icon

Oct 25, 2009 at 3:01 pm

Thanks so much! I figured this was the way to make the Mini Pixel icons, but I guess I needed to refresh my mind. Great post!

Oct 31, 2009 at 4:17 am

Really cute mini icon

Jeon Yeo Jin
Nov 12, 2009 at 8:12 pm

thank you so much! ^^

Dec 4, 2009 at 9:28 am

really funny! i always wanted to learn to do it!

Jan 5, 2010 at 11:24 pm

The designs showed here show what simple and tasteful design is all about. Another one to consider

Campervan Hire Australia
Jan 18, 2010 at 9:09 pm

Great ideas on mini icons we can use this for some work we are doing now thank you.

graffiti vector
Jan 23, 2010 at 5:22 pm

Very helpful tutorial thanks

Feb 2, 2010 at 2:11 pm

Thank you for this very interesting tutorial. Sometimes are the small and simple tricks the best one.

Kind regards

Feb 13, 2010 at 10:48 pm

nice shared, great thanks

Feb 23, 2010 at 6:44 pm

hey thanks, been looking for something like this. Thanks for sharing

insanity workout
Feb 23, 2010 at 7:18 pm

Great Post! Thanks so much! I figured this was the way to make the Mini Pixel icons, but I guess I needed to refresh my mind.

Mar 9, 2010 at 2:16 pm

Awesome! I have been wondering how to make mini icons. Thank you, for the information.

Stackable rings
Apr 25, 2010 at 4:52 am

Did it possible to be use this method using of the online editing tool rather than photoshop? I don’t have one but I would like to try out the methods that have been outlined above. Any advice will be appreciated.


Web Design
Apr 28, 2010 at 8:22 pm

great read!!! THANKS so much for sharing

May 11, 2010 at 3:44 pm

I just tried this a little bit ago and I must say thanks so much for your tutorial!

handmade stackable rings
May 29, 2010 at 3:33 am

I am definitely interested in designing and using mini icons for my site and I am going to download your ready made set (free mini icon set) as well. Thanks for sharing your knowledge!

P90X Coach Fletch
Jun 21, 2010 at 6:18 pm

Great info on mini icons It should be very useful for my business.

Jul 16, 2010 at 1:41 pm

nice post. i like it :p

fortune teller
Jul 18, 2010 at 4:58 pm

Mini icons are a good idea. They would save me much needed space.

Aug 17, 2010 at 4:40 pm

thanks for nice information about designing

7/24 San Diego Notary
Sep 14, 2010 at 10:08 pm

Great Photoshop guide to creating mini-icons. However, you are right and I was too lazy to follow your steps. Maybe I would have a different feeling if I needed such icons.

Regardless, thanks for the wonderful how-to article.

7/24 San Diego Mobile Notary

Sep 16, 2010 at 5:15 am

i never expect that designing a small icon will be that easy i always thought the smal icons has a small details and will need hard work
great tutorial thanks

Sep 16, 2010 at 9:20 pm

it’s great article, that is solve my problem easily.

Ram ji
Sep 16, 2010 at 9:22 pm

nice job…………..

Brand Smart PK
Sep 22, 2010 at 6:24 pm

Nice work but what about beginner to create professional icon for web?

Sep 28, 2010 at 4:20 am

Magnificent tip. Thanks

Mensagens para Orkut
Oct 2, 2010 at 8:10 am

Its nice tips for designing mini icons the best software is adobe.

Oct 3, 2010 at 8:00 am

Designing mini icons becomes easy after reading this article.

Adam Haynes
Oct 5, 2010 at 3:35 am

Brilliant I really needed this, you got me out of a big whole. Thanks

stackable birthstone rings
Nov 3, 2010 at 3:03 pm

can you use these as fav icons to display in browsers wen ppl load your webpage or are they too big?

designer sunglasses
Nov 13, 2010 at 5:05 am

Great Photoshop guide to creating mini-icons. However, you are right and I was too lazy to follow your steps. Maybe I would have a different feeling if I needed such icons.

tütüne son
Nov 24, 2010 at 4:47 am

Its nice tips for designing mini icons the best software is adobe.

Dec 4, 2010 at 7:22 am

this is good artical.i like it

çorum haber
Dec 5, 2010 at 8:19 am

ts nice tips for designing mini icons the best software is adobe.

jonacin marcus
Dec 6, 2010 at 3:40 am

Its nice to be able to design your own icon, but it would be nicer if you could actually use them.

Dec 18, 2010 at 1:38 am

Your article’s resource box should help to persuade your readers. No matter how amazing your article is if it’s not succeeding in driving traffic to your website cheap uggs

Juno Mindoes
Dec 23, 2010 at 11:35 pm

The white iphone 4 hardware design hasn’t changed from the one we already knew about. It uses the same materials as the prototype: Black glass and stainless steel rim.

Henry Peise
Dec 24, 2010 at 10:03 pm

Though white iphone 4 is at high price, but with all-powerful function, we can see lots of people just crazy for the latest white iphone 4.

Dec 27, 2010 at 3:52 pm

ts nice tips for designing mini icons the best software is adobe.

Uçak Bileti
Jan 11, 2011 at 11:29 pm

Thanks for good article
anladımki hiç hayır yok

Jan 19, 2011 at 2:20 pm

Useful tutorial thanks

tütüne son
Jan 27, 2011 at 3:00 pm

Though white iphone 4 is at high price, but with all-powerful function, we can see lots of people just crazy for the latest white iphone 4.

Oct 12, 2011 at 5:09 am


شات صوتي
Feb 8, 2011 at 5:43 am


bedspreads and comforters
Feb 15, 2011 at 9:59 am

You have shared such a tutorial on mini icon creation, Thanks so much

kilo aldirici
Feb 17, 2011 at 5:53 pm

ignore weight

milk girl
Feb 25, 2011 at 5:51 am

Though white iphone 4 is at high price, but with all-powerful function, we can see lots of people just crazy for the latest white iphone 4.

شات كتابي
Feb 27, 2011 at 2:15 am

this si awesome! mwah


Mar 5, 2011 at 3:32 am

I love pixel art! I always wanted to know how to do it, thanks very much!

Mar 5, 2011 at 10:20 am

great tutorial
thank you for sharing

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:35 pm

Splendid work. Thank you so much for this post. Interesting content.

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:36 pm

This is great!!!This topic is truly relevant to my field at this moment, and I am really glad to discover your blog site.

Retail Designer Brisbane
Apr 26, 2011 at 12:23 pm

I also do graphic designing,this tutorial would help me out.
Thanks i appreciate it.

Shop Fitting Queensland
Sep 25, 2011 at 10:43 pm

now that is an useful tutorial….

Think360 Studio - Web Design Company India
May 5, 2011 at 7:07 am

Amazing..Great job

May 21, 2011 at 11:46 am

thank you for the tutorial and tips.
i’ll try it.
it is really hard to use the pen tools rather than pencil tool.

Shop Fitter Brisbane
Aug 2, 2011 at 10:27 pm

hey man you saved my time….it was a great tutorial which help me building my clients project..

M Francis
Aug 23, 2011 at 12:47 pm

Pretty cool.. Why did you make the size 14×14 rather than 16×16… Is not the correct size for the FAVICON 16×16 pixels?

Aug 23, 2011 at 1:26 pm

And then he handed you the thirty-five 45

Xtreme No Review
Sep 1, 2011 at 6:45 pm

There are actually plenty of particulars like that to take into consideration. That is a great level to convey up. I provide the thoughts above as basic inspiration but clearly there are questions just like the one you convey up where a very powerful thing will likely be working in sincere good faith. I don?t know if greatest practices have emerged around things like that, however I’m positive that your job is clearly identified as a fair game. Each girls and boys feel the affect of just a moment’s pleasure, for the rest of their lives.

Sep 21, 2011 at 9:36 pm

Thanks a lot for your tutorial :)

Nand Kishor Singh
Sep 23, 2011 at 5:03 am

Nice tutorial for creating an icon by self. Thanks!

Nov 28, 2011 at 4:28 pm

دليل مواقع أوفى الخلق

Dec 9, 2011 at 8:19 am

Thanks a lot for your tutorial

Jan 24, 2012 at 5:09 pm

so nice and attractive tutorial contains the site which I expected, well done carry on. Really nice !!

marijuana card
Jan 26, 2012 at 9:47 am

So important and necessary design tutorials contains the site, which I excepted. It is really helpful for practical fild to everyone. Thanks for sharing this. Well done carry on.

Auto Repair News
Feb 8, 2012 at 5:36 am

You made a few nice points there. I did a search on the matter and found most persons will agree with your blog.

Web Hosting
May 15, 2012 at 4:57 am

That’s a really nice article and easy to follow.

Alquiler yates en Ibiza
Jul 24, 2012 at 3:19 pm

So important and necessary design tutorials contains the site, which I excepted. It is really helpful for practical fild to everyone.

φωτοβολταικά συστήματα
Jul 26, 2012 at 6:08 pm

Its nice tips for designing mini icons the best software is adobe!!!

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.