From 1efe02a3466146397010ab6f0fc457299c009f2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Mon, 21 Sep 2026 20:06:54 -0400
Subject: [PATCH] feat(studio): draw the audio meters toggle as a level meter
 (#4254)

---
 .../studio/src/components/TimelineToolbar.tsx    |  4 ++--
 .../src/components/icons/AudioMetersIcon.tsx     | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 packages/studio/src/components/icons/AudioMetersIcon.tsx

diff --git a/packages/studio/src/components/TimelineToolbar.tsx b/packages/studio/src/components/TimelineToolbar.tsx
index a6d4400007..869b8c11ac 100644
--- a/packages/studio/src/components/TimelineToolbar.tsx
+++ b/packages/studio/src/components/TimelineToolbar.tsx
@@ -4,7 +4,6 @@ import {
   Magnet,
   MagnifyingGlassMinus,
   MagnifyingGlassPlus,
-  SpeakerHigh,
   Waves,
 } from "@phosphor-icons/react";
 import {
@@ -23,6 +22,7 @@ import {
 import { useTimelineZoom } from "../player/components/useTimelineZoom";
 import { usePlayerStore, type TimelineElement } from "../player";
 import { Tooltip } from "./ui";
+import { AudioMetersIcon } from "./icons/AudioMetersIcon";
 import { flatActive, flatBtn, flatDisabled, flatIdle } from "./timelineToolbarStyles";
 import { TimelineHistoryButtons } from "./TimelineHistoryButtons";
 import { Scissors } from "../icons/SystemIcons";
@@ -264,7 +264,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
                 aria-pressed={audioMetersVisible}
                 className={audioMetersVisible ? flatActive : flatIdle}
               >
-                <SpeakerHigh size={16} weight="bold" aria-hidden="true" />
+                <AudioMetersIcon size={16} />
               </button>
             </Tooltip>
           )}
diff --git a/packages/studio/src/components/icons/AudioMetersIcon.tsx b/packages/studio/src/components/icons/AudioMetersIcon.tsx
new file mode 100644
index 0000000000..6b2e14a28c
--- /dev/null
+++ b/packages/studio/src/components/icons/AudioMetersIcon.tsx
@@ -0,0 +1,16 @@
+export function AudioMetersIcon({ size = 16 }: { size?: number | string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <path d="M2.5 13h2m-2-3h2M7 13h2m-2-3h2m-2-3h2m-2-3h2M11.5 13h2m-2-3h2m-2-3h2" />
+    </svg>
+  );
+}