diff --git a/src/theme/style/button.rs b/src/theme/style/button.rs
index 2c07fe18..119a2609 100644
--- a/src/theme/style/button.rs
+++ b/src/theme/style/button.rs
@@ -73,9 +73,14 @@ pub fn appearance(
         Button::Icon | Button::IconVertical | Button::HeaderBar => {
             if matches!(style, Button::IconVertical) {
                 corner_radii = &cosmic.corner_radii.radius_m;
+                if selected {
+                    appearance.overlay = Some(Background::Color(Color::from(
+                        cosmic.icon_button.selected_state_color(),
+                    )));
+                }
             }
 
-            let (background, text, icon) = color(&cosmic.icon_button);
+            let (background, _text, _icon) = color(&cosmic.icon_button);
             appearance.background = Some(Background::Color(background));
         }
 
diff --git a/src/widget/button/style.rs b/src/widget/button/style.rs
index a097c3af..75b56a14 100644
--- a/src/widget/button/style.rs
+++ b/src/widget/button/style.rs
@@ -16,6 +16,9 @@ pub struct Appearance {
     /// The [`Background`] of the button.
     pub background: Option<Background>,
 
+    /// The [`Background`] overlay of the button.
+    pub overlay: Option<Background>,
+
     /// The border radius of the button.
     pub border_radius: Radius,
 
@@ -52,6 +55,7 @@ impl Appearance {
             outline_color: Color::TRANSPARENT,
             icon_color: None,
             text_color: None,
+            overlay: None,
         }
     }
 }
diff --git a/src/widget/button/widget.rs b/src/widget/button/widget.rs
index 49f0677b..639b059a 100644
--- a/src/widget/button/widget.rs
+++ b/src/widget/button/widget.rs
@@ -813,6 +813,21 @@ pub fn draw<Renderer: iced_core::Renderer, Theme>(
             );
         }
 
+        // Then button overlay if any.
+        if let Some(overlay) = styling.overlay {
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds,
+                    border: Border {
+                        radius: styling.border_radius,
+                        ..Default::default()
+                    },
+                    shadow: Shadow::default(),
+                },
+                overlay,
+            );
+        }
+
         // Then draw the button contents onto the background.
         draw_contents(renderer, styling);
 
diff --git a/src/widget/color_picker/mod.rs b/src/widget/color_picker/mod.rs
index aea43a8c..1f0d0116 100644
--- a/src/widget/color_picker/mod.rs
+++ b/src/widget/color_picker/mod.rs
@@ -772,6 +772,7 @@ fn color_to_string(c: palette::Hsv, is_hex: bool) -> String {
     }
 }
 
+#[allow(clippy::too_many_lines)]
 /// A button for selecting a color from a color picker.
 pub fn color_button<'a, Message: 'static>(
     on_press: Option<Message>,
@@ -826,6 +827,7 @@ pub fn color_button<'a, Message: 'static>(
                 outline_color,
                 icon_color: None,
                 text_color: None,
+                overlay: None,
             }
         }),
         disabled: Box::new(move |theme| {
@@ -842,6 +844,7 @@ pub fn color_button<'a, Message: 'static>(
                 outline_color: Color::TRANSPARENT,
                 icon_color: None,
                 text_color: None,
+                overlay: None,
             }
         }),
         hovered: Box::new(move |focused, theme| {
@@ -864,6 +867,7 @@ pub fn color_button<'a, Message: 'static>(
                 outline_color,
                 icon_color: None,
                 text_color: None,
+                overlay: None,
             }
         }),
         pressed: Box::new(move |focused, theme| {
@@ -886,6 +890,7 @@ pub fn color_button<'a, Message: 'static>(
                 outline_color,
                 icon_color: None,
                 text_color: None,
+                overlay: None,
             }
         }),
     })