diff --git a/packages/frontend/src/pages/settings/deck.vue b/packages/frontend/src/pages/settings/deck.vue
index 81ae9bc2f7..e574ec7dc0 100644
--- a/packages/frontend/src/pages/settings/deck.vue
+++ b/packages/frontend/src/pages/settings/deck.vue
@@ -38,6 +38,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata(() => ({
 	title: i18n.ts.deck,
-	icon: 'ph-text-columns ph-bold ph-lg',
+	icon: 'ti ti-columns',
 }));
 </script>
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index aa2f04d01f..b48308b96f 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -27,9 +27,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkRadios v-model="overridedDeviceKind">
 		<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
 		<option :value="null">{{ i18n.ts.auto }}</option>
-		<option value="smartphone"><i class="ph-device-mobile ph-bold ph-lg"/> {{ i18n.ts.smartphone }}</option>
-		<option value="tablet"><i class="ph-device-tablet ph-bold ph-lg"/> {{ i18n.ts.tablet }}</option>
-		<option value="desktop"><i class="ph-desktop ph-bold ph-lg"/> {{ i18n.ts.desktop }}</option>
+		<option value="smartphone"><i class="ti ti-device-mobile"/> {{ i18n.ts.smartphone }}</option>
+		<option value="tablet"><i class="ti ti-device-tablet"/> {{ i18n.ts.tablet }}</option>
+		<option value="desktop"><i class="ti ti-device-desktop"/> {{ i18n.ts.desktop }}</option>
 	</MkRadios>
 
 	<FormSection>
@@ -157,16 +157,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<!-- <p class="caption">Testing Testing</p> -->
 			<MkRadios v-model="notificationPosition">
 				<template #label>{{ i18n.ts.position }}</template>
-				<option value="leftTop"><i class="ph-arrow-up-left ph-bold ph-lg"></i> {{ i18n.ts.leftTop }}</option>
-				<option value="rightTop"><i class="ph-arrow-up-right ph-bold ph-lg"></i> {{ i18n.ts.rightTop }}</option>
-				<option value="leftBottom"><i class="ph-arrow-down-left ph-bold ph-lg"></i> {{ i18n.ts.leftBottom }}</option>
-				<option value="rightBottom"><i class="ph-arrow-down-right ph-bold ph-lg"></i> {{ i18n.ts.rightBottom }}</option>
+				<option value="leftTop"><i class="ti ti-align-box-left-top"></i> {{ i18n.ts.leftTop }}</option>
+				<option value="rightTop"><i class="ti ti-align-box-right-top"></i> {{ i18n.ts.rightTop }}</option>
+				<option value="leftBottom"><i class="ti ti-align-box-left-bottom"></i> {{ i18n.ts.leftBottom }}</option>
+				<option value="rightBottom"><i class="ti ti-align-box-right-bottom"></i> {{ i18n.ts.rightBottom }}</option>
 			</MkRadios>
 
 			<MkRadios v-model="notificationStackAxis">
 				<template #label>{{ i18n.ts.stackAxis }}</template>
-				<option value="vertical"><i class="ph-split-vertical ph-bold ph-lg"></i> {{ i18n.ts.vertical }}</option>
-				<option value="horizontal"><i class="ph-split-horizontal ph-bold ph-lg"></i> {{ i18n.ts.horizontal }}</option>
+				<option value="vertical"><i class="ti ti-carousel-vertical"></i> {{ i18n.ts.vertical }}</option>
+				<option value="horizontal"><i class="ti ti-carousel-horizontal"></i> {{ i18n.ts.horizontal }}</option>
 			</MkRadios>
 
 			<MkButton @click="testNotification">{{ i18n.ts._notification.checkNotificationBehavior }}</MkButton>
diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
index f5f65fc254..0a97ba3e4f 100644
--- a/packages/frontend/vite.config.ts
+++ b/packages/frontend/vite.config.ts
@@ -424,6 +424,16 @@ export function getConfig(): UserConfig {
 					'ti ti-message-off': 'ph-bell-slash ph-bold ph-lg',
 					'ti ti-pinned-off': 'ph-push-pin-slash ph-bold ph-lg',
 					'ti ti-user-off': 'ph-user-minus ph-bold ph-lg',
+					'ti ti-columns': 'ph-text-columns ph-bold ph-lg',
+					'ti ti-device-mobile': 'ph-device-mobile ph-bold ph-lg',
+					'ti ti-device-tablet': 'ph-device-tablet ph-bold ph-lg',
+					'ti ti-device-desktop': 'ph-desktop ph-bold ph-lg',
+					'ti ti-align-box-left-top': 'ph-arrow-up-left ph-bold ph-lg',
+					'ti ti-align-box-right-top': 'ph-arrow-up-right ph-bold ph-lg',
+					'ti ti-align-box-left-bottom': 'ph-arrow-down-left ph-bold ph-lg',
+					'ti ti-align-box-right-bottom': 'ph-arrow-down-right ph-bold ph-lg',
+					'ti ti-carousel-vertical': 'ph-split-vertical ph-bold ph-lg',
+					'ti ti-carousel-horizontal': 'ph-split-horizontal ph-bold ph-lg',
 				},
 			}),
 			...process.env.NODE_ENV === 'production'