Shopping & checkout

Icons that clarify shopping and delivery

Commerce icons work best when they identify a specific stage of shopping. A bag or cart belongs near the basket action, a package can describe an order, and a truck can represent delivery. Avoid using a decorative symbol as a substitute for essential information such as a shipping estimate, return condition, or payment status. Those details need readable text.

A cart button often appears in a crowded mobile header. Keep its silhouette simple and reserve enough space for any item-count badge. Test the largest count your design allows. The badge should not cover the part of the icon that makes it recognizable, and its text must remain legible when the header changes color or becomes sticky.

Checkout steps benefit from a consistent family. Compare the address, payment, delivery, and confirmation symbols together before exporting them. A shield may suggest security, but it is not evidence of a security certification. Do not pair icons with claims the service cannot support. When payment logos are used, follow the relevant brand guidance rather than recoloring them merely to match a decorative palette.

For product cards, use icons sparingly around actions such as save, compare, and quick view. Too many small symbols make the card harder to scan and increase the need for explanatory labels. Test each action on touch devices, where hover-only explanations are unavailable. Keep the primary purchase action visually distinct from secondary controls and ensure that disabled or unavailable options are clearly explained.

On a product detail page, a bag symbol might open the basket or add the current item to it. Those actions have different consequences. Put an explicit Add to bag label beside the purchase action and reserve the header bag for viewing the order. After adding an item, check how the quantity badge sits against the handle at small sizes. Use a two-digit quantity in your test so a neat single-digit mockup does not hide an overlap.

Prepare a useful export

Choose a sample above to open the editor. Review its size, color, and stroke against the background where it will be used. Keep an editable SVG when your destination supports vectors, or export a PNG at an appropriate resolution. Check the result in the real layout and retain applicable source notices with your project.

Explore the icon guides for examples and troubleshooting, or return to all collections to compare related symbols.