Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

How To Use Icons To Support Content In Web Design

Advertisement

Why use icons? Design is all about communication: it doesn’t matter how important or exciting the information that you’re sharing is if you fail to hook your visitors. When initially viewing a website, most users will first scan the page for visually interesting content, and only after something grabs their attention will they actually begin reading. Icons are a simple, effective way to draw users into the content of your website.

Icons serve the same psychological purpose as paragraph breaks: they visually break up the content, making it less intimidating. A well-formatted page, with text broken into easily accessible paragraphs and accented by icons, is easy to read and visually interesting enough to sustain the user’s attention. So, stop wasting time writing so much content that no one will read, and start using icons!

In this article we showcase beautiful examples and best practices of using icons to support content in web design. Please feel free to take a look at the showcases of navigation menus1, search boxes2, blockquotes3 and web forms4.

1. How To Use Icons Link

The primary goal of using icons should be to help the user absorb and process information more efficiently. This is usually done by using a lot of white space and using icons that don’t distract from the content but rather augment it. Using icons well enriches even minimal content by giving it more substance, enabling effective communication without wordiness. Icons should be used to draw attention to your content, not to diminish or replace it.

Spice up feature lists Link

Listing services is a practical and necessary part of effective marketing, but lists are inherently bland and boring. Using icons in conjunction with your feature lists will make them more engaging.

280 Slides

Draw attention to new features in a Web application Link

Icons are a visual invitation to users to try out the latest and greatest features of your Web application. Icons should capture your users’ attention and direct them to the new feature. Once you’ve grabbed their attention, tell them just what makes the new feature so great.

Coda5

6

List different applications and products Link

In this case, think of the icon as a logo, keeping in mind that the goal of a logo is to build a mental association between a product and a particular image. The icon should be unique but simple: most icons are only 128 by 128 pixels, so take a minimalist approach and say more with less.

Intridea7

8

List your services and increase readability Link

Icons should be relevant to the content and simple in design. Consider what you are trying to express with the content and create the icon based on that. What is the theme of the website or article? What colors are used? What is the style? Modern? Classic? Icons should visually unify the ideas expressed in the content and in the personality of the website as a whole.

J. Alexander Woodworking9

10

2. Purpose And Placement Link

Icons make your website friendly, inviting and professional, showing that you care about even the smallest details. Get creative with your icons: headers, sidebars, titles and feature lists are all great places to put them.

Accent headers to give titles a creative touch Link

A very simple icon can add charm and personality to a website.

Coffeenatic11

12

Engage readers on pages with extra long content Link

Use an icon that encapsulates the point you are trying to get across in your paragraph. This will make the text more accessible to your readers.

Rackspace13

14

Offset headings and sections Link

Use icons to provide a visually stimulating point of separation between different sections of text.

Defined Clarity15

16

Size doesn’t matter! Even small icons can be effective Link

Small icons provide the same level of visual interest as large ones, but without the potential to be distracting. Make sure that the icons are easily recognizable and relate closely to the content that they are accenting.

Morgan Hayes17

18

Switch things up by placing icons to the right of the paragraph Link

Don’t get stuck in a rut with your icon placement. Putting icons on the right is less common and will therefore be more visually striking. Beware, though, as this placement can sometimes look messy.

South Creative19

20

Vary size and placement of icons Link

Get creative! Changing the size and placement of icons will make the content appear more dynamic and interesting.

Media Temple21

22

3. Choose Your Style Link

When it comes to style, aim to be effective. If your design is supposed to be unique, then original icons are good, but being effective is far more important. Remember, icons are used to enhance your content and design, so it is especially important to pay attention to how your icons match the rest of your website. Don’t simply purchase a cool-looking set of icons from iStockPhoto. Rather, take into account the style of your website.

It is also crucial that all of your icons match. Grouping mismatched icons, no matter how cool they are individually, is a glaring design mistake and very unprofessional. Here are some examples of icons effectively integrated in the style of their respective websites:

Using light colors and cool 3-D designs complements the look and feel of this website:
GoodBarry23

24

Simplicity is attractive and practical, as shown in this example:
CrowdSPRING25

26

Using a grungy style on otherwise 2-D icons can add a lot of depth:
Take the Walk27

28

Choosing a unique and consistent style is both dynamic and professional:
Squarespace29

30

Monochromatic icons can help accent content without being distracting:
Studio 7 Designs31

32

Use the power of suggestion to transform screenshots with simple gradients into unique icons:
Gist

Don’t use icons just because they look cool; choose ones that really match your style and brand:
Treemo

4. Additional Examples Link

Here is a gallery of websites that use icons effectively. Hopefully, these will inspire you to better use icons on your own website.

WP Remix33

34

Subcontrast

Shoestring

Raka35

36

Ruby Tuesday37

38

Transmission Apps

Charity Water39

40

Oypro41

42

QBB Help43

44

Euro Languages

Joomla Designs45

46

The Designs47

48

Midnight Apps49

50

Mach 4

WordPress Designers

Holdfire51

52

Wallpaper Script53

54

Lee Munroe55

56

Dallas Usability Professionals57

58

Light CMS59

60

Astuteo61

62

Digital Mash63

64

(al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
  2. 2 https://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/
  3. 3 https://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/
  4. 4 https://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
  5. 5 http://panic.com/coda
  6. 6 http://panic.com/coda
  7. 7 http://intridea.com
  8. 8 http://intridea.com
  9. 9 http://jawoodworking.com/information
  10. 10 http://jawoodworking.com/information
  11. 11 http://coffeenatic.com
  12. 12 http://coffeenatic.com
  13. 13 http://rackspace.com
  14. 14 http://rackspace.com
  15. 15 http://definedclarity.com
  16. 16 http://definedclarity.com
  17. 17 http://morganhayes.com
  18. 18 http://morganhayes.com
  19. 19 http://southcreative.com
  20. 20 http://southcreative.com
  21. 21 http://mediatemple.com
  22. 22 http://mediatemple.com
  23. 23 http://goodbarry.com
  24. 24 http://goodbarry.com
  25. 25 http://crowdspring.com
  26. 26 http://crowdspring.com
  27. 27 http://takethewalk.net
  28. 28 http://takethewalk.net
  29. 29 http://squarespace.com
  30. 30 http://squarespace.com
  31. 31 http://studio7designs.com
  32. 32 http://studio7designs.com
  33. 33 http://wpremix.com/features/
  34. 34 http://wpremix.com/features/
  35. 35 http://www.rakacreative.com/services/index.php
  36. 36 http://www.rakacreative.com/services/index.php
  37. 37 http://www.rubytuesday.com/
  38. 38 http://www.rubytuesday.com/
  39. 39 http://www.charitywater.org/getinvolved/
  40. 40 http://www.charitywater.org/getinvolved/
  41. 41 http://www.oypro.com/
  42. 42 http://www.oypro.com/
  43. 43 http://www.qbbhelp.com/
  44. 44 http://www.qbbhelp.com/
  45. 45 http://www.joomladesigns.co.uk
  46. 46 http://www.joomladesigns.co.uk
  47. 47 http://www.thedesigned.com/
  48. 48 http://www.thedesigned.com/
  49. 49 http://www.midnightapps.com/
  50. 50 http://www.midnightapps.com/
  51. 51 http://www.holdfire.com/
  52. 52 http://www.holdfire.com/
  53. 53 http://www.wallpaperscript.com/
  54. 54 http://www.wallpaperscript.com/
  55. 55 http://www.leemunroe.com/
  56. 56 http://www.leemunroe.com/
  57. 57 http://dfw-upa.org/
  58. 58 http://dfw-upa.org/
  59. 59 http://www.speaklight.com/
  60. 60 http://www.speaklight.com/
  61. 61 http://www.astuteo.com/
  62. 62 http://www.astuteo.com/
  63. 63 http://www.digitalmash.com/
  64. 64 http://www.digitalmash.com/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Nathan Barry is the founder of ConvertKit, an email marketing application, as well as the author of The App Design Handbook and Designing Web Applications. His latest book, Authority, teaches authors how to profit from self-publishing.

Advertisement
  1. 1

    Really useful, and insightful advice…thanks SM.

    edit: can hardly believe I’m the first commenter – i feel honoured

    0
  2. 2

    Peter Urban

    March 3, 2009 3:40 pm

    Great post. Same is true with using icons to design effective web applications. We are jut going though a design improvement phase with our apps an found that it is critical to find the right mix (in terms of amount and style) between icons and simple links.

    0
  3. 3

    Thanks a lot for the information
    Its a really nice blog

    Keep It Up !!

    0
  4. 4

    Really nice showcase of thoughtful icon usage.

    1
  5. 5

    Great post, and I do agree that icons do help bring attention to paragraphs, especially when they need to highlight important changes or information to the user.

    Though I would say that be careful, I have seen a lot of sites out there use icons (and just icons) for navigation. Not even a rollover would come up and tell me where it goes, I had to look at the status bar.

    Great article and a nice inspiration piece too.

    0
  6. 6

    Great collection, although the Joomla! Designs link is broken.

    0
  7. 7

    Really really nice collection, thanks

    0
  8. 8

    Awesome article Nathan, great job showing how useful icons are in displaying content to users.

    0
  9. 9

    Anna @crinkled

    March 3, 2009 4:55 pm

    I love the way icons look on the web when used effectively. In addition to the accenting content, they allow the site to become less of a “website” and more of a “useful tool”, with design elements of an application. I love that.

    0
  10. 10

    I need to preface this by saying I love Smashing. Now that I’ve made that declaration, I have a small gripe.

    I read most of your posts on my iPhone while commuting. In fact, I’m posting this comment from the back of a bus. That being the case, I’m often reading on a smaller screen with liter bandwidth. Posts such as this one practically crash my device because they are so graphics heavy. Andthey take forever to load.

    I’ll probably get bashed for asking, but might you be able limit your feeds so they don’t send the whole post to rss readers? This has the added benefit of increasing pageviews on your site. Frankly, it just seems like good business for you and a better experience for you readers.

    0
  11. 11

    no mention of favicons? even just two sentences with links to your great favicon posts?

    0
  12. 12

    I went icon-crazy in my application, Marketo.
    Video to see: http://pages2.marketo.com/demo.html

    Using the V-Collection from iconExperience.

    0
  13. 13

    Wow, Cool and usefull Post !
    Smashing Mag really rox !

    0
  14. 14

    Nathan Barry

    March 3, 2009 8:10 pm

    Thanks everyone for the kind comments. Do you have any other favorite examples of icons in use?

    @Michael This post was focused on how icons relate to content. Since favicons are separate from the content, I decided not to mention them in this article.

    0
  15. 15

    Very useful article….

    0
  16. 16

    TweetyBlossom

    March 3, 2009 8:35 pm

    Great information I have been working on building my own webpage but was completely lost. Thanks

    0
  17. 17

    Excellent article. I definitely don’t use icons enough in my designs. My next project I will.

    Tip: When using icons in your designs, keep related icons a consistent size & use consistent, proportional spacing around your icons, as well.

    Love,
    Joel

    0
  18. 18

    Dan Whitmore

    March 3, 2009 9:01 pm

    Fantastic post, thanks for this!

    0
  19. 19

    The kind of article I wanted just now..really smashing.

    0
  20. 20

    cool icons, hot designs

    0
  21. 21

    this is really nice one.
    I think Joomla Designs URl is not correct.

    0
  22. 22

    nice article with good knowledge of icons

    0
  23. 23

    Wow, this is a timely article considering I just finished a new set of icons about an hour ago.

    I love how thoughtful and well-researched your articles are. I don’t know how you find such a wealth of information on your topics, but I’m glad you share it. Thank you.

    1
  24. 24

    That’s one seriously long article! Good job!

    0
  25. 25

    Nice post, although the link of ‘Take The Walk’ should be takethewalk.net.

    Keep up the good work!

    0
  26. 26

    A few days I was looking for inspiration to use icons on a new design, I really spent a lot of time! Hope this can help others looking for inspiration, I will have a look for future inspiration :D

    Thanks!

    0
  27. 27

    Very informative! Thanks

    0
  28. 28

    Raj Kumar Maharjan

    March 4, 2009 12:21 am

    nice way to implementing the icons with different ideas. Thanks

    0
  29. 29

    Thanks for inspiration.

    0
  30. 30

    I use icons in my designs, but this opened my eyes a lot more. Great article.

    0
  31. 31

    Great article, icons are an integral part of website design. They must communicate various information to the user immediately and be used effectively. I hate when icons are just plonked on a website, with no thought of postioning. There are some really nice icons here, thanks for the inspiration.

    0
  32. 32

    Line of Design

    March 4, 2009 1:07 am

    Nice examples.,… Especially : Squarespace is original and inspiring, and tells the “story”/sends the message well.

    But I think that some websites use icons- just to use icons… Sometimes they don’t make that much sense, and then I think There is no need to use them- if the just confuse the viewer…

    I have been dreamning of a iconset for a long time now. The set should include icons for:
    acryllic paintins,
    oil-paintins,
    aqualelle pintings,
    crayon-drawings,
    pencil-drawings,
    tush/ink-drawings
    photoshop-drawings
    flash-drawings
    illustrator-drawings

    and furtehrmore:
    web-layouts
    print-layouts
    graphic design

    But I havent found any icon-set that matches my needs… Do you know of any place I can get this?

    0
  33. 33

    OverZero.it

    March 4, 2009 1:13 am

    Great article!
    I already use the “List your services and increase readability” approach in my website, and I think it helps a lot the user.
    The “Choose your style” part of the article is very interesting, nice list.
    Thanks.

    0
  34. 34

    Really informative article. Thx

    0
  35. 35

    Vitaly Friedman & Sven Lennartz

    March 4, 2009 1:25 am

    “joomla” and “take the walk” links updated. thanks for reporting!

    0
  36. 36

    Great article! I’m always a little anxious about when to use icons, but your examples really helped me understand the best practices of icon usage.

    0
  37. 37

    mecaniqueorange

    March 4, 2009 2:01 am

    nice post, thanks

    0
  38. 38

    Hi,
    very nice article. I would like to have some icons for categories of my german shop.
    But i don’t know, how i can create some. My dream is to have comic art icons like http://www.globetrotter.de.
    Do anyone have some ideas to create them myself?
    Kind regards
    Merkus

    0
  39. 39

    this is really an smashing article

    0
  40. 40

    Vanilla Man

    March 4, 2009 3:02 am

    There is a message “This Domain is FOR SALE.” on wordpressdesigners.com

    0

↑ Back to top