---
title: Migrate to the Polaris payment icon component
description: >-
  Learn how to migrate the PaymentIcon component to Polaris web components in
  checkout and customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/payment-icon
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/payment-icon.md
---

# Migrate to the Polaris payment icon component

The Polaris payment icon component displays logos for payment methods. It replaces the previous [`PaymentIcon`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/media-and-visuals/paymenticon) component and is available as [`<s-payment-icon>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/payment-icon) in API versions 2025-10 and newer.

***

## Updated properties

The following properties are different in the Polaris payment icon component.

### name

The previous `PaymentIcon` `name` prop is now called [`type`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/payment-icon#properties-propertydetail-type).

***

## Removed properties

### accessibility​Visibility

The Polaris payment icon component no longer supports `accessibilityVisibility` directly. To control accessibility visibility, wrap the payment icon in [`s-box`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/box) and set [`accessibilityVisibility`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/box#properties-propertydetail-accessibilityvisibility) on the box.

## Migrating accessibilityVisibility

##### Latest (Preact)

```tsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-box accessibilityVisibility="hidden">
      <s-payment-icon type="visa" accessibilityLabel="Visa" />
    </s-box>
  );
}
```

##### Pre-Polaris (2025-07)

```tsx
import {
  reactExtension,
  PaymentIcon,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <PaymentIcon
      name="visa"
      accessibilityLabel="Visa"
      accessibilityVisibility="hidden"
    />
  );
}
```

***