Chapter 66: Icons Social
Social Icons (officially called Icons Social on the W3Schools site).
This is — as always — the classic W3Schools reference/cheat-sheet page that lists all free Font Awesome 5 icons belonging to the Social / Brand / Social Media category.
URL (still working perfectly in February 2026): https://www.w3schools.com/icons/fontawesome5_icons_social.asp
It’s usually placed near the end of the list (after Shapes / Spinners and before Status / Users), because the social/brand icons are treated a bit separately (they mostly use the fab prefix instead of fas).
The page opens with:
Social Icons The table below shows the Free Font Awesome 5 Social icons:
…followed by the familiar table with preview, class name, unicode, and “Try it” button.
1. What does the “Icons Social” page contain?
This category contains only the icons that represent:
- popular social media platforms
- communication / sharing services
- brand logos (mostly tech & social companies)
- messaging apps
- content sharing buttons
Important thing to understand:
In Font Awesome 5, social icons are almost all brand icons → they use the fab (Font Awesome Brands) prefix instead of fas (solid) or far (regular).
That means you need to include the brands style in your Font Awesome kit:
|
0 1 2 3 4 5 6 7 8 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <!-- or better: separate brands file if you want to save bandwidth --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/brands.min.css"> |
2. The actual free Social / Brand icons in Font Awesome 5
Here are the most important / most frequently used free ones you will find on the W3Schools page (all fab prefix):
| Platform / Service | Class name | Looks like | Notes / usage |
|---|---|---|---|
| facebook-f | fab fa-facebook-f | f | Official Facebook logo (square-ish f) |
| fab fa-facebook | F | Older Facebook square logo | |
| facebook-square | fab fa-facebook-square | □F | Square Facebook button |
| fab fa-twitter | bird | Classic Twitter bird (pre-X) | |
| twitter-square | fab fa-twitter-square | □bird | Square Twitter button |
| fab fa-instagram | camera | Instagram camera logo | |
| fab fa-linkedin | in | LinkedIn “in” logo | |
| linkedin-in | fab fa-linkedin-in | in | Modern LinkedIn in-circle |
| youtube | fab fa-youtube | ▶️ play button | YouTube play triangle |
| youtube-square | fab fa-youtube-square | □▶️ | Square YouTube button |
| fab fa-whatsapp | phone bubble | WhatsApp chat bubble | |
| whatsapp-square | fab fa-whatsapp-square | □phone | Square WhatsApp button |
| telegram | fab fa-telegram | paper plane | Telegram paper plane |
| telegram-plane | fab fa-telegram-plane | ✈️ plane | Flying paper plane (same as above) |
| github | fab fa-github | cat silhouette | GitHub octocat |
| github-square | fab fa-github-square | □cat | Square GitHub button |
| gitlab | fab fa-gitlab | fox | GitLab fox logo |
| discord | fab fa-discord | game controller | Discord gamepad logo |
| slack | fab fa-slack | #️⃣ hashtag-like | Slack logo |
| slack-hash | fab fa-slack-hash | #️⃣ | Slack hashtag variant |
| fab fa-pinterest | P | Pinterest P logo | |
| pinterest-square | fab fa-pinterest-square | □P | Square Pinterest button |
| fab fa-reddit | alien | Reddit alien | |
| reddit-square | fab fa-reddit-square | □alien | Square Reddit button |
| snapchat-ghost | fab fa-snapchat-ghost | 👻 ghost | Snapchat ghost logo |
| tiktok | Not in FA5 free | — | — (added in FA6) |
| x-twitter | Not in FA5 free | — | — (X/Twitter new logo added in FA6+) |
Important notes about FA5 social icons (2026 reality):
- All social icons use fab prefix (not fas / far)
- FA5 still uses the old Twitter bird (not the X logo)
- TikTok, Threads, new X/Twitter logo, Bluesky, Mastodon, Discord new logo, etc. do not exist in FA5 free
- Facebook, Twitter, Instagram, LinkedIn, YouTube, WhatsApp, GitHub are the strongest / most used ones in FA5
3. Real code examples – how people actually use them
Example 1: Social Media Footer Links (very common)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div style="text-align:center; padding:40px; background:#212121; color:white;"> <div style="font-size:3rem; display:flex; justify-content:center; gap:35px; margin-bottom:20px;"> <a href="#" style="color:#ffffff; text-decoration:none;"> <i class="fab fa-facebook-f"></i> </a> <a href="#" style="color:#ffffff; text-decoration:none;"> <i class="fab fa-twitter"></i> </a> <a href="#" style="color:#ffffff; text-decoration:none;"> <i class="fab fa-instagram"></i> </a> <a href="#" style="color:#ffffff; text-decoration:none;"> <i class="fab fa-linkedin-in"></i> </a> <a href="#" style="color:#ffffff; text-decoration:none;"> <i class="fab fa-youtube"></i> </a> <a href="#" style="color:#ffffff; text-decoration:none;"> <i class="fab fa-whatsapp"></i> </a> </div> <p style="margin-top:15px; font-size:1.1rem;">Follow us for updates & tips</p> </div> |
Example 2: “Share This Article” Buttons
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div style="text-align:center; margin:50px 0;"> <p style="font-size:1.4rem; margin-bottom:20px;">Share this post:</p> <div style="display:flex; justify-content:center; gap:25px; font-size:2.5rem;"> <a href="#" style="color:#3b5998;"><i class="fab fa-facebook-square"></i></a> <a href="#" style="color:#1da1f2;"><i class="fab fa-twitter-square"></i></a> <a href="#" style="color:#e4405f;"><i class="fab fa-instagram"></i></a> <a href="#" style="color:#0077b5;"><i class="fab fa-linkedin"></i></a> <a href="#" style="color:#25d366;"><i class="fab fa-whatsapp"></i></a> </div> </div> |
Example 3: GitHub + LinkedIn Profile Links (portfolio style)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div style="text-align:center; margin:40px 0;"> <a href="https://github.com/yourusername" style="margin:0 25px; font-size:3.5rem; color:#333;"> <i class="fab fa-github"></i> </a> <a href="https://linkedin.com/in/yourusername" style="margin:0 25px; font-size:3.5rem; color:#0077b5;"> <i class="fab fa-linkedin"></i> </a> </div> |
4. Quick Teacher Summary – FA5 Social Icons (2026 reality)
- How many real social/brand icons are there in FA5 free? → Around 40–50 usable brand icons (very strong category)
- Is there the new X/Twitter logo (X instead of bird)? → No — FA5 only has the classic Twitter bird
- Is there TikTok, Threads, Bluesky, Mastodon, Discord modern logo? → No — those were added in Font Awesome 6+
- Best alternatives in 2026 if you need newer social icons
- Font Awesome 6 or 7 (free version) → includes TikTok, Threads, new X logo, Bluesky, Mastodon, etc.
- Bootstrap Icons → good modern social set
- Tabler Icons → very complete social media collection
- Simple Icons (simpleicons.org) → 2000+ brand logos (separate library, but very popular for social)
So in short: Font Awesome 5 Social Icons = very strong category for 2018–2022 era social media → Facebook, old Twitter bird, Instagram, LinkedIn, YouTube, WhatsApp, GitHub, Telegram, Pinterest, Reddit, Snapchat, Discord (older logo), etc.
Got it now? Want me to:
- Build a full “Social Media Footer” or “Share Buttons” demo with FA5 icons?
- Show how they look when styled with brand colors?
- Compare FA5 vs FA6/7 social icons (newer platforms & updated logos)?
- Or move to the next category in the series?
Just raise your hand — teacher is ready! 📱🐦📸🔗🚀
