From f73f54a926494a5e9d6033ee724c423287ced5dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?madk=C3=A4rma?=
 <100418457+madkarmaa@users.noreply.github.com>
Date: Sat, 21 Dec 2024 19:22:13 +0100
Subject: [PATCH] feat: Use icon library instead of SVGs (#271)

---
 package-lock.json                             | 13 +++++-
 package.json                                  |  4 +-
 src/app.html                                  | 42 +++++++++----------
 src/layout/Footer/FooterSection.svelte        | 18 ++++----
 src/layout/Hero/HeroSection.svelte            | 13 +++++-
 src/layout/Navbar/NavHost.svelte              | 31 +++-----------
 src/lib/components/Button.svelte              | 17 ++------
 src/lib/components/Dialogue.svelte            |  9 ++--
 src/lib/components/FilterChip.svelte          | 11 +++--
 src/lib/components/Search.svelte              | 15 ++++---
 .../contributors/ContributorSection.svelte    | 14 +++----
 src/routes/donate/+page.svelte                | 12 ++++--
 src/routes/donate/TeamMember.svelte           | 14 ++-----
 src/routes/download/+page.svelte              | 13 +++---
 src/routes/patches/PatchItem.svelte           | 16 ++++---
 static/icons/arrow.svg                        |  1 -
 static/icons/back.svg                         |  1 -
 static/icons/check.svg                        |  1 -
 static/icons/close.svg                        |  1 -
 static/icons/coins.svg                        |  1 -
 static/icons/docs.svg                         |  1 -
 static/icons/download.svg                     |  1 -
 static/icons/expand_less.svg                  |  1 -
 static/icons/expand_more.svg                  |  1 -
 static/icons/heart.svg                        |  1 -
 static/icons/home.svg                         |  1 -
 static/icons/qr_code.svg                      |  1 -
 static/icons/reset.svg                        |  1 -
 static/icons/search.svg                       |  1 -
 static/icons/wallet.svg                       |  1 -
 30 files changed, 118 insertions(+), 139 deletions(-)
 delete mode 100644 static/icons/arrow.svg
 delete mode 100644 static/icons/back.svg
 delete mode 100644 static/icons/check.svg
 delete mode 100644 static/icons/close.svg
 delete mode 100644 static/icons/coins.svg
 delete mode 100644 static/icons/docs.svg
 delete mode 100644 static/icons/download.svg
 delete mode 100644 static/icons/expand_less.svg
 delete mode 100644 static/icons/expand_more.svg
 delete mode 100644 static/icons/heart.svg
 delete mode 100644 static/icons/home.svg
 delete mode 100644 static/icons/qr_code.svg
 delete mode 100644 static/icons/reset.svg
 delete mode 100644 static/icons/search.svg
 delete mode 100644 static/icons/wallet.svg

diff --git a/package-lock.json b/package-lock.json
index e427fca4..7484417d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,8 @@
 				"@tanstack/query-persist-client-core": "^4.36.1",
 				"@tanstack/query-sync-storage-persister": "^4.36.1",
 				"@tanstack/svelte-query": "^4.36.1",
-				"datetrigger": "^1.1.1"
+				"datetrigger": "^1.1.1",
+				"svelte-material-icons": "^3.0.5"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-static": "3.0.6",
@@ -29,7 +30,6 @@
 				"prettier-plugin-svelte": "3.3.2",
 				"qrious": "^4.0.2",
 				"sass": "1.81.0",
-				"semver": "7.6.3",
 				"sirv-cli": "3.0.0",
 				"svelte": "4.2.18",
 				"svelte-check": "4.1.0",
@@ -4285,6 +4285,15 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-material-icons": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/svelte-material-icons/-/svelte-material-icons-3.0.5.tgz",
+			"integrity": "sha512-UbhAa+Btd5y6e6DMljVccP+cbJ8lvesltMippiCOvfIUtYe2TsQqM+P6osfrVsZHV47b1tY6AmqCuSpMKnwMOQ==",
+			"license": "ISC",
+			"peerDependencies": {
+				"svelte": "^3.0.0 || ^4.0.0"
+			}
+		},
 		"node_modules/svelte-meta-tags": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/svelte-meta-tags/-/svelte-meta-tags-3.1.2.tgz",
diff --git a/package.json b/package.json
index a9ace80d..864efacb 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
 		"prettier-plugin-svelte": "3.3.2",
 		"qrious": "^4.0.2",
 		"sass": "1.81.0",
-		"semver": "7.6.3",
 		"sirv-cli": "3.0.0",
 		"svelte": "4.2.18",
 		"svelte-check": "4.1.0",
@@ -46,6 +45,7 @@
 		"@tanstack/query-persist-client-core": "^4.36.1",
 		"@tanstack/query-sync-storage-persister": "^4.36.1",
 		"@tanstack/svelte-query": "^4.36.1",
-		"datetrigger": "^1.1.1"
+		"datetrigger": "^1.1.1",
+		"svelte-material-icons": "^3.0.5"
 	}
 }
diff --git a/src/app.html b/src/app.html
index 8e7adfc0..cb442f92 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,26 +1,26 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta
-			name="robots"
-			content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
-		/>
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-		<!-- OpenGraph -->
-		<meta property="og:type" content="website" />
-		<meta property="og:image" content="/logo.png" />
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="/favicon.ico" />
+	<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-		<!-- Twitter -->
-		<meta name="twitter:image" itemprop="image" content="/logo.png" />
-		<meta name="twitter:card" content="summary" />
+	<!-- OpenGraph -->
+	<meta property="og:type" content="website" />
+	<meta property="og:image" content="/logo.png" />
 
-		%sveltekit.head%
-	</head>
-	<body>
-		<div>%sveltekit.body%</div>
-	</body>
-</html>
+	<!-- Twitter -->
+	<meta name="twitter:image" itemprop="image" content="/logo.png" />
+	<meta name="twitter:card" content="summary" />
+
+	%sveltekit.head%
+</head>
+
+<body>
+	<div>%sveltekit.body%</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/layout/Footer/FooterSection.svelte b/src/layout/Footer/FooterSection.svelte
index 169b5033..826ec216 100644
--- a/src/layout/Footer/FooterSection.svelte
+++ b/src/layout/Footer/FooterSection.svelte
@@ -2,6 +2,8 @@
 	import { slide } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
+	import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
+
 	export let title: string;
 	let expanded: boolean = false;
 </script>
@@ -19,10 +21,9 @@
 		<span>
 			{title}
 		</span>
-		<img
-			src="/icons/{expanded ? 'expand_less' : 'expand_more'}.svg"
-			alt={expanded ? 'Close' : 'Expand'}
-		/>
+		<div class="arrow" style:transform={expanded ? 'rotate(180deg)' : 'rotate(0deg)'}>
+			<ChevronDown size="24px" color="var(--surface-six)" />
+		</div>
 	</button>
 	{#if expanded}
 		<ul transition:slide={{ easing: quintOut, duration: 500 }}>
@@ -65,6 +66,11 @@
 		display: none;
 	}
 
+	.arrow {
+		transition: all 0.2s var(--bezier-one);
+		user-select: none;
+	}
+
 	@media screen and (max-width: 768px) {
 		.mobile-only {
 			display: block;
@@ -73,8 +79,4 @@
 			display: none;
 		}
 	}
-
-	img {
-		height: 24px;
-	}
 </style>
diff --git a/src/layout/Hero/HeroSection.svelte b/src/layout/Hero/HeroSection.svelte
index 9d61cd98..0d9ed457 100644
--- a/src/layout/Hero/HeroSection.svelte
+++ b/src/layout/Hero/HeroSection.svelte
@@ -1,5 +1,8 @@
 <script>
 	import Button from '$lib/components/Button.svelte';
+
+	import TrayArrowDown from 'svelte-material-icons/TrayArrowDown.svelte';
+	import FileDocumentOutline from 'svelte-material-icons/FileDocumentOutline.svelte';
 </script>
 
 <section class="hero">
@@ -9,8 +12,14 @@
 			Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
 		</p>
 		<div class="hero-buttons">
-			<Button icon="download" type="filled" href="download">Download</Button>
-			<Button icon="docs" type="tonal" href="patches">View patches</Button>
+			<Button type="filled" href="download">
+				<TrayArrowDown size="20px" />
+				Download
+			</Button>
+			<Button type="tonal" href="patches">
+				<FileDocumentOutline size="20px" />
+				View patches
+			</Button>
 		</div>
 	</div>
 </section>
diff --git a/src/layout/Navbar/NavHost.svelte b/src/layout/Navbar/NavHost.svelte
index 705a7858..3855227e 100644
--- a/src/layout/Navbar/NavHost.svelte
+++ b/src/layout/Navbar/NavHost.svelte
@@ -5,10 +5,12 @@
 	import { expoOut } from 'svelte/easing';
 
 	import Navigation from './NavButton.svelte';
-	import Svg from '$lib/components/Svg.svelte';
 	import Modal from '$lib/components/Dialogue.svelte';
 	import Button from '$lib/components/Button.svelte';
 
+	import Cog from 'svelte-material-icons/Cog.svelte';
+	import Replay from 'svelte-material-icons/Replay.svelte';
+
 	import { api_base_url, set_api_base_url, default_api_url } from '$data/api/settings';
 	import RouterEvents from '$data/RouterEvents';
 
@@ -86,11 +88,7 @@
 			</div>
 			<div id="secondary-navigation">
 				<button on:click={() => (modalOpen = !modalOpen)} aria-label="Settings">
-					<Svg viewBoxHeight={24} svgHeight={20}>
-						<path
-							d="M 19.1 12.9 C 19.1 12.6 19.2 12.3 19.2 12 C 19.2 11.7 19.2 11.4 19.1 11.1 L 21.1 9.5 C 21.3 9.4 21.3 9.1 21.2 8.9 L 19.3 5.6 C 19.2 5.4 18.9 5.3 18.7 5.4 L 16.3 6.4 C 15.8 6 15.3 5.7 14.7 5.5 L 14.3 3 C 14.3 2.8 14.1 2.6 13.8 2.6 L 10 2.6 C 9.8 2.6 9.6 2.8 9.5 3 L 9.2 5.3 C 8.7 5.6 8.1 5.9 7.6 6.3 L 5.2 5.3 C 5 5.2 4.8 5.3 4.6 5.5 L 2.7 8.9 C 2.6 9.1 2.7 9.3 2.9 9.5 L 4.9 11.1 C 4.9 11.4 4.8 11.7 4.8 12 C 4.8 12.3 4.8 12.6 4.9 12.9 L 2.9 14.5 C 2.7 14.6 2.7 14.9 2.8 15.1 L 4.7 18.4 C 4.8 18.6 5.1 18.7 5.3 18.6 L 7.7 17.6 C 8.2 18 8.7 18.3 9.3 18.5 L 9.7 21 C 9.8 21.2 9.9 21.4 10.2 21.4 L 14 21.4 C 14.2 21.4 14.4 21.2 14.5 21 L 14.9 18.5 C 15.5 18.3 16 17.9 16.5 17.6 L 18.9 18.6 C 19.1 18.7 19.4 18.6 19.5 18.4 L 21.4 15.1 C 21.5 14.9 21.5 14.6 21.3 14.5 L 19.1 12.9 Z M 12 15.6 C 10 15.6 8.4 14 8.4 12 C 8.4 10 10 8.4 12 8.4 C 14 8.4 15.6 10 15.6 12 C 15.6 14 14 15.6 12 15.6 Z"
-						/>
-					</Svg>
+					<Cog size="20px" color="var(--surface-six)" />
 				</button>
 			</div>
 		</div>
@@ -109,12 +107,7 @@
 <!-- settings -->
 <Modal bind:modalOpen>
 	<svelte:fragment slot="icon">
-		<Svg viewBoxHeight={24} viewBoxWidth={24} svgHeight={24}>
-			<rect fill="none" height="24" width="24" />
-			<path
-				d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"
-			/>
-		</Svg>
+		<Cog size="24px" color="var(--surface-six)" />
 	</svelte:fragment>
 	<svelte:fragment slot="title">Settings</svelte:fragment>
 	<svelte:fragment slot="description">Configure the API for this website.</svelte:fragment>
@@ -122,11 +115,7 @@
 		<div class="input-wrapper">
 			<input name="api-url" type="text" bind:value={url} />
 			<button id="button-reset" on:click={reset} aria-label="Reset Button">
-				<Svg viewBoxHeight={48} svgHeight={24}>
-					<path
-						d="M11.2 36.725C14.6667 40.2417 18.8833 42 23.85 42C26.35 42 28.7 41.525 30.9 40.575C33.1 39.625 35.025 38.3333 36.675 36.7C38.325 35.0667 39.625 33.15 40.575 30.95C41.525 28.75 42 26.4 42 23.9C42 21.4 41.525 19.0667 40.575 16.9C39.625 14.7333 38.325 12.8417 36.675 11.225C35.025 9.60833 33.1 8.33333 30.9 7.4C28.7 6.46667 26.35 6 23.85 6C21.1833 6 18.6583 6.58333 16.275 7.75C13.8917 8.91667 11.8333 10.5167 10.1 12.55V7.25H7.1V17.65H17.55V14.65H12.3C13.7667 12.95 15.4917 11.5833 17.475 10.55C19.4583 9.51667 21.5833 9 23.85 9C28.0167 9 31.5833 10.425 34.55 13.275C37.5167 16.125 39 19.6167 39 23.75C39 27.9833 37.5333 31.5833 34.6 34.55C31.6667 37.5167 28.0833 39 23.85 39C19.6833 39 16.1667 37.5333 13.3 34.6C10.4333 31.6667 9 28.1167 9 23.95H6C6 28.95 7.73333 33.2083 11.2 36.725Z"
-					/>
-				</Svg>
+				<Replay size="24px" color="var(--surface-six)" />
 			</button>
 		</div>
 	</div>
@@ -142,14 +131,6 @@
 		padding: 0.5rem;
 	}
 
-	path {
-		fill: var(--surface-six);
-	}
-
-	button:hover path {
-		fill: var(--secondary);
-	}
-
 	button {
 		background-color: transparent;
 		border: none;
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 485edea3..92fa4bd1 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,23 +1,16 @@
 <script lang="ts">
 	export let type: 'filled' | 'tonal' | 'text' | 'outlined';
-	export let icon = '';
-	export let href = '';
-	export let target = '';
-	export let label = '';
+	export let href: string = '';
+	export let target: string = '';
+	export let label: string = '';
 </script>
 
 {#if href}
 	<a {href} {target} class={`button-${type}`} aria-label={label}>
-		{#if icon}
-			<img src="../icons/{icon}.svg" alt={icon} />
-		{/if}
 		<slot />
 	</a>
 {:else}
 	<button on:click class={`button-${type}`} aria-label={label}>
-		{#if icon}
-			<img src="../icons/{icon}.svg" alt={icon} />
-		{/if}
 		<slot />
 	</button>
 {/if}
@@ -74,8 +67,4 @@
 	a:hover {
 		filter: brightness(85%);
 	}
-
-	img {
-		height: 20px;
-	}
 </style>
diff --git a/src/lib/components/Dialogue.svelte b/src/lib/components/Dialogue.svelte
index 95f6bbe0..9ca87af3 100644
--- a/src/lib/components/Dialogue.svelte
+++ b/src/lib/components/Dialogue.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { quadInOut } from 'svelte/easing';
+
+	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+
 	export let modalOpen = false;
 	export let fullscreen = false;
 	export let notDismissible = false;
@@ -39,7 +42,7 @@
 			<div class="title" class:hasIcon={$$slots.icon}>
 				{#if fullscreen}
 					<button id="back-button" on:click={() => (modalOpen = !modalOpen)}>
-						<img src="../icons/back.svg" id="back" alt="back" />
+						<ArrowLeft size="24px" color="var(--surface-six)" />
 					</button>
 				{/if}
 				{#if $$slots.icon}
@@ -145,10 +148,6 @@
 		align-items: center;
 	}
 
-	#back {
-		height: 24px;
-	}
-
 	.fullscreen {
 		padding: 0;
 		max-height: 100%;
diff --git a/src/lib/components/FilterChip.svelte b/src/lib/components/FilterChip.svelte
index e8118ad4..be84d832 100644
--- a/src/lib/components/FilterChip.svelte
+++ b/src/lib/components/FilterChip.svelte
@@ -1,4 +1,7 @@
 <script>
+	import Check from 'svelte-material-icons/Check.svelte';
+	import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
+
 	export let dropdown = false;
 	export let check = false;
 	export let selected = false;
@@ -6,11 +9,11 @@
 
 <button class:selected on:click>
 	{#if check}
-		<img id="check" src="/icons/check.svg" alt="selected" />
+		<Check size="18px" color="var(--surface-six)" />
 	{/if}
 	<slot />
 	{#if dropdown}
-		<img id="dropdown" src="/icons/expand_more.svg" alt="dropdown" />
+		<ChevronDown size="18px" color="var(--surface-six)" />
 	{/if}
 </button>
 
@@ -36,10 +39,6 @@
 		color: var(--primary);
 	}
 
-	img {
-		height: 18px;
-	}
-
 	#dropdown {
 		margin-right: -6px;
 	}
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index 438fa5c6..0285a4ec 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -4,6 +4,9 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 
+	import Close from 'svelte-material-icons/Close.svelte';
+	import Magnify from 'svelte-material-icons/Magnify.svelte';
+
 	export let title: string;
 	export let searchTerm: string | null;
 	export let displayedTerm: string | undefined;
@@ -19,16 +22,18 @@
 </script>
 
 <div class="search-container">
-	<img src="../icons/search.svg" id="search" alt="Search" />
+	<div id="search">
+		<Magnify size="24px" color="var(--surface-six)" />
+	</div>
 	{#if searchTerm}
-		<img
-			src="../icons/close.svg"
+		<div
 			id="clear"
-			alt="Clear"
 			on:click={clear}
 			on:keypress={clear}
 			transition:fade={{ easing: quintOut, duration: 250 }}
-		/>
+		>
+			<Close size="24px" color="var(--surface-six)" />
+		</div>
 	{/if}
 	<input
 		type="text"
diff --git a/src/routes/contributors/ContributorSection.svelte b/src/routes/contributors/ContributorSection.svelte
index dd9a73da..5b68ff70 100644
--- a/src/routes/contributors/ContributorSection.svelte
+++ b/src/routes/contributors/ContributorSection.svelte
@@ -4,6 +4,8 @@
 	import type { Contributor } from '$lib/types';
 	import ContributorButton from './ContributorPerson.svelte';
 
+	import ChevronUp from 'svelte-material-icons/ChevronUp.svelte';
+
 	export let contributors: Contributor[];
 	export let name: string;
 	export let url: string;
@@ -20,15 +22,12 @@
 		on:click={() => (expanded = !expanded)}
 		on:keypress={() => (expanded = !expanded)}
 	>
-		<a href="{url}" rel="noreferrer" target="_blank" on:click|stopPropagation>
+		<a href={url} rel="noreferrer" target="_blank" on:click|stopPropagation>
 			<h4>{name}</h4>
 		</a>
-		<img
-			id="arrow"
-			style:transform={expanded ? 'rotate(0deg)' : 'rotate(-180deg)'}
-			src="/icons/expand_less.svg"
-			alt="dropdown"
-		/>
+		<div id="arrow" style:transform={expanded ? 'rotate(0deg)' : 'rotate(-180deg)'}>
+			<ChevronUp size="24px" color="var(--surface-six)" />
+		</div>
 	</div>
 
 	{#if expanded}
@@ -63,7 +62,6 @@
 	}
 
 	#arrow {
-		height: 1.5rem;
 		transition: all 0.2s var(--bezier-one);
 		user-select: none;
 	}
diff --git a/src/routes/donate/+page.svelte b/src/routes/donate/+page.svelte
index 0567a52e..4732a0f0 100644
--- a/src/routes/donate/+page.svelte
+++ b/src/routes/donate/+page.svelte
@@ -16,6 +16,10 @@
 	import DonateHeartAnimation from './DonateHeartAnimation.svelte';
 	import TeamMember from './TeamMember.svelte';
 
+	import CircleMultipleOutline from 'svelte-material-icons/CircleMultipleOutline.svelte';
+	import WalletOutline from 'svelte-material-icons/WalletOutline.svelte';
+	import ChevronUp from 'svelte-material-icons/ChevronUp.svelte';
+
 	import { supportsWebP } from '$util/supportsWebP';
 
 	const teamQuery = createQuery(['team'], queries.team);
@@ -135,7 +139,7 @@
 
 <Dialogue bind:modalOpen={cryptoDialogue}>
 	<svelte:fragment slot="icon">
-		<img class="qr-code" src="/icons/coins.svg" alt="Cryptocurrencies" />
+		<CircleMultipleOutline size="32px" color="var(--surface-six)" />
 	</svelte:fragment>
 	<svelte:fragment slot="title">Cryptocurrencies</svelte:fragment>
 	<svelte:fragment slot="description">
@@ -161,7 +165,9 @@
 							/>
 							{`${wallet.network} (${wallet.currency_code})`}
 						</div>
-						<img id="arrow" src="/icons/expand_less.svg" alt="continue" />
+						<div id="arrow">
+							<ChevronUp size="20px" color="var(--surface-six)" />
+						</div>
 					</button>
 				{/each}
 			</Query>
@@ -174,7 +180,7 @@
 
 <Dialogue bind:modalOpen={qrCodeDialogue}>
 	<svelte:fragment slot="icon">
-		<img class="qr-code" src="/icons/wallet.svg" alt="QR Code" />
+		<WalletOutline size="32px" color="var(--surface-six)" />
 	</svelte:fragment>
 	<svelte:fragment slot="title">{qrCodeDialogueName} Wallet</svelte:fragment>
 	<svelte:fragment slot="description">
diff --git a/src/routes/donate/TeamMember.svelte b/src/routes/donate/TeamMember.svelte
index 55fb05fc..e53a22ce 100644
--- a/src/routes/donate/TeamMember.svelte
+++ b/src/routes/donate/TeamMember.svelte
@@ -4,7 +4,8 @@
 
 	import type { TeamMember } from '$lib/types';
 	import ToolTip from '$lib/components/ToolTip.svelte';
-	import Svg from '$lib/components/Svg.svelte';
+
+	import CheckDecagramOutline from 'svelte-material-icons/CheckDecagramOutline.svelte';
 
 	export let member: TeamMember;
 	export let i: number;
@@ -15,9 +16,6 @@
 		duration: 750,
 		delay: 50 * i
 	};
-
-	const verifiedIconPath =
-		'm9.585.52.929.68c.153.112.331.186.518.215l1.138.175a2.678 2.678 0 0 1 2.24 2.24l.174 1.139c.029.187.103.365.215.518l.68.928a2.677 2.677 0 0 1 0 3.17l-.68.928a1.174 1.174 0 0 0-.215.518l-.175 1.138a2.678 2.678 0 0 1-2.241 2.241l-1.138.175a1.17 1.17 0 0 0-.518.215l-.928.68a2.677 2.677 0 0 1-3.17 0l-.928-.68a1.174 1.174 0 0 0-.518-.215L3.83 14.41a2.678 2.678 0 0 1-2.24-2.24l-.175-1.138a1.17 1.17 0 0 0-.215-.518l-.68-.928a2.677 2.677 0 0 1 0-3.17l.68-.928c.112-.153.186-.331.215-.518l.175-1.14a2.678 2.678 0 0 1 2.24-2.24l1.139-.175c.187-.029.365-.103.518-.215l.928-.68a2.677 2.677 0 0 1 3.17 0ZM7.303 1.728l-.927.68a2.67 2.67 0 0 1-1.18.489l-1.137.174a1.179 1.179 0 0 0-.987.987l-.174 1.136a2.677 2.677 0 0 1-.489 1.18l-.68.928a1.18 1.18 0 0 0 0 1.394l.68.927c.256.348.424.753.489 1.18l.174 1.137c.078.509.478.909.987.987l1.136.174a2.67 2.67 0 0 1 1.18.489l.928.68c.414.305.979.305 1.394 0l.927-.68a2.67 2.67 0 0 1 1.18-.489l1.137-.174a1.18 1.18 0 0 0 .987-.987l.174-1.136a2.67 2.67 0 0 1 .489-1.18l.68-.928a1.176 1.176 0 0 0 0-1.394l-.68-.927a2.686 2.686 0 0 1-.489-1.18l-.174-1.137a1.179 1.179 0 0 0-.987-.987l-1.136-.174a2.677 2.677 0 0 1-1.18-.489l-.928-.68a1.176 1.176 0 0 0-1.394 0ZM11.28 6.78l-3.75 3.75a.75.75 0 0 1-1.06 0L4.72 8.78a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L7 8.94l3.22-3.22a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z';
 </script>
 
 <div class="member">
@@ -37,15 +35,11 @@
 				>
 					<div class="desktop">
 						<a href={member.gpg_key.url} rel="noreferrer" target="_blank">
-							<Svg svgHeight={16} viewBoxHeight={16}>
-								<path d={verifiedIconPath} />
-							</Svg>
+							<CheckDecagramOutline size="20px" color="var(--secondary)" />
 						</a>
 					</div>
 					<div class="mobile">
-						<Svg svgHeight={16} viewBoxHeight={16}>
-							<path d={verifiedIconPath} />
-						</Svg>
+						<CheckDecagramOutline size="20px" color="var(--secondary)" />
 						<h5>GPG key</h5>
 					</div>
 				</ToolTip>
diff --git a/src/routes/download/+page.svelte b/src/routes/download/+page.svelte
index 0e4cca46..17de3b1f 100644
--- a/src/routes/download/+page.svelte
+++ b/src/routes/download/+page.svelte
@@ -7,6 +7,8 @@
 
 	import manager_screenshot from '$images/manager.png?format=avif;webp;png&as=picture';
 
+	import TrayArrowDown from 'svelte-material-icons/TrayArrowDown.svelte';
+
 	import Head from '$lib/components/Head.svelte';
 	import Query from '$lib/components/Query.svelte';
 	import Button from '$lib/components/Button.svelte';
@@ -89,16 +91,13 @@
 	<div class="buttons">
 		<Query {query} let:data>
 			{#if !isAndroid || androidVersion < 8}
-				<Button on:click={handleClick} type="filled" icon="download">
+				<Button on:click={handleClick} type="filled">
+					<TrayArrowDown size="20px" />
 					{data.release.version}
 				</Button>
 			{:else}
-				<Button
-					on:click={handleClick}
-					type="filled"
-					icon="download"
-					href={data.release.download_url}
-				>
+				<Button on:click={handleClick} type="filled" href={data.release.download_url}>
+					<TrayArrowDown size="20px" />
 					{data.release.version}
 				</Button>
 			{/if}
diff --git a/src/routes/patches/PatchItem.svelte b/src/routes/patches/PatchItem.svelte
index 570fc69d..749115d9 100644
--- a/src/routes/patches/PatchItem.svelte
+++ b/src/routes/patches/PatchItem.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { slide, fade } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
+
 	import type { Patch } from '$lib/types';
-	import { compare, coerce } from 'semver';
 	import Button from '$lib/components/Button.svelte';
 
+	import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
+
 	export let patch: Patch;
 	export let showAllVersions: boolean;
 	let expanded: boolean = false;
@@ -28,7 +30,9 @@
 			<h3>{patch.name}</h3>
 		</div>
 		{#if hasPatchOptions}
-			<img class="expand-arrow" src="/icons/expand_more.svg" alt="dropdown" />
+			<div class="expand-arrow">
+				<ChevronDown size="24px" color="var(--surface-six)" />
+			</div>
 		{/if}
 	</div>
 	{#if patch.description}
@@ -71,12 +75,12 @@
 			{#if patch.compatiblePackages[0].versions.length > 1}
 				<li class="button">
 					<Button type="text" on:click={() => (showAllVersions = !showAllVersions)}>
-						<img
+						<div
 							class="expand-arrow"
 							style:transform={showAllVersions ? 'rotate(90deg)' : 'rotate(-90deg)'}
-							src="/icons/expand_more.svg"
-							alt="dropdown"
-						/>
+						>
+							<ChevronDown size="24px" color="var(--surface-six)" />
+						</div>
 					</Button>
 				</li>
 			{/if}
diff --git a/static/icons/arrow.svg b/static/icons/arrow.svg
deleted file mode 100644
index 505de120..00000000
--- a/static/icons/arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="#ACC1D2" d="m24 30-10-9.95h20Z"/></svg>
\ No newline at end of file
diff --git a/static/icons/back.svg b/static/icons/back.svg
deleted file mode 100644
index 01bfceed..00000000
--- a/static/icons/back.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="#AFD3F4" d="M24 40.3 7.7 24 24 7.7l2.8 2.75L15.3 22h25v4h-25l11.5 11.5Z"/></svg>
\ No newline at end of file
diff --git a/static/icons/check.svg b/static/icons/check.svg
deleted file mode 100644
index aefb13c6..00000000
--- a/static/icons/check.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="#ACC1D2" d="M18.9 36.4 7 24.5l2.9-2.85 9 9L38.05 11.5l2.9 2.85Z"/></svg>
\ No newline at end of file
diff --git a/static/icons/close.svg b/static/icons/close.svg
deleted file mode 100644
index 71fd5852..00000000
--- a/static/icons/close.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ACC0D3" d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
\ No newline at end of file
diff --git a/static/icons/coins.svg b/static/icons/coins.svg
deleted file mode 100644
index c5f3b803..00000000
--- a/static/icons/coins.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#ACC1D2" viewBox="0 0 24 24"><path d="M15 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8m0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6M3 12a5.99 5.99 0 0 1 4-5.65V4.26C3.55 5.15 1 8.27 1 12s2.55 6.85 6 7.74v-2.09A5.99 5.99 0 0 1 3 12"/></svg>
\ No newline at end of file
diff --git a/static/icons/docs.svg b/static/icons/docs.svg
deleted file mode 100644
index 47dc5b67..00000000
--- a/static/icons/docs.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#FFF" d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm4 18H6V4h7v5h5z"/></svg>
\ No newline at end of file
diff --git a/static/icons/download.svg b/static/icons/download.svg
deleted file mode 100644
index 1f9777db..00000000
--- a/static/icons/download.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M11 40q-1.2 0-2.1-.9Q8 38.2 8 37v-7.15h3V37h26v-7.15h3V37q0 1.2-.9 2.1-.9.9-2.1.9Zm13-7.65-9.65-9.65 2.15-2.15 6 6V8h3v18.55l6-6 2.15 2.15Z"/></svg>
\ No newline at end of file
diff --git a/static/icons/expand_less.svg b/static/icons/expand_less.svg
deleted file mode 100644
index d4a3ec35..00000000
--- a/static/icons/expand_less.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#ACC1D2" viewBox="0 0 24 24"><path d="M11.29 8.71 6.7 13.3a.996.996 0 1 0 1.41 1.41L12 10.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 8.71a.996.996 0 0 0-1.41 0"/></svg>
\ No newline at end of file
diff --git a/static/icons/expand_more.svg b/static/icons/expand_more.svg
deleted file mode 100644
index 34bb0c9c..00000000
--- a/static/icons/expand_more.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#ACC1D2" viewBox="0 0 24 24"><path d="M15.88 9.29 12 13.17 8.12 9.29a.996.996 0 1 0-1.41 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 0 0 0-1.41c-.39-.38-1.03-.39-1.42 0"/></svg>
\ No newline at end of file
diff --git a/static/icons/heart.svg b/static/icons/heart.svg
deleted file mode 100644
index 71d44422..00000000
--- a/static/icons/heart.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#F04E98" viewBox="0 0 24 24"><path d="m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"/></svg>
\ No newline at end of file
diff --git a/static/icons/home.svg b/static/icons/home.svg
deleted file mode 100644
index ee924a09..00000000
--- a/static/icons/home.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M11 42q-1.25 0-2.125-.875T8 39V19.5q0-.7.325-1.35.325-.65.875-1.05l13-9.75q.4-.3.85-.45.45-.15.95-.15.5 0 .95.15.45.15.85.45l13 9.75q.55.4.875 1.05.325.65.325 1.35V39q0 1.25-.875 2.125T37 42h-9V28h-8v14Z"/></svg>
\ No newline at end of file
diff --git a/static/icons/qr_code.svg b/static/icons/qr_code.svg
deleted file mode 100644
index 024f0a2a..00000000
--- a/static/icons/qr_code.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#acc1d2" viewBox="0 0 20 20"><path d="M4 9h5V4H4zm.94-4.06h3.12v3.12H4.94zM4 16h5v-5H4zm.94-4.06h3.12v3.12H4.94zM11 4v5h5V4zm4.06 4.06h-3.12V4.94h3.12zM15 15h1v1h-1zm0-2h1v1h-1zm0-2h1v1h-1zm-3 1h1v1h-1zm-1-1h1v1h-1zm2 2h1v1h-1zm1 1h1v1h-1zm-1-3h1v1h-1zm1 1h1v1h-1zm-3 1h1v1h-1zm1 1h1v1h-1zm-1 1h1v1h-1zm2 0h1v1h-1z"/></svg>
\ No newline at end of file
diff --git a/static/icons/reset.svg b/static/icons/reset.svg
deleted file mode 100644
index db9aa11d..00000000
--- a/static/icons/reset.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#ACC1D2"><path d="M14 38v-3h14.45q3.5 0 6.025-2.325Q37 30.35 37 26.9t-2.525-5.775Q31.95 18.8 28.45 18.8H13.7l5.7 5.7-2.1 2.1L8 17.3 17.3 8l2.1 2.1-5.7 5.7h14.7q4.75 0 8.175 3.2Q40 22.2 40 26.9t-3.425 7.9Q33.15 38 28.4 38Z"/></svg>
\ No newline at end of file
diff --git a/static/icons/search.svg b/static/icons/search.svg
deleted file mode 100644
index 2b7e5c38..00000000
--- a/static/icons/search.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="#ACC0D3" d="m39.75 42.75-13.3-13.3Q25 30.65 23 31.35t-4.25.7q-5.65 0-9.525-3.9t-3.875-9.4q0-5.5 3.9-9.4 3.9-3.9 9.4-3.9 5.55 0 9.4 3.9 3.85 3.9 3.85 9.4 0 2.2-.65 4.15-.65 1.95-1.95 3.7l13.35 13.25ZM18.7 28.05q3.85 0 6.55-2.725 2.7-2.725 2.7-6.575t-2.7-6.575Q22.55 9.45 18.7 9.45q-3.95 0-6.675 2.725Q9.3 14.9 9.3 18.75t2.725 6.575Q14.75 28.05 18.7 28.05"/></svg>
\ No newline at end of file
diff --git a/static/icons/wallet.svg b/static/icons/wallet.svg
deleted file mode 100644
index 7ad83cd3..00000000
--- a/static/icons/wallet.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 960 960"><path fill="#ACC1D2" d="M240 800q-66 0-113-47T80 640V320q0-66 47-113t113-47h480q66 0 113 47t47 113v320q0 66-47 113t-113 47zm0-470h480q29 0 54.5 9t45.5 26v-45q0-42-29-71t-71-29H240q-42 0-71 29t-29 71v45q20-17 45.5-26t54.5-9m-97 136 477 115q7 2 14.5.5T647 575l160-134q-13-23-36-37t-51-14H240q-35 0-62 21.5T143 466"/></svg>
\ No newline at end of file