diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index febfe8548f..654248784a 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -39,6 +39,7 @@
 		"do-not-zip": "^1.0.0",
 		"flexsearch": "^0.7.43",
 		"flru": "^1.0.2",
+		"icons": "workspace:*",
 		"port-authority": "^2.0.1",
 		"topojson-client": "^3.1.0",
 		"vitest": "^2.1.9",
diff --git a/apps/svelte.dev/src/lib/icons/arrow-left.svg b/apps/svelte.dev/src/lib/icons/arrow-left.svg
deleted file mode 100644
index ee413e3551..0000000000
--- a/apps/svelte.dev/src/lib/icons/arrow-left.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_9_705)">
-<path d="M6 11.9958H18" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 18L6 12L12 6" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_9_705">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/bluesky-dark.svg b/apps/svelte.dev/src/lib/icons/bluesky-dark.svg
deleted file mode 100644
index 690f699a80..0000000000
--- a/apps/svelte.dev/src/lib/icons/bluesky-dark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-	<path fill="#d4d4d4" d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.697-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948Z"></path>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/chevron.svg b/apps/svelte.dev/src/lib/icons/chevron.svg
deleted file mode 100644
index 7334ed9673..0000000000
--- a/apps/svelte.dev/src/lib/icons/chevron.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="m6 9 6 6 6-6" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/contents.svg b/apps/svelte.dev/src/lib/icons/contents.svg
deleted file mode 100644
index b24fac9f7a..0000000000
--- a/apps/svelte.dev/src/lib/icons/contents.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #676778;
-      }
-
-      .cls-2 {
-        fill: none;
-        stroke: #676778;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        stroke-width: 1.5px;
-      }
-    </style>
-  </defs>
-  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
-  <g>
-    <g id="Layer_1">
-      <path class="cls-2" d="M9.5,12h11"/>
-      <path class="cls-2" d="M9.5,19h11"/>
-      <path class="cls-2" d="M9.5,5h11"/>
-      <path class="cls-1" d="M5,6.5c.8,0,1.5-.7,1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5,1.5.7,1.5,1.5,1.5Z"/>
-      <path class="cls-1" d="M5,13.5c.8,0,1.5-.7,1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5,1.5.7,1.5,1.5,1.5Z"/>
-      <path class="cls-1" d="M5,20.5c.8,0,1.5-.7,1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5,1.5.7,1.5,1.5,1.5Z"/>
-    </g>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/src/lib/icons/discord-dark.svg b/apps/svelte.dev/src/lib/icons/discord-dark.svg
deleted file mode 100644
index 8a1029d2c4..0000000000
--- a/apps/svelte.dev/src/lib/icons/discord-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#d4d4d4" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/download-dark.svg b/apps/svelte.dev/src/lib/icons/download-dark.svg
deleted file mode 100644
index b769ca5914..0000000000
--- a/apps/svelte.dev/src/lib/icons/download-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="#d4d4d4" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/download-light.svg b/apps/svelte.dev/src/lib/icons/download-light.svg
deleted file mode 100644
index a1f28e2b87..0000000000
--- a/apps/svelte.dev/src/lib/icons/download-light.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="#666" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/external.svg b/apps/svelte.dev/src/lib/icons/external.svg
deleted file mode 100644
index 5a16c1ce92..0000000000
--- a/apps/svelte.dev/src/lib/icons/external.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-	<path fill="none" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M10,3H3v18h18v-7 M21,9.5V3h-6.5 M12,12l9-9"/>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/file-dark.svg b/apps/svelte.dev/src/lib/icons/file-dark.svg
deleted file mode 100644
index 1496d2264b..0000000000
--- a/apps/svelte.dev/src/lib/icons/file-dark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 7V21C20 21.5523 19.5523 22 19 22H5C4.44771 22 4 21.5523 4 21V3C4 2.44771 4.44771 2 5 2H15M20 7H15V2M20 7L15 2" stroke="#d4d4d4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/file-edit-inline-dark.svg b/apps/svelte.dev/src/lib/icons/file-edit-inline-dark.svg
deleted file mode 100644
index 4b7816bd33..0000000000
--- a/apps/svelte.dev/src/lib/icons/file-edit-inline-dark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 16.5C21 15.9477 20.5523 15.5 20 15.5C19.4477 15.5 19 15.9477 19 16.5H21ZM15.75 21C15.1977 21 14.75 21.4477 14.75 22C14.75 22.5523 15.1977 23 15.75 23V21ZM19 8C19 8.55228 19.4477 9 20 9C20.5523 9 21 8.55228 21 8H19ZM8 23C8.55228 23 9 22.5523 9 22C9 21.4477 8.55228 21 8 21V23ZM8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9V7ZM15 9C15.5523 9 16 8.55228 16 8C16 7.44772 15.5523 7 15 7V9ZM10.7228 21.3708C10.3753 21.8001 10.4415 22.4297 10.8708 22.7772C11.3001 23.1247 11.9297 23.0585 12.2772 22.6292L10.7228 21.3708ZM20.7772 12.1292C21.1247 11.6999 21.0585 11.0703 20.6292 10.7228C20.1999 10.3753 19.5703 10.4415 19.2228 10.8708L20.7772 12.1292ZM8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13V11ZM12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11V13ZM19 16.5V21H21V16.5H19ZM19 21V23C20.1046 23 21 22.1046 21 21H19ZM19 21H15.75V23H19V21ZM21 8V3H19V8H21ZM21 3C21 1.89544 20.1046 1 19 1V3H21ZM19 1H5V3H19V1ZM5 1C3.89543 1 3 1.89543 3 3H5V1ZM3 3V21H5V3H3ZM3 21C3 22.1046 3.89544 23 5 23V21H3ZM5 23H8V21H5V23ZM8 9H15V7H8V9ZM12.2772 22.6292L20.7772 12.1292L19.2228 10.8708L10.7228 21.3708L12.2772 22.6292ZM8 13H12V11H8V13Z" fill="#ccc"/>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/file-edit.svg b/apps/svelte.dev/src/lib/icons/file-edit.svg
deleted file mode 100644
index faad58f4d8..0000000000
--- a/apps/svelte.dev/src/lib/icons/file-edit.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 16.5C21 15.9477 20.5523 15.5 20 15.5C19.4477 15.5 19 15.9477 19 16.5H21ZM15.75 21C15.1977 21 14.75 21.4477 14.75 22C14.75 22.5523 15.1977 23 15.75 23V21ZM19 8C19 8.55228 19.4477 9 20 9C20.5523 9 21 8.55228 21 8H19ZM8 23C8.55228 23 9 22.5523 9 22C9 21.4477 8.55228 21 8 21V23ZM8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9V7ZM15 9C15.5523 9 16 8.55228 16 8C16 7.44772 15.5523 7 15 7V9ZM10.7228 21.3708C10.3753 21.8001 10.4415 22.4297 10.8708 22.7772C11.3001 23.1247 11.9297 23.0585 12.2772 22.6292L10.7228 21.3708ZM20.7772 12.1292C21.1247 11.6999 21.0585 11.0703 20.6292 10.7228C20.1999 10.3753 19.5703 10.4415 19.2228 10.8708L20.7772 12.1292ZM8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13V11ZM12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11V13ZM19 16.5V21H21V16.5H19ZM19 21V23C20.1046 23 21 22.1046 21 21H19ZM19 21H15.75V23H19V21ZM21 8V3H19V8H21ZM21 3C21 1.89544 20.1046 1 19 1V3H21ZM19 1H5V3H19V1ZM5 1C3.89543 1 3 1.89543 3 3H5V1ZM3 3V21H5V3H3ZM3 21C3 22.1046 3.89544 23 5 23V21H3ZM5 23H8V21H5V23ZM8 9H15V7H8V9ZM12.2772 22.6292L20.7772 12.1292L19.2228 10.8708L10.7228 21.3708L12.2772 22.6292ZM8 13H12V11H8V13Z" fill="#676778"/>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/file.svg b/apps/svelte.dev/src/lib/icons/file.svg
deleted file mode 100644
index 5ca191bd44..0000000000
--- a/apps/svelte.dev/src/lib/icons/file.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 7V21C20 21.5523 19.5523 22 19 22H5C4.44771 22 4 21.5523 4 21V3C4 2.44771 4.44771 2 5 2H15M20 7H15V2M20 7L15 2" stroke="#666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/github-dark.svg b/apps/svelte.dev/src/lib/icons/github-dark.svg
deleted file mode 100644
index 946addd279..0000000000
--- a/apps/svelte.dev/src/lib/icons/github-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#d4d4d4"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/lightbulb.svg b/apps/svelte.dev/src/lib/icons/lightbulb.svg
deleted file mode 100644
index f3c24132ee..0000000000
--- a/apps/svelte.dev/src/lib/icons/lightbulb.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ff3e00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/terminal.svg b/apps/svelte.dev/src/lib/icons/terminal.svg
deleted file mode 100644
index ece0700c41..0000000000
--- a/apps/svelte.dev/src/lib/icons/terminal.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 3.5H3C2.44771 3.5 2 3.94771 2 4.5V19.5C2 20.0523 2.44771 20.5 3 20.5H21C21.5523 20.5 22 20.0523 22 19.5V4.5C22 3.94771 21.5523 3.5 21 3.5Z" fill="#676778" stroke="#676778" stroke-width="1.5"/>
-<path d="M8.70703 11.3613L6 10.1836V8.54297L10.3242 10.6758V12.0703L6 14.209V12.5684L8.70703 11.3613Z" fill="white"/>
-<path d="M10.9367 14.1562C10.9367 13.8906 11.0246 13.6719 11.2004 13.5C11.3801 13.3281 11.6125 13.2422 11.8976 13.2422C12.175 13.2422 12.4055 13.3281 12.5891 13.5C12.7726 13.668 12.8644 13.8867 12.8644 14.1562C12.8644 14.4297 12.7707 14.6504 12.5832 14.8184C12.3996 14.9824 12.1711 15.0645 11.8976 15.0645C11.6203 15.0645 11.3898 14.9805 11.2062 14.8125C11.0266 14.6445 10.9367 14.4258 10.9367 14.1562Z" fill="white"/>
-<path d="M13.3621 14.1562C13.3621 13.8906 13.45 13.6719 13.6258 13.5C13.8055 13.3281 14.0379 13.2422 14.323 13.2422C14.6004 13.2422 14.8308 13.3281 15.0144 13.5C15.198 13.668 15.2898 13.8867 15.2898 14.1562C15.2898 14.4297 15.1961 14.6504 15.0086 14.8184C14.825 14.9824 14.5965 15.0645 14.323 15.0645C14.0457 15.0645 13.8152 14.9805 13.6316 14.8125C13.4519 14.6445 13.3621 14.4258 13.3621 14.1562Z" fill="white"/>
-<path d="M15.9015 14.1562C15.9015 13.8906 15.9894 13.6719 16.1652 13.5C16.3449 13.3281 16.5773 13.2422 16.8625 13.2422C17.1398 13.2422 17.3703 13.3281 17.5539 13.5C17.7375 13.668 17.8293 13.8867 17.8293 14.1562C17.8293 14.4297 17.7355 14.6504 17.548 14.8184C17.3644 14.9824 17.1359 15.0645 16.8625 15.0645C16.5851 15.0645 16.3547 14.9805 16.1711 14.8125C15.9914 14.6445 15.9015 14.4258 15.9015 14.1562Z" fill="white"/>
-</svg>
diff --git a/apps/svelte.dev/src/lib/icons/user-dark.svg b/apps/svelte.dev/src/lib/icons/user-dark.svg
deleted file mode 100644
index 91402ad157..0000000000
--- a/apps/svelte.dev/src/lib/icons/user-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d4d4d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 918b34fb32..87336ce167 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -272,12 +272,15 @@
 
 		&.login {
 			width: auto;
-			background-image: url($lib/icons/user-light.svg);
-			background-position: 0.4rem 50%;
-			padding: 0 0.4rem 0 2.8rem;
-
-			:root.dark & {
-				background-image: url($lib/icons/user-dark.svg);
+			padding: 0 0.4rem;
+
+			&::before {
+				content: '';
+				width: 1.8rem;
+				height: 1.8rem;
+				margin: 0 0.5rem 0 0;
+				background: currentColor;
+				mask: url(icons/user) no-repeat 50% 50%;
 			}
 		}
 	}
diff --git a/apps/svelte.dev/src/routes/_home/Video.svelte b/apps/svelte.dev/src/routes/_home/Video.svelte
index e10b9a8e2a..d1614ed6f8 100644
--- a/apps/svelte.dev/src/routes/_home/Video.svelte
+++ b/apps/svelte.dev/src/routes/_home/Video.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import volume_off from './volume-off.svg';
-	import volume_high from './volume-high.svg';
-	import cc_on from './cc-on.svg';
-	import cc_off from './cc-off.svg';
-	import play from './play.svg';
-	import pause from './pause.svg';
+	import volume_off from 'icons/volume-off';
+	import volume_high from 'icons/volume-high';
+	import cc_on from 'icons/cc-on';
+	import cc_off from 'icons/cc-off';
+	import play from 'icons/play';
+	import pause from 'icons/pause';
 	import vtt from './subtitles.vtt';
 	import { onMount } from 'svelte';
 
diff --git a/apps/svelte.dev/src/routes/_home/cc-off.svg b/apps/svelte.dev/src/routes/_home/cc-off.svg
deleted file mode 100644
index c5d60a43df..0000000000
--- a/apps/svelte.dev/src/routes/_home/cc-off.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<style type="text/css">
-	.st0{display:none;fill:#FFFFFF;}
-	.st1{fill:#FFFFFF;}
-</style>
-<path class="st0" d="M12,3.7L9.9,5.8L12,7.9 M4.3,2.7L3,4l4.7,4.7H3v6h4l5,5V13l4.2,4.3c-0.7,0.5-1.4,0.9-2.2,1.2v2.1
-	c1.4-0.3,2.6-1,3.7-1.8l2,2l1.3-1.3l-9-9 M19,11.7c0,0.9-0.2,1.8-0.5,2.6l1.5,1.5c0.7-1.2,1-2.6,1-4.1c0-4.3-3-7.9-7-8.8V5
-	C16.9,5.9,19,8.6,19,11.7 M16.5,11.7c0-1.8-1-3.3-2.5-4v2.2l2.5,2.4C16.5,12.2,16.5,11.9,16.5,11.7z"/>
-<g>
-	<path class="st1" d="M16.5,13.5l1.2,1.2c0.2-0.2,0.3-0.4,0.3-0.7v-1h-1.5V13.5z"/>
-	<path class="st1" d="M10,13H9.5v0.5h-2v-3h0L6.3,9.3C6.1,9.5,6,9.7,6,10v4c0,0.3,0.1,0.5,0.3,0.7C6.5,14.9,6.7,15,7,15h3
-		c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.4,0.3-0.7v0L10,13z"/>
-	<path class="st1" d="M14.5,11.5v-1h2V11H18v-1c0-0.3-0.1-0.5-0.3-0.7C17.5,9.1,17.3,9,17,9h-3c-0.3,0-0.5,0.1-0.7,0.3
-		C13.1,9.5,13,9.7,13,10L14.5,11.5z"/>
-	<path class="st1" d="M20.4,4.6C20,4.2,19.5,4,19,4H5C4.5,4,4,4.2,3.6,4.6C3.2,5,3,5.4,3,6v12c0,0.6,0.2,1,0.6,1.4
-		C4,19.8,4.5,20,5,20h14c0.5,0,1-0.2,1.4-0.6C20.8,19,21,18.5,21,18V6C21,5.5,20.8,5,20.4,4.6z M19.5,5.5v12.8L6.7,5.5H19.5z
-		 M4.5,18.5V5.8l12.7,12.7H4.5z"/>
-</g>
-</svg>
diff --git a/apps/svelte.dev/src/routes/_home/cc-on.svg b/apps/svelte.dev/src/routes/_home/cc-on.svg
deleted file mode 100644
index e429173f5e..0000000000
--- a/apps/svelte.dev/src/routes/_home/cc-on.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<path class="st0" d="M5,4C4.4,4,4,4.2,3.6,4.6C3.2,5,3,5.4,3,6v12c0,0.6,0.2,1,0.6,1.4C4,19.8,4.4,20,5,20h14c0.5,0,1-0.2,1.4-0.6
-	C20.8,19,21,18.5,21,18V6c0-0.5-0.2-1-0.6-1.4C20,4.2,19.5,4,19,4H5 M4.5,5.5h15v13h-15V5.5 M7,9C6.7,9,6.5,9.1,6.3,9.3
-	C6.1,9.5,6,9.7,6,10v4c0,0.3,0.1,0.5,0.3,0.7C6.5,14.9,6.7,15,7,15h3c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.4,0.3-0.7v-1H9.5v0.5h-2
-	v-3h2V11H11v-1c0-0.3-0.1-0.5-0.3-0.7C10.5,9.1,10.3,9,10,9H7 M14,9c-0.3,0-0.5,0.1-0.7,0.3C13.1,9.5,13,9.7,13,10v4
-	c0,0.3,0.1,0.5,0.3,0.7c0.2,0.2,0.4,0.3,0.7,0.3h3c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.4,0.3-0.7v-1h-1.5v0.5h-2v-3h2V11H18v-1
-	c0-0.3-0.1-0.5-0.3-0.7C17.5,9.1,17.3,9,17,9H14z"/>
-</svg>
diff --git a/apps/svelte.dev/src/routes/_home/plus.svg b/apps/svelte.dev/src/routes/_home/plus.svg
deleted file mode 100644
index 4826bcaf2c..0000000000
--- a/apps/svelte.dev/src/routes/_home/plus.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_9_689)">
-<path d="M12.0303 5L12.012 19" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5 12H19" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_9_689">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/svelte.dev/src/routes/_home/up-small.svg b/apps/svelte.dev/src/routes/_home/up-small.svg
deleted file mode 100644
index f067962cf7..0000000000
--- a/apps/svelte.dev/src/routes/_home/up-small.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_9_719)">
-<path d="M12.0042 6.05029V18" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6 12L12 6L18 12" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_9_719">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index 4d9e6f0602..d940ab42f7 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -150,13 +150,24 @@
 		}
 
 		h2 {
+			position: relative;
 			padding-right: 4rem;
-			background: url(./arrow-right.svg) no-repeat 100% 50%;
-			background-size: 3rem;
 
-			.external & {
-				background-image: url(./external-link.svg);
-				background-size: 3rem;
+			&::after {
+				content: '';
+				position: absolute;
+				width: 3rem;
+				height: 3rem;
+				top: 0.2rem;
+				right: 0;
+
+				background: var(--sk-fg-accent);
+				mask: url(icons/arrow-right) no-repeat 100% 50%;
+				mask-size: 100%;
+			}
+
+			.external &::after {
+				mask-image: url(icons/external-link);
 			}
 		}
 
diff --git a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte
index 22bec4e816..3bad6b262c 100644
--- a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte
@@ -99,7 +99,7 @@
 				position: relative;
 				display: flex;
 				align-items: center;
-				background: url($lib/icons/contents.svg) 0 50% no-repeat;
+				background: url(icons/contents) 0 50% no-repeat;
 				background-size: 2rem 2rem;
 				padding: 0.2rem 0 0 3rem;
 				height: 3rem;
@@ -133,11 +133,12 @@
 				}
 
 				&::after {
-					background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
-					background-size: 2rem;
+					background: currentColor;
+					mask: url(icons/chevron) 50% 50% no-repeat;
+					mask-size: 2rem;
 					top: 0.4rem;
 					right: 0.2rem;
-					rotate: 0deg;
+					rotate: -90deg;
 					transition: rotate 0.2s;
 					transition: rotate 0.2s;
 				}
@@ -161,7 +162,7 @@
 
 			label:has(:checked) {
 				&::after {
-					rotate: 180deg;
+					rotate: 90deg;
 				}
 
 				/* TODO remove :global once https://github.com/sveltejs/svelte/issues/13779 is fixed */
diff --git a/apps/svelte.dev/src/routes/search/+page.svelte b/apps/svelte.dev/src/routes/search/+page.svelte
index 806c79fdf6..fff86da865 100644
--- a/apps/svelte.dev/src/routes/search/+page.svelte
+++ b/apps/svelte.dev/src/routes/search/+page.svelte
@@ -46,7 +46,7 @@
 		border: none;
 		border-radius: var(--sk-border-radius);
 		padding: 2rem 2rem 2rem 5rem;
-		background: no-repeat 1rem 50% / 3rem 3rem url(/icons/search.svg);
+		background: no-repeat 1rem 50% / 3rem 3rem url(icons/search);
 		color: var(--sk-fg-1);
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
index 3b6a1eb799..d06072bb4a 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
@@ -52,10 +52,10 @@
 
 	<button
 		disabled={loading || !toggle_terminal}
-		class="terminal icon raised"
+		class="terminal raised"
 		onclick={() => toggle_terminal?.()}
-		aria-label="toggle terminal"
-	></button>
+		aria-label="toggle terminal"><span class="icon"></span></button
+	>
 </div>
 
 <style>
@@ -88,14 +88,15 @@
 
 	.icon,
 	.icon::after {
-		position: relative;
 		width: 3.2rem;
 		aspect-ratio: 1;
 		background-size: 1.8rem;
 	}
 
-	.terminal {
-		background-image: url($lib/icons/terminal.svg);
+	.terminal .icon {
+		background: currentColor;
+		mask: url(icons/terminal) 50% 50% no-repeat;
+		mask-size: 1.8rem;
 	}
 
 	.reload::after {
@@ -103,8 +104,9 @@
 		position: absolute;
 		left: 0;
 		top: 0;
-		background: url($lib/icons/refresh.svg) no-repeat 50% 50%;
-		background-size: 1.8rem;
+		background: currentColor;
+		mask: url(icons/refresh) no-repeat 50% 50%;
+		mask-size: 1.8rem;
 		transition: 0.2s ease-out;
 	}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
index b88621b2a2..e284dc59d5 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
@@ -122,26 +122,21 @@
 			[data-file],
 			.filename {
 				cursor: pointer;
-				background-image: url($lib/icons/file.svg);
-				background-repeat: no-repeat;
 
-				:root.dark & {
-					background-image: url($lib/icons/file-dark.svg);
+				&::before {
+					position: relative;
+					content: '';
+					display: inline-block;
+					width: 1rem;
+					height: 1rem;
+					top: 0.1rem;
+					margin-right: 0.5rem;
+					background: currentColor;
+					mask: url(icons/file) 50% 50% no-repeat;
+					mask-size: 100%;
 				}
 			}
 
-			[data-file] {
-				background-position: 0.5rem 50%;
-				background-size: 1rem 1rem;
-				padding-left: 2rem;
-			}
-
-			.filename {
-				background-position: 0 54%;
-				background-size: 1rem 1rem;
-				padding-left: 1.5rem !important;
-			}
-
 			.desktop {
 				display: none;
 			}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
index 5da9f62bc1..7225dc2125 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as context from './context.js';
 	import Item from './Item.svelte';
-	import file_icon from '$lib/icons/file.svg';
+	import file_icon from 'icons/file';
 	import { solution } from '../state.svelte';
 	import type { MenuItem } from '$lib/tutorial';
 	import type { File } from '@sveltejs/repl/workspace';
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
index c16bd233a5..a94a058aa7 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
@@ -4,8 +4,8 @@
 	import * as context from './context.js';
 	import { get_depth } from '$lib/utils/path.js';
 	import Item from './Item.svelte';
-	import folder_closed from '$lib/icons/folder.svg';
-	import folder_open from '$lib/icons/folder-open.svg';
+	import folder_closed from 'icons/folder';
+	import folder_open from 'icons/folder-open';
 	import { solution } from '../state.svelte';
 	import type { MenuItem } from '$lib/tutorial';
 	import type { Directory, File as IFile, Item as IItem } from '@sveltejs/repl/workspace';
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
index 0d6cf40c48..491f2b9814 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -176,22 +176,22 @@
 	.icon {
 		height: 100%;
 		width: 1.5rem;
-	}
 
-	.icon.rename {
-		background-image: url($lib/icons/rename.svg);
-	}
+		&.rename {
+			background-image: url(icons/rename);
+		}
 
-	.icon.delete {
-		background-image: url($lib/icons/delete.svg);
-	}
+		&.delete {
+			background-image: url(icons/delete);
+		}
 
-	.icon.file-new {
-		background-image: url($lib/icons/file-new.svg);
-	}
+		&.file-new {
+			background-image: url(icons/file-new);
+		}
 
-	.icon.folder-new {
-		background-image: url($lib/icons/folder-new.svg);
+		&.folder-new {
+			background-image: url(icons/folder-new);
+		}
 	}
 
 	[aria-current='true'] {
diff --git a/apps/svelte.dev/static/icons/check.svg b/apps/svelte.dev/static/icons/check.svg
deleted file mode 100644
index c3e46a42b6..0000000000
--- a/apps/svelte.dev/static/icons/check.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m21 7-12 12-5.5-5.5 1.41-1.41 4.09 4.08 10.59-10.58z" fill="#aa1e1e"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/chevron.svg b/apps/svelte.dev/static/icons/chevron.svg
deleted file mode 100644
index 9d582fa803..0000000000
--- a/apps/svelte.dev/static/icons/chevron.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m2 8 10 8 10-8" fill="none" stroke="#676778" stroke-width="2"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/collapse.svg b/apps/svelte.dev/static/icons/collapse.svg
deleted file mode 100644
index 795939aec8..0000000000
--- a/apps/svelte.dev/static/icons/collapse.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m19.5 3.09 1.41 1.41-4.5 4.5h3.59v2h-7v-7h2v3.59zm1.41 16.41-1.41 1.41-4.5-4.5v3.59h-2v-7h7v2h-3.59zm-16.41-16.41 4.5 4.5v-3.59h2v7h-7v-2h3.59l-4.5-4.5zm-1.41 16.41 4.5-4.5h-3.59v-2h7v7h-2v-3.59l-4.5 4.5z" fill="#aa1e1e"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/download.svg b/apps/svelte.dev/static/icons/download.svg
deleted file mode 100644
index b286a882fe..0000000000
--- a/apps/svelte.dev/static/icons/download.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m5 20h14v-2h-14m14-9h-4v-6h-6v6h-4l7 7z" fill="#aa1e1e"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/dropdown.svg b/apps/svelte.dev/static/icons/dropdown.svg
deleted file mode 100644
index 69435856b4..0000000000
--- a/apps/svelte.dev/static/icons/dropdown.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m3 6h18v2h-18zm0 5h18v2h-18zm0 5h18v2h-18z" fill="#999"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/edit.svg b/apps/svelte.dev/static/icons/edit.svg
deleted file mode 100644
index 760321cd2f..0000000000
--- a/apps/svelte.dev/static/icons/edit.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#fff" stroke-width="2"><path d="m20 14.66v5.34a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2-2v-14a2 2 0 0 1 2-2h5.34"/><path d="m18 2 4 4-10 10h-4v-4z"/></g></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/expand.svg b/apps/svelte.dev/static/icons/expand.svg
deleted file mode 100644
index a026808da3..0000000000
--- a/apps/svelte.dev/static/icons/expand.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m9.5 13.09 1.41 1.41-4.5 4.5h3.59v2h-7v-7h2v3.59zm1.41-3.59-1.41 1.41-4.5-4.5v3.59h-2v-7h7v2h-3.59zm3.59 3.59 4.5 4.5v-3.59h2v7h-7v-2h3.59l-4.5-4.5zm-1.41-3.59 4.5-4.5h-3.59v-2h7v7h-2v-3.59l-4.5 4.5z" fill="#aa1e1e"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/flip.svg b/apps/svelte.dev/static/icons/flip.svg
deleted file mode 100644
index 3a18d5ffa1..0000000000
--- a/apps/svelte.dev/static/icons/flip.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 5c4.97 0 9 2.69 9 6 0 1.68-1.04 3.2-2.71 4.29 1.07-.87 1.71-1.97 1.71-3.16 0-2.84-3.58-5.13-8-5.13v3l-4-4 4-4zm0 14c-4.97 0-9-2.69-9-6 0-1.68 1.04-3.2 2.71-4.29-1.07.87-1.71 1.97-1.71 3.17 0 2.83 3.58 5.12 8 5.12v-3l4 4-4 4z" fill="#aa1e1e"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/fork.svg b/apps/svelte.dev/static/icons/fork.svg
deleted file mode 100644
index 3e21885495..0000000000
--- a/apps/svelte.dev/static/icons/fork.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m3 4v8.5l3-3 3 3.5c1 1 1 2 1 2v6h4v-7s0-1-.53-2-1.47-2-1.47-2l-3-3.42 2.5-2.58m6.5 0-4.46 4.47.46.53s.93 1 1.47 2c.21.4.33.79.4 1.13l5.13-5.13" fill="#aa1e1e"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/link.svg b/apps/svelte.dev/static/icons/link.svg
deleted file mode 100644
index 58e745476b..0000000000
--- a/apps/svelte.dev/static/icons/link.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
-	<style>
-		path {
-			stroke: #333;
-			fill: none;
-		}
-
-		@media (prefers-color-scheme: dark) {
-			path {
-				stroke: #ccc;
-			}
-		}
-	</style>
-
-	<path d="M9,7L6,7A2 2 0 0 0 6,17L9,17"/>
-	<path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"/>
-	<path d="M7,12L17,12"/>
-</svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/static/icons/loading.svg b/apps/svelte.dev/static/icons/loading.svg
deleted file mode 100644
index e54abff1dd..0000000000
--- a/apps/svelte.dev/static/icons/loading.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
-  <circle id="spinner" cx="12" cy="12" r="8" fill="none" stroke="white" stroke-width="3" stroke-dasharray="50.2 50" />
-  <animate href="#spinner" attributeName="stroke-dashoffset" values="52;0;52" dur="5s" repeatCount="indefinite" />
-  <animateTransform href="#spinner" attributeName="transform" type="rotate" values="0 12 12;360 12 12;0 12 12" dur="9s" repeatCount="indefinite"/>
-</svg>
diff --git a/apps/svelte.dev/static/icons/save.svg b/apps/svelte.dev/static/icons/save.svg
deleted file mode 100644
index a8a5fa1618..0000000000
--- a/apps/svelte.dev/static/icons/save.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m15 9h-10v-4h10m-3 14a3 3 0 0 1 -3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1 -3 3m5-16h-12c-1.11 0-2 .9-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-12z" fill="#aa1e1e"/></svg>
\ No newline at end of file
diff --git a/apps/svelte.dev/src/routes/docs/arrow-right.svg b/packages/icons/icons/arrow-right.svg
similarity index 100%
rename from apps/svelte.dev/src/routes/docs/arrow-right.svg
rename to packages/icons/icons/arrow-right.svg
diff --git a/apps/svelte.dev/src/lib/icons/bluesky-light.svg b/packages/icons/icons/bluesky.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/bluesky-light.svg
rename to packages/icons/icons/bluesky.svg
diff --git a/packages/icons/icons/cc-off.svg b/packages/icons/icons/cc-off.svg
new file mode 100644
index 0000000000..d9ca43b7d9
--- /dev/null
+++ b/packages/icons/icons/cc-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff"><path d="m16.5 13.5 1.2 1.2c.2-.2.3-.4.3-.7v-1h-1.5v.5zM10 13h-.5v.5h-2v-3L6.3 9.3c-.2.2-.3.4-.3.7v4c0 .3.1.5.3.7.2.2.4.3.7.3h3c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7l-1-1zM14.5 11.5v-1h2v.5H18v-1c0-.3-.1-.5-.3-.7-.2-.2-.4-.3-.7-.3h-3c-.3 0-.5.1-.7.3-.2.2-.3.4-.3.7l1.5 1.5z"/><path d="M20.4 4.6C20 4.2 19.5 4 19 4H5c-.5 0-1 .2-1.4.6C3.2 5 3 5.4 3 6v12c0 .6.2 1 .6 1.4.4.4.9.6 1.4.6h14c.5 0 1-.2 1.4-.6.4-.4.6-.9.6-1.4V6c0-.5-.2-1-.6-1.4zm-.9.9v12.8L6.7 5.5h12.8zm-15 13V5.8l12.7 12.7H4.5z"/></svg>
diff --git a/packages/icons/icons/cc-on.svg b/packages/icons/icons/cc-on.svg
new file mode 100644
index 0000000000..afa28e11de
--- /dev/null
+++ b/packages/icons/icons/cc-on.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 4c-.6 0-1 .2-1.4.6C3.2 5 3 5.4 3 6v12c0 .6.2 1 .6 1.4.4.4.8.6 1.4.6h14c.5 0 1-.2 1.4-.6.4-.4.6-.9.6-1.4V6c0-.5-.2-1-.6-1.4-.4-.4-.9-.6-1.4-.6H5m-.5 1.5h15v13h-15v-13M7 9c-.3 0-.5.1-.7.3-.2.2-.3.4-.3.7v4c0 .3.1.5.3.7.2.2.4.3.7.3h3c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7v-1H9.5v.5h-2v-3h2v.5H11v-1c0-.3-.1-.5-.3-.7-.2-.2-.4-.3-.7-.3H7m7 0c-.3 0-.5.1-.7.3-.2.2-.3.4-.3.7v4c0 .3.1.5.3.7.2.2.4.3.7.3h3c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7v-1h-1.5v.5h-2v-3h2v.5H18v-1c0-.3-.1-.5-.3-.7-.2-.2-.4-.3-.7-.3h-3z" style="fill:#fff"/></svg>
diff --git a/packages/site-kit/src/lib/icons/check-light.svg b/packages/icons/icons/check.svg
similarity index 100%
rename from packages/site-kit/src/lib/icons/check-light.svg
rename to packages/icons/icons/check.svg
diff --git a/packages/site-kit/src/lib/icons/chevron.svg b/packages/icons/icons/chevron.svg
similarity index 100%
rename from packages/site-kit/src/lib/icons/chevron.svg
rename to packages/icons/icons/chevron.svg
diff --git a/packages/repl/src/lib/Editor/close-light.svg b/packages/icons/icons/close.svg
similarity index 100%
rename from packages/repl/src/lib/Editor/close-light.svg
rename to packages/icons/icons/close.svg
diff --git a/packages/icons/icons/contents.svg b/packages/icons/icons/contents.svg
new file mode 100644
index 0000000000..d19c904525
--- /dev/null
+++ b/packages/icons/icons/contents.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#676778}.cls-2{fill:none;stroke:#676778;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style></defs><g id="Layer_1"><path d="M9.5 12h11M9.5 19h11M9.5 5h11" class="cls-2"/><path d="M5 6.5c.8 0 1.5-.7 1.5-1.5S5.8 3.5 5 3.5 3.5 4.2 3.5 5 4.2 6.5 5 6.5ZM5 13.5c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5 1.5.7 1.5 1.5 1.5ZM5 20.5c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5 1.5.7 1.5 1.5 1.5Z" class="cls-1"/></g></svg>
diff --git a/packages/site-kit/src/lib/icons/copy-to-clipboard-light.svg b/packages/icons/icons/copy-to-clipboard.svg
similarity index 100%
rename from packages/site-kit/src/lib/icons/copy-to-clipboard-light.svg
rename to packages/icons/icons/copy-to-clipboard.svg
diff --git a/apps/svelte.dev/src/lib/icons/delete.svg b/packages/icons/icons/delete.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/delete.svg
rename to packages/icons/icons/delete.svg
diff --git a/apps/svelte.dev/src/lib/icons/discord-light.svg b/packages/icons/icons/discord.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/discord-light.svg
rename to packages/icons/icons/discord.svg
diff --git a/packages/icons/icons/document.svg b/packages/icons/icons/document.svg
new file mode 100644
index 0000000000..d3119e2ee9
--- /dev/null
+++ b/packages/icons/icons/document.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 7v14c0 .6-.4 1-1 1H5c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h10m5 5h-5V2m5 5-5-5" style="fill:none;stroke:#000000e0;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px"/></svg>
diff --git a/apps/svelte.dev/src/routes/docs/external-link.svg b/packages/icons/icons/external-link.svg
similarity index 100%
rename from apps/svelte.dev/src/routes/docs/external-link.svg
rename to packages/icons/icons/external-link.svg
diff --git a/apps/svelte.dev/src/lib/icons/file-new.svg b/packages/icons/icons/file-new.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/file-new.svg
rename to packages/icons/icons/file-new.svg
diff --git a/packages/repl/src/lib/Input/file.svg b/packages/icons/icons/file.svg
similarity index 100%
rename from packages/repl/src/lib/Input/file.svg
rename to packages/icons/icons/file.svg
diff --git a/apps/svelte.dev/src/lib/icons/folder-new.svg b/packages/icons/icons/folder-new.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/folder-new.svg
rename to packages/icons/icons/folder-new.svg
diff --git a/apps/svelte.dev/src/lib/icons/folder-open.svg b/packages/icons/icons/folder-open.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/folder-open.svg
rename to packages/icons/icons/folder-open.svg
diff --git a/apps/svelte.dev/src/lib/icons/folder.svg b/packages/icons/icons/folder.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/folder.svg
rename to packages/icons/icons/folder.svg
diff --git a/packages/site-kit/src/lib/icons/font-boring-light.svg b/packages/icons/icons/font-boring.svg
similarity index 100%
rename from packages/site-kit/src/lib/icons/font-boring-light.svg
rename to packages/icons/icons/font-boring.svg
diff --git a/packages/site-kit/src/lib/icons/font-elegant-light.svg b/packages/icons/icons/font-elegant.svg
similarity index 100%
rename from packages/site-kit/src/lib/icons/font-elegant-light.svg
rename to packages/icons/icons/font-elegant.svg
diff --git a/apps/svelte.dev/src/lib/icons/github-light.svg b/packages/icons/icons/github.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/github-light.svg
rename to packages/icons/icons/github.svg
diff --git a/packages/icons/icons/hash.svg b/packages/icons/icons/hash.svg
new file mode 100644
index 0000000000..e17f3d5366
--- /dev/null
+++ b/packages/icons/icons/hash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;stroke:#000000e0;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style></defs><g id="Layer_1"><path d="M8.5 2v20M15.5 2v20M4 8.5l16-.1M4 15.5l16-.1" class="cls-1"/></g></svg>
diff --git a/packages/icons/icons/lightbulb.svg b/packages/icons/icons/lightbulb.svg
new file mode 100644
index 0000000000..d59dbca57e
--- /dev/null
+++ b/packages/icons/icons/lightbulb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ff3e00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>
diff --git a/apps/svelte.dev/src/routes/_home/pause.svg b/packages/icons/icons/pause.svg
similarity index 100%
rename from apps/svelte.dev/src/routes/_home/pause.svg
rename to packages/icons/icons/pause.svg
diff --git a/apps/svelte.dev/src/routes/_home/play.svg b/packages/icons/icons/play.svg
similarity index 100%
rename from apps/svelte.dev/src/routes/_home/play.svg
rename to packages/icons/icons/play.svg
diff --git a/apps/svelte.dev/src/lib/icons/refresh.svg b/packages/icons/icons/refresh.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/refresh.svg
rename to packages/icons/icons/refresh.svg
diff --git a/apps/svelte.dev/src/lib/icons/rename.svg b/packages/icons/icons/rename.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/rename.svg
rename to packages/icons/icons/rename.svg
diff --git a/packages/repl/src/lib/Input/runes-off-light.svg b/packages/icons/icons/runes-off.svg
similarity index 100%
rename from packages/repl/src/lib/Input/runes-off-light.svg
rename to packages/icons/icons/runes-off.svg
diff --git a/packages/repl/src/lib/Input/runes-on-light.svg b/packages/icons/icons/runes-on.svg
similarity index 100%
rename from packages/repl/src/lib/Input/runes-on-light.svg
rename to packages/icons/icons/runes-on.svg
diff --git a/apps/svelte.dev/static/icons/search.svg b/packages/icons/icons/search.svg
similarity index 100%
rename from apps/svelte.dev/static/icons/search.svg
rename to packages/icons/icons/search.svg
diff --git a/packages/icons/icons/terminal.svg b/packages/icons/icons/terminal.svg
new file mode 100644
index 0000000000..1a79d5dd9c
--- /dev/null
+++ b/packages/icons/icons/terminal.svg
@@ -0,0 +1 @@
+<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"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/theme-dark.svg b/packages/icons/icons/theme-dark.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/theme-dark.svg
rename to packages/icons/icons/theme-dark.svg
diff --git a/apps/svelte.dev/src/lib/icons/theme-light.svg b/packages/icons/icons/theme-light.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/theme-light.svg
rename to packages/icons/icons/theme-light.svg
diff --git a/apps/svelte.dev/src/lib/icons/user-light.svg b/packages/icons/icons/user.svg
similarity index 100%
rename from apps/svelte.dev/src/lib/icons/user-light.svg
rename to packages/icons/icons/user.svg
diff --git a/apps/svelte.dev/src/routes/_home/volume-high.svg b/packages/icons/icons/volume-high.svg
similarity index 100%
rename from apps/svelte.dev/src/routes/_home/volume-high.svg
rename to packages/icons/icons/volume-high.svg
diff --git a/apps/svelte.dev/src/routes/_home/volume-off.svg b/packages/icons/icons/volume-off.svg
similarity index 100%
rename from apps/svelte.dev/src/routes/_home/volume-off.svg
rename to packages/icons/icons/volume-off.svg
diff --git a/packages/site-kit/src/lib/icons/wrench-light.svg b/packages/icons/icons/wrench.svg
similarity index 100%
rename from packages/site-kit/src/lib/icons/wrench-light.svg
rename to packages/icons/icons/wrench.svg
diff --git a/packages/icons/package.json b/packages/icons/package.json
new file mode 100644
index 0000000000..c4d3ac8c06
--- /dev/null
+++ b/packages/icons/package.json
@@ -0,0 +1,10 @@
+{
+	"name": "icons",
+	"private": true,
+	"exports": {
+		"./*": {
+			"types": "./types.d.ts",
+			"default": "./icons/*.svg"
+		}
+	}
+}
diff --git a/packages/icons/types.d.ts b/packages/icons/types.d.ts
new file mode 100644
index 0000000000..63bbc09331
--- /dev/null
+++ b/packages/icons/types.d.ts
@@ -0,0 +1,2 @@
+declare const svg: string;
+export default svg;
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 3bd9bada03..8194c5372d 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -96,6 +96,7 @@
 		"codemirror": "^6.0.1",
 		"esm-env": "^1.0.0",
 		"esrap": "^1.2.2",
+		"icons": "workspace:*",
 		"locate-character": "^3.0.0",
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
diff --git a/packages/repl/src/lib/Editor/close-dark.svg b/packages/repl/src/lib/Editor/close-dark.svg
deleted file mode 100644
index 46bd16cf54..0000000000
--- a/packages/repl/src/lib/Editor/close-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d4d4d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
diff --git a/packages/repl/src/lib/Editor/codemirror.css b/packages/repl/src/lib/Editor/codemirror.css
index 08d3bf5cbb..320891bccf 100644
--- a/packages/repl/src/lib/Editor/codemirror.css
+++ b/packages/repl/src/lib/Editor/codemirror.css
@@ -57,21 +57,25 @@
 	.cm-gutterElement {
 		position: relative;
 
-		&:where(:has([title='Fold line']), :has([title='Unfold line']))::after {
-			content: '';
-			position: absolute;
-			width: 100%;
-			right: 0;
-			top: 0;
-			height: 2.4rem;
-			background: url($lib/icons/chevron.svg) no-repeat 50% 50%;
-			background-size: contain;
-			transition: transform 0.2s;
-			cursor: pointer;
+		&:where(:has([title='Fold line']), :has([title='Unfold line'])) {
+			&::after {
+				content: '';
+				position: absolute;
+				width: 100%;
+				right: 0;
+				top: 0;
+				height: 2.4rem;
+				background: currentColor;
+				mask: url(icons/chevron) no-repeat 50% 50%;
+				mask-size: contain;
+				transition: transform 0.2s;
+				cursor: pointer;
+				rotate: 180deg;
+			}
 		}
 
 		&:has([title='Unfold line'])::after {
-			transform: rotate(-90deg);
+			transform: rotate(90deg);
 		}
 
 		span {
@@ -184,12 +188,17 @@
 				aspect-ratio: 1;
 				top: 0.5rem;
 				right: 0.5rem;
-				color: transparent;
-				background: url(./close-light.svg) 50% 50% no-repeat;
-				background-size: 1.8rem;
 
-				:root.dark & {
-					background-image: url(./close-dark.svg);
+				&::after {
+					content: '';
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					left: 0;
+					top: 0;
+					background: currentColor;
+					mask: url(icons/close) 50% 50% no-repeat;
+					mask-size: 1.8rem;
 				}
 			}
 
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index f6bb459244..74caa7f96a 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -159,8 +159,8 @@
 		class="raised add-new"
 		onclick={add_new}
 		aria-label="add new component"
-		title="add new component"
-	></button>
+		title="add new component"><span class="icon"></span></button
+	>
 
 	<div class="runes">
 		<RunesInfo {runes} />
@@ -241,7 +241,7 @@
 			position: absolute;
 			left: 0em;
 			top: 0;
-			background: url(./file.svg) 50% 50% no-repeat;
+			background: url(icons/file) 50% 50% no-repeat;
 			background-size: 1em;
 		}
 
@@ -303,8 +303,12 @@
 	.add-new {
 		height: 3.2rem;
 		aspect-ratio: 1;
-		background: url(./file-new.svg) 50% 50% no-repeat;
-		background-size: 1em;
+
+		.icon {
+			background: currentColor;
+			mask: url(icons/file-new) 50% 50% no-repeat;
+			mask-size: 1.2em;
+		}
 	}
 
 	.runes {
diff --git a/packages/repl/src/lib/Input/RunesInfo.svelte b/packages/repl/src/lib/Input/RunesInfo.svelte
index d6728b5abe..2bef3449a5 100644
--- a/packages/repl/src/lib/Input/RunesInfo.svelte
+++ b/packages/repl/src/lib/Input/RunesInfo.svelte
@@ -73,32 +73,29 @@
 	}
 
 	span.lightning {
-		--icon-size: 1.8rem;
 		width: 1.8rem;
 		height: 1.8rem;
 		z-index: 9999;
-		background: url(./runes-off-light.svg) no-repeat 50% 50%;
-		background-size: contain;
-
-		:root.dark &:not(.active) {
-			background-image: url(./runes-off-dark.svg);
-		}
+		background: var(--sk-fg-4);
+		mask: url(icons/runes-off) no-repeat 50% 50%;
+		mask-size: contain;
 
 		&.active {
-			background-image: url(./runes-on-light.svg);
+			background: var(--sk-fg-accent);
+			mask-image: url(icons/runes-on);
 			animation: bump 0.4s;
 		}
 	}
 
 	@keyframes bump {
 		0% {
-			background-size: var(--icon-size);
+			scale: 1;
 		}
 		50% {
-			background-size: calc(1.3 * var(--icon-size));
+			scale: 1.3;
 		}
 		100% {
-			background-size: var(--icon-size);
+			scale: 1;
 		}
 	}
 
diff --git a/packages/repl/src/lib/Input/file-new.svg b/packages/repl/src/lib/Input/file-new.svg
deleted file mode 100644
index 6f8b1b14bb..0000000000
--- a/packages/repl/src/lib/Input/file-new.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 7V21C20 21.5523 19.5523 22 19 22H5C4.44771 22 4 21.5523 4 21V3C4 2.44771 4.44771 2 5 2H15M20 7H15V2M20 7L15 2M12 10.5V17.5M8.5 14H15.5" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/packages/repl/src/lib/Input/runes-off-dark.svg b/packages/repl/src/lib/Input/runes-off-dark.svg
deleted file mode 100644
index d03bff31fa..0000000000
--- a/packages/repl/src/lib/Input/runes-off-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.513 4.856 13.12 2.17a.5.5 0 0 1 .86.46l-1.377 4.317"/><path d="M15.656 10H20a1 1 0 0 1 .78 1.63l-1.72 1.773"/><path d="M16.273 16.273 10.88 21.83a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14H4a1 1 0 0 1-.78-1.63l4.507-4.643"/><path d="m2 2 20 20"/></svg>
diff --git a/packages/repl/src/lib/Input/runes-on-dark.svg b/packages/repl/src/lib/Input/runes-on-dark.svg
deleted file mode 100644
index 90d811b4d1..0000000000
--- a/packages/repl/src/lib/Input/runes-on-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d4d4d4" stroke="#d4d4d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 37cdab652c..6885952bae 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -41,6 +41,7 @@
 		"@shikijs/langs": "^3.2.1",
 		"@shikijs/twoslash": "^3.2.1",
 		"esm-env": "^1.0.0",
+		"icons": "workspace:*",
 		"json5": "^2.2.3",
 		"shiki": "^3.2.1"
 	},
@@ -103,8 +104,6 @@
 		"./polyfills": {
 			"default": "./src/lib/polyfills/index.ts"
 		},
-		"./icons/link.svg": "./src/lib/icons/link.svg",
-		"./icons/search.svg": "./src/lib/icons/search.svg",
 		"./search": {
 			"default": "./src/lib/search/index.ts",
 			"svelte": "./src/lib/search/index.ts"
diff --git a/packages/site-kit/src/lib/components/FontToggle.svelte b/packages/site-kit/src/lib/components/FontToggle.svelte
index bec698d3c3..6e944beb1a 100644
--- a/packages/site-kit/src/lib/components/FontToggle.svelte
+++ b/packages/site-kit/src/lib/components/FontToggle.svelte
@@ -18,30 +18,21 @@
 
 <button
 	onclick={toggle}
-	class="raised icon"
+	class="raised"
 	type="button"
 	aria-pressed={font === 'boring'}
 	aria-label="Toggle font"
-></button>
+>
+	<span class="icon"></span>
+</button>
 
 <style>
-	button {
-		background-size: 2rem;
+	.icon {
+		mask-size: 2rem;
+		mask-image: url(icons/font-elegant);
 	}
 
-	button[aria-pressed='true'] {
-		background-image: url(../icons/font-elegant-light.svg);
-
-		:global(.dark) & {
-			background-image: url(../icons/font-elegant-dark.svg);
-		}
-	}
-
-	button[aria-pressed='false'] {
-		background-image: url(../icons/font-boring-light.svg);
-
-		:global(.dark) & {
-			background-image: url(../icons/font-boring-dark.svg);
-		}
+	button[aria-pressed='false'] .icon {
+		mask-image: url(icons/font-boring);
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 0ada4e8bda..ec6f594270 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -229,30 +229,19 @@
 						height: 100%;
 						left: 0;
 						top: 0;
-						background: no-repeat 50% 50% / 1.6rem 1.6rem;
+						background: currentColor;
+						mask: no-repeat 50% 50% / 1.6rem 1.6rem;
 						transition: opacity 0.2s;
 						transition-delay: 0.6s;
 					}
 
 					&::before {
-						background-image: url(../icons/copy-to-clipboard-light.svg);
+						mask-image: url(icons/copy-to-clipboard);
 					}
 
 					&::after {
-						background-image: url(../icons/check-light.svg);
+						mask-image: url(icons/check);
 						opacity: 0;
-
-						html.dark & {
-							background-image: url(../icons/check-dark.svg);
-						}
-					}
-
-					html.dark &::before {
-						background-image: url(../icons/copy-to-clipboard-dark.svg);
-					}
-
-					html.dark &::after {
-						background-image: url(../icons/check-dark.svg);
 					}
 
 					&:active::before {
@@ -341,8 +330,9 @@
 		a.permalink {
 			position: absolute !important;
 			display: block;
-			background: url(../icons/hash-light.svg) 50% 50% no-repeat;
-			background-size: 2.4rem 2.4rem;
+			background: var(--sk-fg-1);
+			mask: url(icons/hash) 50% 50% no-repeat;
+			mask-size: 2.4rem 2.4rem;
 			width: 2.6rem;
 			height: 2.2rem;
 			top: calc(50% - 1rem);
@@ -352,10 +342,6 @@
 				scale: 0.8;
 			}
 
-			:root.dark & {
-				background-image: url(../icons/hash-dark.svg);
-			}
-
 			@media (min-width: 768px) {
 				left: 1.6rem;
 				opacity: 0;
@@ -422,10 +408,14 @@
 			&.note,
 			&:has(details.legacy) {
 				&::before {
-					content: none;
+					content: '';
+					display: block;
+					width: 2em;
+					height: 2em;
+					top: 0.05em;
+					background: var(--sk-fg-accent);
+					mask: url(icons/lightbulb) no-repeat 0.5rem 0 / 2.6rem;
 				}
-
-				background: url($lib/icons/lightbulb.svg) no-repeat 0.5rem 0 / 2.6rem;
 			}
 
 			&:first-child {
@@ -500,10 +490,10 @@
 			}
 
 			&::after {
-				background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
-				background-size: 2rem;
-				rotate: 0deg;
-				transition: rotate 0.2s;
+				background: currentColor;
+				mask: url(icons/chevron) 50% 50% no-repeat;
+				mask-size: 2rem;
+				rotate: -90deg;
 				transition: rotate 0.2s;
 				top: 0.2rem;
 				right: 0.8rem;
@@ -541,7 +531,7 @@
 
 			&[open] {
 				&::after {
-					rotate: 180deg;
+					rotate: 90deg;
 				}
 
 				& > summary {
diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
index 83189f29ef..236af7fbd6 100644
--- a/packages/site-kit/src/lib/components/ThemeToggle.svelte
+++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -29,19 +29,21 @@
 
 <button
 	onclick={toggle}
-	class="raised icon"
+	class="raised"
 	type="button"
 	aria-pressed={theme.current === 'dark'}
 	aria-label="Toggle dark mode"
-></button>
+>
+	<span class="icon"></span>
+</button>
 
 <style>
-	button {
-		background-image: url($lib/icons/theme-dark.svg);
-		background-size: 2rem;
+	.icon {
+		mask-image: url(icons/theme-dark);
+		mask-size: 2rem;
 
-		:global(.dark) & {
-			background-image: url($lib/icons/theme-light.svg);
+		:root.dark & {
+			mask-image: url(icons/theme-light);
 		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Toolbox.svelte b/packages/site-kit/src/lib/components/Toolbox.svelte
index 14e582b961..cb57f4fb51 100644
--- a/packages/site-kit/src/lib/components/Toolbox.svelte
+++ b/packages/site-kit/src/lib/components/Toolbox.svelte
@@ -35,15 +35,10 @@
 	}
 
 	span.wrench {
-		--icon-size: 1.8rem;
 		width: 1.8rem;
 		height: 1.8rem;
 		z-index: 9999;
-		background: url(../icons/wrench-light.svg) no-repeat 50% 50%;
-		background-size: contain;
-
-		:root.dark & {
-			background-image: url(../icons/wrench-dark.svg);
-		}
+		background: currentColor;
+		mask: url(icons/wrench) no-repeat 50% 50% / contain;
 	}
 </style>
diff --git a/packages/site-kit/src/lib/icons/check-dark.svg b/packages/site-kit/src/lib/icons/check-dark.svg
deleted file mode 100644
index 999f787c1c..0000000000
--- a/packages/site-kit/src/lib/icons/check-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m21 7-12 12-5.5-5.5 1.41-1.41 4.09 4.08 10.59-10.58z" fill="#ccc"/></svg>
diff --git a/packages/site-kit/src/lib/icons/copy-to-clipboard-dark.svg b/packages/site-kit/src/lib/icons/copy-to-clipboard-dark.svg
deleted file mode 100644
index 9749703fea..0000000000
--- a/packages/site-kit/src/lib/icons/copy-to-clipboard-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="11.2" height="14" x="7.9" y="3" rx="1.5" ry="1.5" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:1.5px"/><path d="M4 7v12.5c0 .8.7 1.5 1.5 1.5h10" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:1.5px;stroke-linecap:round"/></svg>
diff --git a/packages/site-kit/src/lib/icons/document-dark.svg b/packages/site-kit/src/lib/icons/document-dark.svg
deleted file mode 100644
index 6b610950eb..0000000000
--- a/packages/site-kit/src/lib/icons/document-dark.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: none;
-        stroke: #ccc;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        stroke-width: 1.5px;
-      }
-    </style>
-  </defs>
-  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
-  <g>
-    <g id="Layer_1">
-      <path class="cls-1" d="M20,7v14c0,.6-.4,1-1,1H5c-.6,0-1-.4-1-1V3c0-.6.4-1,1-1h10M20,7h-5V2M20,7l-5-5"/>
-    </g>
-  </g>
-</svg>
diff --git a/packages/site-kit/src/lib/icons/document-light.svg b/packages/site-kit/src/lib/icons/document-light.svg
deleted file mode 100644
index 68cfbd95c0..0000000000
--- a/packages/site-kit/src/lib/icons/document-light.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: none;
-        stroke: #000000e0;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        stroke-width: 1.5px;
-      }
-    </style>
-  </defs>
-  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
-  <g>
-    <g id="Layer_1">
-      <path class="cls-1" d="M20,7v14c0,.6-.4,1-1,1H5c-.6,0-1-.4-1-1V3c0-.6.4-1,1-1h10M20,7h-5V2M20,7l-5-5"/>
-    </g>
-  </g>
-</svg>
diff --git a/packages/site-kit/src/lib/icons/font-accessible-dark.svg b/packages/site-kit/src/lib/icons/font-accessible-dark.svg
deleted file mode 100644
index f879017524..0000000000
--- a/packages/site-kit/src/lib/icons/font-accessible-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d4d4d4"><path d="M10.9 3h2.3l6.9 18h-3.4l-.7-2.9H8.1L7.2 21H4l6.9-18Zm4.3 12.3L12 5.9l-3.2 9.4h6.4Z"/></svg>
diff --git a/packages/site-kit/src/lib/icons/font-accessible-light.svg b/packages/site-kit/src/lib/icons/font-accessible-light.svg
deleted file mode 100644
index 745a87f96e..0000000000
--- a/packages/site-kit/src/lib/icons/font-accessible-light.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#666"><path d="M10.9 3h2.3l6.9 18h-3.4l-.7-2.9H8.1L7.2 21H4l6.9-18Zm4.3 12.3L12 5.9l-3.2 9.4h6.4Z"/></svg>
diff --git a/packages/site-kit/src/lib/icons/font-boring-dark.svg b/packages/site-kit/src/lib/icons/font-boring-dark.svg
deleted file mode 100644
index 38abc6491a..0000000000
--- a/packages/site-kit/src/lib/icons/font-boring-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d4d4d4"><path d="M10.6 3h2.8l6.7 18h-2.7L16 17.1H7.9L6.5 21H3.8l6.8-18ZM8.7 14.9h6.6L12 5.6l-3.3 9.3Z"/></svg>
diff --git a/packages/site-kit/src/lib/icons/font-elegant-dark.svg b/packages/site-kit/src/lib/icons/font-elegant-dark.svg
deleted file mode 100644
index a48fabd407..0000000000
--- a/packages/site-kit/src/lib/icons/font-elegant-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d4d4d4"><path d="M3.7 21h-.5c-.1 0-.2-.1-.2-.2s0-.2.2-.3c.1 0 .4-.2.6-.3.5-.1.9-.3 1.3-.6s.7-.7 1-1.4c.5-1.1.9-2.2 1.3-3.1.4-1 .8-1.9 1.2-2.9.4-.9.7-1.9 1.1-2.9.4-1 .8-2.1 1.2-3.3 0-.2.2-.5.2-.7 0-.2.1-.5.1-.8.2 0 .3-.1.5-.2.2 0 .3-.1.5-.2s.3-.3.3-.5.1-.3.2-.4v.6c.4 1.3.9 2.7 1.3 4 .5 1.4.9 2.7 1.3 4 .4 1.3.8 2.4 1.2 3.4.4 1 .6 1.8.8 2.5.2.7.5 1.2.8 1.6.3.3.6.6.9.7.3.1.6.2 1 .3.3 0 .5.1.7.2.1.1.2.2.2.4s0 .2-.2.2H13.3c-.1 0-.2-.1-.2-.2s0-.2.3-.3c.2 0 .4-.1.6-.2.6 0 1-.2 1.2-.4.2-.2.4-.5.4-.7s0-.6-.2-1.1c-.1-.5-.2-1-.4-1.6-.2-.6-.3-1.1-.4-1.5 0-.1-.1-.2-.2-.2H8.8c-.1 0-.2.2-.2.4s-.1.4-.3.8c-.1.4-.2.8-.4 1.2s-.2.8-.3 1.1c0 .3-.1.5-.1.6 0 .4.1.7.4 1 .3.3.7.4 1.1.5.6.2.9.3.9.5s0 .2-.2.2H3.6Zm6-7.5h4c.2 0 .4 0 .4-.1v-.2l-2-6.4c-.1-.3-.2-.5-.2-.5s-.1.1-.2.4l-2.4 6.4v.2s0 .1.1.2h.4Z"/></svg>
diff --git a/packages/site-kit/src/lib/icons/hash-dark.svg b/packages/site-kit/src/lib/icons/hash-dark.svg
deleted file mode 100644
index 8b1a0bf688..0000000000
--- a/packages/site-kit/src/lib/icons/hash-dark.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: none;
-        stroke: #ccc;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        stroke-width: 1.5px;
-      }
-    </style>
-  </defs>
-  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
-  <g>
-    <g id="Layer_1">
-      <line class="cls-1" x1="8.5" y1="2" x2="8.5" y2="22"/>
-      <line class="cls-1" x1="15.5" y1="2" x2="15.5" y2="22"/>
-      <line class="cls-1" x1="4" y1="8.5" x2="20" y2="8.4"/>
-      <line class="cls-1" x1="4" y1="15.5" x2="20" y2="15.4"/>
-    </g>
-  </g>
-</svg>
diff --git a/packages/site-kit/src/lib/icons/hash-light.svg b/packages/site-kit/src/lib/icons/hash-light.svg
deleted file mode 100644
index 205fd7882f..0000000000
--- a/packages/site-kit/src/lib/icons/hash-light.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: none;
-        stroke: #000000e0;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        stroke-width: 1.5px;
-      }
-    </style>
-  </defs>
-  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
-  <g>
-    <g id="Layer_1">
-      <line class="cls-1" x1="8.5" y1="2" x2="8.5" y2="22"/>
-      <line class="cls-1" x1="15.5" y1="2" x2="15.5" y2="22"/>
-      <line class="cls-1" x1="4" y1="8.5" x2="20" y2="8.4"/>
-      <line class="cls-1" x1="4" y1="15.5" x2="20" y2="15.4"/>
-    </g>
-  </g>
-</svg>
diff --git a/packages/site-kit/src/lib/icons/home.svg b/packages/site-kit/src/lib/icons/home.svg
deleted file mode 100644
index 21a4bbb7d9..0000000000
--- a/packages/site-kit/src/lib/icons/home.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M224 115.55V208a16 16 0 0 1-16 16h-40a16 16 0 0 1-16-16v-40a8 8 0 0 0-8-8h-32a8 8 0 0 0-8 8v40a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16v-92.45a16 16 0 0 1 5.17-11.78l80-75.48l.11-.11a16 16 0 0 1 21.53 0a1.14 1.14 0 0 0 .11.11l80 75.48a16 16 0 0 1 5.08 11.78Z"/></svg>
\ No newline at end of file
diff --git a/packages/site-kit/src/lib/icons/link.svg b/packages/site-kit/src/lib/icons/link.svg
deleted file mode 100644
index 58e745476b..0000000000
--- a/packages/site-kit/src/lib/icons/link.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
-	<style>
-		path {
-			stroke: #333;
-			fill: none;
-		}
-
-		@media (prefers-color-scheme: dark) {
-			path {
-				stroke: #ccc;
-			}
-		}
-	</style>
-
-	<path d="M9,7L6,7A2 2 0 0 0 6,17L9,17"/>
-	<path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"/>
-	<path d="M7,12L17,12"/>
-</svg>
\ No newline at end of file
diff --git a/packages/site-kit/src/lib/icons/search.svg b/packages/site-kit/src/lib/icons/search.svg
deleted file mode 100644
index fc1ccaa1a2..0000000000
--- a/packages/site-kit/src/lib/icons/search.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-	<path
-		fill="#bbb"
-		d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
-	/>
-</svg>
diff --git a/packages/site-kit/src/lib/icons/wrench-dark.svg b/packages/site-kit/src/lib/icons/wrench-dark.svg
deleted file mode 100644
index 678bf90c44..0000000000
--- a/packages/site-kit/src/lib/icons/wrench-dark.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 24 24"
-	fill="none"
-	stroke="#d4d4d4"
-	stroke-width="2"
-	stroke-linecap="round"
-	stroke-linejoin="round"
->
-	<path
-		d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
-	/>
-</svg>
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index c20e2d85d4..5076ba3b03 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -377,37 +377,26 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			display: contents;
 
 			[data-icon] {
-				background: no-repeat 50% 50%;
-				background-size: calc(100% - 1rem) auto;
+				background: var(--sk-fg-3);
 				padding: 0 0.5rem;
 				height: 100%;
+				mask: no-repeat 50% 50%;
+				mask-size: calc(100% - 1rem) auto;
 			}
 
 			[data-icon='discord'] {
 				width: 3.4rem;
-				background-image: url($lib/icons/discord-light.svg);
-
-				:global(.dark) & {
-					background-image: url($lib/icons/discord-dark.svg);
-				}
+				mask-image: url(icons/discord);
 			}
 
 			[data-icon='bluesky'] {
 				width: 3rem;
-				background-image: url($lib/icons/bluesky-light.svg);
-
-				:global(.dark) & {
-					background-image: url($lib/icons/bluesky-dark.svg);
-				}
+				mask-image: url(icons/bluesky);
 			}
 
 			[data-icon='github'] {
 				width: 3rem;
-				background-image: url($lib/icons/github-light.svg);
-
-				:global(.dark) & {
-					background-image: url($lib/icons/github-dark.svg);
-				}
+				mask-image: url(icons/github);
 			}
 		}
 
diff --git a/packages/site-kit/src/lib/search/Search.svelte b/packages/site-kit/src/lib/search/Search.svelte
index df19cd6a44..c3e7297c59 100644
--- a/packages/site-kit/src/lib/search/Search.svelte
+++ b/packages/site-kit/src/lib/search/Search.svelte
@@ -71,7 +71,7 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 		height: 3.4rem;
 		border-radius: 5.6rem;
 		background:
-			no-repeat 0.6em 55% / 1.2em 1.2em url(../icons/search.svg),
+			no-repeat 0.6em 55% / 1.2em 1.2em url(icons/search),
 			var(--sk-bg-4);
 	}
 
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 6f66c40240..ecc230a7c6 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -98,14 +98,15 @@
 				top: calc(50% - 1rem);
 				width: 2rem;
 				height: 2rem;
-				background: url($lib/icons/chevron.svg);
-				background-size: contain;
-				rotate: 0deg;
+				background: currentColor;
+				mask: url(icons/chevron);
+				mask-size: contain;
+				rotate: -90deg;
 				transition: rotate 0.2s;
 			}
 
 			[open] &::after {
-				rotate: 180deg;
+				rotate: 90deg;
 			}
 
 			span:not(:last-child)::after {
@@ -135,22 +136,13 @@
 			top: 0;
 			left: 0;
 			height: 100%;
-			background: url(../icons/document-light.svg) no-repeat 50% 50%;
-			background-size: 2rem;
+			background: currentColor;
+			mask: url(icons/document) no-repeat 50% 50%;
+			mask-size: 2rem;
 		}
 
 		&.fragment::before {
-			background-image: url(../icons/hash-light.svg);
-		}
-
-		:root.dark & {
-			&::before {
-				background-image: url(../icons/document-dark.svg);
-			}
-
-			&.fragment::before {
-				background-image: url(../icons/hash-dark.svg);
-			}
+			mask-image: url(icons/hash);
 		}
 
 		&:hover {
diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css
index 90b6858292..cca16ba466 100644
--- a/packages/site-kit/src/lib/styles/utils/buttons.css
+++ b/packages/site-kit/src/lib/styles/utils/buttons.css
@@ -66,7 +66,10 @@
 	}
 }
 
-.icon {
+button.icon,
+summary.icon,
+button:has(> span.icon) {
+	position: relative;
 	width: 3.2rem;
 	height: 3.2rem;
 	background-repeat: no-repeat;
@@ -74,6 +77,18 @@
 	background-size: 2.3rem 2.3rem;
 }
 
+button > span.icon {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	mask-repeat: no-repeat;
+	mask-position: 50% 50%;
+	mask-size: 2.3rem 2.3rem;
+	background: var(--sk-fg-3);
+}
+
 button:where(.tooltip, .tooltip-left)[aria-label]:where(:hover, :focus) {
 	--arrow-size: 1rem;
 
diff --git a/packages/site-kit/src/lib/styles/utils/nav.css b/packages/site-kit/src/lib/styles/utils/nav.css
index 08da0a172b..508901d461 100644
--- a/packages/site-kit/src/lib/styles/utils/nav.css
+++ b/packages/site-kit/src/lib/styles/utils/nav.css
@@ -24,13 +24,13 @@
 				left: -2rem;
 				width: 1.8rem;
 				height: 1.8rem;
-				background: url($lib/icons/chevron.svg) no-repeat 50% 50%;
+				background: url(icons/chevron) no-repeat 50% 50%;
 				background-size: 100%;
 				rotate: -90deg;
 			}
 
 			[open] > &::before {
-				rotate: none;
+				rotate: 180deg;
 			}
 		}
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd33498f58..5d5d55e258 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,9 @@ importers:
       flru:
         specifier: ^1.0.2
         version: 1.0.2
+      icons:
+        specifier: workspace:*
+        version: link:../../packages/icons
       port-authority:
         specifier: ^2.0.1
         version: 2.0.1
@@ -199,6 +202,8 @@ importers:
         specifier: ^7.0.4
         version: 7.0.4(rollup@4.21.2)
 
+  packages/icons: {}
+
   packages/repl:
     dependencies:
       '@codemirror/autocomplete':
@@ -270,6 +275,9 @@ importers:
       esrap:
         specifier: ^1.2.2
         version: 1.2.3
+      icons:
+        specifier: workspace:*
+        version: link:../icons
       locate-character:
         specifier: ^3.0.0
         version: 3.0.0
@@ -394,6 +402,9 @@ importers:
       esm-env:
         specifier: ^1.0.0
         version: 1.2.1
+      icons:
+        specifier: workspace:*
+        version: link:../icons
       json5:
         specifier: ^2.2.3
         version: 2.2.3