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.
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.
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.
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.
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.
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.
Offset headings and sections Link
Use icons to provide a visually stimulating point of separation between different sections of text.
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.
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.
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.
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:
Use the power of suggestion to transform screenshots with simple gradients into unique icons:
Don’t use icons just because they look cool; choose ones that really match your style and brand:
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.
- 1 https://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
- 2 https://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/
- 3 https://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/
- 4 https://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
- 5 http://panic.com/coda
- 6 http://panic.com/coda
- 7 http://intridea.com
- 8 http://intridea.com
- 9 http://jawoodworking.com/information
- 10 http://jawoodworking.com/information
- 11 http://coffeenatic.com
- 12 http://coffeenatic.com
- 13 http://rackspace.com
- 14 http://rackspace.com
- 15 http://definedclarity.com
- 16 http://definedclarity.com
- 17 http://morganhayes.com
- 18 http://morganhayes.com
- 19 http://southcreative.com
- 20 http://southcreative.com
- 21 http://mediatemple.com
- 22 http://mediatemple.com
- 23 http://goodbarry.com
- 24 http://goodbarry.com
- 25 http://crowdspring.com
- 26 http://crowdspring.com
- 27 http://takethewalk.net
- 28 http://takethewalk.net
- 29 http://squarespace.com
- 30 http://squarespace.com
- 31 http://studio7designs.com
- 32 http://studio7designs.com
- 33 http://www.rakacreative.com/services/index.php
- 34 http://www.rakacreative.com/services/index.php
- 35 http://www.rubytuesday.com/
- 36 http://www.rubytuesday.com/
- 37 http://www.charitywater.org/getinvolved/
- 38 http://www.charitywater.org/getinvolved/
- 39 http://www.oypro.com/
- 40 http://www.oypro.com/
- 41 http://www.qbbhelp.com/
- 42 http://www.qbbhelp.com/
- 43 http://www.joomladesigns.co.uk
- 44 http://www.joomladesigns.co.uk
- 45 http://www.thedesigned.com/
- 46 http://www.thedesigned.com/
- 47 http://www.midnightapps.com/
- 48 http://www.midnightapps.com/
- 49 http://www.holdfire.com/
- 50 http://www.holdfire.com/
- 51 http://www.wallpaperscript.com/
- 52 http://www.wallpaperscript.com/
- 53 http://www.leemunroe.com/
- 54 http://www.leemunroe.com/
- 55 http://dfw-upa.org/
- 56 http://dfw-upa.org/
- 57 http://www.speaklight.com/
- 58 http://www.speaklight.com/
- 59 http://www.astuteo.com/
- 60 http://www.astuteo.com/
- 61 http://www.digitalmash.com/
- 62 http://www.digitalmash.com/
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 Barcelona, on October 25–26, with smart design patterns and front-end techniques.