Skip to contentShopify logoPolaris
  • What’s new
  • Getting started
  • Foundations
  • Design
  • Content
  • Patterns
    New
  • Components
    • Actions
      • Account connection
      • Button
      • Button group
      • Page actions
    • Layout and structure
      • Alpha card
        Alpha
      • Alpha stack
        Alpha
      • Bleed
        Alpha
      • Box
        Alpha
      • Callout card
      • Columns
        Alpha
      • Divider
        Alpha
      • Empty state
      • Form layout
      • Inline
        Alpha
      • Layout
      • Legacy card
        Legacy
      • Legacy stack
        Legacy
      • Media card
      • Page
    • Selection and input
      • Autocomplete
      • Checkbox
      • Choice list
      • Color picker
      • Combobox
      • Contextual save bar
      • Date picker
      • Drop zone
      • Filters
      • Form
      • Index filters
      • Inline error
      • Legacy filters
        Legacy
      • Radio button
      • Range slider
      • Select
      • Tag
      • Text field
    • Images and icons
      • Avatar
      • Icon
      • Keyboard key
      • Thumbnail
      • Video thumbnail
    • Feedback indicators
      • Badge
      • Banner
      • Exception list
      • Loading
      • Progress bar
      • Skeleton body text
      • Skeleton display text
      • Skeleton page
      • Skeleton tabs
      • Skeleton thumbnail
      • Spinner
      • Toast
    • Typography
      • Text
        Beta
    • Tables
      • Data table
      • Index table
    • Lists
      • Action list
      • Description list
      • List
      • Listbox
      • Option list
      • Resource item
      • Resource list
    • Navigation
      • Footer help
      • Fullscreen bar
      • Legacy tabs
        Legacy
      • Link
      • Navigation
      • Pagination
      • Tabs
      • Top bar
    • Overlays
      • Modal
      • Popover
      • Tooltip
    • Utilities
      • App provider
      • Collapsible
      • Frame
      • Scrollable
    • Deprecated
      • Caption
        Deprecated
      • Card
        Deprecated
      • Display text
        Deprecated
      • Grid
        Deprecated
      • Heading
        Deprecated
      • Setting toggle
        Deprecated
      • Sheet
        Deprecated
      • Stack
        Deprecated
      • Subheading
        Deprecated
      • Text container
        Deprecated
      • Text style
        Deprecated
      • Visually hidden
        Deprecated
  • Tokens
  • Icons
  • Contributing
  • Tools
  • Home
  • Components
  • Images and icons

Images and icons

  • Screenshot of the avatar component

    Avatar

    Avatars are used to show a thumbnail representation of an individual or business in the interface.

  • Screenshot of the icon component

    Icon

    Icons are used to visually communicate core parts of the product and available actions. They can act as wayfinding tools to help merchants more easily understand where they are in the product, and common interaction patterns that are available.

  • Screenshot of the keyboard-key component

    Keyboard key

    Keyboard key is used to educate merchants about keyboard shortcuts.

  • Screenshot of the thumbnail component

    Thumbnail

    Use thumbnails as a visual anchor and identifier for an object. They should be used along with text to provide context.

  • Screenshot of the video-thumbnail component

    Video thumbnail

    Video thumbnails are a clickable placeholder image. When clicked, it opens a video player within a modal or full screen.

Leave feedback