Icons for a checkout

No. Brand logos are not in the library because of trademark rules. Use the plain card, wallet and bank icons for payment methods. Get brand marks from each brand's own press or developer pages, under their terms. That keeps your checkout clear of licence problems.

Regular suits most checkout controls and matches form fields and buttons. Use Solid for the selected option, like the chosen delivery method. Use Bold, a Pro style, for very small marks. Keep Gradient and Glass, also Pro, for the marketing pages around the shop.

Cover the cart, the bag, delivery, payment, address, promo code, order summary and confirmation. Add lock and shield icons near the pay button. Payment and shipping icons come from the e-commerce set. Search for each word in the browser. Keep them in one style so the flow feels like one thing.

A bag or box for ordered, a parcel for packed, a truck for shipped, a pin for out for delivery and a check for delivered. Use one style for all steps and a clear label under each. Colour alone should never be the only sign.

Generic ones, such as card, wallet and bank, are. Brand logos are not part of the library, because brand marks have their own rules. Add the logos you need from each provider, and use our icons for the generic parts of the screen.

Use 24 px for the cart icon in a header and 16 to 20 px inside buttons and rows. Make the cart count readable beside the icon. Our icons are drawn on a 24 px grid and checked at 16 px, so both sizes hold up.