diff --git a/src/app/components/IconPickerModal.svelte b/src/app/components/IconPickerModal.svelte
new file mode 100644
index 00000000..b4993151
--- /dev/null
+++ b/src/app/components/IconPickerModal.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import IconPicker from "@app/components/IconPicker.svelte"
+
+  type Props = {
+    onSelect: (iconUrl: string) => void
+  }
+
+  const {onSelect}: Props = $props()
+</script>
+
+<Modal>
+  <ModalBody>
+    <IconPicker {onSelect} />
+  </ModalBody>
+</Modal>
diff --git a/src/app/components/IconPickerDialog.svelte b/src/app/components/IconPickerPopover.svelte
similarity index 100%
rename from src/app/components/IconPickerDialog.svelte
rename to src/app/components/IconPickerPopover.svelte
diff --git a/src/lib/components/IconPickerButton.svelte b/src/lib/components/IconPickerButton.svelte
index f61e1614..074eed99 100644
--- a/src/lib/components/IconPickerButton.svelte
+++ b/src/lib/components/IconPickerButton.svelte
@@ -5,8 +5,8 @@
   import Button from "@lib/components/Button.svelte"
   import Dialog from "@lib/components/Dialog.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
-  import IconPicker from "@app/components/IconPicker.svelte"
-  import IconPickerDialog from "@app/components/IconPickerDialog.svelte"
+  import IconPickerModal from "@app/components/IconPickerModal.svelte"
+  import IconPickerPopover from "@app/components/IconPickerPopover.svelte"
 
   const {...props} = $props()
 
@@ -49,7 +49,7 @@
 
 <Tippy
   bind:popover
-  component={IconPickerDialog}
+  component={IconPickerPopover}
   props={{onSelect: onClick}}
   params={{trigger: "manual", interactive: true, placement: "top-end"}}>
   <Button onclick={open} class={props.class}>
@@ -61,7 +61,7 @@
   <Dialog
     onClose={close}
     children={{
-      component: IconPicker,
+      component: IconPickerModal,
       props: {
         onSelect: onClick,
       },