diff --git a/src/fontra/client/tabler-icons/circle-dot.svg b/src/fontra/client/tabler-icons/circle-dot.svg
new file mode 100644
index 000000000..37d3b2200
--- /dev/null
+++ b/src/fontra/client/tabler-icons/circle-dot.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-dot" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+  <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+</svg>
diff --git a/src/fontra/client/tabler-icons/circle-dotted.svg b/src/fontra/client/tabler-icons/circle-dotted.svg
new file mode 100644
index 000000000..9fd73511a
--- /dev/null
+++ b/src/fontra/client/tabler-icons/circle-dotted.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-dotted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M7.5 4.21l0 .01" />
+  <path d="M4.21 7.5l0 .01" />
+  <path d="M3 12l0 .01" />
+  <path d="M4.21 16.5l0 .01" />
+  <path d="M7.5 19.79l0 .01" />
+  <path d="M12 21l0 .01" />
+  <path d="M16.5 19.79l0 .01" />
+  <path d="M19.79 16.5l0 .01" />
+  <path d="M21 12l0 .01" />
+  <path d="M19.79 7.5l0 .01" />
+  <path d="M16.5 4.21l0 .01" />
+  <path d="M12 3l0 .01" />
+</svg>
diff --git a/src/fontra/client/tabler-icons/eye-closed.svg b/src/fontra/client/tabler-icons/eye-closed.svg
new file mode 100644
index 000000000..20e833b6f
--- /dev/null
+++ b/src/fontra/client/tabler-icons/eye-closed.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye-closed" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M21 9c-2.4 2.667 -5.4 4 -9 4c-3.6 0 -6.6 -1.333 -9 -4" />
+  <path d="M3 15l2.5 -3.8" />
+  <path d="M21 14.976l-2.492 -3.776" />
+  <path d="M9 17l.5 -4" />
+  <path d="M15 17l-.5 -4" />
+</svg>
diff --git a/src/fontra/client/tabler-icons/eye.svg b/src/fontra/client/tabler-icons/eye.svg
new file mode 100644
index 000000000..7712a774d
--- /dev/null
+++ b/src/fontra/client/tabler-icons/eye.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+  <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
+</svg>
diff --git a/src/fontra/views/editor/panel-designspace-navigation.js b/src/fontra/views/editor/panel-designspace-navigation.js
index 129489be4..1f88604ec 100644
--- a/src/fontra/views/editor/panel-designspace-navigation.js
+++ b/src/fontra/views/editor/panel-designspace-navigation.js
@@ -21,6 +21,8 @@ import {
 import { showMenu } from "/web-components/menu-panel.js";
 import { dialogSetup } from "/web-components/modal-dialog.js";
 import { IconButton } from "/web-components/icon-button.js";
+import { InlineSVG } from "/web-components/inline-svg.js";
+
 import { NumberFormatter } from "/web-components/ui-list.js";
 import Panel from "./panel.js";
 
@@ -174,14 +176,14 @@ export default class DesignspaceNavigationPanel extends Panel {
       {
         title: "on",
         key: "active",
-        cellFactory: checkboxListCell,
+        cellFactory: circleDotListCell,
         width: "2em",
       },
       { key: "name", title: "Source name", width: "12em" },
       {
         title: "bg",
         key: "visible",
-        cellFactory: checkboxListCell,
+        cellFactory: eyeOnOffListCell,
         width: "2em",
       },
     ];
@@ -313,6 +315,7 @@ export default class DesignspaceNavigationPanel extends Panel {
           delete backgroundLayers[layerName];
         }
         this.sceneController.backgroundLayers = backgroundLayers;
+        this._updateSources();
       });
       sourceController.addKeyListener("status", async (event) => {
         await this.sceneController.editGlyphAndRecordChanges((glyph) => {
@@ -864,6 +867,45 @@ function suggestedSourceNameFromLocation(location) {
   );
 }
 
+function circleDotListCell(item, colDesc) {
+  const value = item[colDesc.key];
+  return html.div(
+    {
+      style: "width: 1.2em; height: 1.2em;",
+      ondblclick: (event) => {
+        item[colDesc.key] = !item[colDesc.key];
+        event.stopImmediatePropagation();
+      },
+    },
+    [
+      html.createDomElement("inline-svg", {
+        src: value ? "/tabler-icons/circle-dot.svg" : "/tabler-icons/circle-dotted.svg",
+      }),
+    ]
+  );
+}
+
+function eyeOnOffListCell(item, colDesc) {
+  const value = item[colDesc.key];
+  return html.div(
+    {
+      style: "width: 1.2em; height: 1.2em;",
+      onclick: (event) => {
+        item[colDesc.key] = !item[colDesc.key];
+        event.stopImmediatePropagation();
+      },
+      ondblclick: (event) => {
+        event.stopImmediatePropagation();
+      },
+    },
+    [
+      html.createDomElement("inline-svg", {
+        src: value ? "/tabler-icons/eye.svg" : "/tabler-icons/eye-closed.svg",
+      }),
+    ]
+  );
+}
+
 function checkboxListCell(item, colDesc) {
   const value = item[colDesc.key];
   return html.input({