diff --git a/app/gui/src/project-view/components/DockPanel.vue b/app/gui/src/project-view/components/DockPanel.vue
index 979b608e538c..17f1b9b6f454 100644
--- a/app/gui/src/project-view/components/DockPanel.vue
+++ b/app/gui/src/project-view/components/DockPanel.vue
@@ -2,6 +2,7 @@
 import { documentationEditorBindings } from '@/bindings'
 import ResizeHandles from '@/components/ResizeHandles.vue'
 import SizeTransition from '@/components/SizeTransition.vue'
+import SvgButton from '@/components/SvgButton.vue'
 import ToggleIcon from '@/components/ToggleIcon.vue'
 import { useResizeObserver } from '@/composables/events'
 import { Rect } from '@/util/data/rect'
@@ -67,11 +68,11 @@ const tabStyle = {
               class="tab"
               :style="tabStyle"
             >
-              <ToggleIcon
+              <SvgButton
                 :modelValue="currentTab == tab"
                 :title="title"
-                :icon="icon"
-                @update:modelValue="currentTab = tab"
+                :name="icon"
+                @click="currentTab = tab"
               />
             </div>
           </div>
@@ -140,10 +141,6 @@ const tabStyle = {
   }
 }
 
-.tab .ToggleIcon svg {
-  opacity: 1 !important;
-}
-
 .toggleDock {
   --icon-margin: 16px; /* Must match `--icon-margin` defined above, which is not in scope because of the teleport. */
   z-index: 1;