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.
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.
SasaVtec
This is a very nice tutorial thank you :)
Nathan Chapman
Makes sense what you’ve done. Good, I like
Brendan DeBeasi
THanks, this is really great stuff you’ve been doing, and I love almost all of your work!
Ines
Great tutorial … very useful!
srinivasarao
looks very nice and gr8 job
Katie
Great tutorial, will definitely give it a try sometime!
Craig
Great tutorial! I don’t know why I thought it should be harder than this.
Anon
Verrry Useful!
no name
nice tutorial!!! Good job
orlin
Thanks — I’ll give it a try…
Melfina
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
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
Interesting tutorial.
Joris
Great !
Mellie
nice tut!
Pedro Cunha
Great!
Jenny
Awesome. Thanks.
markus
Very Nice!
Nathan Nash
very nice tutorial these will be fun to make.
John
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
Cool show/hide layer trick you got there sir :) I’ll be sure to give this a try when redesigning my site.
PoxLine
Oh god !, it’s so nice tut. ! Thank so much !
eshark
320 icons within a day!! Man.. you’re really awesome! Great tutorials.. for sure I’ll try this one out. Thanks!!
Daniel
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
Great tutorial, I’ve wanted to get into icon design for a quite a while now. This is a great start.
Thanks
GrantMc Designs
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
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
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
THANKS I’ll try do this one!!
Hatkirby
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
cool! I I will make an attempt repeat it. now and for me to turn out
Joomlabased
I dont have any problem square corners, my problem with round corners I can’t create rounded corner icons :( .
readywpthemes
Thanks for this great tutorial :)
Lazer Kesim
hey you guyss,,this is a perfect tutorial thanks for that
Webmaster Search
Just started to know your website.. it is a shame as a webmaster to have found you such a late stage.
Daily Common Sense
I really like your blog! Keep up the good work!
yoxx
very cute tutorial… thanks mate
hasan
ia am a web writer
Dragolux
Very nice! Yet another great tutorial. :)
Kanal Açma Araçları
great tutorial very thanks to you..
Ze cesar
Very nice tutorial. I´ll try to make my own set now. Thank YOU for the hints.
Mobil Hikaye
very good
Recabron
Thanx. New stuffs in photoshop always are welcome.
Human technology
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
since I am programmer, after reading this article tried this article and created some small icons..Really a great tutorial.keep it up.
SerpantiN
Sweet. Thanks!
k00pa
Thanks for great tutorial!
It is so fun and easy to make icons! I must make my own icon pack!
sohil
fantastic
rukia_9
wooooooooooow
soooo cuuuute ^^
thanks a looooot
Ahmed
Pretty neat! You make it seem so easy.
JRSofty
Thanks for putting me on the right track.
Iexhica
Muy buen tutorial!!!
Gracias por publicarlo :D
kral oyun
Thanks for lesson.
bheema
Great tutorial … very useful!
anjum
wow good
Tom
Thanks for this!
People Search Dude
OMG! Right on…nice!
Splavek
Good lesson. Thanks.
Skezo
Thx, nie tutorial, good start into icon-design
Baby boobs
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
nice tutorial man, i like it. :)
Sam Yong
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
I can make my own site now. Thank you
Özel Dedektif
thank you very much
Tommy_Gun
its useful. THX
venali
nice job.
ISO 14001 Belgelendirme
I can make my own site now. Thank you
Belgelendirme
nice tutorial man, i like it.
psaddict
Added to http://www.psaddict.com
bhim
strong design man i like it very much
Peter
thx bro
Michael
Marvellous tutorial … thank you so much!!!
ce belgesi
great tutorial, but I don’t use photoshop , I use psp,
thanks
Steve
I used gimp and I was able to get similar results, very good tutorial. thank you!
Steve
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
Good tutrials for beginners.
Needle Detector Machine
I can make my own site now. Thank you
Maxi
Sweet thanks.
Vijay Anand
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
thank you
Dhannajay
Can any body from u give the icon of word (MRP III)
Simon
I’m a Chinese designer,thank you very much! Your way is the best to desin 16X16 mini icon!
roy
brilliant.
discount voucher codes
great post! I like it!
Krutika Suchak
Nice tutorials.. Thanks.. :)
Bill
Cute, they are really mini.
Bill
I can make my own site now. Thank you
nahid
gr8 tutorial, after long time, now i know how to create really small icon
bagsin
Thank you for this great tut. I love it.
Cyrus
Great , How to Design Mini Icons
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
Noran
Woow .. So nice
Thank you so much ^-^
jesse
Awesome! just what I was looking for to make. Thank!
madz
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
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
Really cute mini icon
Jeon Yeo Jin
thank you so much! ^^
tepn
really funny! i always wanted to learn to do it!
vincentdresses
The designs showed here show what simple and tasteful design is all about. Another one to consider
Campervan Hire Australia
Great ideas on mini icons we can use this for some work we are doing now thank you.
graffiti vector
Very helpful tutorial thanks
Andi
Thank you for this very interesting tutorial. Sometimes are the small and simple tricks the best one.
Kind regards
GlobalaTor
nice shared, great thanks
beachbody
hey thanks, been looking for something like this. Thanks for sharing
insanity workout
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
Awesome! I have been wondering how to make mini icons. Thank you, for the information.
Stackable rings
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
great read!!! THANKS so much for sharing
Sandra
I just tried this a little bit ago and I must say thanks so much for your tutorial!
handmade stackable rings
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
Great info on mini icons It should be very useful for my business.
eka
nice post. i like it :p
fortune teller
Mini icons are a good idea. They would save me much needed space.
anime
thanks for nice information about designing
7/24 San Diego Notary
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
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
it’s great article, that is solve my problem easily.
Ram ji
nice job…………..
http://www.miblogspot.com
Brand Smart PK
Nice work but what about beginner to create professional icon for web?
Shahaab
Magnificent tip. Thanks
Mensagens para Orkut
Its nice tips for designing mini icons the best software is adobe.
anime
Designing mini icons becomes easy after reading this article.
Adam Haynes
Brilliant I really needed this, you got me out of a big whole. Thanks
stackable birthstone rings
can you use these as fav icons to display in browsers wen ppl load your webpage or are they too big?
designer sunglasses
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
Its nice tips for designing mini icons the best software is adobe.
juliajin
this is good artical.i like it
çorum haber
ts nice tips for designing mini icons the best software is adobe.
jonacin marcus
Its nice to be able to design your own icon, but it would be nicer if you could actually use them.
mikwillson
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
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
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
ts nice tips for designing mini icons the best software is adobe.
Uçak Bileti
Thanks for good article
anladımki hiç hayır yok
Cgbaran
Useful tutorial thanks
tütüne son
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
hkjhkjhkhjkk
شات صوتي
thnks
goooooooooooooood
min:(
bedspreads and comforters
You have shared such a tutorial on mini icon creation, Thanks so much
kilo aldirici
ignore weight
milk girl
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.
شات كتابي
this si awesome! mwah
thnks
goooood
Joyce
I love pixel art! I always wanted to know how to do it, thanks very much!
idris
great tutorial
thank you for sharing
How To Put On A Condom | How To Get Taller
Splendid work. Thank you so much for this post. Interesting content.
How To Put On A Condom | How To Get Taller
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
I also do graphic designing,this tutorial would help me out.
Thanks i appreciate it.
Shop Fitting Queensland
now that is an useful tutorial….
Think360 Studio - Web Design Company India
Amazing..Great job
Hanis
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
hey man you saved my time….it was a great tutorial which help me building my clients project..
M Francis
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
And then he handed you the thirty-five 45
Xtreme No Review
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
Thanks a lot for your tutorial :)
Nand Kishor Singh
Nice tutorial for creating an icon by self. Thanks!
yaser
دليل مواقع أوفى الخلق
Moliva
Thanks a lot for your tutorial
Anaxa
so nice and attractive tutorial contains the site which I expected, well done carry on. Really nice !!
marijuana card
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
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
Hi
That’s a really nice article and easy to follow.
Regards
Alquiler yates en Ibiza
So important and necessary design tutorials contains the site, which I excepted. It is really helpful for practical fild to everyone.
φωτοβολταικά συστήματα
Its nice tips for designing mini icons the best software is adobe!!!