diff --git a/src/js/utils/sortable-file-list.ts b/src/js/utils/sortable-file-list.ts
index b8cd54dc..2fcbbbd5 100644
--- a/src/js/utils/sortable-file-list.ts
+++ b/src/js/utils/sortable-file-list.ts
@@ -32,7 +32,9 @@ export function createDragHandle(): HTMLElement {
   const label = trText('Drag to reorder');
   handle.title = label;
   handle.setAttribute('aria-label', label);
-  handle.innerHTML = '<i data-lucide="grip-vertical" class="w-4 h-4"></i>';
+  const icon = document.createElement('i');
+  icon.className = 'ph ph-dots-six-vertical text-base';
+  handle.appendChild(icon);
   return handle;
 }
 
diff --git a/src/tests/sortable-file-list.test.ts b/src/tests/sortable-file-list.test.ts
index e70a6efb..6de68aff 100644
--- a/src/tests/sortable-file-list.test.ts
+++ b/src/tests/sortable-file-list.test.ts
@@ -47,9 +47,7 @@ describe('createDragHandle', () => {
     const handle = createDragHandle();
     expect(handle.classList.contains('drag-handle')).toBe(true);
     expect(handle.getAttribute('aria-label')).toBe('Drag to reorder');
-    expect(
-      handle.querySelector('[data-lucide="grip-vertical"]')
-    ).not.toBeNull();
+    expect(handle.querySelector('i.ph.ph-dots-six-vertical')).not.toBeNull();
   });
 });