Icons are a good way to make your page easier to scan, communicate across languages and add visual interest to the site. Use them when they complement or add meaning to the text content and don’t overuse them on any individual page.

Occasionally it’s OK to use them without text but generally they should be paired with text. When not paired with text they should either be well known (social media icons for example) or being used as a more abstract design element.

The articles below have some more in depth suggestions on how to use them. You can find many more by doing a web search but be careful of when the articles were written; styles of icons change with design trends.

Using Icons

There are two basic ways that icons are added

  1. Icon Fonts
  2. Images

Icon fonts are generally the easiest to use. They’e usually used by getting a css file from the provider and adding their icon classes where you want to use them. It varies a bit so read how to use for those sites. These icons are generally flat

With images, you download the icons from the site and then add them to your site like any other image. When you need an icon that is more realistic or colorful and not flat then images might be the only choice.

Leave a comment