Chapter 31: Icons Emoji
1. What is the “Icons Emoji” Page?
This page lists only the icons that represent emotions, facial expressions, reactions, smileys, and emoji-style faces — basically the “feeling” icons you see everywhere in comments, chat apps, social media, feedback forms, ratings, and fun UIs.
These icons are perfect for:
- Comment sections / like/dislike reactions
- Feedback / rating systems (happy, neutral, sad faces)
- Chat apps or messaging UIs
- Survey / poll smiley faces
- “How was your experience?” forms
- Fun blog post reactions or emoji-only buttons
- User mood indicators in dashboards
- Notification badges with emotion
- Kids’ apps, games, or social features
In Font Awesome 5 free, the Emoji category is small but extremely popular (only about 8–12 icons, mostly regular far style for outline, some solid fas). Font Awesome 5 kept emoji icons very minimal on purpose (they’re not trying to compete with actual emoji fonts like Twemoji or Noto Color Emoji). Newer versions (FA6/7) added many more (laugh-beam, angry, dizzy, heart-crack, etc.), but FA5 free has the classic core smileys that are still used on millions of sites in 2026.
2. Main Free Emoji Icons in Font Awesome 5 (From the W3Schools Page)
Here are the key free ones you’ll see in the table (mostly regular far style for light/outline look — solid fas versions exist for some):
- Smile (happy smiling face) <i class=”far fa-smile”></i> / <i class=”fas fa-smile”></i>
- Smile Beam (very happy / beaming smile with eyes closed) <i class=”far fa-smile-beam”></i> / <i class=”fas fa-smile-beam”></i>
- Grin (wide grin with teeth) <i class=”far fa-grin”></i> / <i class=”fas fa-grin”></i>
- Grin Stars (grinning face with star eyes – excited / amazed) <i class=”far fa-grin-stars”></i> / <i class=”fas fa-grin-stars”></i>
- Meh (neutral / meh face) <i class=”far fa-meh”></i> / <i class=”fas fa-meh”></i>
- Frown (sad / frowning face) <i class=”far fa-frown”></i> / <i class=”fas fa-frown”></i>
- Sad Tear (sad face with tear) <i class=”far fa-sad-tear”></i> / <i class=”fas fa-sad-tear”></i>
- Angry (angry / mad face) <i class=”far fa-angry”></i> / <i class=”fas fa-angry”></i>
- Dizzy (dizzy face with stars around head) <i class=”far fa-dizzy”></i> / <i class=”fas fa-dizzy”></i>
- Surprise (surprised / shocked face with open mouth) <i class=”far fa-surprise”></i> / <i class=”fas fa-surprise”></i>
- Laugh (laughing face) <i class=”far fa-laugh”></i> / <i class=”fas fa-laugh”></i>
- Laugh Beam (laughing with tears of joy) <i class=”far fa-laugh-beam”></i> / <i class=”fas fa-laugh-beam”></i>
These are the main free Emoji icons in FA5 — very clean, simple line style (regular) or filled (solid), no color — they look great in any theme.
3. Real Code Examples – How to Use Emoji Icons
Example 1: Feedback / Rating Smiley Faces (very common)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div style="text-align: center; padding: 30px; font-size: 4rem;"> <i class="far fa-smile-beam" style="color: #28a745; margin: 0 20px;" title="Very Happy"></i> <i class="far fa-smile" style="color: #4caf50; margin: 0 20px;" title="Happy"></i> <i class="far fa-meh" style="color: #ffc107; margin: 0 20px;" title="Neutral"></i> <i class="far fa-frown" style="color: #fd7e14; margin: 0 20px;" title="Unhappy"></i> <i class="far fa-angry" style="color: #dc3545; margin: 0 20px;" title="Very Unhappy"></i> </div> <p style="text-align: center; font-size: 1.3rem;">How was your experience?</p> |
Example 2: Comment Reaction Buttons (social media 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: 25px; font-size: 2.5rem; margin: 40px 0;"> <button style="background: none; border: none; cursor: pointer;"> <i class="far fa-laugh-beam" style="color: #ff9800;"></i> Haha </button> <button style="background: none; border: none; cursor: pointer;"> <i class="far fa-surprise" style="color: #673ab7;"></i> Wow </button> <button style="background: none; border: none; cursor: pointer;"> <i class="far fa-sad-tear" style="color: #2196f3;"></i> Sad </button> <button style="background: none; border: none; cursor: pointer;"> <i class="far fa-angry" style="color: #f44336;"></i> Angry </button> </div> |
Example 3: “Great Job!” Success Message
|
0 1 2 3 4 5 6 7 8 9 10 |
<div style="background: #e8f5e9; padding: 30px; border-radius: 12px; text-align: center; margin: 30px 0;"> <i class="fas fa-grin-stars" style="font-size: 6rem; color: #4caf50; margin-bottom: 15px;"></i> <h2>Great Job!</h2> <p style="font-size: 1.4rem;">You're doing amazing — keep it up! 🌟</p> </div> |
Example 4: Mood Tracker / Daily Check-in
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<div style="display: flex; justify-content: space-around; font-size: 5rem; margin: 50px 0;"> <i class="far fa-smile-beam" style="color: #28a745;" title="Awesome day"></i> <i class="far fa-meh" style="color: #ffc107;" title="Okay day"></i> <i class="far fa-frown" style="color: #ff9800;" title="Tough day"></i> </div> <p style="text-align: center; font-size: 1.3rem;">How are you feeling today?</p> |
4. Teacher Tips for Emoji Icons
- Colors — Match emotion: green (#28a745) for happy/smile, yellow/orange (#ffc107 / #ff9800) for neutral/meh, red (#f44336 / #dc3545) for angry/sad.
- Regular vs Solid — Use far (outline) for light/minimal look, fas (filled) for stronger emphasis or dark themes.
- Size — Big sizes (fa-4x to fa-6x) look fun and engaging in feedback/rating sections.
- Combine categories — Pair with Chat (comment-dots for reactions), Date & Time (clock for mood log), or Charity (heart for love).
- Accessibility — Add aria-label=”Very happy emoji” or title=”Happy”; never rely on emoji alone for meaning.
- Upgrade note — In Font Awesome 6/7, Emoji category is much larger (laugh-squint, face-grin-wide, face-rolling-eyes, heart-crush, etc.) — upgrade if you want richer emoji reactions.
Summary – Quick Recap
Font Awesome 5 Emoji Icons = W3Schools’ page listing free emoji/face icons like smile 😊, grin 😁, laugh 😂, meh 😐, frown ☹️, angry 😠, sad-tear 😢, surprise 😲, dizzy 😵, etc. Perfect for reactions, ratings, feedback forms, chat emotions, mood trackers, fun buttons, or any “feeling/expression” feature.
Got it now? Want me to:
- Build a full “Feedback / Reaction” demo page with these emoji icons?
- Show how they look in a modern comment section?
- Compare FA5 vs newer versions (way more emoji faces)?
- Or next category like “Icons Energy”?
Just tell teacher — we’re feeling happy today! 😄😁🚀
