Documentation and uses for UI system icons
Icons on WOL are rendered using an iconfont compiled with IcoMoon.
All currently available icons can be viewed on the IcoMoon demo page.
Wiley's research products should use Google's Material Design Icon family where possible.
There are a number of sites that offer Material Design style icons and support:
- Official Google Material Design icon library
- Community run Material Design icon library with additional icons
- A reference sheet for the official Google icon library
Try to include labels alongside icons when space allows for it. Try not to uses too many icons in close proximity with eachother when not using labels.
Whilst there are no absolute limits on icon sizes, the material design icon format is built on a 24x24 unit grid. For the most optimal experience, the following sizes should be followed:
Extra large: 36px
Notable icon uses
Please refrain from using the icons below for purposes other than what is listed. For example, do not use these icons for decorative of illustrative purposes.
- Closing modals
- messages communicating failure to the user
- identifying search areas and actions
- identifying extra information messages or interactions
- identifying help messages or interactions
- messages communicating success to the user
- identifying WOL account information or actions
- identifying actions that move the user forward
- identifying actions that move the user back
- identifying actions that collapse or move things up
- accordion close (collapse)
- identifying actions that deploy or move things down
- accordion open
- communicate access messaging to users
add_alert (soon to be email icons)
- communicate content or actions relating to email alerts