Skip to main content

Icon
component

A component that renders an icon from the POS asset catalog.

|
required

A name used to render the icon.

|
Default: 'l'

Size of the icon.

Default: 'icon-primary'

Color of the icon.

Was this section helpful?

Example icons

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="s" tone="icon-success" />
<Icon name="card-reader" size="l" />
<Icon name="circle-cancel" size="xl" tone="icon-critical" />
<Icon name="orders-filled" size="s" />
<Icon name="star" size="m" />
</ScrollView>
</Screen>
</Navigator>
);
};

export default reactExtension('pos.home.modal.render', () => (
<SmartGridModal />
));

Preview

  • Icons in POS are used in areas where they specifically add clarity and structure to the UI, aiding in creating a deeper understanding of the product and common interaction points nested throughout the experience.
Was this section helpful?