Chapter 41: Icons Hand
1. What is the “Icons Hand” / “Icons Hands” Page?
This page lists only the icons that represent hands, fingers, gestures, pointing, holding, helping, thumbs up/down, victory sign, rock-paper-scissors, and hand actions.
These icons are extremely useful for:
- Like / dislike / thumbs-up voting systems
- “Help” / “Support” / “Volunteer” sections (pair with Charity)
- Gesture-based UI (pointing, swipe, pinch)
- Rock-paper-scissors games
- Accessibility features (hand signs)
- “Click here”, “Swipe”, “Hold” instructions
- Reaction buttons (thumbs-up, peace sign)
- Medical / physiotherapy pages (hand therapy)
- “High five” or “handshake” moments
In Font Awesome 5 free, the Hand 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, hand-point-up variants), but FA5 free already has the most commonly used hand gestures that power social media reactions, voting systems, and UI instructions even in 2026.
2. Main Free Hand Icons in Font Awesome 5 (From the W3Schools Page)
Here are the most important free ones you’ll see in the table (solid fas unless noted):
- Hand Point Right 👉 <i class=”fas fa-hand-point-right”></i>
- Hand Point Left 👈 <i class=”fas fa-hand-point-left”></i>
- Hand Point Up 👆 <i class=”fas fa-hand-point-up”></i>
- Hand Point Down 👇 <i class=”fas fa-hand-point-down”></i>
- Hand Rock 🤘 (rock on / devil horns) <i class=”fas fa-hand-rock”></i>
- Hand Paper ✋ (paper in rock-paper-scissors) <i class=”fas fa-hand-paper”></i>
- Hand Scissors ✌️ (scissors in rock-paper-scissors) <i class=”fas fa-hand-scissors”></i>
- Thumbs Up 👍 <i class=”fas fa-thumbs-up”></i> (regular: far fa-thumbs-up)
- Thumbs Down 👎 <i class=”fas fa-thumbs-down”></i> (regular: far fa-thumbs-down)
- Hand Holding Heart 🤝❤️ <i class=”fas fa-hand-holding-heart”></i>
- Hand Holding USD 💰 <i class=”fas fa-hand-holding-usd”></i>
- Hands Helping 🤝 (two hands helping each other) <i class=”fas fa-hands-helping”></i>
- Handshake 🤝 <i class=”fas fa-handshake”></i>
- Praying Hands 🙏 <i class=”fas fa-pray”></i> or <i class=”fas fa-praying-hands”></i>
- Raised Hand ✋ (raised hand / stop) <i class=”fas fa-hand-paper”></i> (same as paper)
- Victory / Peace ✌️ <i class=”fas fa-peace”></i> or use scissors hand
These are the core free Hand icons in FA5 — very versatile for gestures, reactions, and helping themes.
3. Real Code Examples – How to Use Hand Icons
Example 1: Like / Dislike Reaction Buttons (very common)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div style="display: flex; justify-content: center; gap: 40px; font-size: 4rem; margin: 50px 0;"> <button style="background: none; border: none; cursor: pointer;"> <i class="far fa-thumbs-up" style="color: #2196f3;"></i> Like </button> <button style="background: none; border: none; cursor: pointer;"> <i class="far fa-thumbs-down" style="color: #f44336;"></i> Dislike </button> </div> |
Example 2: “Help / Support” Section
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div style="text-align: center; padding: 50px; background: #e8f5e9; border-radius: 12px;"> <i class="fas fa-hands-helping" style="font-size: 7rem; color: #4caf50; margin-bottom: 20px;"></i> <h1>We’re Here to Help</h1> <p style="font-size: 1.5rem;"> <i class="fas fa-hand-holding-heart" style="color: #e91e63; margin-right: 10px;"></i> Volunteer • <i class="fas fa-handshake" style="color: #673ab7; margin-right: 10px;"></i> Partner with Us </p> </div> |
Example 3: Rock-Paper-Scissors Game Button
|
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: 60px; font-size: 6rem; margin: 50px 0;"> <button style="background: none; border: none; cursor: pointer;"> <i class="fas fa-hand-rock"></i> <p style="font-size: 1.4rem; margin-top: 10px;">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: 10px;">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: 10px;">Scissors</p> </button> </div> |
Example 4: “Point Here” Instruction
|
0 1 2 3 4 5 6 7 8 9 |
<div style="text-align: center; font-size: 5rem; margin: 40px 0; color: #2196f3;"> <i class="fas fa-hand-point-down"></i> <p style="font-size: 1.6rem; margin-top: 15px;">Click below to start</p> </div> |
Example 5: “Victory” / “Winner” 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.4rem;"> <i class="fas fa-hand-rock"></i> <span>Rock on!</span> </div> |
4. Teacher Summary – Quick Recap
Font Awesome 5 Hand / Hands Icons = W3Schools’ page listing free hand gesture icons like hand-point-right/left/up/down 👉👈👆👇, thumbs-up/down 👍👎, hand-rock ✊, hand-paper ✋, hand-scissors ✌️, hands-helping 🤝, handshake 🤝, hand-holding-heart ❤️, pray 🙏, etc.
Very useful for:
- Reactions (like/dislike)
- Gestures (point, rock-paper-scissors)
- Help/support/charity themes
- UI instructions (click here, swipe)
Got it now? Want me to:
- Build a full “Rock-Paper-Scissors” mini-game demo with these icons?
- Show a modern reaction bar (thumbs-up, heart, laugh) using FA5 hands?
- Compare FA5 vs FA6/7 hand icons (way more gestures in newer versions)?
- Or move to the next category like “Icons Health”?
Just tell your teacher — we’re giving high-fives today! ✋👍🤝🚀
