Icon
Icons are pictograms or graphic symbols. They can act as wayfinding tools or as a means of communicating functionality.
Anchor to iconpropsIconProps
Anchor to source
source
required
Specifies which icon to display
Check the list of available icons here
Anchor to accessibilityLabel
accessibilityLabel
string
A label that describes the purpose or contents of the icon. When set, it will be announced to buyers using assistive technologies and will provide them with more context.
Anchor to appearance
appearance
Default: 'base'
Sets the appearance (color) of the icon.
string
A unique identifier for the component.
Anchor to size
size
Extract<, 'extraSmall' | 'small' | 'base' | 'large' | 'fill'>
Default: 'base'
Adjusts the size of the icon.
Was this section helpful?
Basic Icon
import {
reactExtension,
Icon,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
return <Icon source="discount" />;
}
Preview
Anchor to appearanceAppearance
| Value | Description |
|---|---|
"accent" | Conveys emphasis and draws attention to the element. |
"interactive" | Conveys that the element is pressable, hoverable or otherwise interactive. |
"subdued" | Conveys a subdued or disabled state for the element. |
"info" | Conveys that the element is informative or has information. |
"success" | Convey a successful interaction. |
"warning" | Convey something needs attention or an action needs to be taken. |
"critical" | Conveys a problem has arisen. |
"monochrome" | Takes the color of its parent. |
Was this section helpful?