Icons
Search the component library

Icons

v2.0.0-beta.4

This component provides a standard set of UI icons across Pearson applications.

Usage Guidelines

Use Pearson icons with a purpose. Do not use them as decorations or alter their intended use.

Features

  • 18px and 24px icons
  • CSS class
  • Guidelines

Dependencies

Colors v2.0.0

Pearson Icons

Pearson icons are available in two sizes, 18 x 18 and 24 x 24 pixels. You can incorporate them into your design by downloading the Pearson-icons.sketch file, located above.

Web App Development

You do not need to provide SVG or backup PNG, simply note the class name from the icons list or within the Pearson-icons.sketch file. If you wish to modify the icons, follow the guidelines below for colors, naming, and scaling.

Blue and White Icons

The default color is gray. For a blue or white version, simply add -blue or -white suffix to the class name. See Name Guide for more examples.

General    
archive-18 archive-24
ban-18 ban-24
book-18 book-24
calendar-18 calendar-24
camera-18 camera-24
camera-video-18 camera-video-24
capslock-18 capslock-24
check-lg-18 check-lg-24
check-sm-18 check-sm-24
chevron-back-18 chevron-back-24
chevron-next-18 chevron-next-24
point-back-18 point-back-24
point-next-18 point-next-24
clock-18 clock-24
delete-18 delete-24
desktop-18 desktop-24
email-18 email-24
file-18 file-24
font-lg-18 font-lg-24
font-sm-18 font-sm-24
font-setting-18 font-setting-24
person-18 person-24
group-18 group-24
help-fill-18 help-fill-24
help-outline-18 help-outline-24
image-18 image-24
info-fill-18 info-fill-24
info-outline-18 info-outline-24
note-18 note-24
notification-18 notification-24
remove-lg-18 remove-lg-24
remove-sm-18 remove-sm-24
search-lg-18 search-lg-24
search-sm-18 search-sm-24
settings-18 settings-24
tip-18 tip-24
warning-18 warning-24
Player    
audio-off-18 audio-off-24
audio-high-18 audio-high-24
audio-low-18 audio-low-24
pause-18 pause-24
play-18 play-24
screen-full-18 screen-full-24
screen-minimize-18 screen-minimize-24
Toggle    
checkbox-off-18 checkbox-off-24
checkbox-on-18 checkbox-on-24
checkbox-tristate-18 checkbox-tristate-24
dropdown-close-18 dropdown-close-24
dropdown-open-18 dropdown-open-24
favorite-off-18 favorite-off-24
favorite-on-18 favorite-on-24
item-add-18 item-add-24
item-remove-18 item-remove-24
lock-close-18 lock-close-24
lock-open-18 lock-open-24
pivot-close-18 pivot-close-24
pivot-open-18 pivot-open-24
radio-button-off-18 radio-button-off-24
radio-button-on-18 radio-button-on-24
show-off-18 show-off-24
show-on-18 show-on-24
view-list-18 view-list-24
view-tile-18 view-tile-24
zoom-in-18 zoom-in-24
zoom-out-18 zoom-out-24

Name Guide

The name describes the intended use, variation, pixel size, and scaling.

Colors

Standard Colors:

Status Colors: (optional)

Label Spacing

Use a minimum spacing, 10 pixel, between the icon and label.

Touch Target

You can use Pearson icons as buttons. To ensure accessibility across desktop and mobile devices, a minimum touch target, 44 x 44 pixel, is required for each icon.

Scaling

You can scale the icons up by 2x, 3x, 4x, and 5x. However, scaling them down or any .5x variation, the lines and shapes will become blurry.

Changelog

2.0.0-beta.4

  • ADDED: Notification icons.

2.0.0-beta.3

  • ADDED: Caps lock icons.
  • ADDED: HEX links to colors section

2.0.0-beta.2

  • ADDED: checkbox tri-state, dropdown, font settings, list, lock, note, pivots, pointers, tip, and zooms.
  • ADDED: class names for white and blue icons.
  • TWEAKED: bolder line-weight for 18px and 24px.
  • REMOVED: newspaper, pin, and suitcase.

2.0.0-beta.1

New Pearson UI Icons

1.2.0-beta.1

  • ADDED: search-plus, search-minus, bell, clock-o

1.1.0

  • ADDED: question-circle, caret-right, caret-down, light-bulb-o, and icons for archive action, plus reading, business case, video, and image content types
  • TWEAKED: Icons should now all be displayed in Pitch (#231f20)

1.0.0

Initial release