diff --git a/components/Svg.tsx b/components/Svg.tsx
index cd5796f..60cc9c6 100644
--- a/components/Svg.tsx
+++ b/components/Svg.tsx
@@ -1,8 +1,23 @@
+import { Gdk, Gtk } from "astal/gtk4";
+import GLib from "gi://GLib?version=2.0";
+import Rsvg from "gi://Rsvg?version=2.0";
+
 interface SvgProps {
 	color?: string;
+	path: string;
 	rotation?: number;
+	size?: number;
 }
 
-export function Svg({ color, rotation }: SvgProps) {
-	const svgPath = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ${rotation && 'transform="rotate(180 12 12)"'} fill="none" stroke="${color || "#cac9c9"}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>`;
+export function Svg({
+	color = "#cac9c9",
+	path,
+	rotation = 0,
+	size = 24,
+}: SvgProps) {
+	const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" transform="rotate(${rotation} 12 12)" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`;
+	const bytes = new GLib.Bytes(new TextEncoder().encode(svgString));
+	const texture = Gdk.Texture.new_from_bytes(bytes);
+
+	return Gtk.Image.new_from_paintable(texture);
 }
diff --git a/widget/Hyprland/workspaces.tsx b/widget/Hyprland/workspaces.tsx
index 6673c55..598d1c4 100644
--- a/widget/Hyprland/workspaces.tsx
+++ b/widget/Hyprland/workspaces.tsx
@@ -2,6 +2,7 @@ import { bind } from "astal";
 import { Gdk, Gtk } from "astal/gtk4";
 import Hyprland from "gi://AstalHyprland";
 import Rsvg from "gi://Rsvg?version=2.0";
+import { Svg } from "../../components/Svg";
 
 const Workspaces = function () {
 	const hyprland = Hyprland.get_default();
@@ -23,30 +24,25 @@ const Workspaces = function () {
 		workspaces.filter((workspace) => workspace.id < 0),
 	);
 
-	Gtk.Image.interface_install_property;
-
-	const activeTrianglePath =
-		'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1fb854" 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>';
-	const inactiveTrianglePath =
-		'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" transform="rotate(180 12 12)" fill="none" stroke="#cac9c9" 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>';
-
-	const activeTrianglePixBuf =
-		Rsvg.Handle.new_from_data(activeTrianglePath).get_pixbuf();
-	const inactiveTrianglePixBuf =
-		Rsvg.Handle.new_from_data(inactiveTrianglePath).get_pixbuf();
-
 	return (
 		<box cssClasses={["Workspaces"]}>
 			{workspaces.as((workspaces) => {
 				return workspaces.map((workspace) => (
 					<button
+						cssClasses={["Button", "Label"]}
 						cursor={Gdk.Cursor.new_from_name("pointer", null)}
 						onClicked={() => workspace.focus()}
 					>
 						{focusedWorkspace.as((focused) =>
-							focused.id === workspace.id
-								? Gtk.Image.new_from_pixbuf(activeTrianglePixBuf)
-								: Gtk.Image.new_from_pixbuf(inactiveTrianglePixBuf),
+							focused.id === workspace.id ? (
+								<Svg
+									color="#1fb854"
+									path='<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"/>'
+									rotation={180}
+								/>
+							) : (
+								<Svg path='<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"/>' />
+							),
 						)}
 					</button>
 				));