diff --git a/docs/images/1px-border-radius.svg b/docs/images/1px-border-radius.svg
index 33eeba49e..c9dc80e3b 100644
--- a/docs/images/1px-border-radius.svg
+++ b/docs/images/1px-border-radius.svg
@@ -49,12 +49,16 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/images/1px-padding.svg b/docs/images/1px-padding.svg
index 9dcf7ea3e..2f95201c6 100644
--- a/docs/images/1px-padding.svg
+++ b/docs/images/1px-padding.svg
@@ -48,10 +48,12 @@
-
-
-
-
+
+
+
+
+
+
diff --git a/docs/images/24px-24px.svg b/docs/images/24px-24px.svg
index c97840b3d..5ed0597b5 100644
--- a/docs/images/24px-24px.svg
+++ b/docs/images/24px-24px.svg
@@ -48,10 +48,12 @@
-
-
-
-
+
+
+
+
+
+
diff --git a/docs/images/2px-border-radius.svg b/docs/images/2px-border-radius.svg
index bf546c6a7..72a1ffb90 100644
--- a/docs/images/2px-border-radius.svg
+++ b/docs/images/2px-border-radius.svg
@@ -49,9 +49,11 @@
-
-
-
+
+
+
+
+
diff --git a/docs/images/2px-element-spacing.svg b/docs/images/2px-element-spacing.svg
index f2fcc1e70..7fb592d1b 100644
--- a/docs/images/2px-element-spacing.svg
+++ b/docs/images/2px-element-spacing.svg
@@ -48,9 +48,11 @@
-
-
-
+
+
+
+
+
diff --git a/docs/images/2px-stroke.svg b/docs/images/2px-stroke.svg
index 5c607eac6..eaa09caba 100644
--- a/docs/images/2px-stroke.svg
+++ b/docs/images/2px-stroke.svg
@@ -48,8 +48,10 @@
-
-
+
+
+
+
diff --git a/docs/images/centered-strokes.svg b/docs/images/centered-strokes.svg
index a5baca15b..452262261 100644
--- a/docs/images/centered-strokes.svg
+++ b/docs/images/centered-strokes.svg
@@ -49,12 +49,16 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/images/curvature-smooth.svg b/docs/images/curvature-smooth.svg
index 6c420410e..b4d977e49 100644
--- a/docs/images/curvature-smooth.svg
+++ b/docs/images/curvature-smooth.svg
@@ -53,9 +53,13 @@
-
+
+
+
+
+
+
-
diff --git a/docs/images/density-ideal.svg b/docs/images/density-ideal.svg
index 29471b1a4..e67124a4f 100644
--- a/docs/images/density-ideal.svg
+++ b/docs/images/density-ideal.svg
@@ -52,16 +52,18 @@
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/images/optical-volume-ideal.svg b/docs/images/optical-volume-ideal.svg
index b2960537c..82de16c3f 100644
--- a/docs/images/optical-volume-ideal.svg
+++ b/docs/images/optical-volume-ideal.svg
@@ -54,10 +54,12 @@
-
-
-
-
+
+
+
+
+
+
diff --git a/docs/images/round-caps.svg b/docs/images/round-caps.svg
index 71fe59ea8..d4affc793 100644
--- a/docs/images/round-caps.svg
+++ b/docs/images/round-caps.svg
@@ -49,7 +49,9 @@
-
+
+
+
diff --git a/docs/images/visually-centered-bad.svg b/docs/images/visually-centered-bad.svg
index 9cfa48a12..6ed8757ba 100644
--- a/docs/images/visually-centered-bad.svg
+++ b/docs/images/visually-centered-bad.svg
@@ -54,7 +54,9 @@
-
+
+
+
diff --git a/docs/images/visually-centered.svg b/docs/images/visually-centered.svg
index 0515508b7..c0e235307 100644
--- a/docs/images/visually-centered.svg
+++ b/docs/images/visually-centered.svg
@@ -53,7 +53,9 @@
-
+
+
+
diff --git a/scripts/updateGuidelineIcons.mjs b/scripts/updateGuidelineIcons.mjs
new file mode 100644
index 000000000..e0ea91ff0
--- /dev/null
+++ b/scripts/updateGuidelineIcons.mjs
@@ -0,0 +1,30 @@
+import path from 'path';
+import { readdirSync, readFileSync, writeFileSync } from 'fs';
+
+for (const file of readdirSync(path.join(import.meta.dirname, '../docs/images'))) {
+ if (!file.endsWith('.svg')) continue;
+ const fileName = path.join(import.meta.dirname, '../docs/images', file);
+ const oldFileContent = readFileSync(fileName, 'utf8');
+ const newFileContent = oldFileContent
+ .split('')
+ .map((val) =>
+ val.replace(
+ /()(.|\n)*/gm,
+ (_, groupOpeningTag, iconName) =>
+ [
+ groupOpeningTag,
+ ...readFileSync(path.join(import.meta.dirname, `../icons/${iconName}.svg`), 'utf8')
+ .replace(/(]|\n)*>|<\/svg>/g, '')
+ .split('\n'),
+ ]
+ .map((val) => val.trimEnd())
+ .filter(Boolean)
+ .join('\n') + '\n',
+ ),
+ )
+ .join('');
+ if (oldFileContent !== newFileContent) {
+ console.log(`Updating ${fileName}`);
+ writeFileSync(fileName, newFileContent);
+ }
+}