Flat Icons: 150+ Free Flat Icons for Webmasters

An eye-catching and easy-to-use interface is a critical part of smart website design and usability. One of the best ways to give your site a professional sheen is to use a complete set of icons. Doing so helps give your site a cohesive feel and makes the user experience more immersive.

Flat Icon Set #1

Give your website modern style with these flat design icons!

This set of 43 free icons was designed in a modern style called “flat design,” one of today’s hottest web design trends. In stark contrast to flashy “web 2.0” style design full of gradients, reflections, and beveled edges, flat design is much more minimalist.

Preview: Flat Icons

Here are a few full-size samples (128x128px) of icons included in this set:

cloud icon flat icon save icon

All icon preview:

icon set preview

Usage and Attribution

You can use the icons for free for commercial and non-commercial projects alike, with one requirement: we ask for a credit in the form of a discreet “Icons by” link so that other webmasters can find and use the icons, too.

Here’s the HTML you’ll need – it works well on your “About” page:

You can use these free flat icons on your website for:

  • Web application menus (save, print)

  • Navigation (check out the shopping basket icon)

  • Listing services and products

  • Highlighting product features (try the padlock or key icons to emphasize security)

  • Emphasizing benefits (like using the money icon for savings or sales).

Download This Icon Set:

What’s included? The set includes 43 different images (128x128px PNG format), from basics like print and save icons, to more whimsical images like a cup of coffee and an umbrella.

Download all icons in this set: Flat-Icons.zip


Flat Icons Set #2

This package of icons contains two sets of flat design-style icons (one with circles circumscribing the icons, and one without). Each set contains a wide variety of general use icons for webmasters, suitable for site design, blogs, social media, and multimedia uses.

Examples with and without circles:

note icon circle note icon circle

note icon circle note icon circle

Downloads

Both separated .PNG files and the original Photoshop .PSD files are included these zip files.

Downloads: Icon Set.zip | Icon Set with Circles.zip

Usage and Attribution

You can use the icons for free for commercial and non-commercial projects alike, with one requirement: we ask for a credit in the form of a discreet “Icons by” link so that other webmasters can find and use the icons, too.

Here’s the HTML you’ll need – it works well on your “About” page:

Full Preview: Flat Icons (With Circles)

icon preview 1

Full Preview: Flat Icons (no Circles)

icons preview no circles


Why Flat Design?

There are a ton of benefits to using graphics like icons on your website or app. Icons improve user experience, since users can see at a glance where to click instead of taking the time to read a list of text links.

Graphics like icons also give your website flair and personality, make your website more memorable, and give your design a more professional appearance.

With flat design, you can get back to design basics like great typography and clean, sharp visuals, and get your message across without distractions or gimmicks.

Icons are especially suited for flat design because the focus of the style is more on clarity and functionality than style. As a result, these icons are much more conducive to a simple, intuitive user experience.

Flat design makes these icons versatile as well. Unlike 3d icons or busy graphics, this set won’t detract from the design and content of your website.

The icons in this set are simply styled, with the icon image backed by a circle of red, yellow, green, blue, purple, or black. A strip of color in a darker shade provides a bit of pop and interest to the simple design.


Also see:

  • Flag Icons– Another useful set of flat icons from WhoIsHostingThis. Free Download.

  • JPG, GIF and PNG – Illustrated guide to choosing the right graphic format for online images.