Cart
Cart, add, remove, quantity, save for later.
Use case
Icons for a checkout
These are the icons a checkout needs, from cart to delivery.
CartDeliveryPaymentReview
Payment method
CardSaved card
DefaultWalletPay in one tap
Bank transferFrom your bank
Order summary
Items
Delivery
Coupon
Total
Place order
Secure checkoutIcon jobs
The icons this screen needs
Each card is one group of icons to search for in the browser.
Delivery
Standard, express, pickup point, address, delivery date.
Payment
Card, wallet, bank transfer, pay later, secure payment.
Offers
Coupon, discount, gift card, free shipping.
Order status
Packed, shipped, out for delivery, delivered, returned.
Trust
Lock, verified, returns policy, support.
The screen
A typical one-page checkout
This is the screen we planned these icons for.
The cart sits on the left with quantity controls, a remove button and a coupon field. Delivery choices, the address and payment methods sit on the right. A lock sits next to the pay button.
After the order, the shop shows a tracking page: packed, shipped, out for delivery and delivered. Sometimes a return follows.
Why one set
Doubt at checkout costs orders
A small pause at checkout often ends the order.
If the remove icon looks like the save icon, people stop. If the lock looks like it came from another set, people stop too.
UIX Icons draws shop, payment and interface icons on one grid. The cart in the header, the truck in the delivery step and the box on the tracking page share weight and size. Each step has its own picture, so shoppers can follow an order by the icon alone.
FAQ
Questions
Can I use payment brand logos from UIX Icons?
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.
Which style works best in a checkout?
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.
What icons do I need for an online checkout?
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.
Which icons show order status?
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.
Should payment method icons be in the icon set?
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.
What size should cart and checkout icons be?
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.
Next step
Find e-commerce icons
See every approved shop icon, from cart to returns.
About this page
A checkout needs icons for the cart, quantity, delivery options, address, payment methods, coupons, security and order status. Shoppers decide in seconds whether to finish. So every icon must be clear and mean one thing. UIX Icons draws all of them on one grid, so the cart, the payment step and the tracking page look like one shop.