8 files changed, 47 insertions, 25 deletions
diff --git a/frontend/src/lib/icons/Bookmark.svelte b/frontend/src/lib/icons/Bookmark.svelte
index 6f8e192..21b54ed 100644
--- a/frontend/src/lib/icons/Bookmark.svelte
+++ b/frontend/src/lib/icons/Bookmark.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
-	export let bookmarked: boolean | undefined = undefined;
-	export let hoverable = false;
+	interface Props {
+		bookmarked?: boolean;
+		hoverable?: boolean;
+	}
+
+	let { bookmarked, hoverable = false }: Props = $props();
 </script>
 
 {#if bookmarked}
-	<span class:hoverable class="icon-gray icon-base icon-[material-symbols--bookmark]" />
+	<span class:hoverable class="icon-gray icon-base icon-[material-symbols--bookmark]"></span>
 {:else}
-	<span class:hoverable class="icon-gray icon-base dim icon-[material-symbols--bookmark-outline]" />
+	<span class:hoverable class="icon-gray icon-base dim icon-[material-symbols--bookmark-outline]"
+	></span>
 {/if}
diff --git a/frontend/src/lib/icons/Female.svelte b/frontend/src/lib/icons/Female.svelte
deleted file mode 100644
index c772a6a..0000000
--- a/frontend/src/lib/icons/Female.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--female] -mx-[3px]" />
diff --git a/frontend/src/lib/icons/Location.svelte b/frontend/src/lib/icons/Location.svelte
deleted file mode 100644
index e345f83..0000000
--- a/frontend/src/lib/icons/Location.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--location-on-outline]" />
diff --git a/frontend/src/lib/icons/Male.svelte b/frontend/src/lib/icons/Male.svelte
deleted file mode 100644
index e3578b7..0000000
--- a/frontend/src/lib/icons/Male.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--male] -mx-px" />
diff --git a/frontend/src/lib/icons/Organized.svelte b/frontend/src/lib/icons/Organized.svelte
index 66b5b00..ff177fa 100644
--- a/frontend/src/lib/icons/Organized.svelte
+++ b/frontend/src/lib/icons/Organized.svelte
@@ -1,21 +1,22 @@
 <script lang="ts">
-	export let organized: boolean | undefined = undefined;
-	export let hoverable = false;
-	export let tristate = false;
-	export let dim = false;
+	interface Props {
+		organized?: boolean;
+		hoverable?: boolean;
+		tristate?: boolean;
+		dim?: boolean;
+	}
+
+	let { organized, hoverable = false, tristate = false, dim = false }: Props = $props();
 </script>
 
 {#if organized}
-	<span class:hoverable class="icon-gray icon-base icon-[material-symbols--check-circle]" />
+	<span class:hoverable class="icon-gray icon-base icon-[material-symbols--check-circle]"></span>
 {:else if organized === undefined || !tristate}
 	<span
 		class:hoverable
 		class="icon-gray dim icon-base icon-[material-symbols--check-circle-outline]"
-	/>
+	></span>
 {:else}
-	<span
-		class:hoverable
-		class:dim
-		class="icon-gray icon-base icon-[material-symbols--unpublished]"
-	/>
+	<span class:hoverable class:dim class="icon-gray icon-base icon-[material-symbols--unpublished]"
+	></span>
 {/if}
diff --git a/frontend/src/lib/icons/Orphan.svelte b/frontend/src/lib/icons/Orphan.svelte
new file mode 100644
index 0000000..7d947d2
--- /dev/null
+++ b/frontend/src/lib/icons/Orphan.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	interface Props {
+		orphaned?: boolean;
+		hoverable?: boolean;
+	}
+
+	let { orphaned, hoverable = false }: Props = $props();
+</script>
+
+{#if orphaned}
+	<span class:hoverable class="icon-gray icon-base icon-[material-symbols--fmd-bad]"></span>
+{:else}
+	<span class:hoverable class="icon-gray icon-base dim icon-[material-symbols--fmd-bad-outline]"
+	></span>
+{/if}
diff --git a/frontend/src/lib/icons/Star.svelte b/frontend/src/lib/icons/Star.svelte
index 7613c55..acce54d 100644
--- a/frontend/src/lib/icons/Star.svelte
+++ b/frontend/src/lib/icons/Star.svelte
@@ -1,22 +1,27 @@
 <script lang="ts">
-	export let large = false;
-	export let favourite: boolean | undefined = undefined;
-	export let hoverable = false;
+	interface Props {
+		large?: boolean;
+		favourite?: boolean;
+		hoverable?: boolean;
+	}
+
+	let { large = false, favourite, hoverable = false }: Props = $props();
 </script>
 
 {#if favourite}
-	<span class:hoverable class:large class="icon-yellow icon-[material-symbols--star-rounded]" />
+	<span class:hoverable class:large class="icon-yellow icon-[material-symbols--star-rounded]"
+	></span>
 {:else}
 	<span
 		class:hoverable
 		class:large
 		class="icon-yellow dim icon-[material-symbols--star-outline-rounded]"
-	/>
+	></span>
 {/if}
 
 <style lang="postcss">
 	span {
-		@apply -m-px -translate-y-px text-[26px];
+		@apply -m-px text-[26px];
 	}
 
 	span.large {
diff --git a/frontend/src/lib/icons/Transgender.svelte b/frontend/src/lib/icons/Transgender.svelte
deleted file mode 100644
index 7d9adc6..0000000
--- a/frontend/src/lib/icons/Transgender.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--transgender]" />