Chapter 50: Icons Maritime
Maritime Icons
Let me explain very clearly and honestly right from the beginning (teacher mode on):
Font Awesome 5 does NOT have an official “Maritime Icons” category.
There is also no “Maritime Icons” page on W3Schools for Font Awesome 5.
What usually happens is:
- People search for “Font Awesome 5 maritime icons” because they need icons for shipping, boats, ports, anchors, navigation at sea, lighthouse, compass, sailboat, cargo ship, etc. (especially for logistics, marine transport, yacht clubs, fishing, cruise lines, or nautical-themed websites).
- Google shows results from Font Awesome 6 or 7 (which do have a proper “Maritime” / “Transportation Water” category added around 2022–2023).
- Or they find old blog posts / CodePen demos that mix FA5 + FA6 icons.
- Or they land on the Font Awesome 6 Maritime page and think it’s FA5.
So today I’m going to give you the real, accurate answer for Font Awesome 5 (the version W3Schools still teaches in their FA5 sections in 2026).
1. Maritime Icons actually available in Font Awesome 5 Free
Font Awesome 5 has no dedicated “Maritime” or “Nautical” category.
You can only use general-purpose icons that people repurpose for maritime, shipping, boating, sailing, fishing, ports, and sea-related themes. Here are the ones most commonly used for maritime designs in FA5 free:
| Icon name | Code example | Looks like | Typical maritime / nautical use |
|---|---|---|---|
| fa-anchor | <i class=”fas fa-anchor”></i> | ⚓ Anchor | Main nautical / maritime icon (best one in FA5) |
| fa-ship | <i class=”fas fa-ship”></i> | ⛴️ Ship / ferry | Cargo ship, cruise ship, boat |
| fa-sailboat | Not in FA5 free | — | — (added in FA6) |
| fa-compass | <i class=”fas fa-compass”></i> | 🧭 Compass | Marine navigation / direction |
| fa-compass-drafting | <i class=”fas fa-compass-drafting”></i> | 🧭✏️ Drafting compass | Nautical charts / map making (overlap with Design) |
| fa-life-ring | <i class=”fas fa-life-ring”></i> | 🛟 Lifebuoy / life saver | Safety at sea / rescue |
| fa-lifebuoy | <i class=”fas fa-lifebuoy”></i> | 🛟 Lifebuoy (alias) | Same as life-ring |
| fa-map | <i class=”fas fa-map”></i> | 🗺️ Map | Sea charts / nautical maps |
| fa-map-marked-alt | <i class=”fas fa-map-marked-alt”></i> | 🗺️📍 Map with pin | Port / harbor location |
| fa-route | <i class=”fas fa-route”></i> | 🛣️ Route | Shipping route / sea lane |
| fa-globe | <i class=”fas fa-globe”></i> | 🌍 Globe | Worldwide shipping / maritime trade |
| fa-tachometer-alt | <i class=”fas fa-tachometer-alt”></i> | ⚙️ Speedometer | Boat / ship speed / engine RPM |
| fa-binoculars | <i class=”fas fa-binoculars”></i> | 🔭 Binoculars | Spotting from ship / lighthouse |
| fa-flag | <i class=”fas fa-flag”></i> | 🏳️ Flag | Nautical flags / signal flags |
Bottom line for FA5 free in 2026 The anchor is the single most important and recognizable maritime icon in Font Awesome 5. After that, you mainly have to repurpose ship, compass, life-ring, map, route, and globe.
There is no:
- sailboat ⛵
- lighthouse 🏮
- buoy / channel marker
- helm / steering wheel
- wave / ocean
- container ship
- crane (port crane)
- propeller
- yacht
- fishing rod / fish hook
All of those were added in Font Awesome 6 or are Pro-only in FA5.
2. What people usually mean when they ask for “FA5 Maritime Icons”
They are almost always thinking about Font Awesome 6 or 7 (released starting 2022), which added a proper Maritime / Nautical / Transportation Water collection in the free version.
Here are the most popular maritime icons that exist in FA6/7 free (not in FA5):
- fa-sailboat ⛵
- fa-lighthouse 🏮
- fa-ferry ⛴️
- fa-ship ⛴️ (same as FA5 but more variants)
- fa-anchor (same)
- fa-life-ring (same)
- fa-compass (same)
- fa-location-arrow (navigation arrow)
- fa-wind (sea wind)
- fa-water (wave / ocean)
- fa-crane (port crane)
- fa-container (shipping container)
So when you see beautiful nautical / maritime icon sets online in 2025–2026 (with sailboats, lighthouses, buoys, propellers, etc.), they are 99% of the time using Font Awesome 6 or 7, not FA5.
3. Real code examples – what you can do with FA5
Example 1: Maritime / Shipping Company Homepage Hero (using only FA5 free icons)
|
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 bottom, #0d47a1, #1976d2); color: white; border-radius: 0 0 20px 20px;"> <i class="fas fa-anchor fa-8x" style="margin-bottom: 30px;"></i> <h1 style="font-size: 3.8rem;">Webliance Maritime Logistics</h1> <p style="font-size: 1.7rem; margin: 25px 0;"> <i class="fas fa-ship" style="margin: 0 15px;"></i> Global Shipping • <i class="fas fa-route" style="margin: 0 15px;"></i> Optimized Routes • <i class="fas fa-map-marked-alt" style="margin: 0 15px;"></i> Real-Time Tracking </p> <button style="background: #ffffff; color: #0d47a1; padding: 16px 40px; border: none; border-radius: 50px; font-size: 1.4rem; font-weight: bold; cursor: pointer;"> Get a Quote </button> </div> |
Example 2: Port / Harbor Features 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-anchor" style="color: #0d47a1; font-size: 2.2rem;"></i> Safe Anchorage & Mooring </li> <li style="margin: 18px 0; display: flex; align-items: center; gap: 15px;"> <i class="fas fa-ship" style="color: #2196f3; font-size: 2.2rem;"></i> Deep Water Berths for Large Vessels </li> <li style="margin: 18px 0; display: flex; align-items: center; gap: 15px;"> <i class="fas fa-route" style="color: #4caf50; font-size: 2.2rem;"></i> Efficient Shipping Lanes & Routes </li> <li style="margin: 18px 0; display: flex; align-items: center; gap: 15px;"> <i class="fas fa-map-marker-alt" style="color: #ff9800; font-size: 2.2rem;"></i> 24×7 GPS & Radar Navigation </li> </ul> |
Example 3: “Yacht Charter” or “Boat Rental” Button
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background: #0d47a1; color: white; padding: 18px 40px; border: none; border-radius: 50px; font-size: 1.4rem; cursor: pointer;"> <i class="fas fa-anchor" style="margin-right: 12px; font-size: 1.8rem;"></i> Charter a Yacht Today </button> |
4. Teacher Summary – Quick Truth Table (February 2026)
| Question | Answer in Font Awesome 5 Free | Answer in Font Awesome 6/7 Free |
|---|---|---|
| Is there an official “Maritime” category? | No | Yes |
| Is there an anchor icon? | Yes ⚓ | Yes |
| Is there a sailboat icon? | No | Yes ⛵ |
| Is there a lighthouse icon? | No | Yes 🏮 |
| Is there a buoy / channel marker? | No | Yes |
| How many maritime-specific icons? | 1 strong (anchor) + repurposed | 15–25+ |
| Can I make a decent maritime/shipping page with FA5? | Yes — but very limited | Much richer & easier |
Final Teacher Advice
If your project is using Font Awesome 5 and you really need proper maritime / nautical icons in 2026:
- Use fa-anchor as the main hero icon + repurpose fa-ship, fa-compass, fa-route, fa-map-marked-alt, fa-life-ring
- Or upgrade to Font Awesome 6 or 7 (free kit — just change the CDN link in <head>)
- Or switch to a library that has a rich nautical/shipping set: Bootstrap Icons, Tabler Icons, Heroicons, Lucide, Remix Icon, or Google Material Symbols
Got it now? Want me to:
- Show you the Font Awesome 6 Maritime icons with code examples?
- Build a “Maritime Logistics / Yacht Charter” landing page demo using only real FA5 icons?
- Give you the exact CDN link to switch to FA6 for free?
- Or move to the next category in the series?
Just raise your hand — teacher is ready! ⚓⛵🧭🚀
