diff --git a/crates/qbz-slint/ui/assets/icons/arrow-left.svg b/crates/qbz-slint/ui/assets/icons/arrow-left.svg
new file mode 100644
index 000000000..9f150d689
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/arrow-left.svg
@@ -0,0 +1,4 @@
+<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">
+  <path d="m12 19-7-7 7-7" />
+  <path d="M19 12H5" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/book-open.svg b/crates/qbz-slint/ui/assets/icons/book-open.svg
new file mode 100644
index 000000000..74a2b9a84
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/book-open.svg
@@ -0,0 +1,4 @@
+<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">
+  <path d="M12 7v14" />
+  <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/bug.svg b/crates/qbz-slint/ui/assets/icons/bug.svg
new file mode 100644
index 000000000..db2b46047
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/bug.svg
@@ -0,0 +1,13 @@
+<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">
+  <path d="M12 20v-9" />
+  <path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z" />
+  <path d="M14.12 3.88 16 2" />
+  <path d="M21 21a4 4 0 0 0-3.81-4" />
+  <path d="M21 5a4 4 0 0 1-3.55 3.97" />
+  <path d="M22 13h-4" />
+  <path d="M3 21a4 4 0 0 1 3.81-4" />
+  <path d="M3 5a4 4 0 0 0 3.55 3.97" />
+  <path d="M6 13H2" />
+  <path d="m8 2 1.88 1.88" />
+  <path d="M9 7.13V6a3 3 0 1 1 6 0v1.13" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/cast.svg b/crates/qbz-slint/ui/assets/icons/cast.svg
new file mode 100644
index 000000000..1f364e5e5
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/cast.svg
@@ -0,0 +1,6 @@
+<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">
+  <path d="M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6" />
+  <path d="M2 12a9 9 0 0 1 8 8" />
+  <path d="M2 16a5 5 0 0 1 4 4" />
+  <line x1="2" x2="2.01" y1="20" y2="20" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/check.svg b/crates/qbz-slint/ui/assets/icons/check.svg
new file mode 100644
index 000000000..a5f899b7e
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/check.svg
@@ -0,0 +1,3 @@
+<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">
+  <path d="M20 6 9 17l-5-5" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/chevron-left.svg b/crates/qbz-slint/ui/assets/icons/chevron-left.svg
new file mode 100644
index 000000000..cebe22eb2
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/chevron-left.svg
@@ -0,0 +1,3 @@
+<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">
+  <path d="m15 18-6-6 6-6" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/chevron-right.svg b/crates/qbz-slint/ui/assets/icons/chevron-right.svg
new file mode 100644
index 000000000..241d11d55
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/chevron-right.svg
@@ -0,0 +1,3 @@
+<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">
+  <path d="m9 18 6-6-6-6" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/ellipsis.svg b/crates/qbz-slint/ui/assets/icons/ellipsis.svg
new file mode 100644
index 000000000..441d6cc0a
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/ellipsis.svg
@@ -0,0 +1,5 @@
+<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">
+  <circle cx="12" cy="12" r="1" />
+  <circle cx="19" cy="12" r="1" />
+  <circle cx="5" cy="12" r="1" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/heart.svg b/crates/qbz-slint/ui/assets/icons/heart.svg
new file mode 100644
index 000000000..ae810a263
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/heart.svg
@@ -0,0 +1,3 @@
+<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">
+  <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/info.svg b/crates/qbz-slint/ui/assets/icons/info.svg
new file mode 100644
index 000000000..461364582
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/info.svg
@@ -0,0 +1,5 @@
+<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">
+  <circle cx="12" cy="12" r="10" />
+  <path d="M12 16v-4" />
+  <path d="M12 8h.01" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/keyboard.svg b/crates/qbz-slint/ui/assets/icons/keyboard.svg
new file mode 100644
index 000000000..aa1e2edd5
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/keyboard.svg
@@ -0,0 +1,11 @@
+<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">
+  <path d="M10 8h.01" />
+  <path d="M12 12h.01" />
+  <path d="M14 8h.01" />
+  <path d="M16 12h.01" />
+  <path d="M18 8h.01" />
+  <path d="M6 8h.01" />
+  <path d="M7 16h10" />
+  <path d="M8 12h.01" />
+  <rect width="20" height="16" x="2" y="4" rx="2" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/list-filter.svg b/crates/qbz-slint/ui/assets/icons/list-filter.svg
new file mode 100644
index 000000000..71c7b0f4e
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/list-filter.svg
@@ -0,0 +1,5 @@
+<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">
+  <path d="M2 5h20" />
+  <path d="M6 12h12" />
+  <path d="M9 19h6" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/log-out.svg b/crates/qbz-slint/ui/assets/icons/log-out.svg
new file mode 100644
index 000000000..24dd708a1
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/log-out.svg
@@ -0,0 +1,5 @@
+<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">
+  <path d="m16 17 5-5-5-5" />
+  <path d="M21 12H9" />
+  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/maximize-2.svg b/crates/qbz-slint/ui/assets/icons/maximize-2.svg
new file mode 100644
index 000000000..9c37cabf9
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/maximize-2.svg
@@ -0,0 +1,6 @@
+<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">
+  <path d="M15 3h6v6" />
+  <path d="m21 3-7 7" />
+  <path d="m3 21 7-7" />
+  <path d="M9 21H3v-6" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/menu.svg b/crates/qbz-slint/ui/assets/icons/menu.svg
new file mode 100644
index 000000000..c343236cc
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/menu.svg
@@ -0,0 +1,5 @@
+<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">
+  <path d="M4 5h16" />
+  <path d="M4 12h16" />
+  <path d="M4 19h16" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/minimize-2.svg b/crates/qbz-slint/ui/assets/icons/minimize-2.svg
new file mode 100644
index 000000000..fd47bb399
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/minimize-2.svg
@@ -0,0 +1,6 @@
+<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">
+  <path d="m14 10 7-7" />
+  <path d="M20 10h-6V4" />
+  <path d="m3 21 7-7" />
+  <path d="M4 14h6v6" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/pause.svg b/crates/qbz-slint/ui/assets/icons/pause.svg
new file mode 100644
index 000000000..d7474dd2c
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/pause.svg
@@ -0,0 +1,4 @@
+<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">
+  <rect x="14" y="3" width="5" height="18" rx="1" />
+  <rect x="5" y="3" width="5" height="18" rx="1" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/play.svg b/crates/qbz-slint/ui/assets/icons/play.svg
new file mode 100644
index 000000000..403df1dda
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/play.svg
@@ -0,0 +1,3 @@
+<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">
+  <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/plus.svg b/crates/qbz-slint/ui/assets/icons/plus.svg
new file mode 100644
index 000000000..8d7806007
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/plus.svg
@@ -0,0 +1,4 @@
+<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">
+  <path d="M5 12h14" />
+  <path d="M12 5v14" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/repeat-1.svg b/crates/qbz-slint/ui/assets/icons/repeat-1.svg
new file mode 100644
index 000000000..92ab7d019
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/repeat-1.svg
@@ -0,0 +1,7 @@
+<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">
+  <path d="m17 2 4 4-4 4" />
+  <path d="M3 11v-1a4 4 0 0 1 4-4h14" />
+  <path d="m7 22-4-4 4-4" />
+  <path d="M21 13v1a4 4 0 0 1-4 4H3" />
+  <path d="M11 10h1v4" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/repeat.svg b/crates/qbz-slint/ui/assets/icons/repeat.svg
new file mode 100644
index 000000000..93ed4dc7a
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/repeat.svg
@@ -0,0 +1,6 @@
+<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">
+  <path d="m17 2 4 4-4 4" />
+  <path d="M3 11v-1a4 4 0 0 1 4-4h14" />
+  <path d="m7 22-4-4 4-4" />
+  <path d="M21 13v1a4 4 0 0 1-4 4H3" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/search.svg b/crates/qbz-slint/ui/assets/icons/search.svg
new file mode 100644
index 000000000..73d54d42a
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/search.svg
@@ -0,0 +1,4 @@
+<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">
+  <path d="m21 21-4.34-4.34" />
+  <circle cx="11" cy="11" r="8" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/settings.svg b/crates/qbz-slint/ui/assets/icons/settings.svg
new file mode 100644
index 000000000..5f2931c4a
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/settings.svg
@@ -0,0 +1,4 @@
+<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">
+  <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
+  <circle cx="12" cy="12" r="3" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/shuffle.svg b/crates/qbz-slint/ui/assets/icons/shuffle.svg
new file mode 100644
index 000000000..7186daa23
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/shuffle.svg
@@ -0,0 +1,7 @@
+<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">
+  <path d="m18 14 4 4-4 4" />
+  <path d="m18 2 4 4-4 4" />
+  <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" />
+  <path d="M2 6h1.972a4 4 0 0 1 3.6 2.2" />
+  <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/skip-back.svg b/crates/qbz-slint/ui/assets/icons/skip-back.svg
new file mode 100644
index 000000000..ce7489434
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/skip-back.svg
@@ -0,0 +1,4 @@
+<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">
+  <path d="M17.971 4.285A2 2 0 0 1 21 6v12a2 2 0 0 1-3.029 1.715l-9.997-5.998a2 2 0 0 1-.003-3.432z" />
+  <path d="M3 20V4" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/skip-forward.svg b/crates/qbz-slint/ui/assets/icons/skip-forward.svg
new file mode 100644
index 000000000..490b9b89f
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/skip-forward.svg
@@ -0,0 +1,4 @@
+<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">
+  <path d="M21 4v16" />
+  <path d="M6.029 4.285A2 2 0 0 0 3 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/volume-2.svg b/crates/qbz-slint/ui/assets/icons/volume-2.svg
new file mode 100644
index 000000000..50a973b8a
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/volume-2.svg
@@ -0,0 +1,5 @@
+<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">
+  <path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" />
+  <path d="M16 9a5 5 0 0 1 0 6" />
+  <path d="M19.364 18.364a9 9 0 0 0 0-12.728" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/x.svg b/crates/qbz-slint/ui/assets/icons/x.svg
new file mode 100644
index 000000000..52576d2ce
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/x.svg
@@ -0,0 +1,4 @@
+<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">
+  <path d="M18 6 6 18" />
+  <path d="m6 6 12 12" />
+</svg>
diff --git a/crates/qbz-slint/ui/primitives/QbzIcon.slint b/crates/qbz-slint/ui/primitives/QbzIcon.slint
new file mode 100644
index 000000000..6a84ea062
--- /dev/null
+++ b/crates/qbz-slint/ui/primitives/QbzIcon.slint
@@ -0,0 +1,14 @@
+// Monochrome Lucide icon.
+//
+// Slint's `@image-url` needs a literal path, so the caller supplies the
+// `source` (an `@image-url` of an SVG in ui/assets/icons/) and a `tint`
+// theme color; QbzIcon applies `colorize` and a contain fit.
+
+import { Theme } from "../foundation/semantic-colors.slint";
+
+export component QbzIcon inherits Image {
+    in property <color> tint: Theme.text-secondary;
+
+    colorize: root.tint;
+    image-fit: contain;
+}