From 4dc5b7ebaed733642fae0382238d71a147fb5c7d Mon Sep 17 00:00:00 2001
From: Samuel Alake <58840187+samuelalake@users.noreply.github.com>
Date: Fri, 4 Sep 2026 05:05:55 -0700
Subject: [PATCH] feat(icons): add gap-horizontal and gap-vertical (#4544)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Adds two icons for the gap between items in a layout: facing brackets
with the gap itself marked between them.

The brackets are the container edges and the dot marks the space, which
is what distinguishes these from the align-* family — those show the
items and a guideline, these show only the space. Rails span 2-22,
matching align-horizontal-space-between's M3 2v20.

The dot uses the "M12 12h.01" zero-length path, the same idiom dice-*,
badge-percent and ~130 other icons use for a 2px dot.

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

Adds two icons for the gap between items in a layout: two facing brackets
with a dashed line marking the space between them.

Redesigned from the earlier dot version per review on #4544. This uses
the square-centerline-dashed-horizontal / -vertical construction with the
bracket ends flipped inward, so the brackets read as the two item edges
and the dashed line as the gap. Avoids the small-circle dot that the
earlier version relied on.

Co-Authored-By: Karsa <17746067+karsa-mistmere@users.noreply.github.com>

* Apply suggestions from code review

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

---------

Co-authored-by: Karsa <17746067+karsa-mistmere@users.noreply.github.com>
Co-authored-by: Karsa <contact@karsa.org>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 icons/gap-horizontal.json | 31 +++++++++++++++++++++++++++++++
 icons/gap-horizontal.svg  | 18 ++++++++++++++++++
 icons/gap-vertical.json   | 32 ++++++++++++++++++++++++++++++++
 icons/gap-vertical.svg    | 18 ++++++++++++++++++
 4 files changed, 99 insertions(+)
 create mode 100644 icons/gap-horizontal.json
 create mode 100644 icons/gap-horizontal.svg
 create mode 100644 icons/gap-vertical.json
 create mode 100644 icons/gap-vertical.svg

diff --git a/icons/gap-horizontal.json b/icons/gap-horizontal.json
new file mode 100644
index 000000000..4d61cbff8
--- /dev/null
+++ b/icons/gap-horizontal.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "samuelalake",
+    "karsa-mistmere"
+  ],
+  "use-cases": [
+    "indicating horizontal gap setting in a design inspector",
+    "representing the column-gap control in grid or flex panels",
+    "adjusting horizontal spacing between components in a page builder",
+    "visualizing a spacing token in a design system or theme editor"
+  ],
+  "tags": [
+    "gap",
+    "spacing",
+    "space",
+    "between",
+    "padding",
+    "margin",
+    "horizontal",
+    "auto layout",
+    "layout",
+    "distance",
+    "frame",
+    "distribute"
+  ],
+  "categories": [
+    "design",
+    "layout"
+  ]
+}
diff --git a/icons/gap-horizontal.svg b/icons/gap-horizontal.svg
new file mode 100644
index 000000000..d0eefc424
--- /dev/null
+++ b/icons/gap-horizontal.svg
@@ -0,0 +1,18 @@
+<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="M12 2v2" />
+  <path d="M12 8v2" />
+  <path d="M12 14v2" />
+  <path d="M12 20v2" />
+  <path d="M21 3h-3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3" />
+  <path d="M3 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3" />
+</svg>
diff --git a/icons/gap-vertical.json b/icons/gap-vertical.json
new file mode 100644
index 000000000..54b282e54
--- /dev/null
+++ b/icons/gap-vertical.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "samuelalake",
+    "karsa-mistmere"
+  ],
+  "use-cases": [
+    "displaying vertical spacing between stacked elements in a design inspector",
+    "representing the row-gap control in a css grid or flex panel",
+    "adjusting vertical gutter in a page builder or layout editor",
+    "visualizing space between rows in an auto-layout stack",
+    "indicating configurable vertical spacing in a ui component library"
+  ],
+  "tags": [
+    "gap",
+    "spacing",
+    "space",
+    "between",
+    "padding",
+    "margin",
+    "vertical",
+    "auto layout",
+    "layout",
+    "distance",
+    "frame",
+    "distribute"
+  ],
+  "categories": [
+    "design",
+    "layout"
+  ]
+}
diff --git a/icons/gap-vertical.svg b/icons/gap-vertical.svg
new file mode 100644
index 000000000..78d81e097
--- /dev/null
+++ b/icons/gap-vertical.svg
@@ -0,0 +1,18 @@
+<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="M2 12h2" />
+  <path d="M8 12h2" />
+  <path d="M14 12h2" />
+  <path d="M20 12h2" />
+  <path d="M3 21v-3a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3" />
+  <path d="M3 3v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3" />
+</svg>