components/MprisController.qml

@@ -7,6 +7,7 @@ import qs.widgets
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Services.Mpris
+import Quickshell.Widgets
 
 ColumnLayout {
     id: root
@@ -26,23 +27,32 @@ ColumnLayout {
 
     RowLayout {
         Layout.alignment: Qt.AlignHCenter
-        StyledIconButton {
+        StyledButton {
             id: backButton
+            content: LucideIcon {
+                color: backButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
                 text: Icons.skipBack
+            }
             onClicked: {
                 root.player.previous();
             }
         }
-        StyledIconButton {
+        StyledButton {
             id: playPauseButton
-            text: root.player.isPlaying ? Icons.pause : Icons.play
+            content: LucideIcon {
+                color: playPauseButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
+                text: root.player.isPlaying ? Icons.square : Icons.play
+            }
             onClicked: {
                 root.player.isPlaying = !root.player.isPlaying;
             }
         }
-        StyledIconButton {
+        StyledButton {
             id: forwardButton
+            content: LucideIcon {
+                color: forwardButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
                 text: Icons.skipForward
+            }
             onClicked: {
                 root.player.next();
             }

components/StyledIconButton.qml

@@ -5,14 +5,10 @@ import QtQuick.Controls
 RoundButton {
     id: control
 
-    FontLoader {
-        id: loader
-        source: "../assets/lucide.woff"
-    }
-
-    font.family: loader.font.family
-    font.pixelSize: 16
     radius: 8
+    font.family: Theme.lucide.font.family
+    font.pixelSize: 15
+    font.bold: true
     padding: 8
 
     HoverHandler {
@@ -20,7 +16,6 @@ RoundButton {
     }
 
     contentItem: Text {
-        font: control.font
         text: control.text
         color: control.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
         Behavior on color {
@@ -28,6 +23,7 @@ RoundButton {
                 duration: 100
             }
         }
+        font: control.font
     }
 
     background: Rectangle {

constants/Icons.qml

@@ -19,7 +19,6 @@ Singleton {
     property string gpu: "\u{E66f}"
     property string hardDrive: "\u{E0f1}"
     property string memoryStick: "\u{E44a}"
-    property string pause: "\u{E132}"
     property string play: "\u{E140}"
     property string search: "\u{E155}"
     property string skipBack: "\u{E163}"

services/Mpris.qml

@@ -16,12 +16,6 @@ Singleton {
         property int currentIndex: 0
     }
 
-    onPlayersChanged: {
-        if (!active) {
-            properties.currentIndex = 0;
-        }
-    }
-
     function nextPlayer() {
         if (players.length == 0) {
             return;