Icon

Examples

• Show icons

  Description

  Show icons from the POS catalog to represent actions or statuses consistently. This example demonstrates rendering icons that enhance navigation, provide visual context alongside text, and maintain visual consistency across the interface with automatic scaling for different screen densities.

  React

  import React from 'react';
  
  import {
    Icon,
    Screen,
    ScrollView,
    Navigator,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';
  
  const SmartGridModal = () => {
    return (
      <Navigator>
        <Screen name="Image" title="Image Example">
          <ScrollView>
            <Icon name="call" size="minor" />
            <Icon name="card-reader" size="major" />
            <Icon name="circle-cancel" size="spot" />
            <Icon name="orders" size="caption" />
            <Icon name="star" size="badge" />
          </ScrollView>
        </Screen>
      </Navigator>
    );
  };
  
  export default reactExtension('pos.home.modal.render', () => (
    <SmartGridModal />
  ));
  

  TS

  import {
    Navigator,
    Screen,
    ScrollView,
    Icon,
    IconName,
    IconSize,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';
  
  export default extension('pos.home.modal.render', (root, api) => {
    const iconsData: {name: IconName; size: IconSize}[] = [
      {name: 'call', size: 'minor'},
      {name: 'card-reader', size: 'major'},
      {name: 'circle-cancel', size: 'spot'},
      {name: 'orders', size: 'caption'},
      {name: 'star', size: 'badge'},
    ];
    const scrollView = root.createComponent(ScrollView);
  
    iconsData.forEach((iconData) => {
      const icon = root.createComponent(Icon, {
        name: iconData.name,
        size: iconData.size,
      });
      scrollView.append(icon);
    });
  
    const screen = root.createComponent(Screen, {
      name: 'Icon',
      title: 'Icon Example',
    });
    screen.append(scrollView);
  
    const navigator = root.createComponent(Navigator);
    navigator.append(screen);
  
    root.append(navigator);
  });