Iconcomponent
component
A component that renders an icon from the POS asset catalog.
Anchor to iconIcon
Anchor to name
name
|
required
A name used to render the icon.
Anchor to size
size
|
Default: 'l'
Size of the icon.
Anchor to tone
tone
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
Anchor to guidelinesGuidelines
- 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?
