diff --git a/src/components/Badge/MediaBadge.tsx b/src/components/Badge/MediaBadge.tsx
new file mode 100644
index 0000000000..52368cc127
--- /dev/null
+++ b/src/components/Badge/MediaBadge.tsx
@@ -0,0 +1,30 @@
+import { IconMicrophoneSolid, IconVideoFill } from '../Icons';
+import React, { type ComponentType } from 'react';
+import type { LocalAttachment } from 'stream-chat';
+import clsx from 'clsx';
+
+export type MediaBadgeVariant = 'video' | 'voice-recording' | string;
+
+export type MediaBadgeProps = {
+  attachment: LocalAttachment;
+  variant: 'video' | 'voice-recording' | string;
+};
+
+const MediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = {
+  video: IconVideoFill,
+  voiceRecording: IconMicrophoneSolid,
+};
+
+export const MediaBadge = ({ attachment, variant }: MediaBadgeProps) => {
+  const Icon = MediaBadgeVariantToIcon[variant];
+  return (
+    <div
+      className={clsx('str-chat__media-badge', {
+        [`str-chat__media-badge--${variant}`]: variant,
+      })}
+    >
+      {Icon && <Icon />}
+      {attachment.duration && <div>{attachment.duration}</div>}
+    </div>
+  );
+};
diff --git a/src/components/Badge/styling/MediaBadge.scss b/src/components/Badge/styling/MediaBadge.scss
new file mode 100644
index 0000000000..2829040485
--- /dev/null
+++ b/src/components/Badge/styling/MediaBadge.scss
@@ -0,0 +1,21 @@
+.str-chat__media-badge {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  position: absolute;
+  bottom: var(--spacing-xs);
+  inset-inline-start: var(--spacing-xs);
+  padding: var(--spacing-xxs) var(--spacing-xs);
+  border-radius: var(--radius-max);
+  background: var(--badge-bg-inverse);
+  color: var(--badge-text-on-inverse);
+  font: var(--str-chat__numeric-md-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .str-chat__icon {
+    width: var(--icon-size-xs);
+    height: var(--icon-size-xs);
+    fill: currentColor;
+  }
+}
diff --git a/src/components/Badge/styling/index.scss b/src/components/Badge/styling/index.scss
index 529a29758b..115e164434 100644
--- a/src/components/Badge/styling/index.scss
+++ b/src/components/Badge/styling/index.scss
@@ -1 +1,2 @@
 @use 'Badge';
+@use 'MediaBadge';
diff --git a/src/components/Icons/icons.tsx b/src/components/Icons/icons.tsx
index e77d0d4c3b..1722cd4061 100644
--- a/src/components/Icons/icons.tsx
+++ b/src/components/Icons/icons.tsx
@@ -633,6 +633,14 @@ export const IconVoice = createIcon(
   />,
 );
 
+export const IconMicrophoneSolid = createIcon(
+  'IconMicrophoneSolid',
+  <path
+    d='M6.25 10V5C6.25 4.00544 6.64509 3.05161 7.34835 2.34835C8.05161 1.64509 9.00544 1.25 10 1.25C10.9946 1.25 11.9484 1.64509 12.6517 2.34835C13.3549 3.05161 13.75 4.00544 13.75 5V10C13.75 10.9946 13.3549 11.9484 12.6517 12.6517C11.9484 13.3549 10.9946 13.75 10 13.75C9.00544 13.75 8.05161 13.3549 7.34835 12.6517C6.64509 11.9484 6.25 10.9946 6.25 10ZM16.25 10C16.25 9.83424 16.1842 9.67527 16.0669 9.55806C15.9497 9.44085 15.7908 9.375 15.625 9.375C15.4592 9.375 15.3003 9.44085 15.1831 9.55806C15.0658 9.67527 15 9.83424 15 10C15 11.3261 14.4732 12.5979 13.5355 13.5355C12.5979 14.4732 11.3261 15 10 15C8.67392 15 7.40215 14.4732 6.46447 13.5355C5.52678 12.5979 5 11.3261 5 10C5 9.83424 4.93415 9.67527 4.81694 9.55806C4.69973 9.44085 4.54076 9.375 4.375 9.375C4.20924 9.375 4.05027 9.44085 3.93306 9.55806C3.81585 9.67527 3.75 9.83424 3.75 10C3.7519 11.5489 4.32806 13.042 5.36707 14.1907C6.40607 15.3393 7.83409 16.062 9.375 16.2188V18.75C9.375 18.9158 9.44085 19.0747 9.55806 19.1919C9.67527 19.3092 9.83424 19.375 10 19.375C10.1658 19.375 10.3247 19.3092 10.4419 19.1919C10.5592 19.0747 10.625 18.9158 10.625 18.75V16.2188C12.1659 16.062 13.5939 15.3393 14.6329 14.1907C15.6719 13.042 16.2481 11.5489 16.25 10Z'
+    fill='currentColor'
+  />,
+);
+
 export const IconMute = createIcon(
   'IconMute',
   <path
diff --git a/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
index 923a955a00..788162fab7 100644
--- a/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
+++ b/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
@@ -14,11 +14,12 @@ import React, {
   useState,
 } from 'react';
 import clsx from 'clsx';
-import { IconExclamationMark, IconRetry, IconVideoFill } from '../../Icons';
+import { IconExclamationMark, IconRetry } from '../../Icons';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 import { Button } from '../../Button';
 import { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';
 import { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot';
+import { MediaBadge } from '../../Badge/MediaBadge';
 
 export type MediaAttachmentPreviewProps<CustomLocalMetadata = Record<string, unknown>> =
   UploadAttachmentPreviewProps<
@@ -99,10 +100,7 @@ export const MediaAttachmentPreview = ({
           {isVideoAttachment(attachment) &&
             !hasUploadError &&
             uploadState !== 'uploading' && (
-              <div className='str-chat__attachment-preview-media__video-indicator'>
-                <IconVideoFill />
-                {attachment.duration && <div>{attachment.duration}</div>}
-              </div>
+              <MediaBadge attachment={attachment} variant='video' />
             )}
 
           {hasFatalError && <IconExclamationMark />}
diff --git a/src/components/MessageComposer/styling/AttachmentPreview.scss b/src/components/MessageComposer/styling/AttachmentPreview.scss
index 5336cd7814..217f60addd 100644
--- a/src/components/MessageComposer/styling/AttachmentPreview.scss
+++ b/src/components/MessageComposer/styling/AttachmentPreview.scss
@@ -160,28 +160,6 @@
         object-fit: cover;
       }
     }
-
-    .str-chat__attachment-preview-media__video-indicator {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-xxs);
-      position: absolute;
-      bottom: var(--spacing-xs);
-      inset-inline-start: var(--spacing-xs);
-      padding: var(--spacing-xxs) var(--spacing-xs);
-      border-radius: var(--radius-max);
-      background: var(--badge-bg-inverse);
-      color: var(--badge-text-on-inverse);
-      font: var(--str-chat__numeric-md-text);
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      .str-chat__icon {
-        width: var(--icon-size-xs);
-        height: var(--icon-size-xs);
-        fill: currentColor;
-      }
-    }
   }
 
   .str-chat__attachment-preview-media__overlay {
diff --git a/src/components/VideoPlayer/styling/VideoThumbnail.scss b/src/components/VideoPlayer/styling/VideoThumbnail.scss
index 3efd17a6e4..c3594ab1f5 100644
--- a/src/components/VideoPlayer/styling/VideoThumbnail.scss
+++ b/src/components/VideoPlayer/styling/VideoThumbnail.scss
@@ -20,7 +20,7 @@
       height: $size;
       width: $size;
       border-radius: var(--radius-max);
-      background-color: var(--control-play-control-bg);
+      background-color: var(--control-play-button-bg);
       left: calc(50% - calc($size / 2));
       top: calc(50% - calc($size / 2));
 
@@ -29,7 +29,7 @@
         width: calc($size / 2);
 
         path {
-          fill: var(--control-play-control-icon);
+          fill: var(--control-play-button-icon);
         }
       }
     }
diff --git a/src/styling/variables-tokens.css b/src/styling/variables-tokens.css
index 21b2481e69..aa29e52710 100644
--- a/src/styling/variables-tokens.css
+++ b/src/styling/variables-tokens.css
@@ -568,6 +568,8 @@
   --badge-text: var(--text-primary);
   --badge-bg-default: #ffffff;
   --badge-text-on-accent: #ffffff;
+  --badge-text-on-inverse: #ffffff;
+  --badge-bg-inverse: var(--chrome-1000);
 
   /* ─── Control (remove, progress bar, toggle, playback, checkbox, play button, thumb, radio) ─── */
   --control-remove-control-bg: #1a1b25;