Chapter 89: Icons Hand
1. What is the “Icons Hand” / “Icons Hands” page?
This page lists only the icons that represent hands, fingers, gestures, pointing, holding, thumbs up/down, victory sign, rock-paper-scissors, helping hands, handshake, praying hands, and various hand actions.
These icons are extremely useful for:
- Like / dislike / thumbs-up voting systems
- “Help” / “Support” / “Volunteer” sections (especially with Charity category)
- Gesture-based UI (pointing, swipe, pinch, rock-paper-scissors)
- Reaction buttons (thumbs up, peace sign, raised hand)
- “Click here”, “Swipe”, “Hold” instructions
- Medical / physiotherapy pages (hand therapy, crutch)
- “High five” or “handshake” moments
- Accessibility features (hand signs, sign language vibe)
In Font Awesome 5 free, the Hand / Hands category is medium-sized and very practical — around 20–25 icons (mostly solid fas style, some regular far). Newer versions (FA6/7) added many more (hand-middle-finger, hand-scissors, hand-lizard, hand-spock, hand-peace variants, hand-wash, hand-holding-medical), but FA5 free already has the most commonly used hand gestures that power social media reactions, voting systems, and UI instructions even today.
2. Main Free Hand Icons in Font Awesome 5 (From the W3Schools Page)
Here are the actual icons you will find in the table (solid fas unless noted):
| Icon Preview | Class Name | Unicode | Description / Most common use |
|---|---|---|---|
| 👉 | fas fa-hand-point-right | | Point right – “click here”, “go to” |
| 👈 | fas fa-hand-point-left | | Point left |
| 👆 | fas fa-hand-point-up | | Point up – scroll to top, attention |
| 👇 | fas fa-hand-point-down | | Point down – scroll down, “see below” |
| ✋ | fas fa-hand-paper | | Paper (rock-paper-scissors), stop / raise hand |
| ✌️ | fas fa-hand-peace | | Peace / victory sign (scissors in RPS) |
| 🤘 | fas fa-hand-rock | | Rock (rock-paper-scissors), rock on / devil horns |
| ✊ | fas fa-hand-fist | | Raised fist (protest, power) – added late in FA5 |
| 👍 | fas fa-thumbs-up | | Thumbs up / like (regular: far fa-thumbs-up) |
| 👎 | fas fa-thumbs-down | | Thumbs down / dislike (regular: far fa-thumbs-down) |
| 🤝 | fas fa-handshake | | Handshake – agreement, partnership |
| 🤝 | fas fa-hands-helping | | Hands helping / volunteer, charity support |
| 🙏 | fas fa-pray / fas fa-praying-hands | | Praying hands – prayer, gratitude, hope |
| ❤️ | fas fa-hand-holding-heart | | Hand holding heart – care, donation, love |
| 💰 | fas fa-hand-holding-usd | | Hand holding dollar – payment, receive money |
These are the core free hand icons in FA5 — very versatile for gestures, reactions, and helping themes.
3. Real Code Examples – How people actually use these icons
Example 1: Like / Dislike Reaction Buttons (most common use)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div style="display:flex; justify-content:center; gap:60px; font-size:4rem; margin:60px 0;"> <button style="background:none; border:none; cursor:pointer; color:#2196f3;"> <i class="far fa-thumbs-up"></i> Like </button> <button style="background:none; border:none; cursor:pointer; color:#f44336;"> <i class="far fa-thumbs-down"></i> Dislike </button> </div> |
Example 2: Rock-Paper-Scissors Game (fun & educational)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div style="display:flex; justify-content:center; gap:80px; font-size:7rem; margin:60px 0;"> <button style="background:none; border:none; cursor:pointer;"> <i class="fas fa-hand-rock"></i> <p style="font-size:1.4rem; margin-top:15px;">Rock</p> </button> <button style="background:none; border:none; cursor:pointer;"> <i class="fas fa-hand-paper"></i> <p style="font-size:1.4rem; margin-top:15px;">Paper</p> </button> <button style="background:none; border:none; cursor:pointer;"> <i class="fas fa-hand-scissors"></i> <p style="font-size:1.4rem; margin-top:15px;">Scissors</p> </button> </div> |
Example 3: “Help / Volunteer” Call-to-Action Section
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div style="text-align:center; padding:60px 20px; background:#e8f5e9; border-radius:12px;"> <i class="fas fa-hands-helping fa-7x" style="color:#4caf50; margin-bottom:25px;"></i> <h1>Become a Volunteer</h1> <p style="font-size:1.6rem; margin:20px 0;"> <i class="fas fa-hand-holding-heart" style="color:#e91e63; margin-right:10px;"></i> Help people • <i class="fas fa-handshake" style="color:#673ab7; margin-right:10px;"></i> Join our team </p> <button style="background:#4caf50; color:white; padding:16px 36px; border:none; border-radius:50px; font-size:1.3rem;"> Sign Up Now </button> </div> |
Example 4: “Point Here” / Instructional Arrow
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div style="text-align:center; font-size:6rem; color:#2196f3; margin:60px 0; animation:pulse 2s infinite;"> <i class="fas fa-hand-point-down"></i> <p style="font-size:1.6rem; margin-top:20px; color:#424242;">Click the button below to continue</p> </div> <style> @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } </style> |
4. Teacher Summary – Quick Facts (February 2026)
Font Awesome 5 Hand / Hands Icons = W3Schools’ page listing free hand gesture icons:
- Pointing: hand-point-right/left/up/down 👉👈👆👇
- Rock-paper-scissors: hand-rock ✊, hand-paper ✋, hand-scissors ✌️
- Reactions: thumbs-up 👍, thumbs-down 👎
- Helping: handshake 🤝, hands-helping 🤝, hand-holding-heart ❤️
- Others: pray 🙏, fist ✊, peace ✌️
Very useful for:
- Like/dislike / reaction buttons
- Gestures (point, rock-paper-scissors)
- Help / support / charity themes
- UI instructions (click here, swipe, hold)
Got it now? Want me to:
- Build a full “Rock-Paper-Scissors” mini-game or “Reaction Bar” demo with these icons?
- Show a modern “Help / Support” section using hands-helping + handshake?
- Compare FA5 vs FA6/7 hand icons (way more gestures & hand actions in newer versions)?
- Or move to the next category in the series?
Just tell your teacher — we’re giving high-fives today! ✋👍🤝🚀
