From 5d0f64034b79ead46921c8cd88ecffa1e064ee68 Mon Sep 17 00:00:00 2001
From: Samuel Alake <58840187+samuelalake@users.noreply.github.com>
Date: Thu, 10 Sep 2026 01:28:57 -0700
Subject: [PATCH] feat(icons): add `layout-arrow-right` and `layout-arrow-down`
 (#4541)

* feat(icons): add layout-horizontal and layout-vertical

Adds two icons for layout direction: two blocks above a left-to-right
rail, and two blocks beside a top-to-bottom rail. These match the frame
layout direction modes found in design tools and CSS flex-direction
(row / column).

This fills a gap identified when the flexbox icon request (#399) was
closed: "Only missing icons are: flex-direction and flex-wrap icons,
plus baseline." The align-* and stretch-* family covers alignment,
justification and distribution, but nothing currently depicts direction
itself.

Design notes:
- Reuses the 7x7 rx=1 block already shared by layout-grid, layout-list
  and layout-panel-*, rather than introducing a new base shape.
- The two icons are exact mirrors, with rails on the integer grid
  (y=18 / x=18) so the 2px stroke stays sharp at low DPI.
- The 3x3 chevron is the one used by decimals-arrow-right, which shares
  the same composition: elements above, directional rail below.

* Rename icons

* Apply batched suggestions from code review

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

* Update usecases

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 icons/layout-arrow-down.json  | 34 ++++++++++++++++++++++++++++++++++
 icons/layout-arrow-down.svg   | 16 ++++++++++++++++
 icons/layout-arrow-right.json | 34 ++++++++++++++++++++++++++++++++++
 icons/layout-arrow-right.svg  | 16 ++++++++++++++++
 4 files changed, 100 insertions(+)
 create mode 100644 icons/layout-arrow-down.json
 create mode 100644 icons/layout-arrow-down.svg
 create mode 100644 icons/layout-arrow-right.json
 create mode 100644 icons/layout-arrow-right.svg

diff --git a/icons/layout-arrow-down.json b/icons/layout-arrow-down.json
new file mode 100644
index 000000000..3cca032fe
--- /dev/null
+++ b/icons/layout-arrow-down.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "samuelalake"
+  ],
+  "use-cases": [
+    "Setting auto layout direction to vertical in design tools",
+    "Selecting flex-direction: column in devtools panels",
+    "Stacking content blocks top to bottom",
+    "Toggle between horizontal and vertical layouts in design tools",
+    "Switch to column view in file managers or galleries",
+    "Set flex-direction to column in css or style panels",
+    "Indicate vertical stacking mode in ui editors or prototyping tools",
+    "Choose vertical orientation for responsive layout controls"
+  ],
+  "tags": [
+    "layout",
+    "direction",
+    "flex",
+    "flexbox",
+    "flex-direction",
+    "column",
+    "auto layout",
+    "vertical",
+    "arrange",
+    "order",
+    "flow",
+    "stack"
+  ],
+  "categories": [
+    "design",
+    "layout"
+  ]
+}
diff --git a/icons/layout-arrow-down.svg b/icons/layout-arrow-down.svg
new file mode 100644
index 000000000..69ae00c50
--- /dev/null
+++ b/icons/layout-arrow-down.svg
@@ -0,0 +1,16 @@
+<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"
+>
+  <rect width="7" height="7" x="3" y="3" rx="1" />
+  <rect width="7" height="7" x="3" y="14" rx="1" />
+  <path d="M18 3v18" />
+  <path d="m21 18-3 3-3-3" />
+</svg>
diff --git a/icons/layout-arrow-right.json b/icons/layout-arrow-right.json
new file mode 100644
index 000000000..2a6329973
--- /dev/null
+++ b/icons/layout-arrow-right.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "samuelalake"
+  ],
+  "use-cases": [
+    "Setting auto layout direction to horizontal in design tools",
+    "Selecting flex-direction: row in devtools panels",
+    "Switching sections from stacked to side-by-side",
+    "Switching the canvas to a horizontal layout",
+    "Choosing side-by-side or two-column display",
+    "Representing css flex-direction: row in developer tools",
+    "Toggling panel orientation in a ui",
+    "Selecting left-to-right flow in design editors"
+  ],
+  "tags": [
+    "layout",
+    "direction",
+    "flex",
+    "flexbox",
+    "flex-direction",
+    "row",
+    "auto layout",
+    "horizontal",
+    "arrange",
+    "order",
+    "flow",
+    "stack"
+  ],
+  "categories": [
+    "design",
+    "layout"
+  ]
+}
diff --git a/icons/layout-arrow-right.svg b/icons/layout-arrow-right.svg
new file mode 100644
index 000000000..7bbd3c921
--- /dev/null
+++ b/icons/layout-arrow-right.svg
@@ -0,0 +1,16 @@
+<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"
+>
+  <rect width="7" height="7" x="3" y="3" rx="1" />
+  <rect width="7" height="7" x="14" y="3" rx="1" />
+  <path d="M3 18h18" />
+  <path d="m18 21 3-3-3-3" />
+</svg>