diff --git a/web/src/components/MultiSelect.jsx b/web/src/components/MultiSelect.jsx
index c4ef22082..a04fc7778 100644
--- a/web/src/components/MultiSelect.jsx
+++ b/web/src/components/MultiSelect.jsx
@@ -5,7 +5,7 @@ import { ArrowDropdown } from '../icons/ArrowDropdown';
 import Heading from './Heading';
 import Button from './Button';
 import CameraIcon from '../icons/Camera';
-import { AudioIcon } from '../icons/Audio';
+import SpeakerIcon from '../icons/Speaker';
 import useSWR from 'swr';
 
 export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) {
@@ -61,7 +61,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
                   className="max-h-[35px] mx-2"
                   onClick={() => onSelectSingle(item)}
                 >
-                  { (title === "Labels" && config.audio.listen.includes(item)) ? ( <AudioIcon /> ) : ( <CameraIcon /> ) }
+                  { (title === "Labels" && config.audio.listen.includes(item)) ? ( <SpeakerIcon /> ) : ( <CameraIcon /> ) }
                   
                 </Button>
               </div>
diff --git a/web/src/icons/Audio.jsx b/web/src/icons/Audio.jsx
index 4ddc2a622..4e178ccf0 100644
--- a/web/src/icons/Audio.jsx
+++ b/web/src/icons/Audio.jsx
@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { memo } from 'preact/compat';
 
-export function Snapshot({ className = 'h-6 w-6', stroke = 'currentColor', onClick = () => {} }) {
+export function Audio({ className = 'h-6 w-6', stroke = 'currentColor', onClick = () => {} }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -33,19 +33,4 @@ export function Snapshot({ className = 'h-6 w-6', stroke = 'currentColor', onCli
   );
 }
 
-export function AudioIcon({
-  className = 'h-7 w-7',
-  stroke = 'currentColor',
-  onClick = () => {},
-}) {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"
-      
-      stroke={stroke}
-      onClick={onClick}
-      className={className}>
-      <path stroke-linecap="round" stroke-linejoin="round" strokeWidth="2" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"/>
-    </svg>
-  );
-}
-export default memo(Snapshot);
+export default memo(Audio);
diff --git a/web/src/icons/Speaker.jsx b/web/src/icons/Speaker.jsx
new file mode 100644
index 000000000..e775e8365
--- /dev/null
+++ b/web/src/icons/Speaker.jsx
@@ -0,0 +1,20 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+
+export function Speaker({
+  className = 'h-7 w-7',
+  stroke = 'currentColor',
+  onClick = () => {},
+}) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"
+      
+      stroke={stroke}
+      onClick={onClick}
+      className={className}>
+      <path stroke-linecap="round" stroke-linejoin="round" strokeWidth="2" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"/>
+    </svg>
+  );
+}
+export default memo(Speaker);