diff --git a/web/package-lock.json b/web/package-lock.json
index a7c5ef99..6ccb0f43 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -12,7 +12,8 @@
         "@turf/bbox": "^6.5.0",
         "maplibre-draw-polygon": "github:dabreegster/maplibre-draw-polygon",
         "maplibre-gl": "^4.1.0",
-        "svelte-maplibre": "^0.8.3"
+        "svelte-maplibre": "^0.8.3",
+        "svelte-utils": "github:a-b-street/svelte-utils"
       },
       "devDependencies": {
         "@ianvs/prettier-plugin-sort-imports": "^4.0.2",
@@ -2841,6 +2842,13 @@
         }
       }
     },
+    "node_modules/svelte-utils": {
+      "version": "0.0.1",
+      "resolved": "git+ssh://git@github.com/a-b-street/svelte-utils.git#d37f5affb4458ec346a9d1efc0ad1059a94d0343",
+      "peerDependencies": {
+        "svelte": "^4.0.0"
+      }
+    },
     "node_modules/tinyqueue": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
diff --git a/web/package.json b/web/package.json
index 4f3925a9..1527c6a1 100644
--- a/web/package.json
+++ b/web/package.json
@@ -34,6 +34,7 @@
     "@turf/bbox": "^6.5.0",
     "maplibre-draw-polygon": "github:dabreegster/maplibre-draw-polygon",
     "maplibre-gl": "^4.1.0",
-    "svelte-maplibre": "^0.8.3"
+    "svelte-maplibre": "^0.8.3",
+    "svelte-utils": "github:a-b-street/svelte-utils"
   }
 }
diff --git a/web/src/common/Legend.svelte b/web/src/common/Legend.svelte
deleted file mode 100644
index 840c92de..00000000
--- a/web/src/common/Legend.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-  // (Label, color) pairs
-  export let rows: [string, string][];
-</script>
-
-<ul>
-  {#each rows as [label, color]}
-    <li>
-      <span style:background={color} />
-      {label}
-    </li>
-  {/each}
-</ul>
-
-<style>
-  span {
-    display: block;
-    float: left;
-    height: 16px;
-    width: 30px;
-    margin-right: 5px;
-    border: 1px solid #999;
-  }
-</style>
diff --git a/web/src/common/index.ts b/web/src/common/index.ts
index 8b35e514..a6cb14f7 100644
--- a/web/src/common/index.ts
+++ b/web/src/common/index.ts
@@ -1,7 +1,6 @@
 export { default as BasemapPicker } from "./BasemapPicker.svelte";
 export { default as Geocoder } from "./Geocoder.svelte";
 export { default as Layout } from "./Layout.svelte";
-export { default as Legend } from "./Legend.svelte";
 export { default as Loading } from "./Loading.svelte";
 export { default as Map } from "./Map.svelte";
 export { default as StreetView } from "./StreetView.svelte";
diff --git a/web/src/street-explorer/RenderBlock.svelte b/web/src/street-explorer/RenderBlock.svelte
index 6e309b8a..9270be14 100644
--- a/web/src/street-explorer/RenderBlock.svelte
+++ b/web/src/street-explorer/RenderBlock.svelte
@@ -8,7 +8,8 @@
     GeoJSON,
   } from "svelte-maplibre";
   import { showingBundles, blockGj } from "./stores";
-  import { network, Legend } from "../common";
+  import { network } from "../common";
+  import { Legend } from "svelte-utils";
 
   $: active = $blockGj.features.length > 0;