20 Excellent Examples of Icon Usage in Web Design

By / Jul 18, 2011 / Inspiration

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

  • http://www.nettechltd.com web design company uk

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

    • mrigesh

      yeah right

      • mrigesh

        weay to go

  • http://www.oldworldcreative.com Evan Skuthorpe

    nice collection. some great sites.

  • http://www.tristarwebdesign.co.uk/ Tristar Web Design

    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.

  • http://www.pragmaticdesign.co.uk Pragmatic Design

    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.

    • Gabriel

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

  • http://www.boostinspiration.com Boost Inspiration

    great examples of icons in web design.

  • http://www.werbeagentur-impuls.de Nils

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

  • http://creativebranding.co Creative Girl

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

  • Mr.Gaz

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

  • Simon

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

  • http://www.kristam-moffett.com Kristam Moffett

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

  • http://www.medicalschoolprograms.net/ Brenne Meirowitz

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

  • http://flodesign.co.uk Russell Poulter

    Nice round up, thanks!

  • http://www.templamatic.com Templamatic – Lex Koff

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

  • http://www.webchemie.nl Peter Arnhem

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

    Peter
    Webchemie

  • http://tomasz-dudek.de Tomasz Dudek

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

  • http://www.dutchicon.com Dutch icon designer

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

  • Gabriel

    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.

  • http://www.unleadedsoftware.com Danielle

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

  • http://www.dcpweb.co.uk DCP Web Designers

    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.