File size: 9,831 Bytes
8a7cc1e 1ffef97 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ecommerce Icon Pack UI Kit — Cart, Checkout & Order-Status Components in 32 States (Figma + Sketch)</title>
<meta name="description" content="8 components, 32 built states — including the Sold out and Payment declined states most kits leave you to draw the day before launch. Icon artwork is not included: this is the component and state layer your own ecommerce icon pack sits on top of.">
<link rel="canonical" href="https://getreadystack.com/tools/ecommerce-icon-pack">
<script data-grow-initializer="">!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement("script");(e.type="text/javascript"),(e.src="https://faves.grow.me/main.js"),(e.defer=!0),e.setAttribute("data-grow-faves-site-id","U2l0ZTphZjljMzgyMC0yMmU5LTRhYjgtYTIxNS03OTRhMGY1N2ExYzM=");var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t);})();</script>
</head>
<body>
<main><h1>Ecommerce Icon Pack UI Kit — Cart, Checkout & Order-Status Components in 32 States (Figma + Sketch)</h1><p>A restyleable ecommerce component set: 8 components (add-to-cart button, cart count badge, payment method chip, product card, discount code field, checkout alert, order status tracker, product detail tabs) delivered as 32 named variants, so a cart, a checkout and an order-tracking screen can be assembled without drawing a rectangle. Every fill and label points at 6 shared color tokens, so swapping in your own brand hex values restyles all 32 states at once — the icon glyphs themselves you paste in from your own icon pack.</p><svg xmlns="http://www.w3.org/2000/svg" width="180" height="48" viewBox="0 0 180 48"><rect x="0" y="0" width="180" height="48" rx="8" fill="#2563EB"/><text x="90" y="24" font-family="Inter" font-size="16" fill="#FFFFFF" text-anchor="middle" dominant-baseline="middle">Add to cart</text></svg><svg xmlns="http://www.w3.org/2000/svg" width="180" height="48" viewBox="0 0 180 48"><rect x="0" y="0" width="180" height="48" rx="8" fill="#0F172A"/><text x="90" y="24" font-family="Inter" font-size="16" fill="#FFFFFF" text-anchor="middle" dominant-baseline="middle">Add to cart</text></svg><svg xmlns="http://www.w3.org/2000/svg" width="180" height="48" viewBox="0 0 180 48"><rect x="0" y="0" width="180" height="48" rx="8" fill="#64748B"/><text x="90" y="24" font-family="Inter" font-size="16" fill="#FFFFFF" text-anchor="middle" dominant-baseline="middle">Adding…</text></svg><svg xmlns="http://www.w3.org/2000/svg" width="180" height="48" viewBox="0 0 180 48"><rect x="0" y="0" width="180" height="48" rx="8" fill="#F8FAFC"/><text x="90" y="24" font-family="Inter" font-size="16" fill="#64748B" text-anchor="middle" dominant-baseline="middle">Sold out</text></svg></main>
<section data-yj-cta="paid" style="margin:3rem auto;max-width:46rem;padding:1.5rem 1.25rem;border:1px solid #d8dee9;border-radius:12px;background:#fbfcfe;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif"><h2 style="margin:0 0 .5rem;font-size:1.25rem">Get the complete version <span class="yj-price">$168</span></h2><p style="margin:.25rem 0 1rem;color:#41505f">This page is the working piece. The full pack has everything below.</p><p style="margin:0 0 1rem;color:#41505f">8 components, 32 built states — including the Sold out and Payment declined states most kits leave you to draw the day before launch. Icon artwork is not included: this is the component and </p><p style="margin:0 0 1rem;color:#5b6b7c;font-size:.94rem">Measured on this shelf in August 2026: a competing ecommerce UI kit is listed at US$168 right now — that is the going rate for this work, not a discount claim. In-house, the same result means a designer drawing, naming and state-l</p><a href="https://launchcrateperfect.gumroad.com/l/qjugl" rel="nofollow" style="display:inline-block;padding:.7rem 1.3rem;border-radius:8px;background:#1b64f2;color:#fff;text-decoration:none;font-weight:600">Send it to me</a></section>
<section class="yj-related" style="max-width:920px;margin:56px auto 40px;padding:0 20px"><h2 style="font:600 21px/1.3 system-ui,sans-serif;margin:0 0 6px;color:#1b1f24">More from ReadyStack</h2><p style="font:400 14.5px/1.5 system-ui,sans-serif;margin:0 0 20px;color:#5b6570">Ready-to-use files. One-time download, no subscription.</p><div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px"><a class="yj-rel-c" href="https://getreadystack.com/tools/graphic-designer-portfolio-template"><span class="yj-rel-t">Graphic Designer Portfolio Template — 10-Page Self-Contained HTML Site with Ca</span><span class="yj-rel-p">$49</span></a><a class="yj-rel-c" href="https://getreadystack.com/tools/portfolio-website-template"><span class="yj-rel-t">Portfolio Website Template — Freelance Designer Portfolio & Case Study Site (8</span><span class="yj-rel-p">$49</span></a><a class="yj-rel-c" href="https://getreadystack.com/tools/teacher-resume-template"><span class="yj-rel-t">Teacher Resume Template — 6 Fill-In Word Resumes for U.S. K-12 Hiring: First T</span><span class="yj-rel-p">$29</span></a><a class="yj-rel-c" href="https://getreadystack.com/tools/real-estate-photo-presets"><span class="yj-rel-t">Real-Estate Interior LUTs and Lightroom Presets for Property Photographers</span><span class="yj-rel-p">$44</span></a><a class="yj-rel-c" href="https://getreadystack.com/tools/notary-website-template"><span class="yj-rel-t">Notary Website Template — Mobile Notary & Loan Signing Agent Site (Self-Hosted</span><span class="yj-rel-p">$49</span></a><a class="yj-rel-c" href="https://getreadystack.com/tools/real-estate-video-luts-for-interior-walkthroughs"><span class="yj-rel-t">Real-Estate Video LUTs for Interior Walkthroughs and Listing Exteriors</span><span class="yj-rel-p">$100</span></a></div><style>.yj-rel-c{display:flex;flex-direction:column;gap:8px;padding:15px 16px;border:1px solid #e2e6ea;border-radius:6px;text-decoration:none;background:#fff}.yj-rel-c:hover{border-color:#b9c2cb;background:#fafbfc}.yj-rel-t{font:500 14.5px/1.42 system-ui,sans-serif;color:#1b1f24}.yj-rel-p{font:600 13px system-ui,sans-serif;color:#0a6238}</style></section><!--yj-share-s101--><div style="margin:28px 0 8px;text-align:center"><button id="yjcp" type="button" style="font:inherit;padding:10px 18px;border:1px solid #8884;border-radius:10px;background:transparent;cursor:pointer">Copy link</button></div><script>(function(){var b=document.getElementById("yjcp");if(!b)return;var t=b.textContent;b.addEventListener("click",function(){var u=location.href.split("#")[0];function d(){b.textContent="Link copied";setTimeout(function(){b.textContent=t;},1800);}if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(u).then(d,function(){prompt("",u);});}else{prompt("",u);}});})();</script>
<script data-yj="yj-view-beacon">(function(){try{var p=location.pathname;var k='yjv:'+p;if(sessionStorage.getItem(k))return;sessionStorage.setItem(k,'1');fetch('/api/ev',{method:'POST',keepalive:true,headers:{'Content-Type':'application/json'},body:JSON.stringify({path:p,lang:"en"})}).catch(function(){});}catch(e){}})();</script>
<div class="yj-home-find"><div class="yj-lgbar"><a href="/" class="yj-lg on">EN</a><a href="/de/" class="yj-lg">DE</a><a href="/ja/" class="yj-lg">JA</a><a href="/es/" class="yj-lg">ES</a><a href="/pt/" class="yj-lg">PT</a></div><section class="yj-find"><h2>Find a tool</h2><input id="yjq" type="search" autocomplete="off" placeholder="Type a product name, format or task"><div id="yjr"></div></section><style>.yj-lgbar{position:absolute;top:14px;right:18px;display:flex;gap:6px;z-index:60}.yj-lg{font:600 12px/1 system-ui,sans-serif;padding:6px 9px;border-radius:4px;text-decoration:none;color:#8b96a3;border:1px solid rgba(140,150,165,.28)}.yj-lg:hover{color:#e8eaed;border-color:rgba(160,175,195,.6)}.yj-lg.on{color:#0e1116;background:#cfd6de;border-color:#cfd6de}.yj-find{max-width:760px;margin:34px auto 8px;padding:0 20px}.yj-find h2{font:600 20px/1.3 system-ui,sans-serif;margin:0 0 10px}#yjq{width:100%;box-sizing:border-box;padding:13px 15px;font:400 15.5px system-ui,sans-serif;border:1px solid rgba(140,150,165,.34);border-radius:8px;background:rgba(255,255,255,.04);color:inherit}#yjq:focus{outline:none;border-color:#7FD1C4}#yjr{margin-top:10px;display:flex;flex-direction:column;gap:6px}#yjr a{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border:1px solid rgba(140,150,165,.22);border-radius:6px;text-decoration:none;font:400 14.5px/1.4 system-ui,sans-serif;color:inherit}#yjr a:hover{border-color:#7FD1C4}#yjr .pr{font:600 13px system-ui,sans-serif;color:#5fbf9a;white-space:nowrap}</style><script>(function(){var q=document.getElementById("yjq"),r=document.getElementById("yjr"),D=null;function load(){if(D)return Promise.resolve(D);return fetch("/search-index.json").then(function(x){return x.json();}).then(function(j){D=j;return j;}).catch(function(){D=[];return D;});}function esc(t){return String(t).replace(/[&<>"]/g,function(c){return {"&":"&","<":"<",">":">",'"':"""}[c];});}function run(){var v=q.value.trim().toLowerCase();if(v.length<2){r.innerHTML="";return;}load().then(function(j){var w=v.split(/\s+/),o=[];for(var i=0;i<j.length&&o.length<12;i++){var t=j[i].t.toLowerCase();var ok=true;for(var k=0;k<w.length;k++){if(t.indexOf(w[k])<0){ok=false;break;}}if(ok)o.push(j[i]);}r.innerHTML=o.length?o.map(function(x){return "<a href=\""+esc(x.u)+"\">"+"<span>"+esc(x.t)+"</span>"+(x.p?"<span class=\"pr\">$"+x.p+"</span>":"")+"</a>";}).join(""):"";});}q.addEventListener("input",run);q.addEventListener("focus",load);})();</script></div></body>
</html>
|