diff --git a/assets/lucide.woff b/assets/lucide.woff
new file mode 100644
index 0000000..e40924a
Binary files /dev/null and b/assets/lucide.woff differ
diff --git a/assets/triangle-alert.svg b/assets/triangle-alert.svg
deleted file mode 100644
index 9cb82a4..0000000
--- a/assets/triangle-alert.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
\ No newline at end of file
diff --git a/assets/triangle-dashed.svg b/assets/triangle-dashed.svg
deleted file mode 100644
index 7f059d5..0000000
--- a/assets/triangle-dashed.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-dashed-icon lucide-triangle-dashed"><path d="M10.17 4.193a2 2 0 0 1 3.666.013"/><path d="M14 21h2"/><path d="m15.874 7.743 1 1.732"/><path d="m18.849 12.952 1 1.732"/><path d="M21.824 18.18a2 2 0 0 1-1.835 2.824"/><path d="M4.024 21a2 2 0 0 1-1.839-2.839"/><path d="m5.136 12.952-1 1.732"/><path d="M8 21h2"/><path d="m8.102 7.743-1 1.732"/></svg>
\ No newline at end of file
diff --git a/assets/triangle.svg b/assets/triangle.svg
deleted file mode 100644
index 889013f..0000000
--- a/assets/triangle.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-icon lucide-triangle"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>
\ No newline at end of file
diff --git a/config/Theme.qml b/config/Theme.qml
index 8fedaf5..076c50b 100644
--- a/config/Theme.qml
+++ b/config/Theme.qml
@@ -6,6 +6,9 @@ import Quickshell
 Singleton {
     id: root
 
+    property var lucide: FontLoader {
+        source: "../assets/lucide.woff"
+    }
     property string fontFamily: "JetBrainsMono Nerd Font"
     property Palette palette: Palette {}
 
diff --git a/constants/Icons.qml b/constants/Icons.qml
new file mode 100644
index 0000000..6e40dee
--- /dev/null
+++ b/constants/Icons.qml
@@ -0,0 +1,9 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+
+Singleton {
+  property string triangle: "\u{E192}"
+  property string triangleDashed: "\u{E642}"
+}
diff --git a/modules/bar/components/hyprland/Workspace.qml b/modules/bar/components/hyprland/Workspace.qml
index ba1f9d2..d943bed 100644
--- a/modules/bar/components/hyprland/Workspace.qml
+++ b/modules/bar/components/hyprland/Workspace.qml
@@ -1,6 +1,7 @@
 import QtQuick
 import Quickshell.Hyprland
 import "../../../../config"
+import "../../../../constants/"
 import "../../../../styled/"
 
 Loader {
@@ -17,28 +18,43 @@ Loader {
 
         onClicked: modelData.activate()
 
-        Icon {
+        Text {
             id: icon
 
-            source: "/home/baobeld/dotfiles/quickshell/assets/triangle.svg"
+            font.family: Theme.lucide.font.family
+            font.pixelSize: Dimensions.workspace.iconSize
+            font.bold: true
+            text: Icons.triangle
+
+            color: Theme.palette.basecontent
 
             anchors.centerIn: parent
-            size: Dimensions.workspace.iconSize
 
-            states: State {
-                name: "active"
-                when: modelData.active
-                PropertyChanges {
-                    icon {
-                        rotation: 180
-                        color: clickable.hovered ? Theme.palette.basecontent : Theme.palette.primary
+            states: [
+                State {
+                    name: "focused"
+                    when: modelData.focused
+                    PropertyChanges {
+                        icon {
+                            rotation: 180
+                            color: clickable.hovered ? Theme.palette.basecontent : Theme.palette.primary
+                        }
+                    }
+                },
+                State {
+                    name: "active"
+                    when: modelData.active
+                    PropertyChanges {
+                        icon {
+                            text: Icons.triangleDashed
+                            rotation: 180
+                            color: clickable.hovered ? Theme.palette.basecontent : Theme.palette.primary
+                        }
                     }
                 }
-            }
+            ]
 
             transitions: Transition {
-                from: ""
-                to: "active"
                 reversible: true
                 ParallelAnimation {
                     RotationAnimation {