# PaymentIcon

Payment icons can be used for displaying payment-related information or features such as a user’s saved or available payment methods.

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

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

function Extension() {
  return <PaymentIcon name="shop-pay" />;
}

```

```js
import {extension, PaymentIcon} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const paymentIcon = root.createComponent(PaymentIcon, {name: 'shop-pay'});

  root.appendChild(paymentIcon);
});

```

## PaymentIconProps

### PaymentIconProps

### accessibilityLabel

value: `string`

A label that describes the purpose or contents of the icon.

When set, it will be announced to users using assistive technologies and will provide them with more context. This should only be used if the icon requires an alternative internationalised label or if it is otherwise inappropriate to make use of the default label included with the icon.

### accessibilityVisibility

value: `'hidden' | 'visible'`

Changes the visibility of the icon to assistive technologies.

`hidden` hides the component from assistive technology (for example, a screen reader) but remains visually visible.

### name

value: `PaymentMethod | string`

The name of the payment method.

Check the list of available payment methods [here](https://shopify.dev/docs/api/checkout-ui-extensions/components/media/paymenticon#paymentmethod).

## PaymentMethod