diff --git a/frontend/src/lib/components/dashboard/InfoButton.svelte b/frontend/src/lib/components/dashboard/InfoButton.svelte
index 6a2431e..400a87c 100644
--- a/frontend/src/lib/components/dashboard/InfoButton.svelte
+++ b/frontend/src/lib/components/dashboard/InfoButton.svelte
@@ -3,6 +3,8 @@
 	import 'tippy.js/dist/tippy.css';
 	import { createEventDispatcher } from 'svelte';
 	import { submissionProgress, UploadStatus } from '$lib/stores/portfolio';
+	import Document from '../icons/Document.svelte';
+	import Download from '../icons/Download.svelte';
 
 	export let showDetails: boolean;
 
@@ -17,7 +19,6 @@
 	};
 </script>
 
-<!-- TODO: better icon for "hide details"? -->
 <span
 	on:click={(_) => showInfo()}
 	on:keydown={(_) => showInfo()}
@@ -27,20 +28,10 @@
 		showOnCreate: false,
 		delay: 0
 	}}
+	class="icon"
+	class:showDetails
 >
-	<svg
-		class="icon"
-		fill="none"
-		stroke="currentColor"
-		viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
-		><path
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			stroke-width="2"
-			d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-		/></svg
-	>
+	<Document />
 </span>
 
 {#if $submissionProgress.status === UploadStatus.Submitted}
@@ -76,28 +67,21 @@
 			showOnCreate: false,
 			delay: 0
 		}}
+		class="icon disabledIcon"
 	>
-		<svg
-			class="disabledIcon"
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-			xmlns="http://www.w3.org/2000/svg"
-			><path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-			/></svg
-		>
+		<Download />
 	</span>
 {/if}
 
 <style>
 	.icon {
-		@apply stroke-sspsBlueDark h-10 w-10 hover:cursor-pointer;
+		@apply text-sspsBlueDark h-10 w-10 transition-colors duration-300 hover:cursor-pointer;
+		@apply hover:text-sspsBlue;
+	}
+	.showDetails {
+		@apply text-sspsBlue;
 	}
 	.disabledIcon {
-		@apply h-10 w-10 stroke-gray-300 hover:cursor-not-allowed;
+		@apply text-gray-300 hover:cursor-not-allowed hover:text-gray-300;
 	}
 </style>
diff --git a/frontend/src/lib/components/icons/Document.svelte b/frontend/src/lib/components/icons/Document.svelte
new file mode 100644
index 0000000..e3d9082
--- /dev/null
+++ b/frontend/src/lib/components/icons/Document.svelte
@@ -0,0 +1,16 @@
+<svg
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+	/></svg
+>
+
+<style>
+	svg {
+		@apply fill-none stroke-current;
+	}
+</style>
diff --git a/frontend/src/lib/components/icons/Download.svelte b/frontend/src/lib/components/icons/Download.svelte
new file mode 100644
index 0000000..1ad629b
--- /dev/null
+++ b/frontend/src/lib/components/icons/Download.svelte
@@ -0,0 +1,16 @@
+<svg
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+	/></svg
+>
+
+<style>
+	svg {
+		@apply fill-none stroke-current;
+	}
+</style>