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.

Page Management and Form Icons that can be found on the page or form itself.
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:

Display a tool tip with a short description regarding the action being performed.
Align right within the grid column.
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	Disabled Icon	Description
Admin	N/A	Access adminitrative or settings section of an application.
Alert	N/A	To alert or warn the user.
Calendar	N/A	Optional when opening calendar selection modal, allowing the user to select a date.
Document		View details of a document, account, etc. Attach a document.
Edit		Edit/update data.
Error	N/A	Appears next to the field experiencing the error, accompanied by a details description.
Information	N/A	To obtain more information about the particular subject.
Open New Window	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	N/A	Print current page. Will open browser printer dialog.
Search		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	Disabled Icon	Description
Add/Remove		Add or remove item or row in a table.
Appprove/Deny Enable/Disable		Approve/deny or enable/disable data associated with the row.
Document		View details of a document, account, etc. Attach a document.
Delete		Delete data associated with the row.
Edit		Permits the user to edit/update related data.
Error	N/A	Appears next to the field experiencing the error, accompanied by a details description.
Expand/Collapse	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 data related to particular row
Undo	N/A	Undo an action.