diff --git a/src/lib/components/HoverIcon.svelte b/src/lib/components/HoverIcon.svelte
index c2c5a01..7fbff3c 100644
--- a/src/lib/components/HoverIcon.svelte
+++ b/src/lib/components/HoverIcon.svelte
@@ -6,17 +6,22 @@
 	export let src: string | null = null;
 	export let text: string;
 	export let size: number = 32;
+	export let black: boolean = false;
 
 	let isUrl;
 	$: isUrl = src?.startsWith('/') || src?.startsWith('http');
 </script>
 
-<div class="{className} fill-slate-50 text-sm uppercase transition-all">
+<div
+	class="{className} {black
+		? 'fill-slate-950'
+		: 'fill-slate-50'} text-sm uppercase transition-all"
+>
 	{#if src}
 		{#if isUrl}
 			<img {src} alt={text} width={size} height={size} />
 		{:else}
-			<Icon width={size} height={size} icon={src} color="#f8fafc" />
+			<Icon width={size} height={size} icon={src} color={black ? '#020618' : '#f8fafc'} />
 		{/if}
 	{:else}
 		{text}