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:

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

account_circleadd_boxcollections_bookmark

Default: 24px

account_circleadd_boxcollections_bookmark

Large: 30px

account_circleadd_boxcollections_bookmark

Extra large: 36px

account_circleadd_boxcollections_bookmark

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
close

Uses

  • Closing modals
  • messages communicating failure to the user
search
search

Uses

  • identifying search areas and actions
info
information

Uses

  • identifying extra information messages or interactions
help
help

Uses

  • identifying help messages or interactions
check
check

Uses

  • messages communicating success to the user
account_circle
account

Uses

  • identifying WOL account information or actions
chevron_right
next

Uses

  • identifying actions that move the user forward
chevron_left
previous

Uses

  • identifying actions that move the user back
keyboard_arrow_up
up

Uses

  • identifying actions that collapse or move things up
  • accordion close (collapse)
keyboard_arrow_down
down

Uses

  • identifying actions that deploy or move things down
  • accordion open
lock_open
lock_open

Uses

  • communicate access messaging to users
add_alert
add_alert (soon to be email icons)

Uses

  • communicate content or actions relating to email alerts