diff --git a/clapper_src/controls.js b/clapper_src/controls.js
index 240b442d..513dca2d 100644
--- a/clapper_src/controls.js
+++ b/clapper_src/controls.js
@@ -188,6 +188,7 @@ var Controls = GObject.registerClass({
             'media-playback-start-symbolic',
             'media-playback-pause-symbolic'
         );
+        this.togglePlayButton.add_css_class('playbackicon');
         this.addButton(this.togglePlayButton);
     }
 
diff --git a/css/styles.css b/css/styles.css
index 6ab5421d..04b845c0 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -24,6 +24,12 @@ scale marks {
   min-width: 18px;
   min-height: 18px;
 }
+.playbackicon {
+  -gtk-icon-size: 20px;
+}
+.osd .playbackicon {
+  -gtk-icon-size: 28px;
+}
 .labelbutton {
   font-family: 'Cantarell', 'Noto Sans', sans-serif;
   font-variant-numeric: tabular-nums;