Icon

Anchor to PropertiesProperties

'base' | 'accent' | 'decorative' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'

'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowUpRight' | 'arrowDown' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caretDown' | 'cart' | 'cashDollar' | 'categories' | 'checkmark' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'chevronDown' | 'clipboard' | 'clock' | 'close' | 'creditCard' | 'critical' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'email' | 'error' | 'errorFill' | 'external' | 'filter' | 'geolocation' | 'gift' | 'giftFill' | 'grid' | 'hamburger' | 'hollowCircle' | 'horizontalDots' | 'image' | 'info' | 'infoFill' | 'list' | 'lock' | 'magnify' | 'map' | 'marker' | 'minus' | 'mobile' | 'note' | 'orderBox' | 'pen' | 'plus' | 'profile' | 'question' | 'questionFill' | 'reorder' | 'reset' | 'return' | 'savings' | 'settings' | 'star' | 'starFill' | 'starHalf' | 'store' | 'success' | 'truck' | 'upload' | 'verticalDots' | 'warning' | 'warningFill'

Anchor to ExamplesExamples

Anchor to Display an iconDisplay an icon

Render a graphic symbol from the built-in icon set. This example displays a single discount icon at its default size.

Display an icon

Display an icon

ReactJS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

import {

reactExtension,

Icon,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.page.render',

() => <Extension />,

);

function Extension() {

return <Icon source="discount" />;

}

9

1

2

3

4

5

6

7

import {extension, Icon} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {

const icon = root.createComponent(Icon, {source: 'discount'});

root.appendChild(icon);

});

React

import {
  reactExtension,
  Icon,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return <Icon source="discount" />;
}

JS

import {extension, Icon} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const icon = root.createComponent(Icon, {source: 'discount'});

  root.appendChild(icon);
});

import {
  reactExtension,
  Icon,
  Text,
  InlineStack,
  BlockStack,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <BlockStack spacing="base">
      <InlineStack spacing="small">
        <Icon source="checkCircle" appearance="success" />
        <Text>Order confirmed</Text>
      </InlineStack>
      <InlineStack spacing="small">
        <Icon source="warning" appearance="warning" />
        <Text>Address needs review</Text>
      </InlineStack>
      <InlineStack spacing="small">
        <Icon source="error" appearance="critical" />
        <Text>Payment failed</Text>
      </InlineStack>
    </BlockStack>
  );
}

import {extension, Icon, Text, InlineStack, BlockStack} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  function createRow(iconSource, appearance, label) {
    const icon = root.createComponent(Icon, {source: iconSource, appearance});
    const text = root.createComponent(Text, {}, label);
    const row = root.createComponent(InlineStack, {spacing: 'small'});
    row.append(icon);
    row.append(text);
    return row;
  }

  const stack = root.createComponent(BlockStack, {spacing: 'base'});
  stack.append(createRow('checkCircle', 'success', 'Order confirmed'));
  stack.append(createRow('warning', 'warning', 'Address needs review'));
  stack.append(createRow('error', 'critical', 'Payment failed'));

  root.append(stack);
});

import {
  reactExtension,
  Icon,
  Text,
  InlineStack,
  BlockStack,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <BlockStack spacing="base">
      <InlineStack spacing="small">
        <Icon source="store" />
        <Text>Store pickup</Text>
      </InlineStack>
      <InlineStack spacing="small">
        <Icon source="delivery" />
        <Text>Standard shipping</Text>
      </InlineStack>
      <InlineStack spacing="small">
        <Icon source="return" />
        <Text>Free returns</Text>
      </InlineStack>
    </BlockStack>
  );
}

import {extension, Icon, Text, InlineStack, BlockStack} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  function createRow(iconSource, label) {
    const icon = root.createComponent(Icon, {source: iconSource});
    const text = root.createComponent(Text, {}, label);
    const row = root.createComponent(InlineStack, {spacing: 'small'});
    row.append(icon);
    row.append(text);
    return row;
  }

  const stack = root.createComponent(BlockStack, {spacing: 'base'});
  stack.append(createRow('store', 'Store pickup'));
  stack.append(createRow('delivery', 'Standard shipping'));
  stack.append(createRow('return', 'Free returns'));

  root.append(stack);
});

import {
  reactExtension,
  Icon,
  InlineStack,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <InlineStack spacing="base" blockAlignment="center">
      <Icon source="search" size="extraSmall" accessibilityLabel="Extra small search icon" />
      <Icon source="search" size="small" accessibilityLabel="Small search icon" />
      <Icon source="search" size="base" accessibilityLabel="Base search icon" />
      <Icon source="search" size="large" accessibilityLabel="Large search icon" />
    </InlineStack>
  );
}

import {extension, Icon, InlineStack} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const row = root.createComponent(InlineStack, {spacing: 'base', blockAlignment: 'center'});

  ['extraSmall', 'small', 'base', 'large'].forEach((size) => {
    row.append(root.createComponent(Icon, {
      source: 'search',
      size,
      accessibilityLabel: `${size} search icon`,
    }));
  });

  root.append(row);
});

Anchor to Best practicesBest practices

• Use icons to support actions and status, not decorate: Icons should clarify what an action does or indicate state. Use a trash icon for delete actions, a checkmark for completed status, or a warning icon for errors. Avoid adding icons purely for visual interest.
• Maintain consistency across your interface: Always use the same icon for the same action or concept throughout your extension. If you use a pencil for edit in one place, use it everywhere. Inconsistent icon usage confuses customers.
• Pair icons with text labels whenever possible: Icons work best as visual reinforcement alongside text. Without text, even common icons can be ambiguous. Only use icons alone in space-constrained contexts with proper accessibility labels.
• Use semantic appearances to communicate meaning: Apply appearances like critical for destructive actions, success for positive states, and warning for caution. Appearances should convey information, not serve as decoration.

Anchor to LimitationsLimitations

• Icons are limited to the predefined set provided by the component. Custom SVG icons, icon fonts, or external icon libraries aren't supported.
• Icons can't be animated or include interactive states beyond color changes. For complex graphics or illustrations, use the Image component instead.
• Icon color is determined by the appearance property. Custom colors or gradients aren't available.