Beautiful Examples of Flat Icons Design

Flat Design is one of the newest approaches in web design, aiming for simplicity and powerful visual impact and using shapes as patterns and backgrounds. Microsoft’s Metro user interface is probably the most popular Flat Design example.

We already discussed the Flat Design approach in-depth, and we did it for quite some time now. Most of you know Designmodo promotes Flat Design with proudness and designers its own framework according to the Flat Design principles. Therefore today we took our time to browse around the web and find even more flat design examples, only this time we will focus mostly on icons, not on web designs as whole.

Flat Icons

Responsive Icon

Responsive Icon

This icon can be used to mark themes and layouts which are responsive and fit every device perfectly. Funny about this is that if you look for more than five seconds at the icon, the background will change. Actually, it is not really happening, but your eyes see it that way.

Calendar and Night Icon

Calendar and Night Icon

There are two icons here: there is the calendar icon, which in my opinion is the result of some amazing work, and a more abstract icon, which could be used for activating a “sleep mode” for example. Although the second icon is a bit abstract, the calendar is amazing.

Mail Icon

Mail Icon

This is actually a great icon created by us at Designmodo and can be used for any mail purposes.

Iconex

Iconex

Iconex showcases four different icons: a photo camera, a heart, a megaphone and a game controller. They come in different colors, most of them calm (sure, there had to be red for the heart), and seem very easy to use.

Misc. Vector Icons

Misc. Vector Icons

This pack has four vector items. Two of them can be used for map applications, one for a “settings” feature, while the fourth one is a bit abstract, visualizing some crayons.

Flat Design Icons Set Vol. 1

Flat Design Icons Set Vol. 1

This is a 16-pack icons also inspired by Flat Design UI. The icons can be used for different purposes and they are available as a freebie.

Two Flat Icons

Two Flat Icons

While the first one is very abstract and can probably be used for several purposes, the second one shows a camera and looks actually very good. The icons are displayed in a calm, blue-ish palette.

Glyph Profiles

Glyph Profiles

This pack contains six icons that can be used for several purposes, as most of them are quite abstract. Two of them can be successfully used for shopping carts and checkout options.

We Are Hiring

We Are Hiring

As the name says, the following four icons can be used for this type of announcements and one of them can definitely be used when searching for developers.

Filetypes

Filetypes

Another very obvious one is Filetypes, a pack with three icons showing three files (.psd, .png and .jpg) in different colors.

Retina Icon

Retina

If you want to emphasize retina capabilities of a screen or of a layout, then this icon is most definitely the right choice.

Monika is working

Monika is working

This pack contains four icons coming in different patterns. The icons show websites, mobile platforms and a paper coming out of an envelope. The animation is a bonus!

Flat Icons

Flat Icons

The pack brings four icons that can work for map applications, calendars, to-do reminders, dictionaries and others.

Squares

Squares

Squares is a pack with six icons designed in a retro style that can be used for different purposes, such as phone calls, camera, search functions, play buttons, SMS or setting features.

Ididi’s Flat Icons

Ididi’s Flat Icons

This pack of four icons is modern and can be used as visualization elements of art pieces, notebooks, radios or folders filled with content.

Navigation

Navigation

Although named Navigation, these five icons can be used for many other purposes as well. To be honest, I don’t even see them as potential navigation elements, but the name doesn’t matter that much I assume.

Gimpo Studio Flat Icons

Gimpo Studio Flat Icons

This pack contains six icons showing a gaming console, a diamond, a monitor, a website, a darts set and a pinned map.

Flat Tiles

Flat Tiles

None of the icons showcased until now look as close to tiles as these four ones. They use some great combinations of colors and are very good for multiple purposes.

Comfort Icons

Comfort Icons

This is a pack containing only three icons, all of them in the shape of a circle and showing a warm shower, reading a newspaper and a cabin.

DoFlat Icon

DoFlat Icon

This is a single icon showing a camera in a very calm pattern, with a little bit of red on it.

FlatMail Icon

FlatMail Icon

Another single icon, this type visualizing an e-mail coming out of an envelope.

Inspired by Google

Inspired by Google

Inspired by Google is a three-icon pack, throughout which one can find a red book labeled Google books.

Simple Icon Part 1

Simple Icon Part 1

This is a very simple four-pack icon showing a notebook, a pin on a map, a drawing and a camera.

Flat Icon

Flat Icon

Named simply, Icon, this pack containing six icons, was recently released and shows how beautiful design can actually be with some icons showing a star, a calendar, a clock, a camera and so on.

Trending Hashtags

Trending Hashtags

This is only an icon showing a stylized hashtag which can be used for different purposes, such as indicating a Twitter feed, for instance.

Icon Set for the New Mixpanel

Icon Set for the New Mixpanel

This is a very modern pack containing five icons designed in a very simple color pattern. The icons can be used for search buttons, cloud storage, messages and others.

Flat Icons

Flat Icons

The last pack contains three icons designed in yellow and green and can be used for mail, address book and text editors.

In case you missed many of the articles we wrote here in the past couple of months, then you probably still don’t know about Designmodo’s Flat UI pack available on GitHub. If you like all these icons we showcased, or at least their style, you should know our UI pack contains such icons as well (over 30 actually), and it is totally free to check and use them, so don’t hesitate to take a look at them at least.

Christian Vasile is an enthusiastic Romanian web designer currently living in Denmark. You can follow him on Twitter at @christianvasile or visit his web portfolio at christianvasile.com.

Newsletter

27 Comments
  1. TimMH Apr 17, 11:56 am

    Some really nice inspiration here for developing what has become a very much on trend style. I think this has certainly taken off and become more mainstream since Microsoft released it’s Windows8/Metro theme.

    I think it is a classy look that should stand the test of time and I am looking to create a few icons myself in the near future… I will be bookmarking this page for inspiration.

    Reply
    +3
  2. Igor Apr 17, 11:56 am

    Very nice set of flat icons, inspiring design. Tnx for sharing!

    Reply
    +6
  3. Pritesh Desai Apr 17, 12:32 pm

    I’m loving Flat UI. It will be fun to create a website based on Flat UI.

    Reply
    +5
  4. kzotov Apr 17, 5:57 pm

    Nice set. I would add http://icony.co/

    Reply
    +8
  5. Katherine Apr 17, 10:06 pm

    Ok, I’m officially in love with the Flat design trend. Very refreshing after years of being blinded by a hot mess of overly glossy icons.

    Reply
    0
  6. Jt Hollister Apr 17, 10:34 pm

    These are all very nice, but a lot of them are not flat! I see gradients and drop shadows :P

    Reply
    0
    • Adrian Apr 17, 10:37 pm

      Yes, we are wrong with a few examples. Sorry.

      Reply
      0
    • Michele May 18, 9:52 pm

      No need to apologize. In “Flat Design: Can you benefit from the trend?” (Designmodo) it states that flat design “is not completely without effects…even more designs fall into the category of ‘almost flat,’ where the overall look and concept contains very few effects.”

      Even if it is a trend, it has been used effectively and beautifully whenever it was the best solution for a project throughout the history of graphic design.

      Reply
      +1
  7. Ricardo Apr 18, 12:13 am

    Inspiring set of flat icons.
    Thnx. for sharing!

    Reply
    0
  8. PuaHate Apr 18, 2:59 am

    Hidden due to low comment rating. Click here to see.

    Reply
    -7
    • Mike Apr 22, 2:39 am

      Wow. Seriously? Why not engage in positive, meaningful dialogue rather than bashing someone who’s simply sharing their opinion.

      Reply
      +4
    • Bossman Apr 28, 4:17 pm

      You. Are. Gassed. Not only is flat design simplistic and highly communicative, the level of design consideration that goes into each visual element is significantly greater than that of the stagnant stock gloss button / icon we see way too much of in interaction design. How are you gassed about flat design being a thing of the past when the future of UX is effectiveness through simplicity and engagement with visual elements aimed to delight? Say nothing.

      Reply
      +2
    • Dylan Taylor May 21, 11:24 am

      That’s so rich of you to ridicule flat design as a 90’s trope, when in reality, your horrible airbrushed smily avatar couldn’t be more stuck in the early 90’s if it were Bill Murray in groundhog day. Flat design draws on the tried & tested refinement & simplification of visual communication that pioneering designers, (such as Dieter Rams) have proved is elegant, effective & communicative.

      I am glad the web has finally become a place where good design & typography is becoming commonplace; I just hope that people like you who believe better processing power & memory means that we should strive for glossier & flashier design solutions are left behind sooner rather than later.

      Reply
      +2
    • Paco Jun 2, 4:36 am

      The fashion is always reaction. Not any revolutionary invention but always re-taken elements from the past trends.

      Reply
      0
  9. Shrikant Garg Apr 19, 4:37 pm

    Very nice set of flat icons, inspiring design. Tnx for sharing!

    Reply
    0
  10. Paul Apr 22, 4:06 pm

    Nice examples indeed. What I see is this definite retro style to the ’60 color and graphic clean drawn style. For me abstraction is essential in the success of icons. This style forces the abstraction to the max almost; which I like.
    The risk is to not copy too much and retain your identity. It is important to remember that icons represent your identity too.

    The obvious bonus of these verctorised, graphic styled icons appear to be more appropriate for the HTML based designs and responsive ui’s.

    Reply
    +1
  11. Tina Apr 22, 11:17 pm

    These are nice and simple, but, I might not say beautiful :-).

    The initial design and coloring are from examples (style/color) I remember in editorial design of the 50’s, 60’s and 70’s. The trend always bounces between full-front flat to perspective about every 3-5 years over the past 20 years. From eye candy bubble, to trim and simple.

    I like different styles for different things. Coming from an illustration-heavy past, I enjoy both the gestural, simple styles through to the complex and atmospheric styles.

    Ultimately, if your imagery delivers the correct message simply and quickly and visually, the set is a success.

    Reply
    0
  12. Chris Howard Apr 23, 2:59 am

    The interesting thing about these are many are skeuomorphic. Which, of course, the whole flat design philosophy is meant to leave behind.

    Many of them look like paper cut outs. Some replicate that real world object so well you’ve got look twice.

    Many also retain a 3D element, with light shadows so again are not truly flat.

    That said, I like them and definitely like this coming together of flat design and 3D design. I do agree with the author that they are beautiful

    The stark, mono-color, totally flat design of Windows 8 looks good and is well executed, but will have a short life as it is too limiting for designers when each element is a single colour background with white elements (or vice versa). It won’t take long for us to feel like the whole world has gone down this simplistic design path. And then designers will move on to the next trend.

    Many of these icons are already refreshing and reinventing that W8 flat design trend, and I find them more visually appealing than the W8 flat design.

    Reply
    0
  13. Adrien de Broglio Apr 24, 8:55 am

    Cool list of flat icons, very inspiring. Check out my custom Adobe CS6 Custom Flat Icons Pack http://supercolortuts.com/adobe-cs6-custom-flat-icons-freebie/

    Reply
    +2
  14. Gabriel Apr 25, 9:43 pm

    No offence, many of these are inspiring and creative, but…

    Am I the only one who get frustrated after a while by looking at them?

    I think I need more contrast. Looking down the list, after a while it feels like I’m looking, through some weird fog.

    To be honest, I would not like to have my iPhone UI and all Apps changed to this.

    I prefer semiflat design (a little shadow to separate the layers). But that’s just my opinion of course ;)

    Reply
    0
  15. James Richman May 7, 6:40 pm

    Hey Christian,

    Great to see a great quality article from you once again.
    You never disappoint.

    And I guess I personally fell in love with flat design the very first time I saw it.

    I believe it’s because I’m a big fan of a minimalism and clutter fre lifestyle.

    What about yourself Christan?
    Who right now do you think is the best example of having flat design implemented in their branding? (company, persona, anyone?)

    Reply
    0
  16. webtoedesign May 13, 10:07 am

    Really, flat icon make the design become fresh with simplicity.

    Reply
    0
  17. Mike Yasieniuk Jun 6, 10:36 pm

    Sweet round up Christian. We just designed some great flat apple device icons as well. check them out at http://www.bestpsdfreebies.com/freebie/flat-designed-apple-device-icons/ and feel free to use any of our posts in your future lists. Cheers!

    Reply
    0
  18. Lionel Jun 27, 6:25 pm

    Give it a look to these Flat Design Icons Set Vol. 1, but in fully #CSS3 http://cdpn.io/dobAz

    Reply
    +2
  19. Maitreya Vyas Nov 10, 7:10 am

    I was looking for a paint application icon.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters