diff --git a/src/c3nav/site/static/site/css/c3nav.scss b/src/c3nav/site/static/site/css/c3nav.scss
index 855fa21f..c4fb8d46 100644
--- a/src/c3nav/site/static/site/css/c3nav.scss
+++ b/src/c3nav/site/static/site/css/c3nav.scss
@@ -1574,7 +1574,10 @@ blink {
         line-height: 26px;
         text-align: center;
         &::before {
-            content: '🔑';
+            font-family: 'Material Symbols Outlined';
+            content: 'legend_toggle';
+            font-size: 26px;
+            line-height: 26px;
         }
     }
 
diff --git a/src/c3nav/site/static/site/js/c3nav.js b/src/c3nav/site/static/site/js/c3nav.js
index 8e49846e..7bc29552 100644
--- a/src/c3nav/site/static/site/js/c3nav.js
+++ b/src/c3nav/site/static/site/js/c3nav.js
@@ -2468,9 +2468,9 @@ KeyControl = L.Control.extend({
         this._container.classList.toggle('leaflet-control-key-expanded', pinned);
         this._content = L.DomUtil.create('div', 'content');
         const collapsed = L.DomUtil.create('div', 'collapsed-toggle leaflet-control-key-toggle');
-        this._pin = L.DomUtil.create('div', 'pin-toggle');
+        this._pin = L.DomUtil.create('div', 'pin-toggle material-symbols');
         this._pin.classList.toggle('active', pinned);
-        this._pin.innerText = '🖈';
+        this._pin.innerText = 'push_pin';
         this._container.append(this._pin, this._content, collapsed);
         this._expanded = pinned;
         this._pinned = pinned;