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.

164 Comments

SasaVtec
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!

Ines
Jul 31, 2007 at 4:33 am

Great tutorial … very useful!

srinivasarao
Jul 31, 2007 at 4:44 am

looks very nice and gr8 job

Katie
Jul 31, 2007 at 10:52 pm

Great tutorial, will definitely give it a try sometime!

Craig
Aug 1, 2007 at 9:43 am

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

Anon
Aug 2, 2007 at 1:27 pm

Verrry Useful!

no name
Aug 3, 2007 at 6:42 am

nice tutorial!!! Good job

orlin
Aug 3, 2007 at 3:11 pm

Thanks — I’ll give it a try…

Melfina
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!

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

CrazyLeaf
Aug 10, 2007 at 2:51 pm

Interesting tutorial.

Joris
Aug 11, 2007 at 9:05 pm

Great !

Mellie
Aug 14, 2007 at 5:36 am

nice tut!

Pedro Cunha
Aug 17, 2007 at 6:40 am

Great!

Jenny
Aug 19, 2007 at 10:54 pm

Awesome. Thanks.

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

John
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!

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

PoxLine
Sep 1, 2007 at 10:21 am

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

eshark
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!!

Daniel
Sep 16, 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. :)

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.

Thanks

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

Azat
Nov 30, 2007 at 1:22 pm

THANKS I’ll try do this one!!

Hatkirby
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 (www.fourisland.com) and NO-ONE yet believes I drew them! Thanks so much for this tutorial!

Dodik
Dec 17, 2007 at 8:49 pm

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

Joomlabased
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 :( .

readywpthemes
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!

yoxx
Feb 21, 2008 at 12:49 am

very cute tutorial… thanks mate

hasan
Feb 29, 2008 at 7:57 am

ia am a web writer

Dragolux
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

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

php-web-developer
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.

SerpantiN
May 15, 2008 at 3:56 am

Sweet. Thanks!

k00pa
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!

sohil
May 28, 2008 at 6:39 am

fantastic

rukia_9
Jun 3, 2008 at 1:55 pm

wooooooooooow
soooo cuuuute ^^
thanks a looooot

Ahmed
Jul 4, 2008 at 5:38 pm

Pretty neat! You make it seem so easy.

JRSofty
Jul 9, 2008 at 2:23 am

Thanks for putting me on the right track.

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

bheema
Jul 18, 2008 at 6:18 am

Great tutorial … very useful!

anjum
Jul 28, 2008 at 6:23 am

wow good

Tom
Jul 30, 2008 at 11:45 am

Thanks for this!

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

OMG! Right on…nice!

Splavek
Aug 7, 2008 at 3:13 am

Good lesson. Thanks.

Skezo
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
wow!

(:
smile

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

Tommy_Gun
Sep 20, 2008 at 2:27 pm

its useful. THX

venali
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

Belgelendirme
Nov 23, 2008 at 2:17 pm

nice tutorial man, i like it.

psaddict
Nov 30, 2008 at 5:10 am

Added to http://www.psaddict.com

bhim
Dec 4, 2008 at 11:39 pm

strong design man i like it very much

Peter
Dec 17, 2008 at 5:17 pm

thx bro

Michael
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,
thanks

Steve
Jan 12, 2009 at 4:01 pm

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

Steve
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?

Samson
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

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

www.belgelendirme.com.tr
Mar 24, 2009 at 9:59 am

thank you

Dhannajay
Apr 2, 2009 at 12:20 am

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

Simon
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!

roy
Aug 5, 2009 at 5:40 pm

brilliant.

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

Bill
Sep 4, 2009 at 10:07 pm

Cute, they are really mini.

Bill
Sep 4, 2009 at 10:08 pm

I can make my own site now. Thank you

nahid
Sep 7, 2009 at 12:47 am

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

bagsin
Sep 10, 2009 at 7:14 pm

Thank you for this great tut. I love it.

Cyrus
Sep 21, 2009 at 12:28 pm

Great , How to Design Mini Icons
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com

Noran
Oct 6, 2009 at 2:59 am

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

jesse
Oct 9, 2009 at 6:44 am

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

madz
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

Sydney
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!

Mike
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! ^^

tepn
Dec 4, 2009 at 9:28 am

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

vincentdresses
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

Andi
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

GlobalaTor
Feb 13, 2010 at 10:48 pm

nice shared, great thanks

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

Sally
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

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

Cheers!

Web Design
Apr 28, 2010 at 8:22 pm

great read!!! THANKS so much for sharing

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

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

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

Kurt
7/24 San Diego Mobile Notary

apple
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

mauji
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…………..
http://www.miblogspot.com

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

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

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

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

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

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

supratall
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

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

jk
Oct 12, 2011 at 5:09 am

hkjhkjhkhjkk

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

thnks
goooooooooooooood
min:(

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

thnks
goooood

Joyce
Mar 5, 2011 at 3:32 am

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

idris
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

Hanis
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?

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

Lia
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!

yaser
Nov 28, 2011 at 4:28 pm

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

Moliva
Dec 9, 2011 at 8:19 am

Thanks a lot for your tutorial

Anaxa
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

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

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.