Icon Library

The icon library lists the more commonly used icons found in web applications.

The use of icons can enhance the usability and experience of an application's user interface.  Icons can work as graphical cues, acting as a quick indication of its intended action, while conserving space and improving look and feel.

There are two groups of actionable icons. Please note that icons aren't formally restricted to one or the other.  This is determined by the task being performed.
  1. Page Management and Form Icons that can be found on the page or form itself.
  2. Data Table Icons that mainly live within a data table.
Provided is an enabled (clickable) and disabled (not clickable) version.  These are used interchangeably depending on the use case.

All action icons must:

  1. Display a tool tip with a short description regarding the action being performed.
  2. Align right within the grid column.
  3. Line up vertically with its own icon in other rows (when using multiple icons)

Page Management and Form Icons

Use when managing page and form actions.

Name Enabled Icon Disabled Icon Description
Admin gear N/A Access adminitrative or settings section of an application.
Alert alert N/A To alert or warn the user.
Calendar cal N/A Optional when opening calendar selection modal, allowing the user to select a date.
Document doc doc_disabled View details of a document, account, etc.  Attach a document.
Edit pencil pencil_disabled Edit/update data.
Error error N/A Appears next to the field experiencing the error, accompanied by a details description.
Information info N/A To obtain more information about the particular subject.
Open New Window newwin N/A At the link-level, display after a link, when the page opens in a new window.
At the page-level, display near the top of the form.
Print print N/A Print current page. Will open browser printer dialog.
Search search search_disabled The user clicks on the Search icon to submit a search.  Or can be used to open a dialog box that permits the user to select and submit a search.




Data Table Icons

Use when applying an action to a particular row.

Name Enabled Icon Disabled Icon Description
Add/Remove plus minus plus_disabled minus_disabled Add or remove item or row in a table.
Appprove/Deny
Enable/Disable
check disable check_disabled disable_disabled Approve/deny or enable/disable data associated with the row.
Document doc doc_disabled View details of a document, account, etc.  Attach a document.
Delete trash trash_disabled Delete data associated with the row.
Edit pencil pencil_disabled Permits the user to edit/update related data.
Error error N/A Appears next to the field experiencing the error, accompanied by a details description.
Expand/Collapse arrow rightarrow down N/A

Expand/Collapse icons are associated with displaying and suppressing data associated with a row. The user clicks on the expand icon to expand the row, and clicks on the collapse icon to collapse the row.

Submit submit submit_disabled Submit data related to particular row
Undo print N/A Undo an action.