Icons are simple symbols that attract attention, aid navigation, signal an action, add emphasis, or provide feedback. Icons serve as recognizable cues that users can understand easily.
Icons must be used consistently across a site or service in order to accomplish their purpose well. For example, using an envelope icon for both email and a mailing address would likely confuse people. Viewers should be able to trust that a certain icon always means the same thing, no matter where it’s used.
Icons should be used sparingly. Nielsen Norman Group sums it up best by considering the 5-second rule:
Use the 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.
Icons may be used as visual labels (without visible text) if the meaning of the icon is self-evident AND if there is a semantic label in place for assistive technologies.
See Icon Usability - Nielsen Norman Group.
See Accessibility - Font Awesome
When using icons, please be sure to add adequate spacing between the icon and adjacent elements (including text). Adding a is usually sufficient. In certain instances, such as buttons, a margin of 0.5em is recommended.
Approved icons
This icon set has been carefully chosen to meet the branding needs of the Library. Please do not use any icon that is not in this list, or use it for something other than intended for. If an icon is needed and doesn't appear in this list, please contact the Communications Department.
User interface
| Icon | Meaning |
|---|---|
| icon-accordion-collapse | Accordion Collapse |
| icon-accordion-expand | Accordion Expand |
| icon-close | Close Window / Close Dialog |
| icon-grid-view | Gallery/Grid view |
| icon-list-view | List view |
| icon-image-expand | Image Expand |
| icon-menu-collapse | Drop Down Menu Collapse |
| icon-menu-expand | Drop Down Menu Expand |
| icon-page-forward | Page Forward |
| icon-page-back | Page Back |
| icon-refresh | Refresh Page / Reload / Reset |
| icon-scroll-top | Return to top |
| icon-slide-left | Slide Left (on page) |
| icon-slide-right | Slide Right (on page) |
| icon-arrow-right | Page Forward |
| icon-arrow-left | Page Back |
| icon-electronics--link | Electronics Link |
| icon-3D-print-alt--link | 3D Print Alternate Link |
| icon-3D-print--link | 3D Print Link |
| icon-3D-scan--link | 3D Scan Link |
| icon-textiles--link | Textiles Link |
| icon-video--link | Video Link |
| icon-audio--link | Audio Link |
| icon-vr--link | VR Link |
| icon-doc-scan--link | Document Scan Link |
| icon-hours--link | Hours Link |
| icon-quotes--left | Quotes Left |
| icon-quotes--right | Quotes Right |
Messaging
| Icon | Meaning |
|---|---|
| icon-alert | Alert (appears in navbar) |
| icon-critical | Critical, Emergency Alerts / Attention |
Status
| Icon | Meaning |
|---|---|
| icon-delete | Delete |
| icon-error | Error, Problem Alerts / Not Available |
| icon-info | Info / FYI / Informational Alerts |
| icon-success | Success / Confirmation Alerts |
| icon-special | Special Selected / Preferred |
| icon-warning | Warning Alerts / Modified Status |
| icon-comment | Chat |
Account & data
| Icon | Meaning |
|---|---|
| icon-aal | Ask a Librarian |
| icon-account | Account / MyAccount |
| icon-bookmark | Bookmark |
| icon-calendar | Calendar |
| icon-cite | Citation |
| icon-copy | Copy |
| icon-download | Download |
| icon-edit | Edit |
| icon-email | |
| icon-new-tab | Opens in new tab/window |
| icon-hours | Hours |
| icon-pdf | |
| icon-print | |
| icon-arrow-right-link | Arrow Right Link |
| icon-new-tab | New Tab |
| icon-university | University |
| icon-user | User |
Social
| Icon | Meaning |
|---|---|
| icon-instagram | |
| icon-youtube | YouTube |
| icon-facebook | |
| icon-flickr | Flickr |
| icon-twitter | |
| icon-vimeo | Vimeo |