7 Tips for Effective Use of Icons

Designing icons can be a lot of fun. But once you have a good set, what do you do with them?
Icons are not just miniature links for Facebook or Instagram — they can be fully interactive cues that help lead users through a design and provide extra visual spark.
 Icons can be small or large, black and white or colored, flat or intricate. No matter what style appeals to you, effective use of icons can enhance usability and the aesthetic value of almost any design project.

1. Add Visual Interest

  • Not every image is going to be a breathtaking landscape. Sometimes images just fall short.
  • Fun iconography can help add more interest to these somewhat uninteresting photos. 
  • Use icons to enhance the content of the photo, provide an extra bit of information and provide an interaction cue.
2. Create Interaction
  • Icons don’t have to fit into specific placements to encourage user interaction. (Too many templates use the three column icon/text combination in the scroll.
  • Icons can actually be the element that drives interactivity. Pair iconography and parallax scrolling that items move across the screen.
  •  Layer icons with images another background to create an element that’s a bit unexpected.
  • Boone Selections creates a travel scene for its wines using iconography in a way that makes you want to scroll. 

3. Use Animation
  • No one ever said that icons have to be static elements. Animate them!
  • But don’t go too crazy. The best icon animations relate to the content of the icon itself. Movements shouldn’t be too fast because it can be a little unnerving. 
  • Movements shouldn’t be too slow because users might miss them. There’s a sweet spot in the middle where icon movement provides a bit of delight.
4. Create Icon Clusters
  • Clusters of interesting shapes, sketches or otherwise hand-crafted icons can make an interesting visual. 
  • The concept is displayed commonly on websites that distribute icon packs (such as the one above), but it has wider application.
  • Consider rows of icons – toy with using them under- or oversized for more impact – when you are lacking a good visual. 
5. Combine with Trendy Elements

  • Icons should be just one part of a design strategy for a project. Think about your content and pair iconography with another trendy element to create a modern aesthetic.
  • The nice thing about using icons is style flexibility. Icons come in seemingly every shape and form from line art, sketch-based styles to flat cut-out designs to elaborate miniature pieces of art.
  •  Once you have settled on a design style for a project, create a set of icons that match that visual tone.
  • The website for a History of Icons does this beautifully
6. Put a Whimsical Twist on It
  • For certain icons, there are standard designs that you’ll want to use so that users know exactly what those elements do.
  •  This can include icons for social media links, search, shopping carts and navigational arrows. You should never sacrifice usability for a new design.
  • But you can put your own whimsical twist on these standard icon styles. Change the color, tweak the shape or even redraw the icons in your style. 
7. Create Custom Sketches

  • Icons can be miniature art canvases in themselves. While the iconography trends lean more toward super flat, line art renderings, detailed sketching can provide a great custom option that is your own.
  • Every hand sketched set will be different. 
  • There’s no real way to categorize them other than to find something you can own. Sketched icons are often part of the identity of the brand that uses them.