diff --git a/public/images/media.view.react.svg b/public/images/media.view.react.svg
new file mode 100644
index 0000000000..08af8811a9
--- /dev/null
+++ b/public/images/media.view.react.svg
@@ -0,0 +1,17 @@
+<svg width="25" height="38" viewBox="0 0 25 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_7279_22991)">
+<path d="M6 32L19 19L6 6" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_7279_22991" x="0.5" y="0.5" width="24" height="37" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0156863 0 0 0 0 0.0588235 0 0 0 0 0.105882 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7279_22991"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7279_22991" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/images/media.viewer.prev.react.svg b/public/images/media.viewer.prev.react.svg
new file mode 100644
index 0000000000..d9aee5ffb5
--- /dev/null
+++ b/public/images/media.viewer.prev.react.svg
@@ -0,0 +1,17 @@
+<svg width="25" height="38" viewBox="0 0 25 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_7279_2868)">
+<path d="M19 32L6 19L19 6" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_7279_2868" x="0.5" y="0.5" width="24" height="37" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0156863 0 0 0 0 0.0588235 0 0 0 0 0.105882 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7279_2868"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7279_2868" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/images/videoplayer.bgplay.react.svg b/public/images/videoplayer.bgplay.react.svg
new file mode 100644
index 0000000000..76616cfb3c
--- /dev/null
+++ b/public/images/videoplayer.bgplay.react.svg
@@ -0,0 +1,4 @@
+<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="80" height="60" rx="4" fill="black" fill-opacity="0.6"/>
+<path d="M28 47V12L56 29.5L28 47Z" fill="white"/>
+</svg>
diff --git a/public/images/videoplayer.exit.react.svg b/public/images/videoplayer.exit.react.svg
new file mode 100644
index 0000000000..00c724af9c
--- /dev/null
+++ b/public/images/videoplayer.exit.react.svg
@@ -0,0 +1,13 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2116_546364)">
+<path d="M22 32L20 32L20 28L16 28L16 26L22 26L22 32Z" fill="white"/>
+<path d="M26 32L28 32L28 28L32 28L32 26L26 26L26 32Z" fill="white"/>
+<path d="M26.0002 15.9999H28.0002V19.9999H32.0002V21.9999H26.0002V15.9999Z" fill="white"/>
+<path d="M22 16L20 16L20 20L16 20L16 22L22 22L22 16Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2116_546364">
+<rect width="16" height="16" fill="white" transform="translate(16 16)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/videoplayer.full.react.svg b/public/images/videoplayer.full.react.svg
new file mode 100644
index 0000000000..a63613f044
--- /dev/null
+++ b/public/images/videoplayer.full.react.svg
@@ -0,0 +1,13 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2116_546363)">
+<path d="M16 26H18V30H22V32H16V26Z" fill="white"/>
+<path d="M32 26H30V30H26V32H32V26Z" fill="white"/>
+<path d="M32 22H30V18H26V16H32V22Z" fill="white"/>
+<path d="M16 22H18V18H22V16H16V22Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2116_546363">
+<rect width="16" height="16" fill="white" transform="translate(16 16)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/videoplayer.mute.react.svg b/public/images/videoplayer.mute.react.svg
new file mode 100644
index 0000000000..8bb4b9a227
--- /dev/null
+++ b/public/images/videoplayer.mute.react.svg
@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2166_408727)">
+<path d="M2 7H5L9 2V18L5 13H2V7Z" fill="white"/>
+<path d="M17.5625 12.3609L11.6391 6.4375L10.4362 7.64041L16.3596 13.5638L17.5625 12.3609Z" fill="white"/>
+<path d="M10.4366 12.3609L16.36 6.4375L17.5629 7.64041L11.6395 13.5638L10.4366 12.3609Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2166_408727">
+<rect width="16" height="16" fill="white" transform="translate(2 2)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/videoplayer.play.react.svg b/public/images/videoplayer.play.react.svg
new file mode 100644
index 0000000000..4969816f93
--- /dev/null
+++ b/public/images/videoplayer.play.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 20V0L16 10L0 20Z" fill="white"/>
+</svg>
diff --git a/public/images/videoplayer.sound.react.svg b/public/images/videoplayer.sound.react.svg
new file mode 100644
index 0000000000..c179196e02
--- /dev/null
+++ b/public/images/videoplayer.sound.react.svg
@@ -0,0 +1,17 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2166_408714)">
+<path d="M0 5H3L7 0V16L3 11H0V5Z" fill="white"/>
+<mask id="mask0_2166_408714" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="8" y="0" width="13" height="16">
+<path d="M8 8L14 2.73828e-07L20.0391 8L14 16L8 8Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_2166_408714)">
+<circle cx="8.0293" cy="8.00293" r="7" stroke="white" stroke-width="2"/>
+<circle cx="8" cy="8" r="3" stroke="white" stroke-width="2"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_2166_408714">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/videoplayer.stop.react.svg b/public/images/videoplayer.stop.react.svg
new file mode 100644
index 0000000000..71647c6a19
--- /dev/null
+++ b/public/images/videoplayer.stop.react.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="16" y="16" width="5" height="16" fill="white"/>
+<rect x="27" y="16" width="5" height="16" fill="white"/>
+</svg>
diff --git a/public/images/viewer.react.next.svg b/public/images/viewer.react.next.svg
new file mode 100644
index 0000000000..bc85d66e39
--- /dev/null
+++ b/public/images/viewer.react.next.svg
@@ -0,0 +1,17 @@
+<svg width="25" height="38" viewBox="0 0 25 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_7279_16500)">
+<path d="M6 32L19 19L6 6" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_7279_16500" x="0.5" y="0.5" width="24" height="37" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0156863 0 0 0 0 0.0588235 0 0 0 0 0.105882 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7279_16500"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7279_16500" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/images/viewer.react.prev.svg b/public/images/viewer.react.prev.svg
new file mode 100644
index 0000000000..d9aee5ffb5
--- /dev/null
+++ b/public/images/viewer.react.prev.svg
@@ -0,0 +1,17 @@
+<svg width="25" height="38" viewBox="0 0 25 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_7279_2868)">
+<path d="M19 32L6 19L19 6" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_7279_2868" x="0.5" y="0.5" width="24" height="37" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0156863 0 0 0 0 0.0588235 0 0 0 0 0.105882 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7279_2868"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7279_2868" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/images/viewer.separator.react.svg b/public/images/viewer.separator.react.svg
new file mode 100644
index 0000000000..81cb3a57ff
--- /dev/null
+++ b/public/images/viewer.separator.react.svg
@@ -0,0 +1,3 @@
+<svg width="1" height="16" viewBox="0 0 1 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.00012207" width="1" height="16" fill="#A3A9AE"/>
+</svg>