--- title: PaymentIcon description: >- Payment icons can be used for displaying payment-related information or features such as a user’s saved or available payment methods. api_version: 2025-07 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/paymenticon md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/paymenticon.md --- Migrate to Polaris Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension. # Payment​Icon Payment icons can be used for displaying payment-related information or features such as a user’s saved or available payment methods. ### Support Targets (25) ### Supported targets * Customer​Account::Kitchen​Sink * customer-account.​footer.​render-after * customer-account.​order-index.​announcement.​render * customer-account.​order-index.​block.​render * customer-account.​order-status.​announcement.​render * customer-account.​order-status.​block.​render * customer-account.​order-status.​cart-line-item.​render-after * customer-account.​order-status.​cart-line-list.​render-after * customer-account.​order-status.​customer-information.​render-after * customer-account.​order-status.​fulfillment-details.​render-after * customer-account.​order-status.​payment-details.​render-after * customer-account.​order-status.​return-details.​render-after * customer-account.​order-status.​unfulfilled-items.​render-after * customer-account.​order.​action.​menu-item.​render * customer-account.​order.​action.​render * customer-account.​order.​page.​render * customer-account.​page.​render * customer-account.​profile.​addresses.​render-after * customer-account.​profile.​announcement.​render * customer-account.​profile.​block.​render * customer-account.​profile.​company-details.​render-after * customer-account.​profile.​company-location-addresses.​render-after * customer-account.​profile.​company-location-payment.​render-after * customer-account.​profile.​company-location-staff.​render-after * customer-account.​profile.​payment.​render-after ## PaymentIconProps * **name** **PaymentMethod | string** **required** The name of the payment method whose icon should be displayed. Accepts any `PaymentMethod` value or a custom string for payment methods not yet in the predefined list. * **accessibilityLabel** **string** A label that describes the purpose or contents of the payment icon. When set, it will be announced to users using assistive technologies and will provide them with more context. Use this only when the icon requires an alternative internationalized label or when the default label included with the icon is not appropriate. * **accessibilityVisibility** **'hidden' | 'visible'** **Default: 'visible'** The visibility of the icon to assistive technologies. * `hidden`: The icon is hidden from assistive technology (for example, a screen reader) but remains visually visible. * `visible`: The icon is announced by assistive technologies (the default behavior). ### PaymentMethod The name of a supported payment method. Each value maps to a recognizable brand icon (such as Visa, Mastercard, or PayPal). Entries are listed in alphabetical order. ```ts '7-eleven' | 'acima-leasing' | 'addi' | 'aeropay' | 'affin-bank' | 'affirm' | 'aftee' | 'afterpay-paynl-version' | 'afterpay' | 'airtel-money' | 'airteltigo-mobile-money' | 'aktia' | 'akulaku-paylater' | 'akulaku' | 'alandsbanken' | 'alfamart' | 'alfamidi' | 'alipay-hk' | 'alipay-paynl-version' | 'alipay' | 'alliance-bank' | 'alma' | 'amazon' | 'ambank' | 'american-express' | 'anyday' | 'apecoin' | 'aplazo' | 'apple-pay' | 'aqsat' | 'arhaus' | 'arvato' | 'ask' | 'astrapay' | 'atm-bersama' | 'atobaraidotcom' | 'atome' | 'atone' | 'atrato' | 'au-kantan-kessai' | 'axs' | 'bancnet' | 'bancontact' | 'bangkok-bank' | 'bank-islam' | 'bank-muamalat' | 'bank-rakyat' | 'bbva-cie' | 'bc-card' | 'bca-klikpay' | 'bca' | 'bdo' | 'belfius' | 'benefit' | 'biercheque-paynl-version' | 'bigc' | 'billease' | 'biller-paynl-version' | 'billie' | 'billink-method' | 'billink' | 'bitcoin-cash' | 'bitcoin' | 'bizum' | 'blik' | 'bnbchain' | 'bni' | 'bogus-app-coin' | 'boleto' | 'boost' | 'bpi' | 'bread-pay' | 'bread' | 'bri-direct-debit' | 'bri' | 'brimo' | 'bsi' | 'bsn' | 'bss' | 'busd' | 'careem-pay' | 'cartes-bancaires' | 'cash-app-pay' | 'catch-payments' | 'cebuana' | 'cetelem' | 'checkout-finance' | 'cimb-clicks' | 'cimb' | 'circle-k' | 'citadele' | 'clave-telered' | 'clearpay' | 'cleverpay' | 'cliq' | 'coinsph' | 'collector-bank' | 'coop' | 'coppel-pay' | 'credit-key' | 'creditclick-paynl-version' | 'credix' | 'd-barai' | 'dai' | 'daily-yamazaki' | 'dan-dan' | 'dana' | 'danamon-online' | 'dankort' | 'danske-bank' | 'dash' | 'depay' | 'deutsche-bank' | 'diners-club' | 'directpay' | 'discover' | 'divido' | 'dnb' | 'docomo-barai' | 'dogecoin' | 'dropp' | 'duologi' | 'dwolla' | 'ebucks' | 'echelon-financing' | 'ecpay' | 'eft-secure' | 'eghl' | 'elo' | 'elv' | 'enets' | 'eos' | 'epayments' | 'epospay' | 'eps' | 'esr-paymentslip-switzerland' | 'ethereum' | 'etika' | 'facebook-pay' | 'fairstone-payments' | 'familymart' | 'farmlands' | 'fashion-giftcard-paynlversion' | 'fashioncheque' | 'fawry' | 'finloup' | 'fintecture' | 'flexiti' | 'forbrugsforeningen' | 'fortiva' | 'fps' | 'fpx' | 'freecharge' | 'futurepay-mytab' | 'gcash' | 'generalfinancing' | 'genoapay' | 'gezondheidsbon-paynl-version' | 'giftcard' | 'giropay' | 'givacard' | 'gmo-bank-transfer' | 'gmo-postpay' | 'google-pay' | 'google-wallet' | 'gopay' | 'grabpay' | 'grailpay' | 'gusd' | 'hana-card' | 'handelsbanken' | 'hello-clever' | 'hong-leong-bank' | 'hong-leong-connect' | 'hsbc' | 'humm' | 'hyper' | 'hypercard' | 'hypercash' | 'hyundai-card' | 'ideal' | 'in3' | 'inbank' | 'indomaret' | 'ing-homepay' | 'interac' | 'ivy' | 'jcb' | 'jousto' | 'kakao-pay' | 'kakebaraidotcom' | 'kasikornbank' | 'kb-card' | 'kbc-cbc' | 'kfast' | 'klarna-pay-later' | 'klarna-pay-now' | 'klarna-slice-it' | 'klarna' | 'knet' | 'krediidipank' | 'kredivo' | 'krungsri' | 'krungthai-bank' | 'kueski-pay' | 'kunst-en-cultuur-cadeaukaart' | 'kuwait-finance-house' | 'laser' | 'latitude-creditline-au' | 'latitude-gem-au' | 'latitude-gem-nz' | 'latitude-go-au' | 'latitudepay' | 'lawson' | 'laybuy-heart' | 'laybuy' | 'lbc' | 'lhv' | 'line-pay' | 'linkaja' | 'linkpay' | 'litecoin' | 'lku' | 'lotte-card' | 'luminor' | 'lydia' | 'mada' | 'maestro' | 'mandiri' | 'mash' | 'master' | 'masterpass' | 'maxima' | 'maya-bank' | 'maya' | 'maybank-qrpay' | 'maybank' | 'maybankm2u' | 'mb-way' | 'mb' | 'mcash' | 'medicinos-bankas' | 'meeza' | 'merpay' | 'meta-pay' | 'ministop' | 'mobicred' | 'mobikwik' | 'mobilepay' | 'mode' | 'mokka' | 'momopay' | 'mondido' | 'monero' | 'mpesa' | 'mtn-mobile-money' | 'myfatoorah' | 'n26' | 'naps' | 'nationale-bioscoopbon' | 'nationale-entertainmentcard' | 'naver-pay' | 'nelo' | 'netbanking' | 'neteller' | 'nh-card' | 'nordea' | 'novuna' | 'ocbc-bank' | 'octo-clicks' | 'ola-money' | 'omasp' | 'op' | 'opay' | 'openpay' | 'ovo' | 'oxxo' | 'ozow' | 'pagoefectivo' | 'paid' | 'paidy' | 'palawa' | 'palawan' | 'pay-easy' | 'pay-pay' | 'paybylink' | 'payco' | 'payconiq' | 'payd' | 'payfast-instant-eft' | 'payflex' | 'payid' | 'paymark-online-eftpos' | 'paymaya' | 'payme' | 'paynow' | 'paypal' | 'payplan' | 'paypo' | 'paysafecard-paynl-version' | 'paysafecard' | 'paysafecash' | 'paysera' | 'paytm' | 'payto' | 'paytomorrow' | 'payu' | 'payzapp' | 'pei' | 'perlasfinance' | 'permata' | 'pivo' | 'pix' | 'podium-cadeaukaart' | 'poli' | 'polygon' | 'poppankki' | 'postfinance-card' | 'postfinance-efinance' | 'postpay' | 'pps' | 'przelew24' | 'przelewy24-paynl-version' | 'public-bank' | 'publicbank-pbe' | 'qr-promptpay' | 'qris' | 'qrph' | 'rabbit-line-pay' | 'rakuten-pay' | 'rapid-transfer' | 'ratepay' | 'rcbc' | 'rcs' | 'revolut' | 'rhb-bank' | 'rhb-now' | 'rietumu' | 'riverty-paynl-version' | 'rupay' | 'saastopankki' | 'sadad' | 'sam' | 'samsung-card' | 'samsung-pay' | 'santander' | 'satisfi' | 'satispay' | 'sbpl' | 'scalapay' | 'seb' | 'sepa-bank-transfer' | 'sequra' | 'sezzle' | 'shib' | 'shinhan-card' | 'shopeepay' | 'shopify-pay' | 'siam-commercial' | 'siauliu-bankas' | 'siirto' | 'sinpe-movil' | 'skrill-digital-wallet' | 'smartpay' | 'snap-checkout' | 'sofort' | 'softbank' | 'solanapay' | 'spankki' | 'spei' | 'splitit' | 'spotii' | 'spraypay' | 'standard-chartered' | 'stc-pay' | 'sunkus' | 'svea-b2b-faktura' | 'svea-b2b-invoice' | 'svea-credit-account' | 'svea-delbetalning' | 'svea-faktura' | 'svea-invoice' | 'svea-lasku' | 'svea-ostukonto' | 'svea-part-payment' | 'svea-yrityslasku' | 'sveaeramaksu' | 'swedbank' | 'swiftpay' | 'swish' | 'swissbilling' | 'synchrony-pay' | 'synchrony' | 'tabby' | 'tabit' | 'tamara' | 'tandympayment' | 'tbi-bank' | 'tendopay' | 'tensile' | 'tesco-lotus' | 'thanachart-bank' | 'toss' | 'touch-n-go' | 'trevipay' | 'truemoney-pay' | 'trustly' | 'twig-pay' | 'twint' | 'uae-visa' | 'uangme' | 'ubp' | 'unionpay' | 'unipay' | 'uob-ez-pay' | 'uob-thai' | 'uob' | 'upi' | 'urpay' | 'usdc' | 'usdp' | 'v-pay' | 'valu' | 'venmo' | 'viabill' | 'vipps' | 'visa-electron' | 'visa' | 'vvv-cadeaukaart-paynl-version' | 'vvv-giftcard' | 'walley' | 'wbtc' | 'webshop-giftcard' | 'wechat-pay' | 'wechat-paynl-version' | 'wegetfinancing' | 'xrp' | 'ymobile' | 'younited-pay' | 'zalopay' | 'zapper' | 'zinia' | 'zip' | 'zoodpay' ``` ## PaymentMethod **`'7-eleven' | 'acima-leasing' | 'addi' | 'aeropay' | 'affin-bank' | 'affirm' | 'aftee' | 'afterpay-paynl-version' | 'afterpay' | 'airtel-money' | 'airteltigo-mobile-money' | 'aktia' | 'akulaku-paylater' | 'akulaku' | 'alandsbanken' | 'alfamart' | 'alfamidi' | 'alipay-hk' | 'alipay-paynl-version' | 'alipay' | 'alliance-bank' | 'alma' | 'amazon' | 'ambank' | 'american-express' | 'anyday' | 'apecoin' | 'aplazo' | 'apple-pay' | 'aqsat' | 'arhaus' | 'arvato' | 'ask' | 'astrapay' | 'atm-bersama' | 'atobaraidotcom' | 'atome' | 'atone' | 'atrato' | 'au-kantan-kessai' | 'axs' | 'bancnet' | 'bancontact' | 'bangkok-bank' | 'bank-islam' | 'bank-muamalat' | 'bank-rakyat' | 'bbva-cie' | 'bc-card' | 'bca-klikpay' | 'bca' | 'bdo' | 'belfius' | 'benefit' | 'biercheque-paynl-version' | 'bigc' | 'billease' | 'biller-paynl-version' | 'billie' | 'billink-method' | 'billink' | 'bitcoin-cash' | 'bitcoin' | 'bizum' | 'blik' | 'bnbchain' | 'bni' | 'bogus-app-coin' | 'boleto' | 'boost' | 'bpi' | 'bread-pay' | 'bread' | 'bri-direct-debit' | 'bri' | 'brimo' | 'bsi' | 'bsn' | 'bss' | 'busd' | 'careem-pay' | 'cartes-bancaires' | 'cash-app-pay' | 'catch-payments' | 'cebuana' | 'cetelem' | 'checkout-finance' | 'cimb-clicks' | 'cimb' | 'circle-k' | 'citadele' | 'clave-telered' | 'clearpay' | 'cleverpay' | 'cliq' | 'coinsph' | 'collector-bank' | 'coop' | 'coppel-pay' | 'credit-key' | 'creditclick-paynl-version' | 'credix' | 'd-barai' | 'dai' | 'daily-yamazaki' | 'dan-dan' | 'dana' | 'danamon-online' | 'dankort' | 'danske-bank' | 'dash' | 'depay' | 'deutsche-bank' | 'diners-club' | 'directpay' | 'discover' | 'divido' | 'dnb' | 'docomo-barai' | 'dogecoin' | 'dropp' | 'duologi' | 'dwolla' | 'ebucks' | 'echelon-financing' | 'ecpay' | 'eft-secure' | 'eghl' | 'elo' | 'elv' | 'enets' | 'eos' | 'epayments' | 'epospay' | 'eps' | 'esr-paymentslip-switzerland' | 'ethereum' | 'etika' | 'facebook-pay' | 'fairstone-payments' | 'familymart' | 'farmlands' | 'fashion-giftcard-paynlversion' | 'fashioncheque' | 'fawry' | 'finloup' | 'fintecture' | 'flexiti' | 'forbrugsforeningen' | 'fortiva' | 'fps' | 'fpx' | 'freecharge' | 'futurepay-mytab' | 'gcash' | 'generalfinancing' | 'genoapay' | 'gezondheidsbon-paynl-version' | 'giftcard' | 'giropay' | 'givacard' | 'gmo-bank-transfer' | 'gmo-postpay' | 'google-pay' | 'google-wallet' | 'gopay' | 'grabpay' | 'grailpay' | 'gusd' | 'hana-card' | 'handelsbanken' | 'hello-clever' | 'hong-leong-bank' | 'hong-leong-connect' | 'hsbc' | 'humm' | 'hyper' | 'hypercard' | 'hypercash' | 'hyundai-card' | 'ideal' | 'in3' | 'inbank' | 'indomaret' | 'ing-homepay' | 'interac' | 'ivy' | 'jcb' | 'jousto' | 'kakao-pay' | 'kakebaraidotcom' | 'kasikornbank' | 'kb-card' | 'kbc-cbc' | 'kfast' | 'klarna-pay-later' | 'klarna-pay-now' | 'klarna-slice-it' | 'klarna' | 'knet' | 'krediidipank' | 'kredivo' | 'krungsri' | 'krungthai-bank' | 'kueski-pay' | 'kunst-en-cultuur-cadeaukaart' | 'kuwait-finance-house' | 'laser' | 'latitude-creditline-au' | 'latitude-gem-au' | 'latitude-gem-nz' | 'latitude-go-au' | 'latitudepay' | 'lawson' | 'laybuy-heart' | 'laybuy' | 'lbc' | 'lhv' | 'line-pay' | 'linkaja' | 'linkpay' | 'litecoin' | 'lku' | 'lotte-card' | 'luminor' | 'lydia' | 'mada' | 'maestro' | 'mandiri' | 'mash' | 'master' | 'masterpass' | 'maxima' | 'maya-bank' | 'maya' | 'maybank-qrpay' | 'maybank' | 'maybankm2u' | 'mb-way' | 'mb' | 'mcash' | 'medicinos-bankas' | 'meeza' | 'merpay' | 'meta-pay' | 'ministop' | 'mobicred' | 'mobikwik' | 'mobilepay' | 'mode' | 'mokka' | 'momopay' | 'mondido' | 'monero' | 'mpesa' | 'mtn-mobile-money' | 'myfatoorah' | 'n26' | 'naps' | 'nationale-bioscoopbon' | 'nationale-entertainmentcard' | 'naver-pay' | 'nelo' | 'netbanking' | 'neteller' | 'nh-card' | 'nordea' | 'novuna' | 'ocbc-bank' | 'octo-clicks' | 'ola-money' | 'omasp' | 'op' | 'opay' | 'openpay' | 'ovo' | 'oxxo' | 'ozow' | 'pagoefectivo' | 'paid' | 'paidy' | 'palawa' | 'palawan' | 'pay-easy' | 'pay-pay' | 'paybylink' | 'payco' | 'payconiq' | 'payd' | 'payfast-instant-eft' | 'payflex' | 'payid' | 'paymark-online-eftpos' | 'paymaya' | 'payme' | 'paynow' | 'paypal' | 'payplan' | 'paypo' | 'paysafecard-paynl-version' | 'paysafecard' | 'paysafecash' | 'paysera' | 'paytm' | 'payto' | 'paytomorrow' | 'payu' | 'payzapp' | 'pei' | 'perlasfinance' | 'permata' | 'pivo' | 'pix' | 'podium-cadeaukaart' | 'poli' | 'polygon' | 'poppankki' | 'postfinance-card' | 'postfinance-efinance' | 'postpay' | 'pps' | 'przelew24' | 'przelewy24-paynl-version' | 'public-bank' | 'publicbank-pbe' | 'qr-promptpay' | 'qris' | 'qrph' | 'rabbit-line-pay' | 'rakuten-pay' | 'rapid-transfer' | 'ratepay' | 'rcbc' | 'rcs' | 'revolut' | 'rhb-bank' | 'rhb-now' | 'rietumu' | 'riverty-paynl-version' | 'rupay' | 'saastopankki' | 'sadad' | 'sam' | 'samsung-card' | 'samsung-pay' | 'santander' | 'satisfi' | 'satispay' | 'sbpl' | 'scalapay' | 'seb' | 'sepa-bank-transfer' | 'sequra' | 'sezzle' | 'shib' | 'shinhan-card' | 'shopeepay' | 'shopify-pay' | 'siam-commercial' | 'siauliu-bankas' | 'siirto' | 'sinpe-movil' | 'skrill-digital-wallet' | 'smartpay' | 'snap-checkout' | 'sofort' | 'softbank' | 'solanapay' | 'spankki' | 'spei' | 'splitit' | 'spotii' | 'spraypay' | 'standard-chartered' | 'stc-pay' | 'sunkus' | 'svea-b2b-faktura' | 'svea-b2b-invoice' | 'svea-credit-account' | 'svea-delbetalning' | 'svea-faktura' | 'svea-invoice' | 'svea-lasku' | 'svea-ostukonto' | 'svea-part-payment' | 'svea-yrityslasku' | 'sveaeramaksu' | 'swedbank' | 'swiftpay' | 'swish' | 'swissbilling' | 'synchrony-pay' | 'synchrony' | 'tabby' | 'tabit' | 'tamara' | 'tandympayment' | 'tbi-bank' | 'tendopay' | 'tensile' | 'tesco-lotus' | 'thanachart-bank' | 'toss' | 'touch-n-go' | 'trevipay' | 'truemoney-pay' | 'trustly' | 'twig-pay' | 'twint' | 'uae-visa' | 'uangme' | 'ubp' | 'unionpay' | 'unipay' | 'uob-ez-pay' | 'uob-thai' | 'uob' | 'upi' | 'urpay' | 'usdc' | 'usdp' | 'v-pay' | 'valu' | 'venmo' | 'viabill' | 'vipps' | 'visa-electron' | 'visa' | 'vvv-cadeaukaart-paynl-version' | 'vvv-giftcard' | 'walley' | 'wbtc' | 'webshop-giftcard' | 'wechat-pay' | 'wechat-paynl-version' | 'wegetfinancing' | 'xrp' | 'ymobile' | 'younited-pay' | 'zalopay' | 'zapper' | 'zinia' | 'zip' | 'zoodpay'`** Examples ## Preview ![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/paymenticon-default-uEfp1IrY.png) ### Examples * #### Basic PaymentIcon ##### React ```tsx import { reactExtension, PaymentIcon, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ; } ``` ##### JS ```js import {extension, PaymentIcon} from '@shopify/ui-extensions/customer-account'; export default extension('customer-account.page.render', (root) => { const paymentIcon = root.createComponent(PaymentIcon, {name: 'shop-pay'}); root.appendChild(paymentIcon); }); ``` ## Best Practices * Maintain the interior appearance of the SVG. The branded portion of the payment icon as provided meets the brand guidelines of the payment provider. * Maintain the border property of the payment icon. It is designed to adapt to merchant branding in Checkout and ensures a consistent appearance across the customer experience. * The icon size is designed to be displayed consistently across checkout.