Chapter 85: Icons Directional
1. What is the “Icons Directional” page?
This page lists only the icons that represent directions, arrows, pointers, navigation, orientation, movement in a specific direction, and related concepts.
These icons are extremely useful for:
- Navigation menus / breadcrumbs
- “Next / Previous” buttons
- “Scroll to top/bottom” arrows
- Map directions / “Get Directions” buttons
- Pagination (previous/next page)
- “Sort by” / “Order” controls (up/down arrows)
- Carousel / slider controls (left/right arrows)
- “Back to top” floating buttons
- Stepper / wizard navigation
- “Move item” drag-and-drop handles
- “Expand / collapse” sections
In Font Awesome 5 free, the Directional category is one of the largest and most useful — around 50–60 icons (mostly solid fas style, very few regular far). Font Awesome 6 and 7 added even more (arrow-up-from-bracket, arrow-down-to-line, arrows-retweet, arrows-turn-to-dots), but FA5 free already has almost every directional arrow combination that most websites and apps still use in 2026.
2. Main Free Directional Icons in Font Awesome 5
Here are the most important groups and frequently used icons (solid fas unless noted):
Basic Arrows (most used)
- arrow-left / right / up / down fas fa-arrow-left ← fas fa-arrow-right → etc.
- angle-left / right / up / down fas fa-angle-left ‹ fas fa-angle-right › (thinner, sharper)
- chevron-left / right / up / down fas fa-chevron-left ‹ fas fa-chevron-right › (very common caret style)
- caret-left / right / up / down fas fa-caret-left ◀ fas fa-caret-right ▶ (filled triangle pointer)
Double / Long Arrows
- angle-double-left / right / up / down fas fa-angle-double-left « fas fa-angle-double-right »
- arrow-alt-circle-left / right / up / down fas fa-arrow-alt-circle-left ⭠ (circle with arrow inside)
Arrows in Boxes / Squares
- arrow-circle-left / right / up / down fas fa-arrow-circle-left ⭠ (circle with arrow)
- arrow-square-left / right / up / down Not in FA5 free (added in FA6)
Arrows for Sorting / Order
- sort fas fa-sort ↕ Sort (up-down)
- sort-up / sort-down fas fa-sort-up ↑ fas fa-sort-down ↓
- sort-amount-up / down fas fa-sort-amount-up ↑ fas fa-sort-amount-down ↓
- sort-numeric-up / down fas fa-sort-numeric-up 123↑ etc.
Arrows for Navigation / Movement
- arrow-up-from-bottom Not in FA5 free
- arrow-down-to-bottom Not in FA5 free
- arrows-alt fas fa-arrows-alt ↔ Expand / move (drag handle)
- expand / compress fas fa-expand / fas fa-compress Fullscreen toggles
Arrows for Long / Complex Movement
- long-arrow-alt-left / right / up / down fas fa-long-arrow-alt-left ←← (long arrow)
3. Real Code Examples – How Developers Actually Use Directional Icons
Example 1: Pagination / Next-Previous Buttons (very common)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div style="display:flex; justify-content:center; gap:20px; font-size:2rem; margin:50px 0;"> <button style="padding:12px 20px; background:#673ab7; color:white; border:none; border-radius:6px; cursor:pointer;"> <i class="fas fa-chevron-left" style="margin-right:8px;"></i> Previous </button> <span style="padding:12px 20px; background:#f8f9fa; border-radius:6px;">Page 3 of 12</span> <button style="padding:12px 20px; background:#673ab7; color:white; border:none; border-radius:6px; cursor:pointer;"> Next <i class="fas fa-chevron-right" style="margin-left:8px;"></i> </button> </div> |
Example 2: “Back to Top” Floating Button
|
0 1 2 3 4 5 6 7 8 |
<a href="#" style="position:fixed; bottom:30px; right:30px; background:#2196f3; color:white; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(33,150,243,0.3); text-decoration:none; font-size:2rem;"> <i class="fas fa-arrow-up"></i> </a> |
Example 3: Sort / Order Controls (table header style)
|
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 |
<table style="width:100%; border-collapse:collapse; margin:40px 0;"> <thead> <tr style="background:#f8f9fa;"> <th style="padding:15px; text-align:left;"> Name <i class="fas fa-sort" style="margin-left:8px; color:#757575;"></i> </th> <th style="padding:15px; text-align:left;"> Price <i class="fas fa-sort-amount-down" style="margin-left:8px; color:#2196f3;"></i> </th> <th style="padding:15px; text-align:left;"> Rating <i class="fas fa-sort-numeric-up" style="margin-left:8px; color:#4caf50;"></i> </th> </tr> </thead> <tbody> <!-- table rows here --> </tbody> </table> |
Example 4: “Expand / Collapse” Accordion Toggle
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<div style="max-width:600px; margin:50px auto; border:1px solid #ddd; border-radius:8px; overflow:hidden;"> <div style="background:#f8f9fa; padding:18px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:1.3rem;"> <span>What is included in the plan?</span> <i class="fas fa-chevron-down" style="transition:transform 0.3s;"></i> </div> <!-- hidden content would go here --> </div> |
4. Teacher Summary – Quick Recap
Font Awesome 5 Directional Icons = W3Schools’ page listing free arrow & direction icons like:
- arrow-left/right/up/down ←→↑↓
- angle-left/right/up/down ‹›
- chevron-left/right/up/down ‹›
- caret-left/right/up/down ◀▶
- arrow-alt-circle-left/right/up/down ⭠
- long-arrow-alt-left/right/up/down ←←
- sort / sort-up/down ↕↑↓
- arrows-alt ↔ (drag/move)
Very useful for:
- Navigation / pagination
- Sort / order controls
- Scroll-to-top buttons
- Expand/collapse toggles
- “Next / Previous” wizards
- Map directions / pointers
Got it now? Want me to:
- Build a full “Pagination + Sortable Table + Back-to-Top” demo page with these icons?
- Show how they look in a modern admin dashboard or e-commerce product list?
- Compare FA5 vs FA6/7 directional icons (way more arrow variants & arrow styles in newer versions)?
- Or move to the next category in the series?
Just tell your teacher — we’re pointing the way today! ← ↑ → ↓ 🚀
