Menu

Beta
Sign in
Checkout SVG icon, gradient

Checkout SVG icon, gradient

A checkout symbol signals the step where customers review and pay for an order. It fits an ecommerce cart page and a ticket booking payment screen.

Free · from Online Shopping Icons, Gradient

Similar SVGs

More from Online Shopping Icons, Gradient

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/gk4c714IEXsj/amnt.svg" alt="Checkout" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><defs><linearGradient id="g0" gradientUnits="userSpaceOnUse" x1="12" y1="14" x2="53" y2="52"><stop offset="0" stop-color="#8738e8"/><stop offset="1" stop-color="#1678ff"/></linearGradient><linearGradient id="g1" gradientUnits="userSpaceOnUse" x1="12" y1="14" x2="53" y2="52"><stop offset="0" stop-color="#8738e8"/><stop offset="1" stop-color="#1678ff"/></linearGradient></defs><g id="layer-1" data-name="Shape 1"><path d="M8 13L15 13L20 42L49 42L55 20L17 20" fill="none" stroke="url(#g0) #1678ff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-2" data-name="Shape 2"><path d="M19 23L52 23L47 39L22 39Z" fill="url(#g1) #1678ff"/></g><g id="layer-3" data-name="Shape 3"><path d="M25 27L45 27" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-opacity="0.24"/></g><g id="layer-4" data-name="Shape 4"><path d="M29 32L33 36L41 27" fill="none" stroke="#ffffff" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-5" data-name="Circle 5"><path d="M29 51C29 53.21 27.21 55 25 55C22.79 55 21 53.21 21 51C21 48.79 22.79 47 25 47C27.21 47 29 48.79 29 51Z" fill="#693de0"/></g><g id="layer-6" data-name="Circle 6"><path d="M49 51C49 53.21 47.21 55 45 55C42.79 55 41 53.21 41 51C41 48.79 42.79 47 45 47C47.21 47 49 48.79 49 51Z" fill="#1678ff"/></g><g id="layer-7" data-name="Circle 7"><path d="M57 19C57 20.66 55.66 22 54 22C52.34 22 51 20.66 51 19C51 17.34 52.34 16 54 16C55.66 16 57 17.34 57 19Z" fill="#ff746d"/></g></svg>
CSS background-image
.checkout {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/gk4c714IEXsj/amnt.svg");
  background-size: contain;
}
React
import CheckoutSvg from "./checkout.jsx"; // from the React tab above

<CheckoutSvg width={48} height={48} />

Tags

checkoutpaymentordershopping

Made with AMNT

AMNT SVG 1.1 drew this from the words Checkout. bold simple silhouette, smooth shading from violet to electric blue with a small coral accent, subtle highlights, crisp edges, no background, readable at small size. as part of the pack Online Shopping Icons, Gradient. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings