Chapter 91: Icons Payment
Payment Icons The table below shows the Free Font Awesome 5 Payment icons:
followed by the table with icon preview | class name | unicode | Try it button.
1. What is the “Icons Payment” page?
This page collects only the icons that represent:
- credit cards / debit cards
- digital wallets
- cash / banknotes
- checks / payment confirmation
- barcodes / QR codes
- money transfer / hand holding cash
- invoices / receipts
- piggy banks / savings
These icons are extremely useful (probably in the top 5 most used categories on real commercial websites) for:
- E-commerce checkout pages
- Pricing tables / subscription plans
- “Pay Now” / “Buy” / “Subscribe” buttons
- Payment method selectors (card, wallet, UPI, COD)
- Invoice / receipt download sections
- “Secure Payment” / “SSL Protected” badges
- Donation / crowdfunding campaigns
- Banking / fintech / wallet apps
- “Cash on Delivery” / “Free Shipping” indicators
- “Add Funds” / “Top Up” buttons
In Font Awesome 5 free this category is one of the richest and most complete — around 25–35 icons (mostly solid fas, some regular far). Font Awesome 6 and 7 added many more (credit-card-front, credit-card-back, wallet, receipt, money-bill-trend-up, sack-dollar, barcode-read, hand-holding-dollar variants), but FA5 free already has almost everything a typical online store, SaaS pricing page, or fintech app needs in 2026.
2. Main Free Payment Icons in Font Awesome 5 (From the W3Schools Page)
Here are the most important and frequently used free ones (solid fas unless noted):
| Icon name | Class name | Looks like | Most common meaning / usage |
|---|---|---|---|
| credit-card | fas fa-credit-card | 💳 Credit card | General card payment (very common) |
| credit-card-alt | fas fa-credit-card-alt | 💳 Alternative card | Slightly different card style |
| wallet | fas fa-wallet | 👛 Wallet | Digital wallet (Paytm, Google Pay, PhonePe style) |
| money-bill | fas fa-money-bill | 💵 Banknote | Cash payment, physical money |
| money-bill-wave | fas fa-money-bill-wave | 💵 Wavy banknote | Modern cash / money flow |
| money-check | fas fa-money-check | 💵 Check / cheque | Cheque payment, payment confirmation |
| money-check-alt | fas fa-money-check-alt | 💵 Alternative cheque | Same as above |
| hand-holding-usd | fas fa-hand-holding-usd | 💰 Hand holding dollar | Receive money, payment received, donation |
| piggy-bank | fas fa-piggy-bank | 🐷 Piggy bank | Savings, investment, financial goal |
| barcode | fas fa-barcode | 📋 Barcode | Product scanning, inventory, payment barcode |
| qrcode | fas fa-qrcode | ▦ QR code | QR payment (UPI, Paytm, PhonePe, etc.) |
| receipt | fas fa-receipt | 📄 Receipt | Bill, invoice, payment receipt |
| file-invoice | fas fa-file-invoice | 📄 Invoice | Invoice document |
| file-invoice-dollar | fas fa-file-invoice-dollar | 📄₹ Invoice with ₹ | Invoice with currency symbol |
These are the core free payment icons in FA5 — very clean and instantly understandable for any financial transaction context.
3. Real Code Examples – How Developers Actually Use Them
Example 1: Pricing Plan Card (very common on SaaS / course sites)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div style="border:1px solid #ddd; padding:30px; max-width:380px; margin:40px auto; border-radius:12px; text-align:center; background:#f8f9fa;"> <i class="fas fa-wallet fa-6x" style="color:#673ab7; margin-bottom:20px;"></i> <h2>Premium Plan</h2> <p style="font-size:2.8rem; font-weight:bold; color:#4caf50; margin:15px 0;"> <i class="fas fa-rupee-sign" style="font-size:2.2rem;"></i> 999 <small style="font-size:1rem; color:#757575;">/ month</small> </p> <p style="color:#555; margin:15px 0;">Unlimited access • Priority support</p> <button style="background:#673ab7; color:white; padding:14px 28px; border:none; border-radius:50px; font-size:1.2rem;"> Subscribe Now </button> </div> |
Example 2: Payment Method 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: “Pay Now” Button with Invoice Icon
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background:#4caf50; color:white; padding:18px 40px; border:none; border-radius:50px; font-size:1.4rem; cursor:pointer; box-shadow:0 4px 12px rgba(76,175,80,0.3);"> <i class="fas fa-file-invoice-dollar" style="margin-right:12px; font-size:1.8rem;"></i> Pay ₹ 2,499 Now </button> |
Example 4: “Cash on Delivery Available” Badge
|
0 1 2 3 4 5 6 7 8 9 |
<div style="display:inline-flex; align-items:center; gap:12px; padding:12px 24px; background:#ff9800; color:white; border-radius:50px; font-size:1.3rem;"> <i class="fas fa-money-bill-wave" style="font-size:1.8rem;"></i> <span>Cash on Delivery Available</span> </div> |
Example 5: Currency & Wallet Section (fintech app style)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div style="display:flex; justify-content:center; gap:50px; flex-wrap:wrap; margin:50px 0; font-size:5rem;"> <div style="text-align:center;"> <i class="fas fa-wallet" style="color:#673ab7;"></i> <p style="font-size:1.3rem; margin-top:10px;">Digital Wallet</p> </div> <div style="text-align:center;"> <i class="fas fa-credit-card" style="color:#2196f3;"></i> <p style="font-size:1.3rem; margin-top:10px;">Card Payment</p> </div> <div style="text-align:center;"> <i class="fas fa-qrcode" style="color:#4caf50;"></i> <p style="font-size:1.3rem; margin-top:10px;">UPI / QR</p> </div> </div> |
4. Teacher Summary – Quick Recap
Font Awesome 5 Payment Icons = W3Schools’ page listing free payment & currency icons like:
- credit-card 💳
- wallet 👛
- money-bill 💵
- money-bill-wave 💵
- money-check 💵✓
- hand-holding-usd 💰
- piggy-bank 🐷
- barcode 📋
- qrcode ▦
- receipt 📄
- file-invoice-dollar 📄₹
Very useful for:
- E-commerce checkout / pricing pages
- Payment method selectors
- Invoice / receipt sections
- “Pay Now” / “Subscribe” buttons
- Fintech / banking / wallet apps
- Donation / crowdfunding flows
Got it now? Want me to:
- Build a full “Pricing Plans” or “Checkout Flow” demo page with payment icons?
- Show how they look in a modern UPI / wallet payment screen?
- Compare FA5 vs FA6/7 payment icons (way more wallet, receipt, QR variants in newer versions)?
- Or move to the next category in the series?
Just tell your teacher — we’re handling payments today! 💳💰🛒🚀
