Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Foundation


  • Visual foundation

    • Colors
    • Content density
    • Data visualization colors
    • Design tokens
    • Iconography
    • Layout
    • Motion
    • Spacing
    • Theming
    • Typography
    • Visual context
    • Visual modes
    • Visual style

  • Core principles

    • Accessibility
    • Responsive design
  1. Cloudscape Design System
    • Foundation
    • Visual foundation: Iconography

    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
      • General guidelines
      • Custom icons
      • Usage

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

      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.
      drag-indicatorActionUse to drag and drop an element.
      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.