diff --git a/apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/index.vue b/apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/index.vue
index 12c53f983d..730e3a0164 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/index.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { CheckIcon, InfoIcon, RefreshCwIcon, SaveIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import {
+	Avatar,
 	Button,
 	commonMessages,
 	defineMessages,
@@ -342,37 +343,37 @@ const messages = defineMessages({
 				class="flex w-[244px] shrink-0 flex-col gap-4 overflow-y-auto border-0 border-r border-solid border-surface-5 p-6"
 			>
 				<div
-					class="flex w-full flex-col items-center gap-3 rounded-[20px] border border-solid border-surface-4 bg-surface-2 p-4"
+					class="flex w-full flex-col items-center gap-3.5 rounded-[20px] border border-solid border-surface-4 bg-surface-2 p-5"
 				>
-					<div
-						class="icon-outline relative size-[132px] overflow-hidden rounded-[20px]"
+					<Avatar
+						:src="selectedSymbolOption.asset"
+						size="132px"
 						:style="backgroundStyle(selectedBackgroundOption.background)"
-					>
-						<img :src="selectedSymbolOption.asset" alt="" class="size-full object-cover" />
-					</div>
+						no-shadow
+					/>
 					<div class="flex items-center gap-2.5">
-						<div
-							class="icon-outline relative size-12 overflow-hidden rounded-2xl"
+						<Avatar
+							:src="selectedSymbolOption.asset"
+							size="40px"
 							:style="backgroundStyle(selectedBackgroundOption.background)"
-						>
-							<img :src="selectedSymbolOption.asset" alt="" class="size-full object-cover" />
-						</div>
-						<div
-							class="icon-outline relative size-8 overflow-hidden rounded-[10px]"
+							no-shadow
+						/>
+						<Avatar
+							:src="selectedSymbolOption.asset"
+							size="30px"
 							:style="backgroundStyle(selectedBackgroundOption.background)"
-						>
-							<img :src="selectedSymbolOption.asset" alt="" class="size-full object-cover" />
-						</div>
-						<div
-							class="icon-outline relative size-4 overflow-hidden rounded-[5px]"
+							no-shadow
+						/>
+						<Avatar
+							:src="selectedSymbolOption.asset"
+							size="20px"
 							:style="backgroundStyle(selectedBackgroundOption.background)"
-						>
-							<img :src="selectedSymbolOption.asset" alt="" class="size-full object-cover" />
-						</div>
+							no-shadow
+						/>
 					</div>
 				</div>
 
-				<Button class="w-full !shadow-none" @click="surpriseMe">
+				<Button class="w-full" @click="surpriseMe">
 					<RefreshCwIcon />
 					{{ formatMessage(messages.surpriseMe) }}
 				</Button>
diff --git a/packages/app-lib/src/state/instances/adapters/sqlite/instance_rows.rs b/packages/app-lib/src/state/instances/adapters/sqlite/instance_rows.rs
index 123b67275b..1c829d7308 100644
--- a/packages/app-lib/src/state/instances/adapters/sqlite/instance_rows.rs
+++ b/packages/app-lib/src/state/instances/adapters/sqlite/instance_rows.rs
@@ -730,7 +730,7 @@ pub(crate) async fn update_recent_instance_icon_config(
 				SELECT rowid
 				FROM recent_instance_icon_configs
 				ORDER BY used_at DESC, background, symbol
-				LIMIT 8
+				LIMIT 16
 			)
 			",
     )
@@ -748,7 +748,7 @@ pub(crate) async fn get_recent_instance_icon_configs(
 		SELECT background, symbol
 		FROM recent_instance_icon_configs
 		ORDER BY used_at DESC, background, symbol
-		LIMIT 8
+		LIMIT 16
 		",
     )
     .fetch_all(pool)