diff --git a/packages/SystemUI/res/layout/media_smartspace_recommendations.xml b/packages/SystemUI/res/layout/media_smartspace_recommendations.xml
index 8c54e2c1cec4f..9e67258f68daa 100644
--- a/packages/SystemUI/res/layout/media_smartspace_recommendations.xml
+++ b/packages/SystemUI/res/layout/media_smartspace_recommendations.xml
@@ -75,7 +75,7 @@
         android:id="@+id/media_logo1"
         android:layout_width="@dimen/qs_media_icon_size"
         android:layout_height="@dimen/qs_media_icon_size"
-        style="@style/MediaPlayer.AppIcon" />
+        style="@style/MediaPlayer.AppIcon.Recommendation" />
 
     <ImageView
         android:id="@+id/media_cover2"
@@ -91,7 +91,7 @@
         android:id="@+id/media_logo2"
         android:layout_width="@dimen/qs_media_icon_size"
         android:layout_height="@dimen/qs_media_icon_size"
-        style="@style/MediaPlayer.AppIcon" />
+        style="@style/MediaPlayer.AppIcon.Recommendation" />
 
     <ImageView
         android:id="@+id/media_cover3"
@@ -107,7 +107,7 @@
         android:id="@+id/media_logo3"
         android:layout_width="@dimen/qs_media_icon_size"
         android:layout_height="@dimen/qs_media_icon_size"
-        style="@style/MediaPlayer.AppIcon" />
+        style="@style/MediaPlayer.AppIcon.Recommendation" />
 
     <ImageView
         android:id="@+id/media_cover4"
@@ -123,7 +123,7 @@
         android:id="@+id/media_logo4"
         android:layout_width="@dimen/qs_media_icon_size"
         android:layout_height="@dimen/qs_media_icon_size"
-        style="@style/MediaPlayer.AppIcon" />
+        style="@style/MediaPlayer.AppIcon.Recommendation" />
 
     <ImageView
         android:id="@+id/media_cover5"
@@ -139,7 +139,7 @@
         android:id="@+id/media_logo5"
         android:layout_width="@dimen/qs_media_icon_size"
         android:layout_height="@dimen/qs_media_icon_size"
-        style="@style/MediaPlayer.AppIcon" />
+        style="@style/MediaPlayer.AppIcon.Recommendation" />
 
     <ImageView
         android:id="@+id/media_cover6"
@@ -155,7 +155,7 @@
         android:id="@+id/media_logo6"
         android:layout_width="@dimen/qs_media_icon_size"
         android:layout_height="@dimen/qs_media_icon_size"
-        style="@style/MediaPlayer.AppIcon" />
+        style="@style/MediaPlayer.AppIcon.Recommendation" />
 
     <!-- Long press menu -->
     <TextView
diff --git a/packages/SystemUI/res/values/styles.xml b/packages/SystemUI/res/values/styles.xml
index 84a011c92cabf..c82f2279c3d68 100644
--- a/packages/SystemUI/res/values/styles.xml
+++ b/packages/SystemUI/res/values/styles.xml
@@ -660,9 +660,12 @@
         <item name="android:tint">?android:attr/colorAccent</item>
     </style>
 
+    <style name="MediaPlayer.AppIcon.Recommendation" parent="MediaPlayer.AppIcon">
+        <item name="android:tint">@color/transparent</item>
+    </style>
+
     <style name="MediaPlayer.Album">
         <item name="android:backgroundTint">@color/media_player_album_bg</item>
-
     </style>
 
     <!-- Used to style charging animation AVD animation -->
diff --git a/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java b/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
index b3ebed1fe6a9f..b669885955bdf 100644
--- a/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
+++ b/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
@@ -25,7 +25,8 @@ import android.content.Context;
 import android.content.Intent;
 import android.content.pm.PackageManager;
 import android.content.res.ColorStateList;
-import android.graphics.PorterDuff;
+import android.graphics.ColorMatrix;
+import android.graphics.ColorMatrixColorFilter;
 import android.graphics.Rect;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.Icon;
@@ -515,8 +516,9 @@ public class MediaControlPanel {
                 // Get the logo from app's package name when applicable.
                 String packageName = extras.getString(EXTRAS_MEDIA_SOURCE_PACKAGE_NAME);
                 try {
-                    icon = mContext.getPackageManager().getApplicationIcon(
+                    Drawable drawable = mContext.getPackageManager().getApplicationIcon(
                             packageName);
+                    icon = convertToGrayscale(drawable);
                 } catch (PackageManager.NameNotFoundException e) {
                     Log.w(TAG, "No media source icon can be fetched via package name", e);
                 }
@@ -528,8 +530,6 @@ public class MediaControlPanel {
             // Set up media source app's logo.
             ImageView mediaSourceLogoImageView = mediaLogoItems.get(uiComponentIndex);
             mediaSourceLogoImageView.setImageDrawable(icon);
-            // TODO(b/186699032): Tint the app logo using the accent color.
-            mediaSourceLogoImageView.setColorFilter(backgroundColor, PorterDuff.Mode.XOR);
 
             // Set up media item cover.
             ImageView mediaCoverImageView = mediaCoverItems.get(uiComponentIndex);
@@ -651,6 +651,15 @@ public class MediaControlPanel {
         return (state.getState() == PlaybackState.STATE_PLAYING);
     }
 
+    /** Convert the pass-in source drawable to a grayscale one. */
+    private Drawable convertToGrayscale(Drawable drawable) {
+        ColorMatrix matrix = new ColorMatrix();
+        matrix.setSaturation(0);
+        ColorMatrixColorFilter filter = new ColorMatrixColorFilter(matrix);
+        drawable.setColorFilter(filter);
+        return drawable;
+    }
+
     private void setVisibleAndAlpha(ConstraintSet set, int actionId, boolean visible) {
         set.setVisibility(actionId, visible ? ConstraintSet.VISIBLE : ConstraintSet.GONE);
         set.setAlpha(actionId, visible ? 1.0f : 0.0f);