fresh photoshop tutorials & resources
Log in Register
Painted Wood Photoshop Action Comics Book Photoshop Action Infographic JS Library Textures for Photoshop

Flat Design Icons with PSD

Resources Icons 11347 Views September 10th, 2013

Flat Design has become more and more popular among graphic designers. It is used in creating flat website designs, in brochure and advertisement projects, in flash and other animated video files. The retro old look is trend that has gathered many fans, me being one of them. The flat design has a new cool feature and that is the long shadow effect that can be applied to icons, text, etc. If you want to find out more about this subject I suggest you read the The ultimate guide to flat design. In this collection you will find useful free and premium flat design icons with the PSD source file.


Flat Design APP Icons

Flat Icons with PSD File

Media Flat Icons PSD

Flat Social Icons

Flat Icon Set with Free PSD

24 flat icons psd

Social Icons with Flat Design

20 flat icons psd

Flat Icon Set

simple flat social media icons psd png

Flat Icons

12 flat seo icons free download

Flat Media Icons

Retro Design Icons

Retro Flat Education Icons


You might also want to check out this cool jQuery Long Shadow Plugin that allows you to create flat icons using only css and jQuery. For example the images below are made using this shadow jQuery plugin. The Long Shadow jQuery plugin allows you to add fully customizable long shadow effects to your web design elements.

CSS jQuery Text Shadow

Flat design is driven by a desire for a more efficient and user-friendly interface. That's the idyllic purpose of flat design, but the current reality is so disconnected from it. While there are plenty of great examples of flat design(like the ones featured in this list), there are also plenty of bad flat design sample. You can read more about what happens when flat design goes bad from this interesting article - When Flat Design Falls Flat

Be a Cool Dude!

With your donation you can help us maintain this website and keep producing free resources many months to come! Any amount counts

9 comment(s) for "Flat Design Icons with PSD"

12:55 AM Thursday, August 22, 2013
You ca also check out these amazing Long Shadow Icons reply
2:44 AM Saturday, October 05, 2013
This is a great collection all of them are amazing. thanks buddy reply
3:41 AM Tuesday, February 04, 2014
Hi John
I'm very interested in learning to make my own flat icons. Do you know any tutorial?
Thanks. reply
3:54 AM Tuesday, February 04, 2014
Hi sinfonia,

to create a flat icon in Photoshop is really easy; all you have to do is to make the icon design simple, to use not so many color tones, gradients, etc. For making flat icons , designers also use the long shadow concept.

Here you have some useful tutorials to help you create flat icons in Photoshop:

2:47 AM Wednesday, February 05, 2014
Here is my pencil. Thanks for the tutorial. reply
2:47 AM Wednesday, February 05, 2014
Thanks John.
I did the house tutorial. I also did another about a pencil with Illustrator. Now I'll try do this one.
Greetings. reply
2:50 AM Wednesday, February 05, 2014
Your flat icon looks great, keep up the good work! reply
3:54 AM Monday, March 03, 2014
The Evolution Of Icon Design From 1981 - 2013

With the GUI having now been around for over 40 years, today we are taking a look back in time at the evolution of an integral feature - the icon.
Since the early 70's, when bitmapped screens were first developed with GUI's, the humble icon has come a long way. This is by no means, a complete list of all the icons in every OS between 1983-2013, however I have hand-picked designs that have the most significance and popularity in icon design.

read the article reply
11:07 AM Tuesday, August 05, 2014
Flat Icon Set - Download free PSD here:
Use these icons for personal and commercial work! reply

Have something to say? Leave us a comment

Click to Upload Fan Art!

Share your Psd Dude inspired works

Pencil Sketch vs Camera Photo Effect Photoshop Action
Animated Kaleidoscope Photoshop Action
Recent Posts
Learn how to create a retro comics effect in Photoshop in just a few easy steps. For the comic book ...
Swirl Brushes are useful Photoshop resources that you can use in your designs if you want to avoid m...
This Sunday many Christians worldwide celebrate Easter. For kids, Easter is all about painted eggs, ...
Learn how to create a Easter grass planet in Photoshop from this new tutorial for beginners. You can...

      Painted Wood Photoshop Actions
Popular Posts
You can create amazing gold text effects by using these unique gold Photoshop styles, both free and ...
Today's Photoshop collection of resources includes some amazing packs of metal chrome PSD text style...
If you want to know how to create dispersion effect in Photoshop in a easy way, here is a quick solu...
To create a realistic sketch in Photoshop you need some pencil sketch textures or better still you c...
In today list of free textures for Photoshop I have gathered over 100 amazingly beautiful wood textu...
I have decided to create a new character from Alice in Wonderland and I hope that maybe someday to r...
To create a Comic Book Effect in Photoshop we have to mix all sort of filters and blend them togethe...
Stitching and sewing can be created also in Photoshop with very realistic results. So in this tutori...
Hello girls and boys! Today i want to make a cartoon rainbow... i really hope you will like it! ...
In this tutorial I will show you how to create a 3D map in Photoshop using different 2D and 3D model...
Subscribe via email

      Metal Tag Photoshop Creator