From e9cfd3c6d3b9447cefc019df97a99cc594bc0523 Mon Sep 17 00:00:00 2001
From: Samuel Alake <58840187+samuelalake@users.noreply.github.com>
Date: Tue, 10 Nov 2026 01:16:03 -0800
Subject: [PATCH] feat(icons): flipped `route` icon, added `route-arrow-right`
 icon (#4729)

* feat(icons): add route-arrow-right

Adds route-arrow-right: a serpentine route ending in an arrow, giving
the route a direction of travel.

route depicts a path between two waypoints but has no direction. This
reuses route's exact serpentine geometry (the 3.5-radius arcs at x6.5 and
x17.5, rails at y5/y12/y19, same 2px margins), replacing the waypoint
circles with a directional arrow that follows Lucide's arrow convention
(the shaft ends at the chevron apex, as in arrow-right).

Naming: happy to switch to route-arrow if a directional family isn't
wanted. A route-arrow-left mirror and a both-arrows variant are natural
follow-ups if this lands.

* Apply batched suggestions from code review

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Flip route icon and fix arrow right icon

* Adjust metadata

* Rewrite usecases

* add one-way tag

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 icons/route-arrow-right.json | 24 ++++++++++++++++++++++++
 icons/route-arrow-right.svg  | 15 +++++++++++++++
 icons/route.json             | 26 ++++++++++++++++++++++++--
 icons/route.svg              |  6 +++---
 4 files changed, 66 insertions(+), 5 deletions(-)
 create mode 100644 icons/route-arrow-right.json
 create mode 100644 icons/route-arrow-right.svg

diff --git a/icons/route-arrow-right.json b/icons/route-arrow-right.json
new file mode 100644
index 000000000..27bfe3f64
--- /dev/null
+++ b/icons/route-arrow-right.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "$extends:route",
+    "samuelalake"
+  ],
+  "use-cases": [
+    "Indicating a directed route on a map",
+    "Showing a recommended right turn in navigation instructions",
+    "Marking progress toward the next waypoint",
+    "Representing rerouting or an alternate path to the right",
+    "Signaling forward movement in travel or transit apps"
+  ],
+  "tags": [
+    "$extends:route",
+    "$group:direction-right",
+    "one-way",
+    "arrow"
+  ],
+  "categories": [
+    "$extends:route",
+    "arrows"
+  ]
+}
diff --git a/icons/route-arrow-right.svg b/icons/route-arrow-right.svg
new file mode 100644
index 000000000..be10ceaa3
--- /dev/null
+++ b/icons/route-arrow-right.svg
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m18 22 3-3-3-3" />
+  <path d="M9 5h8.5a1 1 0 010 7h-11a1 1 0 000 7H21" />
+  <circle cx="6" cy="5" r="3" />
+</svg>
diff --git a/icons/route.json b/icons/route.json
index 49e832a77..c730a85e8 100644
--- a/icons/route.json
+++ b/icons/route.json
@@ -3,14 +3,36 @@
   "contributors": [
     "danielbayley"
   ],
-  "use-cases": [],
+  "use-cases": [
+    "Representing a route or journey with stops",
+    "Indicating direction or waypoints along a path",
+    "Visualizing travel routes on a map",
+    "Planning trips or itineraries",
+    "Showing progress along a route",
+    "Marking key locations along a route",
+    "Tracking movement along a predefined path"
+  ],
   "tags": [
     "path",
     "journey",
     "planner",
     "points",
     "stops",
-    "stations"
+    "stations",
+    "direction",
+    "right",
+    "flow",
+    "reroute",
+    "detour",
+    "navigate",
+    "forward",
+    "auto",
+    "map",
+    "waypoint",
+    "gps",
+    "turn",
+    "location",
+    "directional"
   ],
   "categories": [
     "navigation"
diff --git a/icons/route.svg b/icons/route.svg
index 12f708814..9a816523e 100644
--- a/icons/route.svg
+++ b/icons/route.svg
@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <circle cx="6" cy="19" r="3" />
-  <path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" />
-  <circle cx="18" cy="5" r="3" />
+  <path d="M9 5h8.5a1 1 0 010 7h-11a1 1 0 000 7H15" />
+  <circle cx="18" cy="19" r="3" />
+  <circle cx="6" cy="5" r="3" />
 </svg>