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 (61)

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.
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.
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.
folder-openSymbolUse to represent an opened folder within a file management structure.
folderSymbolUse to represent a folder within a file management structure.
heartSymbolUse to represent affirmation or contributions.
keySymbolUse to represent a key within the context of security.
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.
notificationActionUse to open notifications into view.
refreshActionUse to refresh the content within a page element. Example: Table or formfield.
redoActionUse to redo an action within the interface.
searchSymbolUse to represent the ability to search an element.
settingsActionUse to open the settings of an element. Example: A table.
shareSymbolUse to represent sharing.
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.
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.
uploadActionUse to invoke the ability for the user to upload a file.
user-profileActionUse to open the user profile options.
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.
view-verticalActionUse to alter the view of a page element vertically on the page.
zoom-inActionUse to enlarge the view of an area.
zoom-outActionUse to reduce the view of an area.

General guidelines

  • Use labels with status and symbol icons.

  • Don't use icons with page, section, or sub section headlines.

  • Don't combine multiple icons into one object or action.

Custom icons

When designing a custom icon consider the following:

  • Icons must be 16x16px. Some Cloudscape components will resize icons depending on the context.

  • Design icons using lines, not fills. Consistently use a 2px stroke, and align the stroke to the center. Ensure that each line is accurately aligned to the pixel grid in the icon template. Cloudscape components will adjust the stroke width based on the size of the icon.

  • Cloudscape components will adjust the color based on the icon’s concrete usage and context.

  • Save or export your icon as an SVG. When doing so, don’t convert the line stroke to outline.

Usage

Icon sizes and typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

paragraph

small

Icons can be set to 4 sizes based on its usage — normal (16x16px), medium (20x20px), big (32x32px), large (48x48px). The default size for all icons is the normal size. All action icons in particular are only displayed with the normal size.

When using status or symbol icons combined with text, the size of the icon should correlate with the font-size of the text. Make sure to choose the appropriate icon size of the 4 available to best match the height of the icon and the text together.

Example: Use the big icon size when paired with an h1.

Action icons

Action icons represent controls to perform actions on resources or the page layout. They may be placed on their own or in a button.

Variants

Depending on the context, you can use action icons with the following variants: normal, disabled, inverted, link, or subtle.

Buttons

An action icon that's displayed on its own is called an icon button. We recommend using this with standalone actions. All action icons include hover states and active states (when applicable) to increase usability.

Example: Settings icon in a table.

In contrast, you can also use action icons with the normal-style button when it’s grouped with other elements, such as within an action stripe or attached to a form field. We recommend you use this style only for common actions, and that you include a text label describing the icon.

Example: Refresh button within an action stripe.

Status icons

Status icons are visual representations that communicate the status of a resource in a compact form that’s easily embedded in other elements. The icon, color, and appending text are independent from each other and should be combined to best support your use case. If an existing icon is already sufficient for your use case, refrain from generating new status icons. For guidelines about common uses, see status indicators.

Shape

Status icons are distinguished from action and symbol icons by its additive structure. The shape is derived from the combination of a metaphorical state (for example, a check) and a specific shape (circle or triangle) to contain the state. Icons contained within squares are not status indicators.

Placement

Place status icons to the left of the resource or message that indicates a status.

Symbol icons

Use symbol icons to bring additional visual emphasis or to symbolize an object that doesn't pertain to status. To avoid visual noise, use symbol icons sparingly and only when absolutely necessary.

Placement

Place symbol icons to the left of the resource or message that it supports.