Fixed icons for Vue... I guess we need to be consistent.

package.json

@@ -16,6 +16,7 @@
     "@astrojs/node": "^9.5.2",
     "@astrojs/vue": "^5.1.4",
     "@ceereals/vue-pdf": "^0.2.1",
+    "@iconify/vue": "^5.0.0",
     "@libsql/client": "^0.17.0",
     "@tailwindcss/vite": "^4.1.18",
     "astro": "^5.16.11",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@ceereals/vue-pdf':
         specifier: ^0.2.1
         version: 0.2.1(vue@3.5.26(typescript@5.9.3))
+      '@iconify/vue':
+        specifier: ^5.0.0
+        version: 5.0.0(vue@3.5.26(typescript@5.9.3))
       '@libsql/client':
         specifier: ^0.17.0
         version: 0.17.0
@@ -630,6 +633,11 @@ packages:
   '@iconify/utils@2.3.0':
     resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
 
+  '@iconify/vue@5.0.0':
+    resolution: {integrity: sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==}
+    peerDependencies:
+      vue: '>=3'
+
   '@img/colour@1.0.0':
     resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
     engines: {node: '>=18'}
@@ -2291,7 +2299,6 @@ packages:
 
   libsql@0.5.22:
     resolution: {integrity: sha512-NscWthMQt7fpU8lqd7LXMvT9pi+KhhmTHAJWUB/Lj6MWa0MKFv0F2V4C6WKKpjCVZl0VwcDz4nOI3CyaT1DDiA==}
-    cpu: [x64, arm64, wasm32, arm]
     os: [darwin, linux, win32]
 
   lightningcss-android-arm64@1.30.2:
@@ -4172,6 +4179,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@iconify/vue@5.0.0(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.26(typescript@5.9.3)
+
   '@img/colour@1.0.0':
     optional: true
 

src/components/Timer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
+import { Icon } from "@iconify/vue";
 
 const props = defineProps<{
   initialRunningEntry: {
@@ -224,14 +225,16 @@ async function stopTimer() {
           @click="startTimer"
           class="btn btn-primary btn-lg min-w-40 shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all"
         >
-          ▶️ Start Timer
+          <Icon icon="heroicons:play" class="w-5 h-5" />
+          Start Timer
         </button>
         <button
           v-else
           @click="stopTimer"
           class="btn btn-error btn-lg min-w-40 shadow-lg shadow-error/20 hover:shadow-xl hover:shadow-error/30 transition-all"
         >
-          ⏹️ Stop Timer
+          <Icon icon="heroicons:stop" class="w-5 h-5" />
+          Stop Timer
         </button>
       </div>
     </div>