Icons
Last updated: October 8, 2015 at 13:29 pm

All the icons approved for use on your site and the rules surrounding their use: sizes, colors, formatting, usage guidelines, and creation guidelines.


Visual example of the element:


What problem does this element or pattern solve?
Having a clearly defined icon strategy is particularly important due to the potential for icon misuse. The second benefit of a clear icon strategy is to prevent your pages from becoming overrun with icons—a disease I lovingly call “Severe Iconitis.” Therefore, when selecting owners for this page, I recommend fairly senior employees who are not afraid to say “no”, and have the ability to steer new icon requests toward more appropriate alternate solutions.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Present a clear icon strategy regarding when icons should, and should not, be used.
  • Create a full list of all approved icons and their meaning.
  • Are your icons based on web fonts (such as FontAwesome) or are they graphics?
  • Present icon hover, active and visited states if applicable.
  • If your icons are are fonts, include a link to the downloadable screen and web fonts, as well as the appropriate code formatting.
  • If they are graphics, provide links to production ready graphics. Also, provide the location of the original files for the design team should the icon require editing.
  • Include links to production ready sprites for developers.
  • If an employee wants to create a new icon not on the approved list, include instructions for them to use the comment area. New icon requests should be viewed as a standard change request.


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
thumbnails, symbols, pictures, fauxcons, focons, representations
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply