feat(icons): add layout-freeform (#4543)

* feat(icons): add layout-freeform

Adds an icon for freeform layout: three blocks, no two sharing an edge.
It matches the "no auto layout" / free positioning mode found in design
tools, as the counterpart to constrained layout modes.

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.
- Each block is offset so that no two share an edge, which is what
  separates it from layout-grid.
- The offset is 1px: a 2px offset reads more clearly at 16px, but brings
  the top-right and bottom-left blocks within 1.66px of each other
  diagonally, under the 2px element spacing guideline. See the PR for the
  alternatives.

* Update icons/layout-freeform.json

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

---------

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-07-25 22:59:55 +02:00
committed by GitHub
co-authored by github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Eric Fennis
parent dbfe130652
commit 4aec3f892f
2 changed files with 46 additions and 0 deletions
+31
View File
@@ -0,0 +1,31 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"samuelalake"
],
"use-cases": [
"turning off auto layout in a design inspector",
"switching a dashboard section to free drag-and-drop placement",
"selecting freeform arrangement in a page builder",
"indicating unstructured layout mode in a whiteboard or canvas app",
"representing elements not aligned to a grid"
],
"tags": [
"layout",
"freeform",
"free",
"absolute",
"position",
"auto layout",
"unaligned",
"scattered",
"arrange",
"blocks",
"canvas",
"frame"
],
"categories": [
"design",
"layout"
]
}
+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"
>
<rect width="7" height="7" x="3" y="3" rx="1" />
<rect width="7" height="7" x="14" y="4" rx="1" />
<rect width="7" height="7" x="4" y="14" rx="1" />
</svg>

After

Width:  |  Height:  |  Size: 363 B