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-plusActionUse to add a repeating element in-line.
angle-downActionUse to collapse a tutorial card.
angle-left-doubleActionUse to represent a direction of movement for objects or information from one state to another.
angle-leftActionUse to control pagination within a long data set.
angle-right-doubleActionUse to represent a direction of movement for objects or information from one state to another.
angle-rightActionUse to control pagination within a long data set.
angle-upActionUse to expand a tutorial card.
arrow-leftActionUse to navigate to the previous page in a panel view.
audio-fullActionUse to represent audio is at full volume.
audio-halfActionUse to represent audio is at approximately half volume.
audio-offActionUse to represent audio is off.
bugSymbolUse to represent issues (bugs).
callSymbolUse to represent communication via phone call.
calendarActionUse to invoke a date picker.
caret-down-filledActionUse 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-downActionUse to indicate an unsorted column within a table or a non-active state of the caret-down-filled icon.
caret-left-filledActionAn alternative to the caret-right-filled icon for interfaces structured from right-to-left.
caret-right-filledActionUse to open hidden content into view within a collapsible element. Example: In sections or a card.
caret-up-filledActionUse to indicate sort order of a column within a table.
caret-upActionUse to indicate a non-active state of the caret-up-filled icon.
checkAction and SymbolUse to confirm a change or indicate the selection of an element.
contactSymbolUse to represent the direct one-on-one communication.
closeActionUse to remove a page element away from view. Example: Modal or side panel.
copyActionUse to copy a code snippet or a resource’s configurations.
delete-markerActionUse to delete a marker or file.
downloadActionUse to start downloading a file onto the user’s machine.
editActionUse to invoke editing functionality.
ellipsisActionUse to open the icon variant of the button dropdown.
envelopeSymbolUse to represent communication via email.
expandActionUse to increase the size of the page element in view.
externalActionUse to label navigation which will direct users outside of the current service.
file-openSymbolUse to represent an opened file within a file management structure.
fileSymbolUse to represent a file within a file management structure.
filterSymbolUse to represent the ability to filter an element.
flagActionUse to flag a resource.
folder-openSymbolUse to represent an opened folder within a file management structure.
folderSymbolUse to represent a folder within a file management structure.
group-activeActionUse to represent the active group.
groupActionUse to represent a group.
heartSymbolUse to represent affirmation or contributions.
insert-rowActionUse to indicate inserting a row into a table.
keySymbolUse to represent a key within the context of security.
keyboardActionUse to indicate keyboard input.
lock-privateSymbolUse to represent an artifact as private or secure.
menuActionUse to open the side navigation panel.
microphoneActionUse to represent vocal communication method. Example: Voice recording.
microphone-offActionUse to represent microphone is off.
multiscreenActionUse to represent multiscreen view.
notificationActionUse to open notifications into view.
refreshActionUse to refresh the content within a page element. Example: Table or formfield.
removeActionUse to indicate removal of an element.
scriptActionUse to indicate script view.
redoActionUse to redo an action within the interface.
securitySymbolUse to represent security recommendations.
searchSymbolUse to represent the ability to search an element.
settingsActionUse to open the settings of an element. Example: A table.
shareSymbolUse to represent sharing.
shrinkActionUse to indicate shrinking a view or window.
status-infoStatusIndicate 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-progressStatusIndicate that a process is in progress and running without errors.
status-negativeStatusIndicate that a resource or process has failed and cannot recover without user intervention.
status-pendingStatusIndicate that a resource or process is no longer running and severity is not relevant.
status-positiveStatusIndicate that a resource is running correctly or a process has finished without errors.
status-stoppedStatusIndicate that a resource, service, or process is no longer running and severity is not relevant.
status-warningStatusIndicate that a resource or process is working but is either unreliable or trending towards a critical state.
suggestionsSymbolUse to represent suggestions.
thumbs-down-filledActionUse to represent user has downvoted an item.
thumbs-downActionUse to indicate downvoting an item.
thumbs-up-filledActionUse to represent user has upvoted an item.
thumbs-upActionUse to indicate upvoting an item.
ticketSymbolUse to represent a ticket.
treeview-collapseActionUse to collapse a branch from view within a tree view.
treeview-expandActionUse to open a branch into view within a tree view.
undoActionUse to undo an action within the interface.
unlockedSymbolUse to represent an artifact that is public or unsecure.
upload-downloadActionUse to indicate uploading and downloading.
uploadActionUse to invoke the ability for the user to upload a file.
user-profile-activeActionUse to represent the currently active user.
user-profileActionUse to open the user profile options.
video-offActionUse to represent video is off.
video-onActionUse to represent video is on.
video-unavailableActionUse to represent video is unavailable.
view-fullActionUse to alter the view of a page element to expand full-screen to the page.
view-horizontalActionUse to alter the view of a page element horizontally on the page.