20 Excellent Examples of Icon Usage in Web Design

By / Jul 18, 2011 / Inspiration
shares

Here on WDL we love icons! From Icon Tutorials to a list with the Best Free Icon Sets of 2010 and a 15 Must-Have Minimalist Icon Sets, we already showcased a lot of great icons around here to boost your inspiration. Today we decided to gather some examples of icon usage in web design to show you how icons can make a difference in a layout, giving a page a nice touch, in both interface and experience. Check out the examples we got and start to think about giving icons a new try on your next design.

Clarity – Clean Portfolio WordPress Theme

Icon Usage

Movmt Studio

Icon Usage
Icon Usage

I am Tiago

Icon Usage

B3 Studios

Icon Usage

Worry Free Labs

Icon Usage

Studio Nudge

Icon Usage
Icon Usage

Peter Nappi

Icon Usage
Icon Usage

iMyGarden

Icon Usage
Icon Usage

Cake Sweet Cake

Icon Usage
Icon Usage

AppVita

Icon Usage

Keith Cakes

Icon Usage

Square

Icon Usage
Icon Usage

photovine

Icon Usage

enixel

Icon Usage

Grégory Sujkowski

Icon Usage

Syropia

Icon Usage
Icon Usage

Clases Inglés Madrid

Icon Usage

claimtz

Icon Usage

Pandr

Icon Usage

Moredays

Icon Usage

Source:

The Best Designs
Site Inspire
Sites of the Week – Abduzeedo

About the Author

Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr

22 Comments

  1. web design company uk
    July 18, 2011

    Nice collection of web design icons.. i really like “Cake Sweet Cake” web design icons.. keep sharing more with us..

    Reply
    • mrigesh
      July 31, 2011

      yeah right

      Reply
      • mrigesh
        July 31, 2011

        weay to go

        Reply
  2. Evan Skuthorpe
    July 18, 2011

    nice collection. some great sites.

    Reply
  3. Tristar Web Design
    July 18, 2011

    These website all show the icons wonderfully. They seem to give out the most appeal when they appear on clean basic sites with very little photographic imagery. I really like ‘I Am Tiago,’ ‘Studio Nudge’, ‘Enixel’ and ‘Syropia’. All of them use icons really well and to the sites advantage.

    Reply
  4. Pragmatic Design
    July 18, 2011

    At the risk of blowing our own trumpet, our website uses some nice illustration-style icons. Check out http://www.pragmaticdesign.co.uk/services/ and the dropdown menus.

    Reply
    • Gabriel
      May 2, 2012

      Thanks for the link, you were right a nice design.

      Reply
  5. Boost Inspiration
    July 18, 2011

    great examples of icons in web design.

    Reply
  6. Nils
    July 18, 2011

    Thanks for that nice collection.
    One more example with fotorealistic icon in the main navigation:
    http://www.archaeofirm.de/

    Reply
  7. Creative Girl
    July 18, 2011

    Thanks for the great web design ideas! I loved the attention to clarity!

    Reply
  8. Mr.Gaz
    July 18, 2011

    Some great websites here…love “I am Tiago” & “Peter Nappi”!

    Reply
  9. Simon
    July 18, 2011

    My wife came across this site and loves the childlike, hand drawn icons. http://www.toshi.com.au

    Reply
  10. Kristam Moffett
    July 18, 2011

    Lovely stuff – I’m seeing some trends develop for 2011 that are rather beautiful!

    Reply
  11. Brenne Meirowitz
    July 19, 2011

    Peter Nappi’s website is a piece of art unto itself. It is one of the most stunning websites I’ve ever viewed!

    Reply
  12. Russell Poulter
    July 19, 2011

    Nice round up, thanks!

    Reply
  13. Templamatic – Lex Koff
    July 19, 2011

    I adore icons as they are informative and appealing =) Presence of well drawn icons would be one of the signs of usability for me =)

    Reply
  14. Peter Arnhem
    July 24, 2011

    Thnaks for the list, i love the “Peter Nappi” design.

    Peter
    Webchemie

    Reply
  15. Tomasz Dudek
    August 9, 2011

    i got some new ideas.. thank u very much fot this :)

    Reply
  16. Dutch icon designer
    August 11, 2011

    This is exactly how I like my icons, clean and simple. Very useful list.

    Reply
  17. Gabriel
    May 2, 2012

    I would like to add my 2 cents. I have recently been busy browsing and adding free icons to http://www.creattor.com. They are royalty free – everything I added was free for commercial use. You could try getting some icon packs and make your own template, like the sites above.

    Reply
  18. Danielle
    May 10, 2012

    We create our own custom icons too. What do you think? http://www.unleadedsoftware.com/capabilities

    Reply
  19. DCP Web Designers
    November 26, 2013

    The icons used on these websites are great. Websites also look clean and make icons standout more.I like Studio Nudge, Syropia and Enixel the most.

    Reply

Leave a Reply