diff --git a/crates/gpui3/src/assets.rs b/crates/gpui3/src/assets.rs
index f1e90f6c4e25a9cd6984c72e5c49eb5306aabff2..cae5a8eaae66be567c9a51a18b19855d646f2f52 100644
--- a/crates/gpui3/src/assets.rs
+++ b/crates/gpui3/src/assets.rs
@@ -3,9 +3,8 @@ use anyhow::anyhow;
 use image::{Bgra, ImageBuffer};
 use std::{
     borrow::Cow,
-    cmp::Ordering,
     fmt,
-    hash::{Hash, Hasher},
+    hash::Hash,
     sync::atomic::{AtomicUsize, Ordering::SeqCst},
 };
 
diff --git a/crates/gpui3/src/elements/img.rs b/crates/gpui3/src/elements/img.rs
index e0c85f80560d75cd6b93f7c525d12d890b4010fa..1d2a7bd1d44a363bd0e186231a1a2f33b5fe71f0 100644
--- a/crates/gpui3/src/elements/img.rs
+++ b/crates/gpui3/src/elements/img.rs
@@ -9,6 +9,7 @@ use util::ResultExt;
 pub struct Img<S> {
     style: RefinementCascade<Style>,
     uri: Option<SharedString>,
+    grayscale: bool,
     state_type: PhantomData<S>,
 }
 
@@ -16,6 +17,7 @@ pub fn img<S>() -> Img<S> {
     Img {
         style: RefinementCascade::default(),
         uri: None,
+        grayscale: false,
         state_type: PhantomData,
     }
 }
@@ -25,6 +27,11 @@ impl<S> Img<S> {
         self.uri = Some(uri.into());
         self
     }
+
+    pub fn grayscale(mut self, grayscale: bool) -> Self {
+        self.grayscale = grayscale;
+        self
+    }
 }
 
 impl<S: 'static> Element for Img<S> {
@@ -64,7 +71,7 @@ impl<S: 'static> Element for Img<S> {
                 .now_or_never()
                 .and_then(ResultExt::log_err)
             {
-                cx.paint_image(bounds, order, data, false)?;
+                cx.paint_image(bounds, order, data, self.grayscale)?;
             } else {
                 log::warn!("image not loaded yet");
                 // cx.spawn(|this, mut cx| async move {
diff --git a/crates/gpui3/src/platform/mac/shaders.metal b/crates/gpui3/src/platform/mac/shaders.metal
index 6eeb7f718accb289d678e5a96beaa5fe27fe75da..313feec7f11902c430a8861e379643b0c9fe62a5 100644
--- a/crates/gpui3/src/platform/mac/shaders.metal
+++ b/crates/gpui3/src/platform/mac/shaders.metal
@@ -191,6 +191,12 @@ fragment float4 polychrome_sprite_fragment(
   float clip_distance = quad_sdf(input.position.xy, sprite.content_mask.bounds,
                                  sprite.content_mask.corner_radii);
   float4 color = sample;
+  if (sprite.grayscale) {
+    float grayscale = 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;
+    color.r = grayscale;
+    color.g = grayscale;
+    color.b = grayscale;
+  }
   color.a *= saturate(0.5 - clip_distance);
   return color;
 }
diff --git a/crates/gpui3/src/scene.rs b/crates/gpui3/src/scene.rs
index 4741f3ead8941f1da0c3e03237550b99eced6e6c..fb6111b0391e85cc2e3077e4c7eec883445603ee 100644
--- a/crates/gpui3/src/scene.rs
+++ b/crates/gpui3/src/scene.rs
@@ -276,6 +276,7 @@ pub struct PolychromeSprite {
     pub bounds: Bounds<ScaledPixels>,
     pub content_mask: ScaledContentMask,
     pub tile: AtlasTile,
+    pub grayscale: bool,
 }
 
 impl Ord for PolychromeSprite {
diff --git a/crates/gpui3/src/window.rs b/crates/gpui3/src/window.rs
index 19ce54e6745414018297602af50949ffe2600dcb..2e53016f65788414f0c4d777900a217903eb6930 100644
--- a/crates/gpui3/src/window.rs
+++ b/crates/gpui3/src/window.rs
@@ -305,6 +305,7 @@ impl<'a, 'w> WindowContext<'a, 'w> {
                     bounds,
                     content_mask,
                     tile,
+                    grayscale: false,
                 },
             );
         }
@@ -379,6 +380,7 @@ impl<'a, 'w> WindowContext<'a, 'w> {
                 bounds,
                 content_mask,
                 tile,
+                grayscale,
             },
         );
 
diff --git a/crates/storybook2/src/collab_panel.rs b/crates/storybook2/src/collab_panel.rs
index 4a3cd127902fe8ed21b4e9e5354c5297a64e19d7..3d5846a5524cf33ffb11c0133db93c159f712993 100644
--- a/crates/storybook2/src/collab_panel.rs
+++ b/crates/storybook2/src/collab_panel.rs
@@ -1,7 +1,7 @@
 use crate::theme::{theme, Theme};
 use gpui3::{
-    div, img, svg, view, AppContext, ArcCow, Context, Element, IntoAnyElement, ParentElement,
-    ScrollState, SharedString, StyleHelpers, View, ViewContext, WindowContext,
+    div, img, svg, view, AppContext, Context, Element, IntoAnyElement, ParentElement, ScrollState,
+    SharedString, StyleHelpers, View, ViewContext, WindowContext,
 };
 
 pub struct CollabPanel {