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

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

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 Slides5

6

Draw attention to new features in a Web application

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.

Coda7

8

List different applications and products

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.

Intridea9

10

List your services and increase readability

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 Woodworking11

12

2. Purpose And Placement

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

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

Coffeenatic13

14

Engage readers on pages with extra long content

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.

Rackspace15

16

Offset headings and sections

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

Defined Clarity17

18

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

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 Hayes19

20

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

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 Creative21

22

Vary size and placement of icons

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

Media Temple23

24

3. Choose Your Style

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:
GoodBarry25

26

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

28

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

30

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

32

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

34

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

36

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

38

4. Additional Examples

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

WP Remix39

40

Subcontrast41

42

Shoestring43

44

Raka45

46

Ruby Tuesday47

48

Transmission Apps49

50

Charity Water51

52

Oypro53

54

QBB Help55

56

Euro Languages57

58

Joomla Designs59

60

The Designs61

62

Midnight Apps63

64

Mach 465

66

WordPress Designers67

68

Holdfire69

70

Wallpaper Script71

72

Lee Munroe73

74

Dallas Usability Professionals75

76

Light CMS77

78

Astuteo79

80

Digital Mash81

82

(al)

Footnotes

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

↑ 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.

Advertising
  1. 1

    gregory nicholas

    March 4, 2009 8:02 am

    this article listed a lot of screenshots and examples.. but i think a better point to have been made was how icons can easily be misleading or inappropriate, and how to avoid overuse of icons..

    0
  2. 52

    angel rodriguez

    March 4, 2009 8:33 am

    yhea nice post , i think the icons are really importatn in one project , and they dont have to be too detailes, simplest logos are great for me ^^

    0
  3. 103

    did this approach on our website for sidebar callouts. i like it. now i just need to fix the CSS

    0
  4. 154

    This is a horrible article and horrible advice that ignores years of usability research. Icons have no intrinsic meaning. The use of obscene icons is even more hilarious. Anyone who follows the advice given here is an idiot.

    1
  5. 205

    Another great article – I love coming to the site and relearning some of the finer points of design like this.

    Something which might be nice to expand on – the decipher-ability of icons as they relate to the information they are representing. That always seems to be a struggle on some accounts, and I see some of it in the examples above, as well as some nice solves for it (life jacket for a support area).

    Thanks for the great article!

    0
  6. 256

    @Jason

    Care to elaborate? Usability is a big factor when laying out content and designing a website so we always try to focus on it. From my experience icons actually help to make content more readable and usable.

    Could you explain some of the downsides to using icons?

    0
  7. 307

    Excellent post, thank you very much !

    0
  8. 358

    @ Nathan Barry

    I’m of similar mind as Jason. I tried posting the following message earlier but it’s still in moderation purgatory. I’ve created a Smashing account in the hopes that it will actually get posted. Please forgive me if it appears multiple times:

    // Begin Pedantic Rant

    About half of the examples in this article are in fact spot illustrations and not icons per se.

    A web page is an interactive computing environment and an icon in a computing environment has the affordance of an interactive object.

    Using an icon in a way which violates it’s affordance (i.e. using an interactive-looking icon where no interaction exists) erodes a user’s trust in your interface (most web pages are interfaces) and can quickly lead to the user abandoning your site altogether.

    There’s been a strong trend lately for the two to be confused; especially here on Smashing. I love this site, but mixing the two in a single article only compounds the problem and leads to more designers creating bad UI and bad User Experiences; which leads to poor user retention and user completions; which leads to your clients have less money in their pockets to pay you with. DON’T DO IT. Learn the difference and avoid the trap.

    // End Pedantic Rant

    3
  9. 409

    Edopter (social trendcasting site) uses big beautiful icons to showcase key elements on the site. The best example is their “visual glossary”:

    Edopter Visual Glossary

    0
  10. 460

    I was quite surprised to see that you had linked up Holdfire, although it’s Holdfire.net, not holdfire.com.

    0
  11. 511

    Thanks for doing this. Almost every day someone comes out with an icon set and I always think “what am I suppose to do with this?” Now I know.

    @MillerMosaicLLC

    0
  12. 562

    Nice list – I would have liked to have seen some examples of ‘what not to do’.

    Keep up the good work – smashingmagazine is my most clicked bookmark :-)

    0
  13. 613

    Right on…Light CMS is one of my favorites. One I’m surprised I didn’t see was http://www.bizshark.com

    0
  14. 664

    heather van de mark

    March 4, 2009 2:07 pm

    Was quite interested in hearing about this difference about icon and spot illustrations. Thanks for pointing it out guys.

    0
  15. 715

    Awesome post. Now where do I go to find icons like this to use? Or am I expected to design them myself?

    0
  16. 766

    letscounthedays

    March 4, 2009 6:24 pm

    I also use icons on my website to break up text and add to the readability. Check it out at here: http://www.shayhowe.com

    I saw someone asked where to get some good icons. A few good places I’ve found to get free icons include:
    http://www.vecteezy.com/
    http://www.iconaholic.com/
    http://freebiesdock.com/

    0
  17. 817

    Your subversion icon is for Bazaar. It makes no sense because the joining of arrows represents the merging of repositories, something subversion can’t do like Bazaar does.

    0
  18. 868

    very nice site!

    0
  19. 919

    realy realy great post !! i got myself some icons from this article in my website :)

    0
  20. 970

    Really nice article, I always liked icons in web design, and found
    them very effective, but never understood why, you have managed to
    rationalize it.

    Not sure I agree with your point about making the icons different
    sizes to make the content more dynamic, I think it contradicts your
    next comment saying “It is also crucial that all of your icons match”

    You asked for ‘favorite examples of icons in use?’ We use icons for
    all the wedding activities we
    offer, these icons are also used in each wedding so the user is able
    to find similar weddings.

    0
  21. 1021

    thanks for sharing this beautiful article!! its really useful for web designers.

    0
  22. 1072

    I love this article.
    Thanks so much!!!!

    0
  23. 1123

    This was an extremely helpful post! I will be using some ideas from here to redo a homepage for a site because I was so convinced by this. Thanks SM!

    0
  24. 1174

    Really nice article, I always liked icons in web design, and found them very effective, but never understood why, you have managed to rationalize it.
    Not sure I agree with your point about making the icons different sizes to make the content more dynamic, I think it contradicts your next comment saying “It is also crucial that all of your icons match”

    0
  25. 1225

    @Steve

    Thanks for taking the time to explain your thoughts. I actually learned quite a bit from your point of the difference between an icon that is part of the interface (i.e. clickable) versus an icon (or spot illustration) that is only an accent for content. Looking back I should have made the distinction in the article.

    Though really I think in the cases above it is very easy to distinguish which are links and which are not just due to their relationship to the content.

    Thanks for pointing that out. I definitely learned from your comment!

    1
  26. 1276

    Great article. Just by using icons the user can immediately identify what the text covers, so they can scan for what they’re looking for. Need to go find some nice icons now. Problem is trying to find unique iconsets that aren’t overused ;-)

    Thanks for the feature Nathan

    0
  27. 1327

    Great post on the use of icons. Helped give me some insight into how I might use them. Sort of gives a web site a web app look.

    0
  28. 1378

    What happened to examples that were supposed to show ‘how not to do it’ ?

    Although http://www.eurolanguages.com/ is trying quite hard to alienate people – I love how they tie ‘English’ to: “Ireland, England, Scotland, Malta”
    I’ve always known that they speak a different language over the pond in the USA, but what happened to Wales, Australia, NZ, India etc?
    And then they compound it by showing the Union Jack against Ireland: no-one in the south is going to be happy about that, and only half of the north for that matter!

    0
  29. 1429

    Nice! One thing that really bugs me though is when people use icons but neglect to make the icon clickable along with the link.

    0
  30. 1480

    I believe the link for Holdfire is supposed to go to holdfire.net not holdfire.com as it is currently linked.

    0
  31. 1531

    Two Socks - Graphic design and print

    March 8, 2009 2:40 am

    The link for “WordPress Designers” is gone-skis!

    0
  32. 1582

    Lots of cool applications but of course the designer has to decide whether icon usage is the correct solution for the client. In some cases it is tempting to overload the sites, however in many cases where a product is not a physical thing they can help vastly.

    The site over at Media Temple is an example in point. A bunch of servers don’t usually look that cool, but a bit of icon work later and the whole package is much more saleable.

    0
  33. 1633

    would be good to see the bad examples of using icons…

    Simple example of how icons are really support and enrich the content it is Google and Yahoo! services pages.

    0
  34. 1684

    On some of given examples icons are really spoiled the design

    0
  35. 1735

    wow, even at a glance i could see what i’ve been doing wrong. after reading this article it has definitely restored my confidence,

    thanks Nathan & of course the wonderful smaShing MagaZine

    0
  36. 1786

    I love comment #49.

    This is one of the worst blogs I’ve ever read on this site over the past, eh 2 years. I really think this could have been condensed much further. It is nice to have an abundance of illustrations on different icon implementations, but the talking points seem almost repetitive.

    0
  37. 1837

    For me – icons – are the most difficult area in webdesign. I wish I could draw by hand better, i think it helps a lot.

    0
  38. 1888

    Porn sites uses lots of good icons

    2
  39. 1939

    i like it. thanks

    0
  40. 1990

    Thanks – well written article with a sensible point of view

    I am SO tired of sites who assume that I understand their version of ‘mystery meat’ – meaningless pictures and no explanatory text.

    0
  41. 2041

    good list. perfect. thanks.

    0
  42. 2092
  43. 2143

    That was such a good article! So thorough.

    0
  44. 2194

    I have been surfing online more than 3 hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. Personally, if all website owners and bloggers made good content as you did, the internet will be a lot more useful than ever before.

    0

↑ Back to top