Chapter 57: Icons Payment & Shopping
1. What is the “Icons Payment & Shopping” Page?
This page collects only the icons that represent e-commerce, shopping, payments, money transfer, carts, bags, credit cards, wallets, receipts, barcodes, tags, discounts, checkout, and online buying/selling concepts.
These icons are extremely useful (probably one of the most used categories on real websites in 2025–2026) for:
- Online stores / e-commerce platforms (Amazon, Flipkart, Shopify style)
- “Add to Cart” / “Buy Now” buttons
- Checkout / payment pages
- Product listing pages (price tag, discount badge)
- Shopping cart / wishlist icons
- “Proceed to Checkout” flows
- Payment method selectors (credit card, UPI, wallet, cash on delivery)
- “Free Shipping” / “Cash on Delivery” badges
- Invoice / receipt download sections
- “My Orders” / “Track Order” pages
In Font Awesome 5 free, the Payment & Shopping category is one of the most complete and practical (around 25–40 icons, mostly solid fas style, some regular far). Newer versions (FA6/7) added even more (bag-shopping, cart-shopping, credit-card-front, wallet, receipt, tag variants, barcode-scanner), but FA5 free already has almost everything a typical e-commerce site needs in 2026.
2. Main Free Payment & Shopping Icons in Font Awesome 5 (From the W3Schools Page)
Here are the most important and frequently used ones (solid fas unless noted):
Shopping / Cart / Bag
- fa-shopping-cart 🛒 (classic cart) <i class=”fas fa-shopping-cart”></i>
- fa-shopping-bag 🛍️ <i class=”fas fa-shopping-bag”></i>
- fa-shopping-basket 🛒 <i class=”fas fa-shopping-basket”></i>
- fa-cart-plus ➕🛒 (add to cart) <i class=”fas fa-cart-plus”></i>
- fa-cart-arrow-down ↓🛒 (cart download / checkout) <i class=”fas fa-cart-arrow-down”></i>
Payment / Cards / Money
- fa-credit-card 💳 <i class=”fas fa-credit-card”></i>
- fa-credit-card-alt 💳 (alternative card style) <i class=”fas fa-credit-card-alt”></i>
- fa-wallet 👛 <i class=”fas fa-wallet”></i>
- fa-money-bill 💵 (cash note) <i class=”fas fa-money-bill”></i>
- fa-money-bill-wave 💵 (wavy cash) <i class=”fas fa-money-bill-wave”></i>
- fa-money-check 💵✓ (check / payment confirmation) <i class=”fas fa-money-check”></i>
- fa-money-check-alt 💵✓ <i class=”fas fa-money-check-alt”></i>
- fa-hand-holding-usd 💰🤝 (hand holding dollar) <i class=”fas fa-hand-holding-usd”></i>
Tags / Prices / Discounts
- fa-tag 🏷️ (price tag) <i class=”fas fa-tag”></i>
- fa-tags 🏷️🏷️ (multiple tags) <i class=”fas fa-tags”></i>
- fa-percent % (discount percentage) <i class=”fas fa-percentage”></i>
- fa-gift 🎁 (gift / promotion) <i class=”fas fa-gift”></i>
Other Common E-commerce
- fa-barcode 📋 (product barcode) <i class=”fas fa-barcode”></i>
- fa-qrcode ▦ (QR code for payment / tracking) <i class=”fas fa-qrcode”></i>
- fa-truck 🚚 (shipping / delivery) <i class=”fas fa-truck”></i>
- fa-truck-loading 🚚📦 (loading delivery) <i class=”fas fa-truck-loading”></i>
- fa-box 📦 (package / shipment) <i class=”fas fa-box”></i>
- fa-boxes 📦📦 (stacked packages) <i class=”fas fa-boxes”></i>
- fa-receipt 📄 (bill / invoice) <i class=”fas fa-receipt”></i>
- fa-file-invoice-dollar 📄₹ (invoice with currency) <i class=”fas fa-file-invoice-dollar”></i>
These are the core free Payment & Shopping icons in FA5 — very clean and instantly understandable for any e-commerce context.
3. Real Code Examples – How to Use Payment & Shopping Icons
Example 1: E-commerce Product Card “Add to Cart” Button
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div style="border: 1px solid #ddd; padding: 25px; max-width: 350px; margin: 40px auto; border-radius: 12px; text-align: center;"> <h3>Wireless Headphones</h3> <p style="font-size: 2rem; color: #4caf50;"> <i class="fas fa-rupee-sign" style="font-size: 1.8rem;"></i> 2,499 </p> <button style="background: #ff5722; color: white; padding: 14px 28px; border: none; border-radius: 50px; font-size: 1.3rem; cursor: pointer;"> <i class="fas fa-cart-plus" style="margin-right: 10px; font-size: 1.6rem;"></i> Add to Cart </button> </div> |
Example 2: Checkout / Payment Methods Selector
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<div style="display: flex; justify-content: center; gap: 40px; font-size: 5rem; margin: 50px 0;"> <i class="fas fa-credit-card" style="color: #2196f3;" title="Credit / Debit Card"></i> <i class="fas fa-wallet" style="color: #4caf50;" title="Digital Wallet"></i> <i class="fas fa-money-bill-wave" style="color: #ff9800;" title="Cash on Delivery"></i> <i class="fas fa-qrcode" style="color: #673ab7;" title="UPI / QR Payment"></i> </div> <p style="text-align: center; font-size: 1.4rem;">Choose Payment Method</p> |
Example 3: “Free Shipping” / “Cash on Delivery” Badges
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div style="display: flex; justify-content: center; gap: 30px; margin: 40px 0;"> <div style="background: #4caf50; color: white; padding: 12px 24px; border-radius: 50px; font-size: 1.2rem;"> <i class="fas fa-truck" style="margin-right: 8px;"></i> Free Shipping </div> <div style="background: #ff9800; color: white; padding: 12px 24px; border-radius: 50px; font-size: 1.2rem;"> <i class="fas fa-money-bill-wave" style="margin-right: 8px;"></i> Cash on Delivery </div> </div> |
Example 4: Shopping Cart Summary
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div style="border: 1px solid #ddd; padding: 30px; max-width: 400px; margin: 40px auto; border-radius: 12px; background: #f8f9fa;"> <div style="display: flex; align-items: center; justify-content: space-between; font-size: 1.5rem; margin-bottom: 20px;"> <div> <i class="fas fa-shopping-cart" style="font-size: 2.5rem; color: #673ab7; margin-right: 15px;"></i> Your Cart </div> <span>3 items</span> </div> <div style="display: flex; justify-content: space-between; font-size: 1.3rem; margin: 15px 0;"> Subtotal <span><i class="fas fa-rupee-sign"></i> 4,997</span> </div> <div style="display: flex; justify-content: space-between; font-size: 1.3rem; margin: 15px 0; color: #4caf50;"> Shipping <span>Free</span> </div> <hr> <div style="display: flex; justify-content: space-between; font-size: 1.6rem; font-weight: bold;"> Total <span><i class="fas fa-rupee-sign"></i> 4,997</span> </div> </div> |
4. Teacher Summary – Quick Recap
Font Awesome 5 Payment & Shopping Icons = W3Schools’ page listing free e-commerce & payment icons like shopping-cart 🛒, shopping-bag 🛍️, credit-card 💳, wallet 👛, money-bill 💵, tag 🏷️, barcode 📋, truck 🚚, box 📦, file-invoice-dollar 📄₹, percentage % %, gift 🎁, etc.
Very useful for:
- Online stores / e-commerce sites
- “Add to Cart” / “Buy Now” buttons
- Checkout / payment flows
- Product pricing & discount badges
- Shipping / delivery indicators
- Invoice / receipt sections
Got it now? Want me to:
- Build a full “E-commerce Product Page” or “Checkout Flow” demo with these icons?
- Show how they look in a modern Flipkart / Amazon-style cart summary?
- Compare FA5 vs FA6/7 shopping icons (way more modern cart & payment icons in newer versions)?
- Or move to the next category like “Icons Medical” (wait — we already did Medical) or “Icons Money”?
Just tell your teacher — we’re shopping smart today! 🛒💳🛍️🚀
