Iconography
Iconography is a visual language used to represent features, functionality, or content. Icons are intended to be simple visual elements that are recognized and understood immediately.
On this page
Icon set
The basic icon set represents actions, status, and symbols. Icons are displayed in 4 sizes based on its usage — normal (16x16px), medium (20x20px), big (32x32px), large (48x48px). Icon variants may also be utilized to best support the icon's usage. Refer to icon usage for more guidelines regarding the 8 variants.
Available icons (88)
Icon | Name | Type | Description |
|---|---|---|---|
| add-plus | Action | Use to add a repeating element in-line. | |
| angle-down | Action | Use to collapse a tutorial card. | |
| angle-left-double | Action | Use to represent a direction of movement for objects or information from one state to another. | |
| angle-left | Action | Use to control pagination within a long data set. | |
| angle-right-double | Action | Use to represent a direction of movement for objects or information from one state to another. | |
| angle-right | Action | Use to control pagination within a long data set. | |
| angle-up | Action | Use to expand a tutorial card. | |
| arrow-left | Action | Use to navigate to the previous page in a panel view. | |
| audio-full | Action | Use to represent audio is at full volume. | |
| audio-half | Action | Use to represent audio is at approximately half volume. | |
| audio-off | Action | Use to represent audio is off. | |
| bug | Symbol | Use to represent issues (bugs). | |
| call | Symbol | Use to represent communication via phone call. | |
| calendar | Action | Use to invoke a date picker. | |
| caret-down-filled | Action | Use to indicate sort order within a table or to hide content from view within a collapsible element. Example: In sections, a card, or select dropdowns. | |
| caret-down | Action | Use to indicate an unsorted column within a table or a non-active state of the caret-down-filled icon. | |
| caret-left-filled | Action | An alternative to the caret-right-filled icon for interfaces structured from right-to-left. | |
| caret-right-filled | Action | Use to open hidden content into view within a collapsible element. Example: In sections or a card. | |
| caret-up-filled | Action | Use to indicate sort order of a column within a table. | |
| caret-up | Action | Use to indicate a non-active state of the caret-up-filled icon. | |
| check | Action and Symbol | Use to confirm a change or indicate the selection of an element. | |
| contact | Symbol | Use to represent the direct one-on-one communication. | |
| close | Action | Use to remove a page element away from view. Example: Modal or side panel. | |
| copy | Action | Use to copy a code snippet or a resource’s configurations. | |
| delete-marker | Action | Use to delete a marker or file. | |
| download | Action | Use to start downloading a file onto the user’s machine. | |
| edit | Action | Use to invoke editing functionality. | |
| ellipsis | Action | Use to open the icon variant of the button dropdown. | |
| envelope | Symbol | Use to represent communication via email. | |
| expand | Action | Use to increase the size of the page element in view. | |
| external | Action | Use to label navigation which will direct users outside of the current service. | |
| file-open | Symbol | Use to represent an opened file within a file management structure. | |
| file | Symbol | Use to represent a file within a file management structure. | |
| filter | Symbol | Use to represent the ability to filter an element. | |
| flag | Action | Use to flag a resource. | |
| folder-open | Symbol | Use to represent an opened folder within a file management structure. | |
| folder | Symbol | Use to represent a folder within a file management structure. | |
| group-active | Action | Use to represent the active group. | |
| group | Action | Use to represent a group. | |
| heart | Symbol | Use to represent affirmation or contributions. | |
| insert-row | Action | Use to indicate inserting a row into a table. | |
| key | Symbol | Use to represent a key within the context of security. | |
| keyboard | Action | Use to indicate keyboard input. | |
| lock-private | Symbol | Use to represent an artifact as private or secure. | |
| menu | Action | Use to open the side navigation panel. | |
| microphone | Action | Use to represent vocal communication method. Example: Voice recording. | |
| microphone-off | Action | Use to represent microphone is off. | |
| multiscreen | Action | Use to represent multiscreen view. | |
| notification | Action | Use to open notifications into view. | |
| refresh | Action | Use to refresh the content within a page element. Example: Table or formfield. | |
| remove | Action | Use to indicate removal of an element. | |
| script | Action | Use to indicate script view. | |
| redo | Action | Use to redo an action within the interface. | |
| security | Symbol | Use to represent security recommendations. | |
| search | Symbol | Use to represent the ability to search an element. | |
| settings | Action | Use to open the settings of an element. Example: A table. | |
| share | Symbol | Use to represent sharing. | |
| shrink | Action | Use to indicate shrinking a view or window. | |
| status-info | Status | Indicate information, tips, or that a resource is running correctly but has recommendations for improvements. It is also used to open the help panel. | |
| status-in-progress | Status | Indicate that a process is in progress and running without errors. | |
| status-negative | Status | Indicate that a resource or process has failed and cannot recover without user intervention. | |
| status-pending | Status | Indicate that a resource or process is no longer running and severity is not relevant. | |
| status-positive | Status | Indicate that a resource is running correctly or a process has finished without errors. | |
| status-stopped | Status | Indicate that a resource, service, or process is no longer running and severity is not relevant. | |
| status-warning | Status | Indicate that a resource or process is working but is either unreliable or trending towards a critical state. | |
| suggestions | Symbol | Use to represent suggestions. | |
| thumbs-down-filled | Action | Use to represent user has downvoted an item. | |
| thumbs-down | Action | Use to indicate downvoting an item. | |
| thumbs-up-filled | Action | Use to represent user has upvoted an item. | |
| thumbs-up | Action | Use to indicate upvoting an item. | |
| ticket | Symbol | Use to represent a ticket. | |
| treeview-collapse | Action | Use to collapse a branch from view within a tree view. | |
| treeview-expand | Action | Use to open a branch into view within a tree view. | |
| undo | Action | Use to undo an action within the interface. | |
| unlocked | Symbol | Use to represent an artifact that is public or unsecure. | |
| upload-download | Action | Use to indicate uploading and downloading. | |
| upload | Action | Use to invoke the ability for the user to upload a file. | |
| user-profile-active | Action | Use to represent the currently active user. | |
| user-profile | Action | Use to open the user profile options. | |
| video-off | Action | Use to represent video is off. | |
| video-on | Action | Use to represent video is on. | |
| video-unavailable | Action | Use to represent video is unavailable. | |
| view-full | Action | Use to alter the view of a page element to expand full-screen to the page. | |
| view-horizontal | Action | Use to alter the view of a page element horizontally on the page. | |