Icons are a great way to highlight key messages and content on your website. A main goal of using icons should be to help the visitor absorb and process information more effectively. Icons can enrich even sparse content by giving it greater substance, enabling effective communication without being verbose. Icons should highlight the content on a page, not overshadow or replace it.
UMass Amherst has standardized on Font Awesome as our approved icons. Font Awesome has over 400 icons available for use and should be used when icons are needed in a web design.
The What We Do section, taken from the University Relations home page, is an example of how these icons can be used.
Please visit fontawesome.io/examples to learn more and to download the icon files.
How to use icons in your design:
- Use icons to distinguish actions. Always have supporting copy/text link next to the icon.
- Use light icons on a dark background.
- Use dark icons on a light background.
- Use icons only in the approved UMass Amherst colors.
- Stretch the icon.
- Change opacity.
- Overlap icons.
Make icons either too big (larger than the header font size) or
too small (smaller than body copy size).