Chapter 74: Icons Travel
Travel Icons
This is — as always — the same type of reference page we’ve been studying: it’s the dedicated cheat-sheet on W3Schools listing all free Font Awesome 5 icons that belong to the Travel category.
URL (still working perfectly in February 2026): https://www.w3schools.com/icons/fontawesome5_icons_travel.asp
It’s usually placed after “Tabletop Gaming” or “Toggle” and before “Users” or “Vehicles” in their sidebar. The page opens with the short intro:
Travel Icons The table below shows the Free Font Awesome 5 Travel icons:
…followed by the familiar table with icon previews, class names, unicode values, and “Try it” buttons.
1. What is the “Icons Travel” page?
This page lists only the icons that represent travel, transportation, tourism, vacation, navigation, luggage, hotels, flights, maps, suitcases, passports, compasses, and everything related to moving from place to place.
These icons are extremely common on:
- Travel agency / tour operator websites
- Hotel / resort / Airbnb-style booking pages
- “Book Your Trip” or “Plan Vacation” landing pages
- Flight / train / bus ticket booking apps
- “Get Directions” / “Find Nearby” buttons
- Travel blog / vlog / influencer sites
- Luggage / travel gear e-commerce stores
- “Coming Soon – New Destination” announcements
- Airport / station information boards
- Passport & visa application portals
In Font Awesome 5 free, the Travel category is medium-sized and very practical — around 20–30 icons (mostly solid fas style). Font Awesome 6 and 7 later added many more (suitcase-rolling, plane-departure/arrival, train-subway, bus, car-side, passport, globe-stand, location-arrow, road-barrier), but FA5 free already has the most essential travel symbols that are still powering almost every travel website, booking app, and tourism page in 2026.
2. Main Free Travel Icons in Font Awesome 5 (From the W3Schools Page)
Here are the most important and frequently used free ones you’ll see in the table (solid fas unless noted):
| Icon name | Class name | Looks like | Most common meaning / usage |
|---|---|---|---|
| plane | fas fa-plane | ✈️ Airplane | Flights, air travel (the #1 travel icon) |
| plane-departure | fas fa-plane-departure | ✈️ Taking off | Departure / leaving airport |
| plane-arrival | fas fa-plane-arrival | ✈️ Landing | Arrival / coming back |
| suitcase | fas fa-suitcase | 🧳 Suitcase | Luggage, travel bag |
| suitcase-rolling | fas fa-suitcase-rolling | 🧳 Rolling suitcase | Wheeled luggage, easy travel |
| passport | Not in FA5 free | — | — (added in FA6) |
| map | fas fa-map | 🗺️ Folded map | Navigation, travel map |
| map-marked | fas fa-map-marked | 🗺️ Map with pin | Marked destination / location |
| map-marked-alt | fas fa-map-marked-alt | 🗺️ Alternative map pin | Same as above |
| map-marker-alt | fas fa-map-marker-alt | 📍 Modern pin | Current location / hotel / attraction |
| compass | fas fa-compass | 🧭 Compass | Direction, exploration, travel navigation |
| globe | fas fa-globe + variants | 🌍 Globe | Worldwide travel, international destinations |
| globe-americas | fas fa-globe-americas | 🌎 Americas globe | Travel to America |
| globe-asia | fas fa-globe-asia | 🌏 Asia globe | Travel to Asia |
| globe-europe | fas fa-globe-europe | 🌍 Europe globe | Travel to Europe |
| hotel | fas fa-hotel | 🏨 Hotel building | Accommodation, hotel booking |
| umbrella-beach | fas fa-umbrella-beach | 🏖️ Beach umbrella | Vacation, beach holiday |
| bus | fas fa-bus | 🚌 Bus | Bus travel, public transport |
| train | fas fa-train | 🚆 Train | Rail travel, railways |
| car | fas fa-car | 🚗 Car | Road trip, self-drive travel |
| taxi | fas fa-taxi | 🚕 Taxi | Airport transfers, local transport |
| bicycle | fas fa-bicycle | 🚲 Bicycle | Cycling tour, eco-travel |
These are the core free Travel icons in FA5 — very clean and instantly understandable for any travel/tourism context.
3. Real Code Examples – How to Use Travel Icons
Example 1: Travel Agency / Tour Operator Hero Section
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div style="text-align:center; padding:80px 20px; background:linear-gradient(to right,#0288d1,#4fc3f7); color:white; border-radius:0 0 20px 20px;"> <i class="fas fa-plane-departure fa-8x" style="margin-bottom:30px;"></i> <h1 style="font-size:3.8rem;">Webliance Travel Adventures</h1> <p style="font-size:1.7rem; margin:25px 0;"> <i class="fas fa-umbrella-beach" style="margin:0 15px;"></i> Beach Getaways • <i class="fas fa-globe" style="margin:0 15px;"></i> Worldwide Tours • <i class="fas fa-suitcase-rolling" style="margin:0 15px;"></i> Hassle-Free Booking </p> <button style="background:#ffffff; color:#0288d1; padding:18px 40px; border:none; border-radius:50px; font-size:1.4rem; font-weight:bold; cursor:pointer;"> Plan Your Trip </button> </div> |
Example 2: Hotel / Destination Card
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div style="border:1px solid #bbdefb; padding:30px; max-width:400px; margin:40px auto; border-radius:12px; background:#e3f2fd; text-align:center;"> <i class="fas fa-hotel fa-6x" style="color:#673ab7; margin-bottom:20px;"></i> <h2>Goa Beach Resort</h2> <p style="font-size:1.4rem;"> <i class="fas fa-umbrella-beach" style="margin-right:8px; color:#2196f3;"></i> Beachfront • <i class="fas fa-swimmer" style="margin-right:8px; color:#4caf50;"></i> Pool • <i class="fas fa-plane-arrival" style="margin-right:8px; color:#f44336;"></i> Airport Pickup </p> <button style="background:#673ab7; color:white; padding:12px 24px; border:none; border-radius:50px;"> Book Now </button> </div> |
Example 3: “Get Directions” Button
|
0 1 2 3 4 5 6 7 8 9 |
<a href="https://maps.google.com/..." style="display:inline-flex; align-items:center; gap:12px; padding:14px 28px; background:#2196f3; color:white; text-decoration:none; border-radius:50px; font-size:1.2rem;"> <i class="fas fa-map-marker-alt" style="font-size:1.8rem;"></i> Get Directions to Airport </a> |
Example 4: Travel Checklist / Amenities List
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<ul style="list-style:none; padding:0; font-size:1.3rem; max-width:600px; margin:50px auto;"> <li style="margin:18px 0; display:flex; align-items:center; gap:15px;"> <i class="fas fa-suitcase-rolling" style="color:#ff9800; font-size:2.2rem;"></i> 20 kg Free Baggage </li> <li style="margin:18px 0; display:flex; align-items:center; gap:15px;"> <i class="fas fa-plane" style="color:#2196f3; font-size:2.2rem;"></i> Direct Flight </li> <li style="margin:18px 0; display:flex; align-items:center; gap:15px;"> <i class="fas fa-umbrella-beach" style="color:#4caf50; font-size:2.2rem;"></i> Beach Access Included </li> <li style="margin:18px 0; display:flex; align-items:center; gap:15px;"> <i class="fas fa-bus" style="color:#673ab7; font-size:2.2rem;"></i> Airport Transfer </li> </ul> |
4. Teacher Summary – Quick Recap
Font Awesome 5 Travel Icons = W3Schools’ page listing free travel/tourism icons like plane ✈️, plane-departure/arrival, suitcase 🧳, suitcase-rolling 🧳, map 🗺️, map-marker-alt 📍, compass 🧭, globe 🌍, hotel 🏨, umbrella-beach 🏖️, bus 🚌, train 🚆, car 🚗, taxi 🚕, etc.
Very useful for:
- Travel agencies / tour operators
- Hotel / resort / Airbnb booking pages
- Flight / train / bus ticket sites
- “Find Us” / “Get Directions” sections
- Vacation / holiday promotion pages
Got it now? Want me to:
- Build a full “Travel Agency” or “Vacation Booking” landing page demo with these icons?
- Show how they look in a modern hotel / flight search UI?
- Compare FA5 vs FA6/7 travel icons (way more suitcase, plane variants & vacation icons in newer versions)?
- Or move to the next category like “Icons Status” or “Icons Toggle”?
Just tell your teacher — we’re packing our bags today! ✈️🧳🏖️📍🚀
