Figma payment method icons
Payment method icons in Figma: card marks, wallets, and sizes
Nobody reads the payment logos at a checkout. They scan them, in about a second, to answer one question: will the card in my hand work here.
That scan happens in three places, next to the pay button, inside the payment method selector, and in the footer where the same marks quietly double as a trust signal, usually a row away from the social icons. Get the row wrong and people do not complain, they just leave with a full cart.
56 providers, not only the four card networks
Cards cover Visa, Mastercard, American Express, Discover, Diners Club, JCB, UnionPay, Maestro, Elo and RuPay. Wallets and instant methods cover Apple Pay, Google Pay, Samsung Pay, Shop Pay, Cash App Pay, Venmo, Zelle, Alipay, WeChat Pay and UPI.
Pay-later covers Klarna, Afterpay, Affirm and Zip Pay. Bank rails and regional methods cover SEPA, iDEAL, Sofort, giropay, Bancontact, Interac and Citadele. Processors and platforms cover Stripe, PayPal, Adyen, Braintree, Razorpay, Payoneer, Paysafe, Skrill, Wise, Revolut and Verifone, and there is a crypto group with Bitcoin, Bitcoin Cash, Ethereum, Litecoin, Coinbase, Binance Pay and BitPay.
The regional half is the part that matters the moment you sell outside the US, where a checkout without iDEAL in the Netherlands or UPI in India is a checkout with a hole in it.
Two sizes, both wider than they are tall
The sm variant is 34x24px and md is 46x32px. Both keep the landscape proportions of a card, which matters because a mark squeezed into a square box either shrinks the logo or crops it, and neither reads at a glance.
Use sm for a footer strip or the saved card row in account settings, and md in the selector where somebody is actively choosing a method and the logo is the label. Size is a variant property, so a row of ten marks changes scale from one dropdown, which Figma’s guide to component properties explains if you are structuring your own set the same way.
How many to show, and in what order
Show what you accept, ordered by what your customers actually use, and stop there. Nielsen Norman Group’s research on the mobile checkout experience recommends offering recognisable third-party options like PayPal and Apple Pay while avoiding an overwhelming number of choices, and a wall of 20 marks is exactly that.
Four to six in the checkout, with the rest behind a "more payment methods" row, keeps the decision small. In the footer the calculus changes slightly, because there the marks are reassurance rather than a choice, so a wider row is defensible.
These are trademarks, and they are also images
Card network and wallet marks are owned by their networks, and each publishes rules about clear space, minimum size and which version of the mark to use on a light or dark background. Follow them, particularly the minimum size, because a Mastercard mark at 16px tall is a smudge.
In markup, a logo beside a text label is decorative and should be skipped by screen readers; a logo standing alone as the only content of a radio option needs the method’s name as its accessible name, which the W3C tutorial on functional images covers in detail.
All 56 methods live in one component set, so a payment row is one instance repeated with the Payment method property changed. Adding a provider next quarter is a swap on a duplicated instance rather than a hunt through the file for wherever the last designer pasted a Visa logo.
Frequently asked questions
What size should payment icons be at checkout?
The md variant at 46x32px is the right weight inside a payment method selector, where each mark is effectively the option label.
Drop to the sm variant at 34x24px for a footer strip or a saved card list, where the logo is confirming rather than choosing. Keep every mark in a row at the same size, since networks have very different logo proportions and mixed sizes make the row look broken.
Which payment logos should I show on a pricing page?
Only the ones you accept for that plan, and only if you accept enough for the row to reassure rather than confuse.
On a pricing section two or three of the most recognised marks near the call to action do more than a full strip below the fold. If your checkout supports one method, a line of text says it better than a lone logo floating in white space.
Do I need permission to use card and wallet logos?
You are using someone else’s trademark, so their brand guidelines apply.
In practice, showing the marks for methods you genuinely accept is standard and expected, provided you keep the official artwork, respect clear space and minimum sizes, and do not recolor them into your own palette. What you cannot do is imply a partnership or endorsement that does not exist.
Are these payment icons included in the free version?
The payment method icons are part of the paid Untitled UI Figma kit. See pricing for what is included.
The 100% free Figma UI kit includes core components from the same system if you want to try it first.
How do I build a payment method selector with these?
Put the mark inside a selectable row rather than making the logo itself the control. The radio group cards in the kit include a payment method version for this, pairing the icon with the method name, a card number and a radio control, so the whole row is the hit target.
If you are showing saved cards, the credit card components handle the fuller treatment.
Foundation Figma components and styles
Figma base components
Shared Figma assets
Application UI/Dashboard examples
Application UI/Dashboard Figma components
Marketing website examples
What is Untitled UI?
Untitled UI is the best $ I've spent on my business in a long time. I'm going to keep using it and recommending it to every designer I know.
Over the years we've featured hundreds of UI kits on UXCrush, but Untitled UI is by far the most comprehensive and detailed I've seen yet. A must have for any designer!
I've used all UI kits on the market. I can say without a doubt that the Untitled UI kit is the best on the market. It covers everything a designer needs in a modern and efficient way.
Incredible, and keeps getting better. I’ve tried dozens of UI kits and Untitled UI is the only name you should care about. It stands head and shoulders above the rest.
Such a beautiful, detailed, and extensive UI kit. Untitled UI is the perfect foundation for any project. I highly recommend this huge time saver.
Untitled UI has been an amazing resource that I'm learning to rely upon to spin up ideas in no time. I think I might launch a startup pretty soon by mistake here!
The sheer scale, details, and organization of this kit is mind-blowing. It covers nearly everything a Designer could need in a modern, efficient and systematic way.
I'm super impressed with this. I love poking around in other peoples UI Kits to see how they think. This is probably one of the most comprehensive I've seen.
I'm super excited to use this for quick mockups of ideas in Figma. We're always trying to streamline our design process so we can move fast! Definitely recommend.
Untitled UI is easily the best UI kit I've used so far. It has an insane amount of components that are all incredibly well-built. I don't even know how many hours this will save.
The attention to detail and thought Jordan has put into this UI kit is unparalleled.
Untitled UI is incredibly well-organized and the attention to detail is great. I highly recommend this kit to any designer that wants to create beautiful designs fast.
What an awesome Figma kit... it's an absolute game changer. This is the perfect base for any design system. The size and attention to detail is next level.
We've been using Untitled to build Himalayas 2.0 and have finished a complete redesign in just a few days. It has everything we need already pixel-perfect.
