Iconography
Documentation and uses for UI system icons
General Rules
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.
Example:
Sizes
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:
Small: 18px
Default: 24px
Large: 30px
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.
close
Uses
- Closing modals
- messages communicating failure to the user
search
Uses
- identifying search areas and actions
information
Uses
- identifying extra information messages or interactions
help
Uses
- identifying help messages or interactions
check
Uses
- messages communicating success to the user
account
Uses
- identifying WOL account information or actions
next
Uses
- identifying actions that move the user forward
previous
Uses
- identifying actions that move the user back
up
Uses
- identifying actions that collapse or move things up
- accordion close (collapse)
down
Uses
- identifying actions that deploy or move things down
- accordion open
lock_open
Uses
- communicate access messaging to users
add_alert (soon to be email icons)
Uses
- communicate content or actions relating to email alerts