Chapter 65: Icons Shopping
Shopping Icons (officially called Icons Shopping or Icons Payment & Shopping on W3Schools).
This is — as always — the classic W3Schools reference/cheat-sheet page that lists all free Font Awesome 5 icons belonging to the Shopping / Payment / E-commerce category.
URL (still working perfectly in February 2026): https://www.w3schools.com/icons/fontawesome5_icons_shopping.asp
(or sometimes combined as https://www.w3schools.com/icons/fontawesome5_icons_payment_shopping.asp)
It’s usually placed after “Shapes” or “Security” and before “Social” or “Spinners” in their sidebar. The page opens with the short intro:
Shopping Icons The table below shows the Free Font Awesome 5 Shopping icons:
…followed by the familiar table with preview, class name, unicode, and “Try it” button.
1. What does the “Icons Shopping” page contain?
This category contains only the icons that represent:
- shopping actions
- e-commerce elements
- carts, bags, baskets
- payment methods
- checkout process
- products & packaging
- discounts & promotions
- delivery & shipping
They are extremely useful (probably one of the top 3 most used categories on real websites in 2025–2026) for:
- Online stores (Flipkart, Amazon, Shopify, Meesho style)
- “Add to Cart” / “Buy Now” buttons
- Cart / wishlist icons in header
- Checkout / payment flow pages
- Product pricing & discount badges
- “Free Shipping” / “Cash on Delivery” indicators
- Invoice / receipt download sections
- “My Orders” / “Track Order” pages
- E-commerce admin panels (order status, product management)
In Font Awesome 5 free the Shopping & Payment category is one of the richest and most complete — around 25–40 icons (mostly solid fas, some regular far). Font Awesome 6 and 7 later added many more (cart-shopping, bag-shopping, credit-card-front, wallet, receipt, tag variants, barcode-scanner, truck-fast), but FA5 free already has almost everything a typical e-commerce site needs in 2026.
2. Main Free Shopping & Payment Icons in Font Awesome 5
Here are the most important / most frequently used ones (solid fas unless noted):
Shopping / Cart / Bag
- fa-shopping-cart 🛒 (classic cart – the #1 e-commerce icon) <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 ↓🛒 (add to cart / checkout) <i class=”fas fa-cart-arrow-down”></i>
Payment / Cards / Money
- fa-credit-card 💳 (classic credit/debit 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 👛 (digital wallet / purse) <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 – receive money) <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-percentage % (discount percentage) <i class=”fas fa-percentage”></i>
- fa-gift 🎁 (gift / promotion) <i class=”fas fa-gift”></i>
Delivery / Packaging
- fa-truck 🚚 (shipping / delivery truck) <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>
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-receipt 📄 (bill / invoice) <i class=”fas fa-receipt”></i>
- fa-file-invoice-dollar 📄₹ (invoice with currency) <i class=”fas fa-file-invoice-dollar”></i>
3. Real code examples – how developers actually use these icons
Example 1: Product Card “Add to Cart” Button (very common)
|
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 Pro</h3> <p style="font-size:2rem; color:#4caf50; margin:15px 0;"> <i class="fas fa-rupee-sign" style="font-size:1.8rem;"></i> 2,999 </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: Payment Methods Selector at Checkout
|
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="UPI / 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="Scan & Pay"></i> </div> <p style="text-align:center; font-size:1.4rem;">Choose Payment Method</p> |
Example 3: Cart Summary / Mini-Cart
|
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 28 29 30 31 32 33 34 35 36 |
<div style="border:1px solid #ddd; padding:25px; 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> <button style="width:100%; margin-top:20px; padding:14px; background:#ff5722; color:white; border:none; border-radius:6px; font-size:1.3rem;"> <i class="fas fa-cart-arrow-down" style="margin-right:10px;"></i> Proceed to Checkout </button> </div> |
Example 4: “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 on ₹999+ </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 Available </div> </div> |
4. Teacher Summary – Quick Facts (February 2026)
- How many real shopping/payment icons are there in FA5 free? → Around 25–35 truly useful ones (very strong category)
- Is there a modern “cart-shopping” or “bag-shopping” icon? → No — those came in Font Awesome 6 free (fa-cart-shopping, fa-bag-shopping)
- Is there a wallet or receipt icon? → Yes — fa-wallet and fa-receipt / fa-file-invoice-dollar are in FA5
- Best alternatives in 2026 if you need a richer e-commerce set
- Font Awesome 6 or 7 (free version) → much better cart, bag, payment icons
- Bootstrap Icons → excellent shopping cart, bag, credit-card icons
- Tabler Icons → very complete e-commerce & payment set
- Heroicons / Lucide → modern line-style shopping icons
- Google Material Symbols → rich payment & shopping collection
So in short: Font Awesome 5 Shopping & Payment Icons = one of the strongest categories in FA5 → shopping-cart 🛒, shopping-bag 🛍️, credit-card 💳, wallet 👛, money-bill 💵, tag 🏷️, percentage % %, truck 🚚, box 📦, receipt 📄, etc.
Got it now? Want me to:
- Build a full “E-commerce Product + Cart + Checkout” demo page with these icons?
- Show how they look in a modern Flipkart / Amazon-style mini-cart?
- Compare FA5 vs FA6/7 shopping icons (way more modern cart & payment icons in newer versions)?
- Or move to the next category in the series?
Just raise your hand — teacher is ready! 🛒💳🛍️🚀
