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>
This commit is contained in:
Samuel Alake
2026-11-10 10:16:03 +01:00
committed by GitHub
co-authored by github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Eric Fennis
parent a25efe8dba
commit e9cfd3c6d3
4 changed files with 66 additions and 5 deletions
+24
View File
@@ -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"
]
}
+15
View File
@@ -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>

After

Width:  |  Height:  |  Size: 326 B

+24 -2
View File
@@ -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"
+3 -3
View File
@@ -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>

Before

Width:  |  Height:  |  Size: 344 B

After

Width:  |  Height:  |  Size: 331 B