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.
- Icons in Web Design
- 10 ways to use icons and images in digital design
- How To Design a Set of Icons [+ Resources]
Using Icons
There are two basic ways that icons are added
- Icon Fonts
- 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.
- Font Awesome icon font: free and premium plans
- Google Icons icon font: free
- Flaticon these are images you download and then add
- you must attribute the icon author when using these (footer is probably best place). Here’s their guide.
