diff --git a/src/components/viewport-demo/viewport-demo.styles.ts b/src/components/viewport-demo/viewport-demo.styles.ts
index b983cdae0..a5cba15b5 100644
--- a/src/components/viewport-demo/viewport-demo.styles.ts
+++ b/src/components/viewport-demo/viewport-demo.styles.ts
@@ -85,6 +85,7 @@ export default css`
     }
 
     wa-icon {
+      display: none;
       vertical-align: -0.1em;
       font-size: 85%;
       color: var(--wa-color-gray-70);
@@ -108,15 +109,27 @@ export default css`
       color: var(--wa-color-text-quiet);
       opacity: 80%;
     }
-  }
 
-  [part~='zoom-in'],
-  [part~='zoom-in']::part(base) {
-    cursor: zoom-in;
-  }
+    [part~='zoom-in'],
+    [part~='zoom-in']::part(base) {
+      cursor: zoom-in;
+    }
 
-  [part~='zoom-out'],
-  [part~='zoom-out']::part(base) {
-    cursor: zoom-out;
+    [part~='zoom-out'],
+    [part~='zoom-out']::part(base) {
+      cursor: zoom-out;
+    }
+
+    /* Quick hack to disable zooming in Firefox and Safari */
+    @supports not (interpolate-size: allow-keywords) {
+      [part~='zoom-in'],
+      [part~='zoom-out'] {
+        display: none;
+      }
+
+      wa-icon {
+        display: inline;
+      }
+    }
   }
 `;
diff --git a/src/components/viewport-demo/viewport-demo.ts b/src/components/viewport-demo/viewport-demo.ts
index 5e62c0f60..7f49f93e4 100644
--- a/src/components/viewport-demo/viewport-demo.ts
+++ b/src/components/viewport-demo/viewport-demo.ts
@@ -299,7 +299,10 @@ export default class WaViewportDemo extends WebAwesomeElement {
               part="zoom-out button"
               >-</wa-icon-button
             >
-            <span class="zoom-level"> ${Math.round(this.computedZoom * 100)}%</span>
+            <span class="zoom-level">
+              <wa-icon name="magnifying-glass-plus"></wa-icon>
+              ${Math.round(this.computedZoom * 100)}%
+            </span>
             <wa-icon-button
               name="square-plus"
               variant="regular"