Chapter 2: Icons Reference

What exactly is “Icons Reference”?

“Icons Reference” is basically the big phonebook / catalog / cheat-sheet of all available icons in a library.

• “Tutorial” teaches you how to use icons (include the library, write the code, change size/color/spin etc.)
• “Reference” shows you every single icon that exists — with its name, preview, HTML code snippet, and often a “Try it” button.

Think of it like:

• Tutorial = the cooking class where teacher shows you step-by-step how to make biryani
• Reference = the full menu card of every restaurant dish (name, picture, ingredients code)

In almost all beginner web development learning (especially on W3Schools, freeCodeCamp mentions, YouTube playlists), when you see:

Icons HOME → main starting page of icons lessons Icons Reference → the complete searchable list of every icon

The most famous one is on W3Schools: https://www.w3schools.com/icons/icons_reference.asp (It’s titled “Icons from Font Awesome, Bootstrap and Google”)

Why do we need an “Icons Reference” page?

Because icon libraries have hundreds or thousands of icons:

• Font Awesome 5/6/7 → ~1,500–2,000+ free icons
• Bootstrap Icons → ~2,000+
• Google Material Symbols → ~2,500+
• Heroicons, Lucide, Feather etc. → 500–1,000 each

You can’t remember all names! So the Reference page lets you:

• Search by keyword (“home”, “trash”, “heart”, “user”)
• Browse by category (Animals, Arrows, Food, Medical, Social, Weather…)
• Copy-paste the exact code
• See how the icon actually looks
• Test different sizes/colors right there

Real-life look of W3Schools Icons Reference (2026 style)

When you open https://www.w3schools.com/icons/icons_reference.asp, you see:

1. Dropdown or tabs to choose library:
   • Font Awesome 5 (or latest version)
   • Font Awesome 4 (older)
   • Bootstrap Icons
   • Google Icons
2. Search box → type “car” and it filters instantly
3. Huge table like this (example snippet):

4. Categories sidebar (especially in Font Awesome section):
   • Accessibility
   • Alert
   • Animals
   • Arrows
   • Automotive
   • Brands (Facebook, Twitter/X, Instagram…)
   • Buildings
   • Business
   • Food
   • Medical
   • Weather
   • … and 50+ more!

Practical Examples – How real developers use the Reference

Example 1: You want a shopping cart icon

1. Go to Icons Reference
2. Select Font Awesome
3. Search “cart” or go to “Shopping” category
4. Find → <i class=”fas fa-cart-shopping”></i> (or fa-shopping-cart in older versions)
5. Copy → paste in your code:

Example 2: You need notification bell

Search “bell” → <i class=”fas fa-bell”></i> Or fancier: <i class=”fas fa-bell fa-shake” style=”color: #ff4444;”></i> (shaking red bell!)

Example 3: Social media icons for footer

Go to “Brands” section → copy:

Quick Comparison – Where to find good References (2026)

Summary in Teacher Voice

• Icons Tutorial → “How to cook” (learn setup & basic usage)
• Icons Home → front page / starting lesson
• Icons Reference → “Full menu” (searchable list of every single icon + code)

Whenever you’re building something and think “Which icon should I use for login? for download? for settings?”, first open the Reference page, search, pick, copy-paste.

Got it now? Want me to:

• Show you how to search for a specific icon right now (tell me which one!)
• Give full code for a beautiful icon navbar using Reference?
• Explain differences in references between Font Awesome vs Bootstrap vs Google?

Just raise your hand — teacher is here! 🏠🔍🚀