Chapter 82: Icons Brand
1. What are “Brand Icons” in Font Awesome?
Brand icons are not regular icons like a heart, a house, a user, or a truck.
They are official logos of companies, social networks, apps, payment systems, programming languages, operating systems, etc.
Examples everyone knows:
- Twitter (old bird, not the X yet in FA5)
- YouTube
- GitHub
- Telegram
- Discord
- Slack
- Bootstrap
- React
- Node.js
- Docker
- Visa / Mastercard / PayPal / Apple Pay
- Google / Android
These icons are protected trademarks in real life, so Font Awesome puts them in a separate family called Brands (short name: fab).
2. Very important rule (write this down!)
In Font Awesome 5 (and also in 6 & 7):
- Normal icons use prefix fas (solid), far (regular/outline)
- Brand / social / company logos use prefix fab
You must include the brands stylesheet separately if you want to use them.
Correct way (2026 CDN – still works):
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<!-- Main icons (fas + far) --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <!-- OR (better for performance – only load what you need) --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/fontawesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/brands.min.css"> |
3. The most important free brand icons in Font Awesome 5 (2026 reality)
Here are the ones almost everyone uses (all fab prefix):
| Platform / Service | Class name | Looks like | Notes / common color (2026) |
|---|---|---|---|
| facebook-f | fab fa-facebook-f | f | Modern square-ish f – most used Facebook icon |
| facebook-square | fab fa-facebook-square | □F | Classic square button |
| fab fa-twitter | bird | Old Twitter bird (pre-X rebrand) | |
| twitter-square | fab fa-twitter-square | □bird | Square Twitter button |
| fab fa-instagram | camera | Instagram logo | |
| linkedin-in | fab fa-linkedin-in | in | Modern LinkedIn (circle in) |
| fab fa-linkedin | in | Older LinkedIn square | |
| youtube | fab fa-youtube | ▶️ | YouTube play triangle |
| youtube-square | fab fa-youtube-square | □▶️ | Square YouTube |
| 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 logo |
| telegram-plane | fab fa-telegram-plane | ✈️ plane | Same as above (alias) |
| github | fab fa-github | octocat | GitHub logo |
| github-square | fab fa-github-square | □octocat | Square GitHub button |
| discord | fab fa-discord | game controller | Discord logo |
| slack | fab fa-slack | # | Slack logo |
| fab fa-reddit | alien | Reddit alien | |
| fab fa-pinterest | P | Pinterest P | |
| snapchat-ghost | fab fa-snapchat-ghost | 👻 ghost | Snapchat ghost |
Very important 2026 note: Font Awesome 5 does not have:
- the new X logo (only old Twitter bird)
- TikTok
- Threads
- Bluesky
- Mastodon
- new Discord logo
- PayPal square
- Apple Pay / Google Pay modern icons
All these were added in Font Awesome 6+.
3. Real code examples – how people actually use Brand icons
Example 1: Classic social footer (most common usage)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div style="text-align:center; padding:50px 20px; background:#1a1a1a; color:#ccc;"> <div style="font-size:2.8rem; display:flex; justify-content:center; gap:40px; margin-bottom:20px;"> <a href="#" style="color:#4267B2;"><i class="fab fa-facebook-f"></i></a> <a href="#" style="color:#1DA1F2;"><i class="fab fa-twitter"></i></a> <a href="#" style="color:#E1306C;"><i class="fab fa-instagram"></i></a> <a href="#" style="color:#0077B5;"><i class="fab fa-linkedin-in"></i></a> <a href="#" style="color:#FF0000;"><i class="fab fa-youtube"></i></a> <a href="#" style="color:#25D366;"><i class="fab fa-whatsapp"></i></a> </div> <p style="margin-top:15px; font-size:1.1rem;">Follow us for daily tips & updates</p> </div> |
Example 2: “Share on social media” buttons
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div style="text-align:center; margin:60px 0;"> <p style="font-size:1.4rem; margin-bottom:20px;">Share this article:</p> <div style="display:flex; justify-content:center; gap:25px; font-size:2.8rem;"> <a href="#" style="color:#4267B2;"><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:#E1306C;"><i class="fab fa-instagram"></i></a> <a href="#" style="color:#25D366;"><i class="fab fa-whatsapp"></i></a> <a href="#" style="color:#0077B5;"><i class="fab fa-linkedin"></i></a> </div> </div> |
Example 3: Developer portfolio – GitHub + LinkedIn
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div style="text-align:center; margin:50px 0;"> <a href="https://github.com/yourusername" style="margin:0 30px; font-size:4rem; color:#333;"> <i class="fab fa-github"></i> </a> <a href="https://linkedin.com/in/yourusername" style="margin:0 30px; font-size:4rem; color:#0077b5;"> <i class="fab fa-linkedin"></i> </a> </div> |
4. Quick Teacher Summary – FA5 Brand / Social Icons (2026 reality)
- Prefix → always fab (not fas or far)
- How many free brand icons? → Around 50–60 in FA5 (very strong for 2018–2022 era)
- Does it have the new X/Twitter logo (X)? → No — only old bird
- Does it have TikTok, Threads, Bluesky, Mastodon? → No — added in FA6+
- Still used in 2026? → Yes — millions of old WordPress themes, company sites, portfolios
- Should new projects use FA5 brands? → No — upgrade to FA6/7 for modern logos
Got it now? Want me to:
- Build a full modern-looking social footer with brand colors using FA5 icons?
- Show you the exact differences between FA5 Twitter bird vs FA6/7 X logo?
- Give you a ready-to-use social share button pack with hover effects?
- Or move to the next category in our FA5 series?
Just raise your hand — teacher is ready! 📱🐦📸🔗🚀
