diff --git a/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayViewHolder.kt b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayViewHolder.kt
index b2aba6fef..04c43b0cb 100644
--- a/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayViewHolder.kt
+++ b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayViewHolder.kt
@@ -96,10 +96,7 @@ class TabTrayViewHolder(
                     contentDescription =
                         context.getString(R.string.mozac_feature_media_notification_action_play)
                     setImageDrawable(
-                        AppCompatResources.getDrawable(
-                            context,
-                            R.drawable.tab_tray_play_with_background
-                        )
+                        AppCompatResources.getDrawable(context, R.drawable.media_state_play)
                     )
                 }
 
@@ -108,10 +105,7 @@ class TabTrayViewHolder(
                     contentDescription =
                         context.getString(R.string.mozac_feature_media_notification_action_pause)
                     setImageDrawable(
-                        AppCompatResources.getDrawable(
-                            context,
-                            R.drawable.tab_tray_pause_with_background
-                        )
+                        AppCompatResources.getDrawable(context, R.drawable.media_state_pause)
                     )
                 }
 
diff --git a/app/src/main/res/drawable/media_state_background.xml b/app/src/main/res/drawable/media_state_background.xml
new file mode 100644
index 000000000..1dd7ea7ee
--- /dev/null
+++ b/app/src/main/res/drawable/media_state_background.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+    <size
+        android:width="24dp"
+        android:height="24dp" />
+    <!-- Background color of the circle -->
+    <solid android:color="?tabTrayItemMediaBackground" />
+    <!-- Outer circle border -->
+    <stroke android:color="@color/tab_tray_item_media_stroke"
+        android:width="2dp"/>
+</shape>
diff --git a/app/src/main/res/drawable/media_state_pause.xml b/app/src/main/res/drawable/media_state_pause.xml
new file mode 100644
index 000000000..be9fe79fd
--- /dev/null
+++ b/app/src/main/res/drawable/media_state_pause.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/media_state_background" />
+    <item>
+        <vector
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <!-- Background color of the circle -->
+            <path
+                android:fillColor="@color/tab_tray_item_media_stroke"
+                android:pathData="M10.5,16.125c0,0.1 0,0.195 -0.1,0.265c-0,0 -0.166,0.1 -0.265,0.1l-2.25,0c-0,0 -0.195,0 -0.265,-0.1c-0,-0 -0.1,-0.166 -0.1,-0.265l0,-8.25c0,-0 0,-0.195 0.1,-0.265c0,0 0.166,-0.1 0.265,-0.1l2.25,0c0,0 0.195,0 0.265,0.11c0,0 0.1,0.166 0.1,0.265l0,8.25Zm6,0c0,0 0,0.195 -0.1,0.265c0,0 -0.166,0.1 -0.265,0.1l-2.25,0c0,0 -0.195,0 -0.265,-0.1c0,0 -0.1,-0.166 -0.1,-0.265l0,-8.25c0,-0.099 0,-0.195 0.1,-0.265c0,0 0.166,-0.1 0.265,-0.1l2.25,0c0,0 0.195,0 0.265,0.11c0,0 0.1,0.166 0.1,0.265l0,8.25Z"/>
+        </vector>
+    </item>
+</layer-list>
diff --git a/app/src/main/res/drawable/play_with_background.xml b/app/src/main/res/drawable/media_state_play.xml
similarity index 52%
rename from app/src/main/res/drawable/play_with_background.xml
rename to app/src/main/res/drawable/media_state_play.xml
index db7c29db6..183b83bdd 100644
--- a/app/src/main/res/drawable/play_with_background.xml
+++ b/app/src/main/res/drawable/media_state_play.xml
@@ -3,16 +3,7 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item>
-        <shape android:shape="oval">
-            <size
-                android:width="24dp"
-                android:height="24dp" />
-            <solid android:color="?above" />
-            <stroke android:color="?above"
-                android:width="2dp"/>
-        </shape>
-    </item>
+    <item android:drawable="@drawable/media_state_background" />
     <item>
         <vector
             android:width="24dp"
@@ -20,8 +11,8 @@
             android:viewportWidth="24"
             android:viewportHeight="24">
             <path
-                android:fillColor="?accent"
-                android:pathData="M12,22a10,10 0,1 1,10 -10,10 10,0 0,1 -10,10zM10,16.363l6,-3.5a1,1 0,0 0,0 -1.732l-6,-3.5A1,1 0,0 0,8.5 8.5v7a1,1 0,0 0,1.5 0.863z"/>
+                android:fillColor="@color/tab_tray_item_media_stroke"
+                android:pathData="M10,16.363l6,-3.5c0.2,-0.12 0.36,-0.3 0.44,-0.524c0.1,-0.2 0.1,-0.46 0,-0.684c-0.1,-0.22 -0.236,-0.4 -0.44,-0.524l-6,-3.5c-0.2,-0.12 -0.44,-0.16 -0.675,-0.12c-0.23,0.04 -0.44,0.163 -0.6,0.344c-0.15,0.2 -0.234,0.4 -0.233,0.644l0,7c0,0.235 0.084,0.46 0.235,0.641c0.15,0.2 0.36,0.3 0.59,0.34c0.23,0.04 0.5,-0 0.673,-0.1Z"/>
         </vector>
     </item>
 </layer-list>
diff --git a/app/src/main/res/drawable/pause_with_background.xml b/app/src/main/res/drawable/pause_with_background.xml
deleted file mode 100644
index 3df510e23..000000000
--- a/app/src/main/res/drawable/pause_with_background.xml
+++ /dev/null
@@ -1,27 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item>
-        <shape android:shape="oval">
-            <size
-                android:width="24dp"
-                android:height="24dp" />
-            <solid android:color="?above" />
-            <stroke android:color="?above"
-                android:width="2dp"/>
-        </shape>
-    </item>
-    <item>
-        <vector
-            android:width="24dp"
-            android:height="24dp"
-            android:viewportWidth="24"
-            android:viewportHeight="24">
-            <path
-                android:fillColor="?accent"
-                android:pathData="M12,2a10,10 0,1 0,10 10A10,10 0,0 0,12 2zM10.5,16.125a0.375,0.375 0,0 1,-0.375 0.375h-2.25A0.375,0.375 0,0 1,7.5 16.125v-8.25A0.375,0.375 0,0 1,7.875 7.5h2.25A0.375,0.375 0,0 1,10.5 7.875zM16.5,16.125a0.375,0.375 0,0 1,-0.375 0.375h-2.25a0.375,0.375 0,0 1,-0.375 -0.375v-8.25A0.375,0.375 0,0 1,13.875 7.5h2.25A0.375,0.375 0,0 1,16.5 7.875z"/>
-        </vector>
-    </item>
-</layer-list>
diff --git a/app/src/main/res/drawable/tab_tray_pause_with_background.xml b/app/src/main/res/drawable/tab_tray_pause_with_background.xml
deleted file mode 100644
index 337bf611d..000000000
--- a/app/src/main/res/drawable/tab_tray_pause_with_background.xml
+++ /dev/null
@@ -1,30 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item>
-        <shape android:shape="oval">
-            <size
-                android:width="24dp"
-                android:height="24dp" />
-            <!-- Vertical pause lines -->
-            <solid android:color="@color/tab_tray_item_media_stroke" />
-            <!-- Outer circle border -->
-            <stroke android:color="@color/tab_tray_item_media_stroke"
-                android:width="2dp"/>
-        </shape>
-    </item>
-    <item>
-        <vector
-            android:width="24dp"
-            android:height="24dp"
-            android:viewportWidth="24"
-            android:viewportHeight="24">
-            <!-- Background color of the circle -->
-            <path
-                android:fillColor="?tabTrayItemMediaBackground"
-                android:pathData="M12,2a10,10 0,1 0,10 10A10,10 0,0 0,12 2zM10.5,16.125a0.375,0.375 0,0 1,-0.375 0.375h-2.25A0.375,0.375 0,0 1,7.5 16.125v-8.25A0.375,0.375 0,0 1,7.875 7.5h2.25A0.375,0.375 0,0 1,10.5 7.875zM16.5,16.125a0.375,0.375 0,0 1,-0.375 0.375h-2.25a0.375,0.375 0,0 1,-0.375 -0.375v-8.25A0.375,0.375 0,0 1,13.875 7.5h2.25A0.375,0.375 0,0 1,16.5 7.875z"/>
-        </vector>
-    </item>
-</layer-list>
diff --git a/app/src/main/res/drawable/tab_tray_play_with_background.xml b/app/src/main/res/drawable/tab_tray_play_with_background.xml
deleted file mode 100644
index 3694d4c3c..000000000
--- a/app/src/main/res/drawable/tab_tray_play_with_background.xml
+++ /dev/null
@@ -1,30 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item>
-        <shape android:shape="oval">
-            <size
-                android:width="24dp"
-                android:height="24dp" />
-            <!-- Vertical pause lines -->
-            <solid android:color="@color/tab_tray_item_media_stroke" />
-            <!-- Outer circle border -->
-            <stroke android:color="@color/tab_tray_item_media_stroke"
-                android:width="2dp"/>
-        </shape>
-    </item>
-    <item>
-        <vector
-            android:width="24dp"
-            android:height="24dp"
-            android:viewportWidth="24"
-            android:viewportHeight="24">
-            <!-- Background color of the circle -->
-            <path
-                android:fillColor="?tabTrayItemMediaBackground"
-                android:pathData="M12,22a10,10 0,1 1,10 -10,10 10,0 0,1 -10,10zM10,16.363l6,-3.5a1,1 0,0 0,0 -1.732l-6,-3.5A1,1 0,0 0,8.5 8.5v7a1,1 0,0 0,1.5 0.863z"/>
-        </vector>
-    </item>
-</layer-list>
diff --git a/app/src/main/res/layout/tab_list_row.xml b/app/src/main/res/layout/tab_list_row.xml
index 47b930b01..530278e5e 100644
--- a/app/src/main/res/layout/tab_list_row.xml
+++ b/app/src/main/res/layout/tab_list_row.xml
@@ -48,7 +48,7 @@
             app:layout_constraintCircleRadius="28dp"
             app:layout_constraintEnd_toEndOf="@id/favicon_image"
             app:layout_constraintTop_toTopOf="@id/favicon_image"
-            app:srcCompat="@drawable/pause_with_background" />
+            app:srcCompat="@drawable/media_state_pause" />
 
         <TextView
             android:id="@+id/hostname"
diff --git a/app/src/main/res/layout/tab_tray_item.xml b/app/src/main/res/layout/tab_tray_item.xml
index b3d9d3ddf..80a2c9b7d 100644
--- a/app/src/main/res/layout/tab_tray_item.xml
+++ b/app/src/main/res/layout/tab_tray_item.xml
@@ -23,7 +23,7 @@
         android:visibility="gone"
         app:layout_constraintStart_toStartOf="@id/mozac_browser_tabstray_card"
         app:layout_constraintTop_toTopOf="parent"
-        app:srcCompat="@drawable/play_with_background" />
+        app:srcCompat="@drawable/media_state_play" />
 
     <androidx.cardview.widget.CardView
         android:id="@+id/mozac_browser_tabstray_card"