Chapter 26: Icons Currency
1. What is the “Icons Currency” Page?
It’s a focused reference list showing only the free icons from Font Awesome 5 that represent money, currencies, bills, coins, exchange, payment symbols, and financial signs.
These icons are super useful for:
- E-commerce sites (pricing, checkout, payment methods)
- Finance apps / banking dashboards
- Blog posts about economy, crypto, forex, or personal finance
- “Pricing Plans” or “Subscription” sections
- Donation / charity pages (pair with Charity icons)
- Currency converter tools
- Invoice / receipt templates
- “Buy Now” or “Add to Cart” buttons
In Font Awesome 5 free, the Currency category includes both generic money symbols (dollar, euro, pound, rupee, yen) and specific bill/coin icons (money-bill, money-check, etc.). It’s a medium-sized category in FA5 free (around 15–25 icons, mostly solid fas, some regular far). Newer versions (FA6/7) added more (like bitcoin-sign, rupee-sign variants, wallet), but FA5 free has the essentials that power most money-related UIs even today.
2. Main Free Currency Icons in Font Awesome 5 (From the W3Schools Page)
Here are the key free ones you’ll see in the table (solid fas unless noted; these are the most common classics from FA5 free Currency category):
- Dollar Sign (classic $ – US dollar) <i class=”fas fa-dollar-sign”></i>
- Euro Sign (€ – European euro) <i class=”fas fa-euro-sign”></i>
- Pound Sign (£ – British pound) <i class=”fas fa-pound-sign”></i>
- Rupee Sign (₹ – Indian rupee) <i class=”fas fa-rupee-sign”></i>
- Yen Sign (¥ – Japanese yen / Chinese yuan) <i class=”fas fa-yen-sign”></i>
- Lira Sign (₺ – Turkish lira) <i class=”fas fa-lira-sign”></i>
- Ruble Sign (₽ – Russian ruble) <i class=”fas fa-ruble-sign”></i>
- Shekel Sign (₪ – Israeli new shekel) <i class=”fas fa-shekel-sign”></i>
- Hryvnia Sign (₴ – Ukrainian hryvnia) <i class=”fas fa-hryvnia”></i>
- Won Sign (₩ – South Korean won) <i class=”fas fa-won-sign”></i>
- Money Bill (banknote / cash bill) <i class=”fas fa-money-bill”></i>
- Money Bill Alt (alternative bill style) <i class=”fas fa-money-bill-alt”></i> (regular style also available: far fa-money-bill-alt)
- Money Bill Wave (wavy bill – modern cash look) <i class=”fas fa-money-bill-wave”></i>
- Money Check (check / cheque with money) <i class=”fas fa-money-check”></i>
- Money Check Alt (alternative check style) <i class=”fas fa-money-check-alt”></i>
- Bitcoin (₿ – cryptocurrency bitcoin) <i class=”fab fa-bitcoin”></i> (brand style)
- Gg / Gg Circle (some alt currency symbols, like game currency) <i class=”fab fa-gg”></i> / <i class=”fab fa-gg-circle”></i>
These are the main free Currency icons (around 15–20 solid/regular/brand ones). The page focuses on global currencies + generic cash symbols.
3. Real Code Examples – How to Use Currency Icons
Example 1: Pricing Plan Card (very common on SaaS/finance sites)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!-- FA5 CDN in <head> --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <div style="border: 1px solid #ddd; padding: 30px; max-width: 350px; margin: 20px auto; border-radius: 12px; text-align: center; background: #f8f9fa;"> <i class="fas fa-rupee-sign" style="font-size: 5rem; color: #4caf50; margin-bottom: 15px;"></i> <h2>Pro Plan</h2> <p style="font-size: 2.5rem; font-weight: bold;"> <i class="fas fa-rupee-sign" style="font-size: 2rem;"></i> 999 / month </p> <button style="background: #4caf50; color: white; padding: 12px 24px; border: none; border-radius: 6px; font-size: 1.1rem;"> Subscribe Now </button> </div> |
Example 2: Currency Converter Snippet (finance app style)
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<div style="display: flex; align-items: center; gap: 15px; font-size: 2rem; justify-content: center; margin: 30px 0;"> <i class="fas fa-dollar-sign" style="color: #007bff;"></i> <span>1 USD = </span> <i class="fas fa-rupee-sign" style="color: #4caf50;"></i> <span>83.50 INR</span> </div> |
Example 3: Donation / Payment Button
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background: #ff5722; color: white; padding: 15px 30px; border: none; border-radius: 50px; font-size: 1.3rem; cursor: pointer;"> <i class="fas fa-money-bill-wave" style="margin-right: 10px; font-size: 1.8rem;"></i> Donate ₹500 </button> |
Example 4: Multi-Currency Support List
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<ul style="list-style: none; padding: 0; font-size: 1.3rem;"> <li><i class="fas fa-dollar-sign" style="color: #007bff; margin-right: 10px;"></i> US Dollar (USD)</li> <li><i class="fas fa-euro-sign" style="color: #e91e63; margin-right: 10px;"></i> Euro (EUR)</li> <li><i class="fas fa-pound-sign" style="color: #673ab7; margin-right: 10px;"></i> British Pound (GBP)</li> <li><i class="fas fa-rupee-sign" style="color: #4caf50; margin-right: 10px;"></i> Indian Rupee (INR)</li> <li><i class="fab fa-bitcoin" style="color: #f7931a; margin-right: 10px;"></i> Bitcoin (BTC)</li> </ul> |
Example 5: “Cash on Delivery” Badge
|
0 1 2 3 4 5 6 7 8 9 |
<div style="background: #e8f5e9; padding: 15px; border-radius: 8px; text-align: center; font-size: 1.4rem;"> <i class="fas fa-money-bill" style="color: #4caf50; font-size: 2.5rem; margin-right: 10px;"></i> Cash on Delivery Available! </div> |
4. Teacher Tips for Currency Icons
- Colors — Greens (#4caf50) for money/success, blues (#007bff) for dollar/trust, oranges (#ff5722) for rupee/energy, golds (#f7931a) for bitcoin/crypto.
- Size — Big sizes (fa-5x, fa-6x) look great on pricing cards; use fa-2x inside text for inline money symbols.
- Combine categories — Pair with Payment & Shopping (credit-card, shopping-cart), Finance (chart-line), or Charity (hand-holding-usd) for full money flow.
- Accessibility — Add aria-label=”Price in Indian Rupees” for screen readers; hide decorative ones with aria-hidden=”true”.
- Upgrade note — In Font Awesome 6/7, Currency has more free icons (rupee-sign, sterling-sign, coin, wallet) — upgrade for richer finance/crypto designs.
Summary – Quick Recap
Icons Currency = W3Schools’ page listing Font Awesome 5 free money/currency icons like dollar-sign 💵, rupee-sign ₹, euro-sign €, pound-sign £, money-bill 💵, bitcoin ₿, etc. Ideal for pricing tables, e-commerce, finance apps, donation buttons, currency converters, or any “money/payment” theme.
Clear now? Want me to:
- Build a full “Pricing Plans” or “Checkout” demo page with these icons?
- Show how Currency icons look in a modern finance dashboard?
- Compare FA5 vs newer versions (more global currencies)?
- Or next category like “Icons Date & Time”?
Just raise your hand — teacher is counting the rupees! 💰₹💵🚀
