Skip to content Shopify logoPolaris
  • What’s new
  • Getting started
  • Foundations
  • Design
  • Content
  • Patterns
    New
  • Components
    • Actions
      • Account connection
      • Button
      • Button group
      • Page actions
    • Layout and structure
      • Bleed
        Alpha
      • Box
        Alpha
      • Callout card
      • Card
        Alpha
      • Divider
        Alpha
      • Empty state
      • Form layout
      • Grid
        Alpha
      • Horizontal grid
        Alpha
      • Horizontal stack
        Alpha
      • Layout
      • Legacy card
        Legacy
      • Legacy stack
        Legacy
      • Media card
      • Page
      • Vertical stack
        Alpha
    • Selection and input
      • Autocomplete
      • Checkbox
      • Choice list
      • Color picker
      • Combobox
      • Contextual save bar
      • Date picker
      • Drop zone
      • Filters
      • Form
      • Index filters
      • Inline error
      • 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
    • 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
      • Display text
        Deprecated
      • Heading
        Deprecated
      • Legacy filters
        Deprecated
      • Setting toggle
        Deprecated
      • Sheet
        Deprecated
      • Subheading
        Deprecated
      • Text container
        Deprecated
      • 文本样式
        Deprecated
      • Visually hidden
        Deprecated
  • Tokens
  • Icons
  • Contributing
  • Tools
  • Home
  • Components
  • Images and icons

Images and icons

Represent visual content, such as avatars and thumbnails for images or video.

  • 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.

  • 截图video-thumbnail混合涂料nent

    Video thumbnail

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

Leave feedback