diff --git a/web/src/lib/components/ui/spinner/index.ts b/web/src/lib/components/ui/spinner/index.ts
new file mode 100644
index 0000000..2e459c6
--- /dev/null
+++ b/web/src/lib/components/ui/spinner/index.ts
@@ -0,0 +1 @@
+export { default as Spinner } from './spinner.svelte';
diff --git a/web/src/lib/components/ui/spinner/spinner.svelte b/web/src/lib/components/ui/spinner/spinner.svelte
new file mode 100644
index 0000000..822513a
--- /dev/null
+++ b/web/src/lib/components/ui/spinner/spinner.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import type { ComponentProps } from 'svelte';
+	let { class: className, ...restProps }: ComponentProps<typeof Loader2Icon> = $props();
+</script>
+
+<Loader2Icon
+	role="status"
+	aria-label="Loading"
+	class={cn('size-4 animate-spin', className)}
+	{...restProps}
+/>