diff --git a/source/index.html b/source/index.html
index a8bea97219..ccbead5492 100644
--- a/source/index.html
+++ b/source/index.html
@@ -232,14 +232,15 @@
 .sidebar-find-query { width: 100vw; background: none; font-family: inherit; font-size: 13px; padding: 8px 8px 8px 8px; border: 0; outline: 0; }
 .sidebar-find-toggle { margin-left: auto; margin-right: 2px; width: 16px; height: 16px; cursor: pointer; }
 .sidebar-find-toggle input[type="checkbox"] { display: none; }
-.sidebar-find-toggle input[type="checkbox"]:not(:checked) + svg { fill: #ccc; stroke: #ccc; }
-.sidebar-find-toggle input[type="checkbox"]:checked + svg { fill: #555; stroke: #555; }
-.sidebar-find-toggle-icon { stroke: #555; fill: #555; width: 16px; height: 16px; }
+.sidebar-find-toggle input[type="checkbox"]:not(:checked) + img { /* #ccc */ filter: invert(89%) sepia(2%) saturate(1448%) hue-rotate(193deg) brightness(122%) contrast(60%); }
+.sidebar-find-toggle input[type="checkbox"]:checked + img { /* #555 */ filter: invert(33%) sepia(0%) saturate(0%) hue-rotate(167deg) brightness(94%) contrast(86%); }
 .sidebar-find-content { flex-grow: 1; padding: 0px 20px 20px 20px; padding-right: 20px; overflow-y: auto; list-style-type: none; overflow-y: auto; margin: 0; }
-.sidebar-find-content li { color: #666; height: 22px; padding: 0 12px 0 12px; outline: 0; white-space: nowrap; border-radius: 3px; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
+.sidebar-find-content li { color: #666; height: 22px; padding: 0 12px 0 12px; outline: 0; white-space: nowrap; border-radius: 3px; user-select: none; -webkit-user-select: none; -moz-user-select: none; display: flex; align-items: center; }
 .sidebar-find-content li:hover { background: #e5e5e5; color: #000; }
-.sidebar-find-content li>span { font-size: 13px; line-height: 22px; padding-left: 2px; pointer-events: none; }
-.sidebar-find-content-icon { stroke: #555; fill: #555; float: left; width: 16px; height: 16px; margin: 3px; }
+.sidebar-find-content-icon {
+      /* #555 */ filter: invert(28%) sepia(0%) saturate(0%) hue-rotate(167deg) brightness(100%) contrast(75%);
+      float: left; width: 16px; height: 16px; margin: 3px; contain: strict; pointer-events: none;
+ }
 .sidebar-documentation { flex-grow: 1; padding: 0px 20px 20px 20px; overflow-y: auto; font-size: 13px; line-height: 1.5; margin: 0; }
 .sidebar-documentation h1 { font-weight: bold; font-size: 13px; line-height: 1.25; border-bottom: 1px solid #e8e8e8; padding-bottom: 0.3em; margin-top: 0; margin-bottom: 16px; }
 .sidebar-documentation h2 { font-weight: bold; font-size: 13px; line-height: 1.25; margin-top: 20px; margin-bottom: 16px; text-transform: uppercase; border: 0; }
@@ -273,11 +274,11 @@
     .sidebar-documentation code { background-color: #1e1e1e; }
     .sidebar-documentation pre { background-color: #1e1e1e; }
     .sidebar-find-search { background: #383838; color: #dfdfdf; border-color: #424242; }
-    .sidebar-find-toggle input[type="checkbox"]:not(:checked) + svg { fill: #555; stroke: #555; }
-    .sidebar-find-toggle input[type="checkbox"]:checked + svg { fill: #aaa; stroke: #aaa; }
+    .sidebar-find-toggle input[type="checkbox"]:not(:checked) + img { /* #555 */ filter: invert(33%) sepia(0%) saturate(0%) hue-rotate(167deg) brightness(94%) contrast(86%); }
+    .sidebar-find-toggle input[type="checkbox"]:checked + img { /* #aaa */ filter: invert(72%) sepia(0%) saturate(17%) hue-rotate(142deg) brightness(94%) contrast(92%); }
     .sidebar-find-content li { color: #aaaaaa; }
     .sidebar-find-content li:hover { background: #383838; color: #dfdfdf; }
-    .sidebar-find-content-icon { stroke: #888888; fill: #888888; }
+    .sidebar-find-content-icon { /* #888 */ filter: invert(51%) sepia(71%) saturate(0%) hue-rotate(166deg) brightness(92%) contrast(90%); }
     .sidebar-item-value-expander { color: #888; }
     .sidebar-item-value-expander:hover { color: #e5e5e5; }
     .sidebar-item-value-button { color: #888; }
@@ -299,23 +300,7 @@ <h1 id="sidebar-title" class="sidebar-title"></h1>
     <a id="sidebar-closebutton" class="sidebar-closebutton" href="javascript:void(0)" draggable="false">&times;</a>
     <div id="sidebar-content" class="sidebar-content"></div>
     <div style="display:none">
-        <!-- Spaces must not be written between tags to prevent text nodes. -->
-        <ol id="sidebar-find-content-template"><li><svg class="sidebar-find-content-icon" viewBox="0 0 20 20">
-                    <circle cx="10" cy="10" r="6" stroke-width="2" fill="none"/>
-                </svg><span></span></li><li><svg class="sidebar-find-content-icon" viewBox="0 0 20 20">
-                    <line x1="4" y1="10" x2="15" y2="10" stroke-width="2" />
-                    <polyline points="11,6 15,10 11,14" stroke-width="2" />
-                </svg><span></span></li><li><svg class="sidebar-find-content-icon" viewBox="0 0 20 20">
-                    <circle cx="5" cy="5" r="1" />
-                    <circle cx="10" cy="5" r="1" />
-                    <circle cx="15" cy="5" r="1" />
-                    <circle cx="5" cy="10" r="1" />
-                    <circle cx="10" cy="10" r="1" />
-                    <circle cx="15" cy="10" r="1" />
-                    <circle cx="5" cy="15" r="1" />
-                    <circle cx="10" cy="15" r="1" />
-                    <circle cx="15" cy="15" r="1" />
-                </svg><span></span></li></ol>
+        <ol id="sidebar-find-content-template"><li><img class="sidebar-find-content-icon" src="sidebar-icon-node.svg">  </li><li><img class="sidebar-find-content-icon" src="sidebar-icon-connection.svg">  </li><li><img class="sidebar-find-content-icon" src="sidebar-icon-weight.svg">  </li></ol>
     </div>
 </div>
 <div id="toolbar" class="toolbar">
diff --git a/source/sidebar-icon-connection.svg b/source/sidebar-icon-connection.svg
new file mode 100644
index 0000000000..d69e14c234
--- /dev/null
+++ b/source/sidebar-icon-connection.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="stroke:black;">
+    <line x1="4" y1="10" x2="12" y2="10" stroke-width="2" />
+    <polyline points="11,6 15,10 11,14" stroke-width="2" />
+</svg>
diff --git a/source/sidebar-icon-node.svg b/source/sidebar-icon-node.svg
new file mode 100644
index 0000000000..a74954089d
--- /dev/null
+++ b/source/sidebar-icon-node.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <circle cx="10" cy="10" r="6" stroke-width="2.0" fill="none" style="stroke:black;"/>
+</svg>
diff --git a/source/sidebar-icon-weight.svg b/source/sidebar-icon-weight.svg
new file mode 100644
index 0000000000..889b61f05a
--- /dev/null
+++ b/source/sidebar-icon-weight.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <circle cx="5" cy="5" r="1.4" />
+    <circle cx="10" cy="5" r="1.4" />
+    <circle cx="15" cy="5" r="1.4" />
+    <circle cx="5" cy="10" r="1.4" />
+    <circle cx="10" cy="10" r="1.4" />
+    <circle cx="15" cy="10" r="1.4" />
+    <circle cx="5" cy="15" r="1.4" />
+    <circle cx="10" cy="15" r="1.4" />
+    <circle cx="15" cy="15" r="1.4" />
+</svg>
diff --git a/source/view.js b/source/view.js
index d1f42a1cec..6411de7477 100644
--- a/source/view.js
+++ b/source/view.js
@@ -3051,7 +3051,7 @@ view.ValueView = class extends view.Expander {
                 const element = this.createElement('div', 'sidebar-item-value-button');
                 element.classList.add('sidebar-item-value-button-tool');
                 element.setAttribute('title', 'Show Tensor');
-                element.innerHTML = `<svg class='sidebar-find-content-icon'><use href="#sidebar-icon-weight"></use></svg>`;
+                element.innerHTML = `<img class='sidebar-find-content-icon' src='sidebar-icon-weight.svg'>`;
                 element.addEventListener('pointerenter', () => this.emit('focus', this._value));
                 element.addEventListener('pointerleave', () => this.emit('blur', this._value));
                 element.style.cursor = 'pointer';
@@ -3202,7 +3202,7 @@ view.TensorView = class extends view.Expander {
             this.enable();
             this._button = this.createElement('div', 'sidebar-item-value-button');
             this._button.setAttribute('style', 'float: left;');
-            this._button.innerHTML = `<svg class='sidebar-find-content-icon'><use href="#sidebar-icon-weight"></use></svg>`;
+            this._button.innerHTML = `<img class='sidebar-find-content-icon' src='sidebar-icon-weight.svg'>`;
             this._button.addEventListener('click', () => this.toggle());
             this.control(this._button);
             const line = this.createElement('div', 'sidebar-item-value-line');
@@ -3897,7 +3897,7 @@ view.FindSidebar = class extends view.Control {
 
     _add(value, content, icon) {
         const element = this._lis[icon].cloneNode(true);
-        element.lastChild.innerHTML = content;
+        element.lastChild.nodeValue = content;
         this._table.set(element, value);
         this._content.appendChild(element);
     }