From 87dc871578304c5ae7a104e2f28c108f0ce51290 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Thu, 15 Jan 2026 10:43:56 +0900
Subject: [PATCH] replace remixicon

---
 src/components/AvatarInfo.vue                 |  16 +--
 src/components/InviteYourself.vue             |  11 +-
 src/components/LastJoin.vue                   |   4 +-
 .../dialogs/AvatarDialog/AvatarDialog.vue     |  14 +-
 .../dialogs/GroupDialog/GroupDialog.vue       |  21 +--
 .../GroupMemberModerationDialog.vue           |   4 +-
 .../previousInstancesGroupColumns.jsx         |  10 +-
 .../previousInstancesWorldColumns.jsx         |   6 +-
 .../dialogs/UserDialog/LanguageDialog.vue     |   3 +-
 .../dialogs/UserDialog/UserDialog.vue         |  24 ++--
 .../dialogs/UserDialog/UserSummaryHeader.vue  |  22 +--
 .../previousInstancesUserColumns.jsx          |   8 +-
 .../dialogs/WorldDialog/WorldDialog.vue       |  23 +--
 src/views/Favorites/FavoritesAvatar.vue       |   6 +-
 src/views/Favorites/FavoritesFriend.vue       |  20 ++-
 src/views/Favorites/FavoritesWorld.vue        |   4 +-
 .../components/FavoritesAvatarItem.vue        |  21 +--
 .../FavoritesAvatarLocalHistoryItem.vue       |   9 +-
 .../components/FavoritesFriendItem.vue        |   9 +-
 .../components/FavoritesMoveDropdown.vue      |   5 +-
 .../components/FavoritesWorldItem.vue         |  29 ++--
 .../components/FavoritesWorldLocalItem.vue    |  17 +--
 src/views/FriendList/columns.jsx              |  18 +--
 src/views/FriendLog/columns.jsx               |  14 +-
 .../components/FriendsLocationsCard.vue       |   5 +-
 src/views/GameLog/columns.jsx                 |  16 +--
 src/views/Login/Login.vue                     |   6 +-
 src/views/Moderation/columns.jsx              |  14 +-
 src/views/Notifications/columns.jsx           |  84 +++++------
 src/views/PlayerList/PlayerList.vue           |   8 +-
 src/views/PlayerList/columns.jsx              |  16 ++-
 .../dialogs/ChatboxBlacklistDialog.vue        |   3 +-
 .../Settings/components/Tabs/AdvancedTab.vue  |  10 +-
 src/views/Sidebar/components/FriendItem.vue   |   4 +-
 src/views/Tools/Tools.vue                     |  43 ++++--
 src/vr/Vr.vue                                 | 136 +++++++++++-------
 src/vr/components/VrLocation.vue              |   3 +-
 37 files changed, 370 insertions(+), 296 deletions(-)

diff --git a/src/components/AvatarInfo.vue b/src/components/AvatarInfo.vue
index 7d613b2b..bf49f282 100644
--- a/src/components/AvatarInfo.vue
+++ b/src/components/AvatarInfo.vue
@@ -1,13 +1,17 @@
 <template>
     <div @click="confirm" class="avatar-info">
-        <span v-if="avatarType" :class="color" class="mr-2"><i :class="avatarTypeIcons" /></span>
+        <span v-if="avatarType" :class="color" class="mr-2">
+            <Lock v-if="avatarType === '(own)'" class="h-4 w-4" />
+            <Unlock v-else-if="avatarType === '(public)'" class="h-4 w-4" />
+        </span>
         <span class="mr-2">{{ avatarName }}</span>
         <span v-if="avatarTags" style="color: var(--el-text-color-secondary); font-size: 12px">{{ avatarTags }}</span>
     </div>
 </template>
 
 <script setup>
-    import { computed, ref, watch } from 'vue';
+    import { Lock, Unlock } from 'lucide-vue-next';
+    import { ref, watch } from 'vue';
 
     import { useAvatarStore } from '../stores';
 
@@ -27,14 +31,6 @@
     const color = ref('');
     let ownerId = '';
 
-    const avatarTypeIcons = computed(() => {
-        return avatarType.value === '(own)'
-            ? 'ri-lock-line'
-            : avatarType.value === '(public)'
-              ? 'ri-lock-unlock-line'
-              : '';
-    });
-
     const parse = async () => {
         ownerId = '';
         avatarName.value = '';
diff --git a/src/components/InviteYourself.vue b/src/components/InviteYourself.vue
index a86db232..2e29e503 100644
--- a/src/components/InviteYourself.vue
+++ b/src/components/InviteYourself.vue
@@ -7,8 +7,8 @@
                 variant="outline"
                 v-show="isVisible"
                 @click="confirmInvite"
-                ><i class="ri-mail-line"></i
-            ></Button>
+                ><Mail class="h-4 w-4" /> ></Button
+            >
         </TooltipWrapper>
         <TooltipWrapper v-else side="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
             <Button
@@ -16,7 +16,7 @@
                 size="icon-sm"
                 variant="outline"
                 v-if="isOpeningInstance">
-                <i class="ri-loader-line"></i>
+                <Loader2 class="h-4 w-4 animate-spin" />
             </Button>
             <Button
                 class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
@@ -24,13 +24,14 @@
                 variant="outline"
                 v-else
                 @click="openInstance"
-                ><i class="ri-mail-line"></i
-            ></Button>
+                ><Mail class="h-4 w-4"
+            /></Button>
         </TooltipWrapper>
     </div>
 </template>
 
 <script setup>
+    import { Loader2, Mail } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
diff --git a/src/components/LastJoin.vue b/src/components/LastJoin.vue
index e2d9e384..b3b0c6b5 100644
--- a/src/components/LastJoin.vue
+++ b/src/components/LastJoin.vue
@@ -4,13 +4,15 @@
             <template #content>
                 <span>{{ t('dialog.user.info.last_join') }} <Timer :epoch="lastJoin" /></span>
             </template>
-            <i class="ri-map-pin-time-line text-muted-foreground"></i>
+            <MapPin class="h-4 w-4 text-muted-foreground" />
         </TooltipWrapper>
     </span>
 </template>
 
 <script setup>
+    // TODO(icon): time aspect lost (map pin with time)
     import { ref, watch } from 'vue';
+    import { MapPin } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index d169dfc1..b1886012 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -45,7 +45,7 @@
                                     class="x-tag-platform-pc"
                                     variant="outline"
                                     style="margin-right: 5px; margin-top: 5px"
-                                    ><i class="ri-computer-line"></i>
+                                    ><Monitor class="h-4 w-4 x-tag-platform-pc" />
                                     <span
                                         v-if="avatarDialog.platformInfo.pc"
                                         :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
@@ -63,7 +63,7 @@
                                     class="x-tag-platform-quest"
                                     variant="outline"
                                     style="margin-right: 5px; margin-top: 5px"
-                                    ><i class="ri-android-line"></i>
+                                    ><Smartphone class="h-4 w-4 x-tag-platform-quest" />
                                     <span
                                         v-if="avatarDialog.platformInfo.android"
                                         :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
@@ -81,7 +81,7 @@
                                     class="x-tag-platform-ios"
                                     variant="outline"
                                     style="margin-right: 5px; margin-top: 5px"
-                                    ><i class="ri-apple-line"></i>
+                                    ><Apple class="h-4 w-4 x-tag-platform-ios" />
                                     <span
                                         v-if="avatarDialog.platformInfo.ios"
                                         :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
@@ -420,8 +420,8 @@
                                                     size="icon-sm"
                                                     variant="outline"
                                                     @click.stop
-                                                    ><i class="ri-file-copy-line"></i
-                                                ></Button>
+                                                    ><Copy class="h-4 w-4" />
+                                                </Button>
                                             </DropdownMenuTrigger>
                                             <DropdownMenuContent>
                                                 <DropdownMenuItem @click="copyAvatarId(avatarDialog.id)">
@@ -523,15 +523,19 @@
 <script setup>
     import {
         AlertTriangle,
+        Apple,
         Check,
         CheckCircle,
+        Copy,
         Download,
         Ellipsis,
         Image,
+        Monitor,
         Pencil,
         RefreshCcw,
         RefreshCw,
         Share2,
+        Smartphone,
         Star,
         Trash2,
         Upload,
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 9b032ce7..8c618d3c 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -365,8 +365,8 @@
                                         size="icon"
                                         variant="outline"
                                         @click="refreshInstancePlayerCount(room.tag)"
-                                        ><i class="ri-refresh-line"></i
-                                    ></Button>
+                                        ><RefreshCw class="h-4 w-4" />
+                                    </Button>
                                 </TooltipWrapper>
                                 <LastJoin :location="room.tag" :currentlocation="lastLocation.location" />
                                 <InstanceInfo
@@ -629,8 +629,8 @@
                                                 size="icon-sm"
                                                 variant="outline"
                                                 @click="copyToClipboard(groupDialog.ref.$url)"
-                                                ><i class="ri-file-copy-line"></i
-                                            ></Button> </TooltipWrapper
+                                                ><Copy class="h-4 w-4" />
+                                            </Button> </TooltipWrapper
                                     ></span>
                                 </div>
                             </div>
@@ -645,8 +645,8 @@
                                                 size="icon-sm"
                                                 variant="outline"
                                                 @click="copyToClipboard(groupDialog.id)"
-                                                ><i class="ri-file-copy-line"></i
-                                            ></Button> </TooltipWrapper
+                                                ><Copy class="h-4 w-4" />
+                                            </Button> </TooltipWrapper
                                     ></span>
                                 </div>
                             </div>
@@ -806,8 +806,8 @@
                                                     class="h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
                                                     variant="ghost"
                                                     @click="showGroupPostEditDialog(groupDialog.id, post)"
-                                                    ><i class="ri-pencil-line"></i
-                                                ></Button>
+                                                    ><Pencil class="h-4 w-4" />
+                                                </Button>
                                             </TooltipWrapper>
                                             <TooltipWrapper
                                                 side="top"
@@ -817,8 +817,8 @@
                                                     class="h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
                                                     variant="ghost"
                                                     @click="confirmDeleteGroupPost(post)"
-                                                    ><i class="ri-delete-bin-line"></i
-                                                ></Button>
+                                                    ><Trash2 class="h-4 w-4" />
+                                                </Button>
                                             </TooltipWrapper>
                                         </template>
                                     </div>
@@ -1135,6 +1135,7 @@
         BellOff,
         Check,
         CheckCircle,
+        Copy,
         Download,
         Eye,
         Loader2,
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
index 7b0032ca..3e5f4e22 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
@@ -408,7 +408,7 @@
                         cursor: pointer;
                     "
                     @click="deleteSelectedGroupMember(user)">
-                    <i class="ri-close-line" style="font-size: 12px; line-height: 1"></i>
+                    <X class="h-3 w-3" />
                 </button>
             </Badge>
             <br />
@@ -526,7 +526,7 @@
 </template>
 
 <script setup>
-    import { AlertTriangle, ArrowDown, Loader2, RefreshCw, Trash2 } from 'lucide-vue-next';
+    import { AlertTriangle, ArrowDown, Loader2, RefreshCw, Trash2, X } from 'lucide-vue-next';
     import { computed, reactive, ref, watch } from 'vue';
     import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
     import { Button } from '@/components/ui/button';
diff --git a/src/components/dialogs/PreviousInstancesDialog/previousInstancesGroupColumns.jsx b/src/components/dialogs/PreviousInstancesDialog/previousInstancesGroupColumns.jsx
index 7317098a..4a7c8a09 100644
--- a/src/components/dialogs/PreviousInstancesDialog/previousInstancesGroupColumns.jsx
+++ b/src/components/dialogs/PreviousInstancesDialog/previousInstancesGroupColumns.jsx
@@ -1,4 +1,4 @@
-import { ArrowUpDown } from 'lucide-vue-next';
+import { ArrowUpDown, Info, Trash2 } from 'lucide-vue-next';
 
 import Location from '../../Location.vue';
 import { Button } from '../../ui/button';
@@ -57,7 +57,9 @@ export const createColumns = ({ shiftHeld, onShowInfo, onDelete, onDeletePrompt
         },
         cell: ({ row }) => (
             <Location
-                location={row.original?.$location?.tag ?? row.original?.location}
+                location={
+                    row.original?.$location?.tag ?? row.original?.location
+                }
                 grouphint={row.original?.groupName}
                 hint={row.original?.worldName}
             />
@@ -95,7 +97,7 @@ export const createColumns = ({ shiftHeld, onShowInfo, onDelete, onDeletePrompt
                             onShowInfo?.(original?.location);
                         }}
                     >
-                        <i class="ri-information-line"></i>
+                        <Info class="h-4 w-4" />
                     </Button>
 
                     <Button
@@ -112,7 +114,7 @@ export const createColumns = ({ shiftHeld, onShowInfo, onDelete, onDeletePrompt
                             }
                         }}
                     >
-                        <i class="ri-delete-bin-line"></i>
+                        <Trash2 class="h-4 w-4" />
                     </Button>
                 </div>
             );
diff --git a/src/components/dialogs/PreviousInstancesDialog/previousInstancesWorldColumns.jsx b/src/components/dialogs/PreviousInstancesDialog/previousInstancesWorldColumns.jsx
index ecd2e464..e8faef33 100644
--- a/src/components/dialogs/PreviousInstancesDialog/previousInstancesWorldColumns.jsx
+++ b/src/components/dialogs/PreviousInstancesDialog/previousInstancesWorldColumns.jsx
@@ -1,4 +1,4 @@
-import { ArrowUpDown } from 'lucide-vue-next';
+import { ArrowUpDown, Info, Trash2 } from 'lucide-vue-next';
 
 import DisplayName from '../../DisplayName.vue';
 import LocationWorld from '../../LocationWorld.vue';
@@ -116,7 +116,7 @@ export const createColumns = ({
                             onShowInfo?.(original?.location);
                         }}
                     >
-                        <i class="ri-information-line"></i>
+                        <Info class="h-4 w-4" />
                     </Button>
 
                     <Button
@@ -133,7 +133,7 @@ export const createColumns = ({
                             }
                         }}
                     >
-                        <i class="ri-delete-bin-line"></i>
+                        <Trash2 class="h-4 w-4" />
                     </Button>
                 </div>
             );
diff --git a/src/components/dialogs/UserDialog/LanguageDialog.vue b/src/components/dialogs/UserDialog/LanguageDialog.vue
index e1ee5fed..2a9e6bde 100644
--- a/src/components/dialogs/UserDialog/LanguageDialog.vue
+++ b/src/components/dialogs/UserDialog/LanguageDialog.vue
@@ -26,7 +26,7 @@
                             cursor: pointer;
                         "
                         @click="removeUserLanguage(item.key)">
-                        <i class="ri-close-line" style="font-size: 12px; line-height: 1"></i>
+                        <X class="h-3 w-3" />
                     </button>
                 </Badge>
             </div>
@@ -58,6 +58,7 @@
 </template>
 
 <script setup>
+    import { X } from 'lucide-vue-next';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index 3293574a..e9942a5c 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -46,8 +46,8 @@
                                                 size="icon"
                                                 variant="outline"
                                                 @click="refreshInstancePlayerCount(userDialog.$location.tag)"
-                                                ><i class="ri-refresh-line"></i
-                                            ></Button>
+                                                ><RefreshCw class="h-4 w-4" />
+                                            </Button>
                                         </TooltipWrapper>
                                         <LastJoin
                                             :location="userDialog.$location.tag"
@@ -250,8 +250,8 @@
                                         variant="ghost"
                                         @click="translateBio">
                                         <Spinner v-if="translateLoading" class="size-1" />
-                                        <i v-else class="ri-translate-2"> </i
-                                    ></Button>
+                                        <Languages v-else class="h-3 w-3" />
+                                    </Button>
                                     <Button
                                         class="w-3 h-6 text-xs"
                                         size="icon-sm"
@@ -259,8 +259,8 @@
                                         v-if="userDialog.id === currentUser.id"
                                         style="margin-left: 5px; padding: 0"
                                         @click="showBioDialog"
-                                        ><i class="ri-pencil-line"></i
-                                    ></Button>
+                                        ><Pencil class="h-3 w-3" />
+                                    </Button>
                                 </div>
                                 <div style="margin-top: 5px" class="flex items-center">
                                     <TooltipWrapper v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
@@ -511,7 +511,7 @@
                                         size="icon-sm"
                                         variant="outline"
                                         @click.stop="resetHome()"
-                                        ><i class="ri-delete-bin-line"></i>
+                                        ><Trash2 class="h-4 w-4" />
                                     </Button>
                                 </span>
                             </div>
@@ -529,8 +529,8 @@
                                                     size="icon-sm"
                                                     variant="outline"
                                                     @click.stop
-                                                    ><i class="ri-file-copy-line"></i
-                                                ></Button>
+                                                    ><Copy class="h-4 w-4" />
+                                                </Button>
                                             </DropdownMenuTrigger>
                                             <DropdownMenuContent>
                                                 <DropdownMenuItem @click="copyUserId(userDialog.id)">
@@ -1302,14 +1302,18 @@
         AlertTriangle,
         ArrowDown,
         ArrowUp,
+        Copy,
         Download,
         Eye,
+        Languages,
         Loader2,
         LogOut,
         MoreHorizontal,
+        Pencil,
         RefreshCcw,
         RefreshCw,
-        Tag
+        Tag,
+        Trash2
     } from 'lucide-vue-next';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
diff --git a/src/components/dialogs/UserDialog/UserSummaryHeader.vue b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
index fcdd019f..2e885a45 100644
--- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue
+++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
@@ -79,7 +79,7 @@
                             class="name"
                             :class="userDialog.ref.$trustClass"
                             style="margin-right: 5px; margin-top: 5px">
-                            <i class="ri-shield-line"></i> {{ userDialog.ref.$trustLevel }}
+                            <Shield class="mr-1 h-4 w-4 inline-block" /> {{ userDialog.ref.$trustLevel }}
                         </Badge>
                     </TooltipWrapper>
                     <TooltipWrapper
@@ -91,10 +91,10 @@
                             class="x-tag-age-verification"
                             style="margin-right: 5px; margin-top: 5px">
                             <template v-if="userDialog.ref.ageVerificationStatus === '18+'">
-                                <i class="ri-info-card-line"></i> 18+
+                                <IdCard class="mr-1 h-4 w-4 inline-block" /> 18+
                             </template>
                             <template v-else>
-                                <i class="ri-info-card-line"></i>
+                                <IdCard class="mr-1 h-4 w-4 inline-block" />
                             </template>
                         </Badge>
                     </TooltipWrapper>
@@ -103,7 +103,7 @@
                         side="top"
                         :content="t('dialog.user.tags.friend_number')">
                         <Badge variant="outline" class="x-tag-friend" style="margin-right: 5px; margin-top: 5px">
-                            <i class="ri-user-add-line"></i>
+                            <UserPlus class="mr-1 h-4 w-4 inline-block" />
                             {{ userDialog.ref.$friendNumber ? userDialog.ref.$friendNumber : '' }}
                         </Badge>
                     </TooltipWrapper>
@@ -112,7 +112,7 @@
                         side="top"
                         :content="t('dialog.user.tags.mutual_friends')">
                         <Badge variant="outline" class="x-tag-mutual-friend" style="margin-right: 5px; margin-top: 5px">
-                            <i class="ri-group-line"></i>
+                            <Users class="mr-1 h-4 w-4 inline-block" />
                             {{ userDialog.mutualFriendCount }}
                         </Badge>
                     </TooltipWrapper>
@@ -140,7 +140,7 @@
 
                     <TooltipWrapper v-if="userDialog.ref.$platform === 'standalonewindows'" side="top" content="PC">
                         <Badge variant="outline" class="x-tag-platform-pc" style="margin-right: 5px; margin-top: 5px">
-                            <i class="ri-computer-line"></i>
+                            <Monitor class="h-4 w-4 x-tag-platform-pc" />
                         </Badge>
                     </TooltipWrapper>
                     <TooltipWrapper v-else-if="userDialog.ref.$platform === 'android'" side="top" content="Android">
@@ -148,13 +148,13 @@
                             variant="outline"
                             class="x-tag-platform-quest"
                             style="margin-right: 5px; margin-top: 5px">
-                            <i class="ri-android-line"></i>
+                            <Smartphone class="h-4 w-4 x-tag-platform-quest" />
                         </Badge>
                     </TooltipWrapper>
                     <TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS">
-                        <Badge variant="outline" class="x-tag-platform-ios" style="margin-right: 5px; margin-top: 5px"
-                            ><i class="ri-apple-line"></i
-                        ></Badge>
+                        <Badge variant="outline" class="x-tag-platform-ios" style="margin-right: 5px; margin-top: 5px">
+                            <Apple class="h-4 w-4 x-tag-platform-ios" />
+                        </Badge>
                     </TooltipWrapper>
                     <Badge
                         v-else-if="userDialog.ref.$platform"
@@ -260,7 +260,7 @@
 </template>
 
 <script setup>
-    import { ChevronDown } from 'lucide-vue-next';
+    import { Apple, ChevronDown, IdCard, Monitor, Shield, Smartphone, UserPlus, Users } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
diff --git a/src/components/dialogs/UserDialog/previousInstancesUserColumns.jsx b/src/components/dialogs/UserDialog/previousInstancesUserColumns.jsx
index 26ac89f7..f2ed539b 100644
--- a/src/components/dialogs/UserDialog/previousInstancesUserColumns.jsx
+++ b/src/components/dialogs/UserDialog/previousInstancesUserColumns.jsx
@@ -1,4 +1,4 @@
-import { ArrowUpDown } from 'lucide-vue-next';
+import { ArrowUpDown, DoorOpen, Info, Trash2 } from 'lucide-vue-next';
 
 import DisplayName from '../../DisplayName.vue';
 import Location from '../../Location.vue';
@@ -115,7 +115,7 @@ export const createColumns = ({
                             onLaunch?.(original?.location);
                         }}
                     >
-                        <i class="ri-door-open-line"></i>
+                        <DoorOpen class="h-4 w-4" />
                     </Button>
 
                     <Button
@@ -127,7 +127,7 @@ export const createColumns = ({
                             onShowInfo?.(original?.location);
                         }}
                     >
-                        <i class="ri-information-line"></i>
+                        <Info class="h-4 w-4" />
                     </Button>
 
                     <Button
@@ -144,7 +144,7 @@ export const createColumns = ({
                             }
                         }}
                     >
-                        <i class="ri-delete-bin-line"></i>
+                        <Trash2 class="h-4 w-4" />
                     </Button>
                 </div>
             );
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index e7fe5cd8..a0c7fb7e 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -58,7 +58,7 @@
                                     class="x-tag-platform-pc"
                                     variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
-                                    <i class="ri-computer-line"></i
+                                    <Monitor class="h-4 w-4 x-tag-platform-pc" />
                                     ><span
                                         v-if="worldDialog.bundleSizes['standalonewindows']"
                                         :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']">
@@ -72,7 +72,7 @@
                                     class="x-tag-platform-quest"
                                     variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
-                                    <i class="ri-android-line"></i
+                                    <Smartphone class="h-4 w-4 x-tag-platform-quest" />
                                     ><span
                                         v-if="worldDialog.bundleSizes['android']"
                                         :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']">
@@ -86,7 +86,7 @@
                                     class="x-tag-platform-ios"
                                     variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
-                                    <i class="ri-apple-line"></i
+                                    <Apple class="h-4 w-4 x-tag-platform-ios" />
                                     ><span
                                         v-if="worldDialog.bundleSizes['ios']"
                                         :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']">
@@ -357,8 +357,8 @@
                                             size="icon"
                                             variant="outline"
                                             @click="refreshInstancePlayerCount(room.tag)"
-                                            ><i class="ri-refresh-line"></i
-                                        ></Button>
+                                            ><RefreshCw class="h-4 w-4" />
+                                        </Button>
                                     </TooltipWrapper>
                                     <TooltipWrapper
                                         v-if="instanceJoinHistory.get(room.$location.tag)"
@@ -370,8 +370,8 @@
                                             variant="outline"
                                             style="margin-left: 5px"
                                             @click="showPreviousInstancesInfoDialog(room.location)"
-                                            ><i class="ri-history-line"></i
-                                        ></Button>
+                                            ><History class="h-4 w-4" />
+                                        </Button>
                                     </TooltipWrapper>
                                     <LastJoin :location="room.$location.tag" :currentlocation="lastLocation.location" />
                                     <InstanceInfo
@@ -463,8 +463,8 @@
                                                     size="icon-sm"
                                                     variant="outline"
                                                     @click.stop
-                                                    ><i class="ri-file-copy-line"></i
-                                                ></Button>
+                                                    ><Copy class="h-4 w-4" />
+                                                </Button>
                                             </DropdownMenuTrigger>
                                             <DropdownMenuContent>
                                                 <DropdownMenuItem @click="copyWorldId()">
@@ -718,21 +718,26 @@
 <script setup>
     import {
         AlertTriangle,
+        Apple,
         ArrowDown,
         Check,
+        Copy,
         Download,
         Ellipsis,
         Eye,
         Flag,
+        History,
         Home,
         Image,
         LineChart,
         Loader2,
         MessageSquare,
+        Monitor,
         Pencil,
         RefreshCcw,
         RefreshCw,
         Share2,
+        Smartphone,
         Star,
         Trash2,
         Upload,
diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index c99b745e..6dd306f0 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -5,7 +5,7 @@
                 <Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
                     <SelectTrigger size="sm" class="favorites-toolbar__select">
                         <span class="flex items-center gap-2">
-                            <i class="ri-sort-asc"></i>
+                            <ArrowUpDown class="h-4 w-4" />
                             <SelectValue
                                 :placeholder="t('view.settings.appearance.appearance.sort_favorite_by_name')" />
                         </span>
@@ -166,7 +166,7 @@
                                                                         <span
                                                                             v-if="group.visibility === visibility"
                                                                             class="group-visibility-menu__check">
-                                                                            <i class="ri-check-line"></i>
+                                                                            <Check class="h-3 w-3" />
                                                                         </span>
                                                                     </button>
                                                                 </div>
@@ -526,7 +526,7 @@
 
 <script setup>
     import { computed, markRaw, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
-    import { Ellipsis, Loader, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
+    import { ArrowUpDown, Check, Ellipsis, Loader, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
     import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
     import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
index 6160410e..2cfc6dd8 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -5,7 +5,7 @@
                 <Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
                     <SelectTrigger size="sm" class="favorites-toolbar__select">
                         <span class="flex items-center gap-2">
-                            <i class="ri-sort-asc"></i>
+                            <ArrowUpDown class="h-4 w-4" />
                             <SelectValue
                                 :placeholder="t('view.settings.appearance.appearance.sort_favorite_by_name')" />
                         </span>
@@ -106,7 +106,10 @@
                                 <div
                                     v-for="group in favoriteFriendGroups"
                                     :key="group.key"
-                                    :class="[ 'group-item', { 'is-active': !hasSearchInput && isGroupActive('remote', group.key) } ]"
+                                    :class="[
+                                        'group-item',
+                                        { 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
+                                    ]"
                                     @click="handleGroupClick('remote', group.key)">
                                     <div class="group-item__top">
                                         <span class="group-item__name">{{ group.displayName }}</span>
@@ -149,7 +152,13 @@
                                                                         v-for="visibility in friendGroupVisibilityOptions"
                                                                         :key="visibility"
                                                                         type="button"
-                                                                        :class="[ 'group-visibility-menu__item', { 'is-active': group.visibility === visibility } ]"
+                                                                        :class="[
+                                                                            'group-visibility-menu__item',
+                                                                            {
+                                                                                'is-active':
+                                                                                    group.visibility === visibility
+                                                                            }
+                                                                        ]"
                                                                         @click="
                                                                             handleVisibilitySelection(group, visibility)
                                                                         ">
@@ -157,7 +166,7 @@
                                                                         <span
                                                                             v-if="group.visibility === visibility"
                                                                             class="group-visibility-menu__check">
-                                                                            <i class="ri-check-line"></i>
+                                                                            <Check class="h-3 w-3" />
                                                                         </span>
                                                                     </button>
                                                                 </div>
@@ -301,10 +310,9 @@
 
 <script setup>
     import { computed, nextTick, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue';
-    import { MoreHorizontal, RefreshCw } from 'lucide-vue-next';
+    import { ArrowUpDown, Check, Ellipsis, MoreHorizontal, RefreshCw } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
-    import { Ellipsis } from 'lucide-vue-next';
     import { InputGroupSearch } from '@/components/ui/input-group';
     import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
index 2bc05ede..cf76745b 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -5,7 +5,7 @@
                 <Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
                     <SelectTrigger size="sm" class="favorites-toolbar__select">
                         <span class="flex items-center gap-2">
-                            <i class="ri-sort-asc"></i>
+                            <ArrowUpDown class="h-4 w-4" />
                             <SelectValue
                                 :placeholder="t('view.settings.appearance.appearance.sort_favorite_by_name')" />
                         </span>
@@ -437,7 +437,7 @@
 
 <script setup>
     import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-    import { Ellipsis, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
+    import { ArrowUpDown, Ellipsis, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
     import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
     import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
diff --git a/src/views/Favorites/components/FavoritesAvatarItem.vue b/src/views/Favorites/components/FavoritesAvatarItem.vue
index 8427f530..ffe6e132 100644
--- a/src/views/Favorites/components/FavoritesAvatarItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarItem.vue
@@ -13,13 +13,13 @@
                                 v-if="favorite.deleted"
                                 side="top"
                                 :content="t('view.favorite.unavailable_tooltip')">
-                                <i class="ri-error-warning-line"></i>
+                                <AlertTriangle class="h-4 w-4" />
                             </TooltipWrapper>
                             <TooltipWrapper
                                 v-if="!isLocalFavorite && favorite.ref?.releaseStatus === 'private'"
                                 side="top"
                                 :content="t('view.favorite.private')">
-                                <i class="ri-lock-line"></i>
+                                <Lock class="h-4 w-4" />
                             </TooltipWrapper>
                         </span>
                     </div>
@@ -57,7 +57,7 @@
                                     variant="outline"
                                     class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="handlePrimaryDeleteAction">
-                                    <i class="ri-delete-bin-line"></i>
+                                    <Trash2 class="h-4 w-4" />
                                 </Button>
                             </TooltipWrapper>
                         </div>
@@ -73,8 +73,8 @@
                                     :disabled="currentUser.currentAvatar === favorite.id"
                                     class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="selectAvatarWithConfirmation(favorite.id)"
-                                    ><i class="ri-check-line"></i
-                                ></Button>
+                                    ><Check class="h-4 w-4"
+                                /></Button>
                             </TooltipWrapper>
                         </div>
                         <div class="favorites-search-card__action">
@@ -87,8 +87,8 @@
                                     variant="destructive"
                                     class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="handlePrimaryDeleteAction"
-                                    ><i class="ri-delete-bin-line"></i
-                                ></Button>
+                                    ><Trash2 class="h-4 w-4"
+                                /></Button>
                             </TooltipWrapper>
                             <TooltipWrapper v-else side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
                                 <Button
@@ -96,8 +96,8 @@
                                     variant="outline"
                                     class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="showFavoriteDialog('avatar', favorite.id)"
-                                    ><i class="ri-star-line"></i
-                                ></Button>
+                                    ><Star class="h-4 w-4"
+                                /></Button>
                             </TooltipWrapper>
                         </div>
                     </div>
@@ -118,7 +118,7 @@
                         size="icon-sm"
                         variant="outline"
                         @click.stop="handlePrimaryDeleteAction">
-                        <i class="ri-delete-bin-line"></i>
+                        <Trash2 class="h-4 w-4" />
                     </Button>
                 </div>
             </div>
@@ -127,6 +127,7 @@
 </template>
 
 <script setup>
+    import { AlertTriangle, Check, Lock, Star, Trash2 } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
     import { computed } from 'vue';
diff --git a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
index 2842e2ed..78ca3a69 100644
--- a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
@@ -21,8 +21,9 @@
                             :disabled="currentUser.currentAvatar === favorite.id"
                             class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                             @click.stop="selectAvatarWithConfirmation(favorite.id)">
-                            <i class="ri-check-line"></i
-                        ></Button>
+                            <Check class="h-4 w-4" />
+                            ></Button
+                        >
                     </TooltipWrapper>
                 </div>
                 <div class="favorites-search-card__action">
@@ -33,14 +34,14 @@
                             variant="outline"
                             class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                             @click.stop="showFavoriteDialog('avatar', favorite.id)">
-                            <i class="ri-star-line"></i>
+                            <Star class="h-4 w-4" />
                         </Button>
                         <Button
                             v-else
                             size="icon-sm"
                             class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                             @click.stop="showFavoriteDialog('avatar', favorite.id)">
-                            <i class="ri-star-line"></i>
+                            <Star class="h-4 w-4" />
                         </Button>
                     </TooltipWrapper>
                 </div>
diff --git a/src/views/Favorites/components/FavoritesFriendItem.vue b/src/views/Favorites/components/FavoritesFriendItem.vue
index 4f2008fd..31acfb4e 100644
--- a/src/views/Favorites/components/FavoritesFriendItem.vue
+++ b/src/views/Favorites/components/FavoritesFriendItem.vue
@@ -39,7 +39,7 @@
                                     variant="outline"
                                     class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="handleDeleteFavorite">
-                                    <i class="ri-delete-bin-line"></i>
+                                    <Trash2 class="h-4 w-4" />
                                 </Button>
                             </TooltipWrapper>
                         </div>
@@ -53,8 +53,8 @@
                                 variant="outline"
                                 class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                 @click.stop="showFavoriteDialog('friend', favorite.id)"
-                                ><i class="ri-star-line"></i
-                            ></Button>
+                                ><Star class="h-4 w-4"
+                            /></Button>
                         </TooltipWrapper>
                     </div>
                 </template>
@@ -74,7 +74,7 @@
                         size="icon-sm"
                         variant="outline"
                         @click.stop="handleDeleteFavorite">
-                        <i class="ri-delete-bin-line"></i>
+                        <Trash2 class="h-4 w-4" />
                     </Button>
                 </div>
             </div>
@@ -83,6 +83,7 @@
 </template>
 
 <script setup>
+    import { Star, Trash2 } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
     import { computed } from 'vue';
diff --git a/src/views/Favorites/components/FavoritesMoveDropdown.vue b/src/views/Favorites/components/FavoritesMoveDropdown.vue
index 364a2152..1f14ac91 100644
--- a/src/views/Favorites/components/FavoritesMoveDropdown.vue
+++ b/src/views/Favorites/components/FavoritesMoveDropdown.vue
@@ -2,8 +2,8 @@
     <DropdownMenu v-model:open="moveDropdownOpen" style="margin-left: 5px">
         <DropdownMenuTrigger as-child>
             <Button class="rounded-full w-6 h-6 text-xs" size="icon-sm" variant="ghost"
-                ><i class="ri-arrow-left-line"></i
-            ></Button>
+                ><ArrowLeft class="h-4 w-4"
+            /></Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent class="favorites-dropdown">
             <span style="font-weight: bold; display: block; text-align: center">
@@ -25,6 +25,7 @@
 
 <script setup>
     import { computed, ref } from 'vue';
+    import { ArrowLeft } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Favorites/components/FavoritesWorldItem.vue b/src/views/Favorites/components/FavoritesWorldItem.vue
index 06b342b2..db765265 100644
--- a/src/views/Favorites/components/FavoritesWorldItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldItem.vue
@@ -19,14 +19,14 @@
                         <span
                             v-if="favorite.deleted || favorite.ref.releaseStatus === 'private'"
                             class="favorites-search-card__badges">
-                            <i
+                            <AlertTriangle
                                 v-if="favorite.deleted"
                                 :title="t('view.favorite.unavailable_tooltip')"
-                                class="ri-error-warning-line"></i>
-                            <i
+                                class="h-4 w-4" />
+                            <Lock
                                 v-if="favorite.ref.releaseStatus === 'private'"
                                 :title="t('view.favorite.private')"
-                                class="ri-lock-line"></i>
+                                class="h-4 w-4" />
                         </span>
                     </div>
                     <span class="extra">
@@ -55,7 +55,7 @@
                                 variant="outline"
                                 class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                 @click.stop="handleDeleteFavorite">
-                                <i class="ri-delete-bin-line"></i>
+                                <Trash2 class="h-4 w-4" />
                             </Button>
                         </div>
                     </div>
@@ -69,8 +69,8 @@
                                     variant="outline"
                                     class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="newInstanceSelfInvite(favorite.id)"
-                                    ><i class="ri-mail-line"></i
-                                ></Button>
+                                    ><Mail class="h-4 w-4"
+                                /></Button>
                             </TooltipWrapper>
                         </div>
                         <div class="favorites-search-card__action">
@@ -83,8 +83,8 @@
                                     variant="destructive"
                                     class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="handleDeleteFavorite"
-                                    ><i class="ri-delete-bin-line"></i
-                                ></Button>
+                                    ><Trash2 class="h-4 w-4"
+                                /></Button>
                             </TooltipWrapper>
                             <TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
                                 <Button
@@ -92,8 +92,8 @@
                                     variant="outline"
                                     class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="showFavoriteDialog('world', favorite.id)"
-                                    ><i class="ri-star-line"></i
-                                ></Button>
+                                    ><Star class="h-4 w-4"
+                                /></Button>
                             </TooltipWrapper>
                         </div>
                     </div>
@@ -105,10 +105,10 @@
                 <div class="favorites-search-card__avatar is-empty"></div>
                 <div class="favorites-search-card__detail" v-once>
                     <span>{{ favorite.name || favorite.id }}</span>
-                    <i
+                    <AlertTriangle
                         v-if="favorite.deleted"
                         :title="t('view.favorite.unavailable_tooltip')"
-                        class="ri-error-warning-line"></i>
+                        class="h-4 w-4" />
                 </div>
             </div>
             <div class="favorites-search-card__actions">
@@ -118,7 +118,7 @@
                         size="icon-sm"
                         variant="outline"
                         @click.stop="handleDeleteFavorite">
-                        <i class="ri-delete-bin-line"></i>
+                        <Trash2 class="h-4 w-4" />
                     </Button>
                 </div>
             </div>
@@ -127,6 +127,7 @@
 </template>
 
 <script setup>
+    import { AlertTriangle, Lock, Mail, Star, Trash2 } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
     import { computed } from 'vue';
diff --git a/src/views/Favorites/components/FavoritesWorldLocalItem.vue b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
index 564b4623..03f9dd42 100644
--- a/src/views/Favorites/components/FavoritesWorldLocalItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
@@ -37,7 +37,7 @@
                                 :variant="shiftHeld ? 'destructive' : 'outline'"
                                 class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                 @click.stop="handlePrimaryDeleteAction">
-                                <i class="ri-delete-bin-line"></i>
+                                <Trash2 class="h-4 w-4" />
                             </Button>
                         </div>
                     </div>
@@ -51,8 +51,8 @@
                                     variant="outline"
                                     class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="newInstanceSelfInvite(favorite.id)"
-                                    ><i class="ri-mail-line"></i
-                                ></Button>
+                                    ><Mail class="h-4 w-4"
+                                /></Button>
                             </TooltipWrapper>
                         </div>
                         <div class="favorites-search-card__action">
@@ -65,8 +65,8 @@
                                     variant="destructive"
                                     class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="handleDeleteFavorite"
-                                    ><i class="ri-delete-bin-line"></i
-                                ></Button>
+                                    ><Trash2 class="h-4 w-4"
+                                /></Button>
                             </TooltipWrapper>
                             <TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
                                 <Button
@@ -74,8 +74,8 @@
                                     variant="outline"
                                     class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="showFavoriteDialog('world', favorite.id)"
-                                    ><i class="ri-star-line"></i
-                                ></Button>
+                                    ><Star class="h-4 w-4"
+                                /></Button>
                             </TooltipWrapper>
                         </div>
                     </div>
@@ -96,7 +96,7 @@
                         size="icon-sm"
                         variant="outline"
                         @click.stop="handleDeleteFavorite">
-                        <i class="ri-delete-bin-line"></i>
+                        <Trash2 class="h-4 w-4" />
                     </Button>
                 </div>
             </div>
@@ -105,6 +105,7 @@
 </template>
 
 <script setup>
+    import { Mail, Star, Trash2 } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
diff --git a/src/views/FriendList/columns.jsx b/src/views/FriendList/columns.jsx
index e1a45e01..5f4bf06c 100644
--- a/src/views/FriendList/columns.jsx
+++ b/src/views/FriendList/columns.jsx
@@ -1,4 +1,4 @@
-import { ArrowUpDown } from 'lucide-vue-next';
+import { ArrowUpDown, UserMinus } from 'lucide-vue-next';
 
 import { Button } from '../../components/ui/button';
 import { Checkbox } from '../../components/ui/checkbox';
@@ -154,9 +154,7 @@ export const createColumns = ({
                 }),
             size: 100,
             sortingFn: sortByNumber((row) => row?.$friendNumber ?? 0),
-            cell: ({ row }) => (
-                <span>{row.original?.$friendNumber || ''}</span>
-            )
+            cell: ({ row }) => <span>{row.original?.$friendNumber || ''}</span>
         },
         {
             id: 'avatar',
@@ -292,10 +290,7 @@ export const createColumns = ({
                     {(row.original?.bioLinks ?? [])
                         .filter(Boolean)
                         .map((link, index) => (
-                            <TooltipWrapper
-                                key={index}
-                                content={String(link)}
-                            >
+                            <TooltipWrapper key={index} content={String(link)}>
                                 <img
                                     src={getFaviconUrl(link)}
                                     class="h-4 w-4 mr-1 align-middle cursor-pointer"
@@ -425,13 +420,14 @@ export const createColumns = ({
                 class: 'text-center'
             },
             cell: ({ row }) => (
-                <i
-                    class="ri-user-unfollow-line text-destructive"
+                // TODO(icon): verify unfollow icon replacement
+                <UserMinus
+                    class="h-4 w-4 text-destructive inline-block"
                     onClick={(event) => {
                         event.stopPropagation();
                         onConfirmDeleteFriend?.(row.original?.id);
                     }}
-                ></i>
+                />
             )
         }
     );
diff --git a/src/views/FriendLog/columns.jsx b/src/views/FriendLog/columns.jsx
index 5ae5f6b9..c1abd5ca 100644
--- a/src/views/FriendLog/columns.jsx
+++ b/src/views/FriendLog/columns.jsx
@@ -6,7 +6,7 @@ import {
     TooltipProvider,
     TooltipTrigger
 } from '../../components/ui/tooltip';
-import { ArrowRight, ArrowUpDown } from 'lucide-vue-next';
+import { ArrowRight, ArrowUpDown, Trash2, X } from 'lucide-vue-next';
 import { storeToRefs } from 'pinia';
 
 import { formatDateFilter } from '../../shared/utils';
@@ -136,13 +136,11 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
                                     : onDeletePrompt(original)
                             }
                         >
-                            <i
-                                class={
-                                    shiftHeld.value
-                                        ? 'ri-close-line text-red-600'
-                                        : 'ri-delete-bin-line'
-                                }
-                            />
+                            {shiftHeld.value ? (
+                                <X class="h-4 w-4 text-red-600" />
+                            ) : (
+                                <Trash2 class="h-4 w-4" />
+                            )}
                         </button>
                     </div>
                 );
diff --git a/src/views/FriendsLocations/components/FriendsLocationsCard.vue b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
index 625ae88d..36774a54 100644
--- a/src/views/FriendsLocations/components/FriendsLocationsCard.vue
+++ b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
@@ -11,7 +11,7 @@
         </div>
         <div class="friend-card__body">
             <div class="friend-card__signature" :title="friend.ref?.statusDescription">
-                <i v-if="friend.ref?.statusDescription" class="ri-pencil-line mr-0.5" style="opacity: 0.7"></i>
+                <Pencil v-if="friend.ref?.statusDescription" class="h-3.5 w-3.5 mr-0.5" style="opacity: 0.7" />
                 {{ friend.ref?.statusDescription || '&nbsp;' }}
             </div>
             <div v-if="displayInstanceInfo" @click.stop class="friend-card__world" :title="friend.worldName">
@@ -26,8 +26,9 @@
 </template>
 
 <script setup>
-    import { computed } from 'vue';
     import { Card } from '@/components/ui/card';
+    import { Pencil } from 'lucide-vue-next';
+    import { computed } from 'vue';
 
     import { userImage, userStatusClass } from '../../../shared/utils';
     import { useUserStore } from '../../../stores';
diff --git a/src/views/GameLog/columns.jsx b/src/views/GameLog/columns.jsx
index 16d53759..4d957279 100644
--- a/src/views/GameLog/columns.jsx
+++ b/src/views/GameLog/columns.jsx
@@ -7,7 +7,7 @@ import {
     TooltipProvider,
     TooltipTrigger
 } from '../../components/ui/tooltip';
-import { ArrowUpDown } from 'lucide-vue-next';
+import { ArrowUpDown, FileText, Trash2, X } from 'lucide-vue-next';
 import { storeToRefs } from 'pinia';
 
 import { formatDateFilter, openExternalLink } from '../../shared/utils';
@@ -268,13 +268,11 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
                                         : onDeletePrompt(original)
                                 }
                             >
-                                <i
-                                    class={
-                                        shiftHeld.value
-                                            ? 'ri-close-line text-red-600'
-                                            : 'ri-delete-bin-line'
-                                    }
-                                />
+                                {shiftHeld.value ? (
+                                    <X class="h-4 w-4 text-red-600" />
+                                ) : (
+                                    <Trash2 class="h-4 w-4" />
+                                )}
                             </button>
                         ) : null}
                         {canShowPrevious ? (
@@ -290,7 +288,7 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
                                                 )
                                             }
                                         >
-                                            <i class="ri-file-list-2-line" />
+                                            <FileText class="h-4 w-4" />
                                         </button>
                                     </TooltipTrigger>
                                     <TooltipContent side="top">
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 0670b649..57832f8e 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -147,8 +147,8 @@
                                     variant="ghost"
                                     style="margin-left: 10px"
                                     @click.stop="clickDeleteSavedLogin(user.user.id)"
-                                    ><i class="ri-delete-bin-line h-3 w-3"></i
-                                ></Button>
+                                    ><Trash2 class="h-3 w-3"
+                                /></Button>
                             </div>
                         </div>
                     </div>
@@ -179,7 +179,7 @@
 <script setup>
     import { Field, FieldContent, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field';
     import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
-    import { CircleArrowDown, Route } from 'lucide-vue-next';
+    import { CircleArrowDown, Route, Trash2 } from 'lucide-vue-next';
     import { Field as VeeField, useForm } from 'vee-validate';
     import { useRoute, useRouter } from 'vue-router';
     import { Button } from '@/components/ui/button';
diff --git a/src/views/Moderation/columns.jsx b/src/views/Moderation/columns.jsx
index bbff8571..8a4e545a 100644
--- a/src/views/Moderation/columns.jsx
+++ b/src/views/Moderation/columns.jsx
@@ -6,7 +6,7 @@ import {
     TooltipProvider,
     TooltipTrigger
 } from '../../components/ui/tooltip';
-import { ArrowUpDown } from 'lucide-vue-next';
+import { ArrowUpDown, Trash2, X } from 'lucide-vue-next';
 import { storeToRefs } from 'pinia';
 
 import { formatDateFilter } from '../../shared/utils';
@@ -143,13 +143,11 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
                                     : onDeletePrompt(original)
                             }
                         >
-                            <i
-                                class={
-                                    shiftHeld.value
-                                        ? 'ri-close-line text-red-600'
-                                        : 'ri-delete-bin-line'
-                                }
-                            />
+                            {shiftHeld.value ? (
+                                <X class="h-4 w-4 text-red-600" />
+                            ) : (
+                                <Trash2 class="h-4 w-4" />
+                            )}
                         </button>
                     </div>
                 );
diff --git a/src/views/Notifications/columns.jsx b/src/views/Notifications/columns.jsx
index 19077894..ccb348ce 100644
--- a/src/views/Notifications/columns.jsx
+++ b/src/views/Notifications/columns.jsx
@@ -7,7 +7,18 @@ import {
     TooltipProvider,
     TooltipTrigger
 } from '../../components/ui/tooltip';
-import { ArrowUpDown } from 'lucide-vue-next';
+import {
+    ArrowUpDown,
+    Ban,
+    BellOff,
+    Check,
+    Link,
+    MessageCircle,
+    Reply,
+    Tag,
+    Trash2,
+    X
+} from 'lucide-vue-next';
 import { storeToRefs } from 'pinia';
 
 import { checkCanInvite, formatDateFilter } from '../../shared/utils';
@@ -58,25 +69,23 @@ export const createColumns = ({
         );
     };
 
-    const getResponseIconClass = (response, notificationType) => {
+    const getResponseIcon = (response, notificationType) => {
         if (response?.type === 'link') {
-            return 'ri-link-m';
+            return Link;
         }
         switch (response?.icon) {
             case 'check':
-                return 'ri-check-line';
+                return Check;
             case 'cancel':
-                return 'ri-close-line';
+                return X;
             case 'ban':
-                return 'ri-forbid-2-line';
+                return Ban;
             case 'bell-slash':
-                return 'ri-notification-off-line';
+                return BellOff;
             case 'reply':
-                return notificationType === 'boop'
-                    ? 'ri-chat-1-line'
-                    : 'ri-reply-line';
+                return notificationType === 'boop' ? MessageCircle : Reply;
             default:
-                return 'ri-price-tag-3-line';
+                return Tag;
         }
     };
 
@@ -532,7 +541,7 @@ export const createColumns = ({
                                                         )
                                                     }
                                                 >
-                                                    <i class="ri-check-line" />
+                                                    <Check class="h-4 w-4" />
                                                 </button>
                                             </TooltipTrigger>
                                             <TooltipContent side="top">
@@ -555,7 +564,7 @@ export const createColumns = ({
                                                         )
                                                     }
                                                 >
-                                                    <i class="ri-chat-1-line" />
+                                                    <MessageCircle class="h-4 w-4" />
                                                 </button>
                                             </TooltipTrigger>
                                             <TooltipContent side="top">
@@ -582,7 +591,7 @@ export const createColumns = ({
                                                                 )
                                                             }
                                                         >
-                                                            <i class="ri-check-line" />
+                                                            <Check class="h-4 w-4" />
                                                         </button>
                                                     </TooltipTrigger>
                                                     <TooltipContent side="top">
@@ -603,7 +612,7 @@ export const createColumns = ({
                                                             )
                                                         }
                                                     >
-                                                        <i class="ri-chat-1-line" />
+                                                        <MessageCircle class="h-4 w-4" />
                                                     </button>
                                                 </TooltipTrigger>
                                                 <TooltipContent side="top">
@@ -641,11 +650,10 @@ export const createColumns = ({
                                               );
                                           };
 
-                                          const iconClass =
-                                              getResponseIconClass(
-                                                  response,
-                                                  original.type
-                                              );
+                                          const ResponseIcon = getResponseIcon(
+                                              response,
+                                              original.type
+                                          );
 
                                           return (
                                               <TooltipProvider
@@ -658,11 +666,7 @@ export const createColumns = ({
                                                               class="inline-flex h-6 ml-1 items-center justify-center text-muted-foreground hover:text-foreground"
                                                               onClick={onClick}
                                                           >
-                                                              <i
-                                                                  class={
-                                                                      iconClass
-                                                                  }
-                                                              />
+                                                              <ResponseIcon class="h-4 w-4" />
                                                           </button>
                                                       </TooltipTrigger>
                                                       <TooltipContent side="top">
@@ -693,11 +697,11 @@ export const createColumns = ({
                                                               )
                                                     }
                                                 >
-                                                    <i
+                                                    <X
                                                         class={
                                                             shiftHeld.value
-                                                                ? 'ri-close-line text-red-600'
-                                                                : 'ri-close-line'
+                                                                ? 'h-4 w-4 text-red-600'
+                                                                : 'h-4 w-4'
                                                         }
                                                     />
                                                 </button>
@@ -726,13 +730,11 @@ export const createColumns = ({
                                                               )
                                                     }
                                                 >
-                                                    <i
-                                                        class={
-                                                            shiftHeld.value
-                                                                ? 'ri-close-line text-red-600'
-                                                                : 'ri-delete-bin-line'
-                                                        }
-                                                    />
+                                                    {shiftHeld.value ? (
+                                                        <X class="h-4 w-4 text-red-600" />
+                                                    ) : (
+                                                        <Trash2 class="h-4 w-4" />
+                                                    )}
                                                 </button>
                                             </TooltipTrigger>
                                             <TooltipContent side="top">
@@ -759,13 +761,11 @@ export const createColumns = ({
                                                               )
                                                     }
                                                 >
-                                                    <i
-                                                        class={
-                                                            shiftHeld.value
-                                                                ? 'ri-close-line text-red-600'
-                                                                : 'ri-delete-bin-line'
-                                                        }
-                                                    />
+                                                    {shiftHeld.value ? (
+                                                        <X class="h-4 w-4 text-red-600" />
+                                                    ) : (
+                                                        <Trash2 class="h-4 w-4" />
+                                                    )}
                                                 </button>
                                             </TooltipTrigger>
                                             <TooltipContent side="top">
diff --git a/src/views/PlayerList/PlayerList.vue b/src/views/PlayerList/PlayerList.vue
index f5bd3276..b886ba1f 100644
--- a/src/views/PlayerList/PlayerList.vue
+++ b/src/views/PlayerList/PlayerList.vue
@@ -59,7 +59,7 @@
                         </Badge>
                         <TooltipWrapper v-if="currentInstanceWorld.isPC" side="top" content="PC">
                             <Badge class="x-tag-platform-pc" variant="outline" style="margin-right: 5px"
-                                ><i class="ri-computer-line"></i>
+                                ><Monitor class="h-4 w-4" />
                                 <span
                                     v-if="currentInstanceWorld.bundleSizes['standalonewindows']"
                                     :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
@@ -69,7 +69,7 @@
                         </TooltipWrapper>
                         <TooltipWrapper v-if="currentInstanceWorld.isQuest" side="top" content="Android">
                             <Badge class="x-tag-platform-quest" variant="outline" style="margin-right: 5px"
-                                ><i class="ri-android-line"></i>
+                                ><Smartphone class="h-4 w-4" />
                                 <span
                                     v-if="currentInstanceWorld.bundleSizes['android']"
                                     :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
@@ -79,7 +79,7 @@
                         </TooltipWrapper>
                         <TooltipWrapper v-if="currentInstanceWorld.isIos" side="top" content="iOS">
                             <Badge class="x-tag-platform-ios" variant="outline" style="margin-right: 5px"
-                                ><i class="ri-apple-line"></i>
+                                ><Apple class="h-4 w-4" />
                                 <span
                                     v-if="currentInstanceWorld.bundleSizes['ios']"
                                     :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
@@ -167,7 +167,7 @@
 
 <script setup>
     import { computed, defineAsyncComponent, onActivated, onMounted, ref, watch } from 'vue';
-    import { Home } from 'lucide-vue-next';
+    import { Apple, Home, Monitor, Smartphone } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
diff --git a/src/views/PlayerList/columns.jsx b/src/views/PlayerList/columns.jsx
index c0c4030b..4f1f39f4 100644
--- a/src/views/PlayerList/columns.jsx
+++ b/src/views/PlayerList/columns.jsx
@@ -1,7 +1,13 @@
 import Timer from '../../components/Timer.vue';
 import { Button } from '../../components/ui/button';
 import { TooltipWrapper } from '../../components/ui/tooltip';
-import { ArrowUpDown } from 'lucide-vue-next';
+import {
+    Apple,
+    ArrowUpDown,
+    IdCard,
+    Monitor,
+    Smartphone
+} from 'lucide-vue-next';
 
 import {
     getFaviconUrl,
@@ -285,7 +291,7 @@ export const createColumns = ({
                         ) : null}
                         {r?.ageVerified ? (
                             <TooltipWrapper side="left" content="18+ Verified">
-                                <i class="ri-id-card-line x-tag-age-verification"></i>
+                                <IdCard class="h-4 w-4 x-tag-age-verification" />
                             </TooltipWrapper>
                         ) : null}
                     </div>
@@ -304,11 +310,11 @@ export const createColumns = ({
 
                 const platformIcon =
                     platform === 'standalonewindows' ? (
-                        <i class="ri-computer-line x-tag-platform-pc" />
+                        <Monitor class="h-4 w-4 x-tag-platform-pc" />
                     ) : platform === 'android' ? (
-                        <i class="ri-android-line x-tag-platform-quest" />
+                        <Smartphone class="h-4 w-4 x-tag-platform-quest" />
                     ) : platform === 'ios' ? (
-                        <i class="ri-apple-line x-tag-platform-ios" />
+                        <Apple class="h-4 w-4 x-tag-platform-ios" />
                     ) : platform ? (
                         <span>{String(platform)}</span>
                     ) : null;
diff --git a/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue b/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
index 354b355b..c6e807ee 100644
--- a/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
+++ b/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
@@ -47,7 +47,7 @@
                         cursor: pointer;
                     "
                     @click="deleteChatboxUserBlacklist(user[0])">
-                    <i class="ri-close-line" style="font-size: 12px; line-height: 1"></i>
+                    <X class="h-3 w-3" style="line-height: 1" />
                 </button>
             </Badge>
         </div>
@@ -57,6 +57,7 @@
 <script setup>
     import { Button } from '@/components/ui/button';
     import { InputGroupAction } from '@/components/ui/input-group';
+    import { X } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
diff --git a/src/views/Settings/components/Tabs/AdvancedTab.vue b/src/views/Settings/components/Tabs/AdvancedTab.vue
index 1ee07cb6..046c40ad 100644
--- a/src/views/Settings/components/Tabs/AdvancedTab.vue
+++ b/src/views/Settings/components/Tabs/AdvancedTab.vue
@@ -159,10 +159,10 @@
                 :long-label="true"
                 @change="changeTranslationAPI('VRCX_translationAPI')" />
             <div class="options-container-item">
-                <Button size="sm" variant="outline" @click="showTranslationApiDialog"
-                    ><i class="ri-translate-2" style="margin-right: 5px"></i
-                    >{{ t('view.settings.advanced.advanced.translation_api.translation_api_key') }}</Button
-                >
+                <Button size="sm" variant="outline" @click="showTranslationApiDialog">
+                    <Languages class="h-4 w-4" style="margin-right: 5px" />
+                    {{ t('view.settings.advanced.advanced.translation_api.translation_api_key') }}
+                </Button>
             </div>
         </div>
         <div class="options-container">
@@ -384,7 +384,7 @@
 </template>
 
 <script setup>
-    import { Folder, Package, RefreshCcw, Settings, Trash2 } from 'lucide-vue-next';
+    import { Folder, Languages, Package, RefreshCcw, Settings, Trash2 } from 'lucide-vue-next';
     import { computed, reactive, ref } from 'vue';
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';
diff --git a/src/views/Sidebar/components/FriendItem.vue b/src/views/Sidebar/components/FriendItem.vue
index 47a984bc..12cd982c 100644
--- a/src/views/Sidebar/components/FriendItem.vue
+++ b/src/views/Sidebar/components/FriendItem.vue
@@ -41,7 +41,7 @@
                 variant="ghost"
                 class="mr-1 w-6 h-6 text-xs"
                 @click.stop="$emit('confirm-delete-friend', friend.id)"
-                ><i class="ri-delete-bin-2-line"></i>
+                ><Trash2 class="h-4 w-4" />
             </Button>
         </template>
 
@@ -60,7 +60,7 @@
 </template>
 
 <script setup>
-    import { Loader2, AlertTriangle } from 'lucide-vue-next';
+    import { AlertTriangle, Loader2, Trash2 } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
diff --git a/src/views/Tools/Tools.vue b/src/views/Tools/Tools.vue
index 2cdaf796..904a18c5 100644
--- a/src/views/Tools/Tools.vue
+++ b/src/views/Tools/Tools.vue
@@ -6,14 +6,16 @@
             <div class="tool-categories">
                 <div class="tool-category">
                     <div class="category-header" @click="toggleCategory('group')">
-                        <ArrowRight class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['group'] }" />
+                        <ArrowRight
+                            class="rotation-transition"
+                            :class="{ 'is-rotated': !categoryCollapsed['group'] }" />
                         <span class="category-title">{{ t('view.tools.group.header') }}</span>
                     </div>
                     <div class="tools-grid" v-show="!categoryCollapsed['group']">
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showGroupCalendarDialog">
                                 <div class="tool-icon">
-                                    <i class="ri-calendar-event-line"></i>
+                                    <CalendarDays />
                                 </div>
                                 <div class="tool-info">
                                     <div class="tool-name">{{ t('view.tools.group.calendar') }}</div>
@@ -26,14 +28,16 @@
 
                 <div class="tool-category">
                     <div class="category-header" @click="toggleCategory('image')">
-                        <ArrowRight class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['image'] }" />
+                        <ArrowRight
+                            class="rotation-transition"
+                            :class="{ 'is-rotated': !categoryCollapsed['image'] }" />
                         <span class="category-title">{{ t('view.tools.pictures.header') }}</span>
                     </div>
                     <div class="tools-grid" v-show="!categoryCollapsed['image']">
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showScreenshotMetadataPage">
                                 <div class="tool-icon">
-                                    <i class="ri-screenshot-2-line"></i>
+                                    <Camera />
                                 </div>
                                 <div class="tool-info">
                                     <div class="tool-name">{{ t('view.tools.pictures.screenshot') }}</div>
@@ -46,7 +50,7 @@
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showGalleryPage">
                                 <div class="tool-icon">
-                                    <i class="ri-multi-image-line"></i>
+                                    <Images />
                                 </div>
                                 <div class="tool-info">
                                     <div class="tool-name">{{ t('view.tools.pictures.inventory') }}</div>
@@ -59,7 +63,7 @@
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="openVrcPhotosFolder">
                                 <div class="tool-icon">
-                                    <i class="ri-folder-image-line"></i>
+                                    <FolderOpen />
                                 </div>
                                 <div class="tool-info">
                                     <div class="tool-name">{{ t('view.tools.pictures.pictures.vrc_photos') }}</div>
@@ -72,7 +76,7 @@
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="openVrcScreenshotsFolder">
                                 <div class="tool-icon">
-                                    <i class="ri-folder-image-line"></i>
+                                    <FolderOpen />
                                 </div>
                                 <div class="tool-info">
                                     <div class="tool-name">
@@ -97,7 +101,7 @@
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showExportDiscordNamesDialog">
                                 <div class="tool-icon">
-                                    <i class="ri-discord-line"></i>
+                                    <MessageSquare />
                                 </div>
                                 <div class="tool-info">
                                     <div class="tool-name">{{ t('view.tools.export.discord_names') }}</div>
@@ -110,7 +114,7 @@
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showNoteExportDialog">
                                 <div class="tool-icon">
-                                    <i class="ri-user-shared-line"></i>
+                                    <UserCheck />
                                 </div>
                                 <div class="tool-info">
                                     <div class="tool-name">{{ t('view.tools.export.export_notes') }}</div>
@@ -124,7 +128,7 @@
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showExportFriendsListDialog">
                                 <div class="tool-icon">
-                                    <i class="ri-user-shared-line"></i>
+                                    <UserCheck />
                                 </div>
                                 <div class="tool-info">
                                     <div class="tool-name">{{ t('view.tools.export.export_friend_list') }}</div>
@@ -137,7 +141,7 @@
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showExportAvatarsListDialog">
                                 <div class="tool-icon">
-                                    <i class="ri-user-shared-line"></i>
+                                    <UserCheck />
                                 </div>
                                 <div class="tool-info">
                                     <div class="tool-name">{{ t('view.tools.export.export_own_avatars') }}</div>
@@ -152,14 +156,16 @@
 
                 <div class="tool-category">
                     <div class="category-header" @click="toggleCategory('other')">
-                        <ArrowRight class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['other'] }" />
+                        <ArrowRight
+                            class="rotation-transition"
+                            :class="{ 'is-rotated': !categoryCollapsed['other'] }" />
                         <span class="category-title">{{ t('view.tools.other.header') }}</span>
                     </div>
                     <div class="tools-grid" v-show="!categoryCollapsed['other']">
                         <Card class="tool-card p-0 gap-0">
                             <div class="tool-content" @click="showEditInviteMessageDialog">
                                 <div class="tool-icon">
-                                    <i class="ri-edit-box-line"></i>
+                                    <SquarePen />
                                 </div>
                                 <div class="tool-info">
                                     <div class="tool-name">{{ t('view.tools.other.edit_invite_message') }}</div>
@@ -195,9 +201,18 @@
 </template>
 
 <script setup>
+    import {
+        ArrowRight,
+        CalendarDays,
+        Camera,
+        FolderOpen,
+        Images,
+        MessageSquare,
+        SquarePen,
+        UserCheck
+    } from 'lucide-vue-next';
     import { computed, defineAsyncComponent, ref } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
-    import { ArrowRight } from 'lucide-vue-next';
     import { Card } from '@/components/ui/card';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
diff --git a/src/vr/Vr.vue b/src/vr/Vr.vue
index d9fd1e70..7964cc28 100644
--- a/src/vr/Vr.vue
+++ b/src/vr/Vr.vue
@@ -15,7 +15,7 @@
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
                                         <span class="name" v-text="feed.displayName"></span>
-                                        <i v-if="feed.isTraveling" class="ri-loader-line is-loading ml-5"></i>
+                                        <Loader2 v-if="feed.isTraveling" class="is-loading ml-5 h-4 w-4" />
                                         <VrLocation
                                             :location="feed.location"
                                             :hint="feed.worldName"
@@ -33,7 +33,7 @@
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
                                         <span class="name" v-text="feed.displayName"></span>
-                                        <i class="ri-close-line" style="font-size: 21px"></i>
+                                        <X class="h-5 w-5" />
                                     </span>
                                 </div>
                             </div>
@@ -45,9 +45,9 @@
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
                                         <span class="name" v-text="feed.displayName"></span>
-                                        <i class="ri-check-line" style="font-size: 21px"></i>
+                                        <Check class="h-5 w-5" />
                                         <template v-if="feed.worldName">
-                                            <i v-if="feed.isTraveling" class="ri-loader-line is-loading ml-5"></i>
+                                            <Loader2 v-if="feed.isTraveling" class="is-loading ml-5 h-4 w-4" />
                                             <VrLocation
                                                 :location="feed.location"
                                                 :hint="feed.worldName"
@@ -68,7 +68,7 @@
                                         <span class="name" v-text="feed.displayName" style="margin-right: 5px"></span>
                                         <template v-if="feed.statusDescription === feed.previousStatusDescription">
                                             <i class="x-user-status" :class="statusClass(feed.previousStatus)"></i>
-                                            <i class="ri-arrow-right-line"></i>
+                                            <ArrowRight class="mx-1 h-4 w-4 inline-block" />
                                             <i class="x-user-status" :class="statusClass(feed.status)"></i>
                                         </template>
                                         <template v-else>
@@ -85,7 +85,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-play-large-line mr-5"></i>
+                                        <Play class="mr-5 h-5 w-5" />
                                         <span
                                             class="name"
                                             v-text="feed.displayName"
@@ -100,7 +100,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-play-reverse-large-line mr-5"></i>
+                                        <Play class="mr-5 h-5 w-5 rotate-180" />
                                         <span
                                             class="name"
                                             v-text="feed.displayName"
@@ -115,8 +115,8 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-play-large-line"></i>
-                                        <i class="ri-loader-line is-loading mr-5"></i>
+                                        <Play class="h-5 w-5" />
+                                        <Loader2 class="is-loading mr-5 h-4 w-4" />
                                         <span class="name" v-text="feed.displayName"></span>
                                     </span>
                                 </div>
@@ -143,7 +143,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-youtube-line mr-5"></i>
+                                        <Youtube class="mr-5 h-5 w-5" />
                                         <span
                                             v-if="feed.displayName"
                                             class="name"
@@ -166,7 +166,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-mail-send-line mr-5"></i>
+                                        <Send class="mr-5 h-5 w-5" />
                                         <span class="name mr-5" v-text="feed.senderUsername"></span>
                                         <VrLocation
                                             :location="feed.details.worldId"
@@ -183,7 +183,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-mail-send-line mr-5"></i>
+                                        <Send class="mr-5 h-5 w-5" />
                                         <span class="name mr-5" v-text="feed.senderUsername"></span>
                                         <span v-text="feed.details.requestMessage"></span>
                                     </span>
@@ -196,7 +196,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-mail-send-line mr-5"></i>
+                                        <Send class="mr-5 h-5 w-5" />
                                         <span class="name mr-5" v-text="feed.senderUsername"></span>
                                         <span v-text="feed.details.responseMessage"></span>
                                     </span>
@@ -209,7 +209,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-mail-send-line mr-5"></i>
+                                        <Send class="mr-5 h-5 w-5" />
                                         <span class="name mr-5" v-text="feed.senderUsername"></span>
                                         <span v-text="feed.details.responseMessage"></span>
                                     </span>
@@ -222,7 +222,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-heart-add-line mr-5"></i>
+                                        <HeartPlus class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.senderUsername"></span>
                                     </span>
                                 </div>
@@ -234,7 +234,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-hearts-line mr-5"></i>
+                                        <Heart class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.displayName"></span>
                                     </span>
                                 </div>
@@ -246,7 +246,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-dislike-line mr-5"></i>
+                                        <ThumbsDown class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.displayName"></span>
                                     </span>
                                 </div>
@@ -258,9 +258,9 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-file-edit-fill mr-5"></i>
+                                        <Pencil class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.previousDisplayName"></span>
-                                        <i class="ri-arrow-right-fill mr-5"></i>
+                                        <ArrowRight class="mr-5 h-4 w-4 inline-block" />
                                         <span class="name" v-text="feed.displayName"></span>
                                     </span>
                                 </div>
@@ -272,9 +272,10 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-graduation-cap-line mr-5"></i
-                                        ><span class="name" v-text="feed.displayName"></span>
-                                        {{ feed.previousTrustLevel }} <i class="ri-arrow-right-fill"></i>
+                                        <GraduationCap class="mr-5 h-5 w-5" />
+                                        <span class="name" v-text="feed.displayName"></span>
+                                        {{ feed.previousTrustLevel }}
+                                        <ArrowRight class="mx-1 inline-block h-4 w-4" />
                                         {{ feed.trustLevel }}
                                     </span>
                                 </div>
@@ -286,7 +287,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-hand-heart-fill mr-5"></i>
+                                        <HeartHandshake class="mr-5 h-5 w-5" />
                                         <span class="name mr-5" v-text="feed.senderUsername"></span>
                                         <span v-text="feed.message"></span>
                                     </span>
@@ -299,7 +300,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-price-tag-3-line mr-5"></i>
+                                        <Tag class="mr-5 h-5 w-5" />
                                         <span class="name mr-5" v-text="feed.senderUsername"></span>
                                         <span v-text="feed.message"></span>
                                     </span>
@@ -312,7 +313,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-megaphone-line mr-5"></i>
+                                        <Megaphone class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.message"></span>
                                     </span>
                                 </div>
@@ -324,7 +325,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-megaphone-line mr-5"></i>
+                                        <Megaphone class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.message"></span>
                                     </span>
                                 </div>
@@ -336,7 +337,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-price-tag-3-line mr-5"></i>
+                                        <Tag class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.message"></span>
                                     </span>
                                 </div>
@@ -348,7 +349,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-price-tag-3-line mr-5"></i>
+                                        <Tag class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.message"></span>
                                     </span>
                                 </div>
@@ -360,7 +361,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-price-tag-3-line mr-5"></i>
+                                        <Tag class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.message"></span>
                                     </span>
                                 </div>
@@ -372,7 +373,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-mail-send-line mr-5"></i>
+                                        <Send class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.message"></span>
                                     </span>
                                 </div>
@@ -384,7 +385,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-close-circle-line mr-5"></i>
+                                        <XCircle class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.message"></span>
                                     </span>
                                 </div>
@@ -397,7 +398,7 @@
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
                                         <template v-if="feed.displayName">
-                                            <i class="ri-bard-line mr-5"></i>
+                                            <Music class="mr-5 h-5 w-5" />
                                             <span
                                                 class="name mr-5"
                                                 v-text="feed.displayName"
@@ -407,8 +408,8 @@
                                                 :hint="feed.worldName"
                                                 :grouphint="feed.groupName"></VrLocation>
                                         </template>
-                                        <template v-else
-                                            ><i class="ri-bard-line"></i> User has spawned a portal
+                                        <template v-else>
+                                            <Music class="mr-1 h-5 w-5 inline-block" /> User has spawned a portal
                                         </template>
                                     </span>
                                 </div>
@@ -420,7 +421,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-walk-line mr-5"></i>
+                                        <Footprints class="mr-5 h-5 w-5" />
                                         <span
                                             class="name mr-5"
                                             v-text="feed.displayName"
@@ -445,7 +446,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-chat-1-fill mr-5"></i>
+                                        <MessageSquare class="mr-5 h-5 w-5" />
                                         <span
                                             class="name"
                                             v-text="feed.displayName"
@@ -458,7 +459,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-alert-line mr-5"></i>
+                                        <AlertTriangle class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.data"></span>
                                     </span>
                                 </div>
@@ -467,7 +468,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-information-line mr-5"></i>
+                                        <Info class="mr-5 h-5 w-5" />
                                         <span
                                             class="name mr-5"
                                             v-text="feed.displayName"
@@ -483,7 +484,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-play-large-line"></i><i class="ri-prohibited-line mr-5"></i>
+                                        <Play class="mr-1 h-5 w-5 inline-block" /><Ban class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.displayName"></span>
                                     </span>
                                 </div>
@@ -495,8 +496,8 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-play-reverse-large-line"></i
-                                        ><i class="ri-prohibited-line mr-5"></i>
+                                        <Play class="mr-1 inline-block h-5 w-5 rotate-180" /><Ban
+                                            class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.displayName"></span>
                                     </span>
                                 </div>
@@ -508,7 +509,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-play-large-line"></i><i class="ri-volume-mute-line mr-5"></i>
+                                        <Play class="mr-1 h-5 w-5 inline-block" /><VolumeX class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.displayName"></span>
                                     </span>
                                 </div>
@@ -520,8 +521,8 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-play-reverse-large-line"></i
-                                        ><i class="ri-volume-mute-line mr-5"></i>
+                                        <Play class="mr-1 inline-block h-5 w-5 rotate-180" /><VolumeX
+                                            class="mr-5 h-5 w-5" />
                                         <span class="name" v-text="feed.displayName"></span>
                                     </span>
                                 </div>
@@ -533,7 +534,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-prohibited-line mr-5"></i>
+                                        <Ban class="mr-5 h-5 w-5" />
                                         <span
                                             class="name"
                                             v-text="feed.displayName"
@@ -548,7 +549,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-checkbox-blank-circle-line mr-5"></i>
+                                        <Circle class="mr-5 h-5 w-5" />
                                         <span
                                             class="name"
                                             v-text="feed.displayName"
@@ -563,7 +564,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-volume-mute-line mr-5"></i>
+                                        <VolumeX class="mr-5 h-5 w-5" />
                                         <span
                                             class="name"
                                             v-text="feed.displayName"
@@ -578,7 +579,7 @@
                                 <div class="detail">
                                     <span class="extra">
                                         <span class="time">{{ formatDate(feed.created_at) }}</span>
-                                        <i class="ri-volume-up-line mr-5"></i>
+                                        <Volume2 class="mr-5 h-5 w-5" />
                                         <span
                                             class="name"
                                             v-text="feed.displayName"
@@ -640,7 +641,9 @@
                                         <span style="margin-left: 5px; margin-right: 5px">has logged in</span>
                                         <template v-if="feed.worldName">
                                             to
-                                            <i v-if="feed.isTraveling" class="ri-loader-line is-loading ml-5"></i>
+                                            <Loader2
+                                                v-if="feed.isTraveling"
+                                                class="is-loading ml-5 inline-block h-4 w-4" />
                                             <VrLocation
                                                 :location="feed.location"
                                                 :hint="feed.worldName"
@@ -660,7 +663,7 @@
                                         <span class="name" v-text="feed.displayName" style="margin-right: 5px"></span>
                                         <template v-if="feed.statusDescription === feed.previousStatusDescription">
                                             <i class="x-user-status" :class="statusClass(feed.previousStatus)"></i>
-                                            <i class="ri-arrow-right-line"></i>
+                                            <ArrowRight class="mx-1 inline-block h-4 w-4" />
                                             <i class="x-user-status" :class="statusClass(feed.status)"></i>
                                         </template>
                                         <template v-else>
@@ -1301,7 +1304,7 @@
                         <template v-if="feed.type === 'ChangeAvatar'">
                             <span style="margin-left: 10px; color: #a3a3a3">ChangeAvatar</span>
                             <span v-if="!feed.inCache" style="color: #aaa; margin-left: 10px"
-                                ><i class="ri-download-line is-loading"></i>
+                                ><Loader2 class="is-loading inline-block h-4 w-4" />
                             </span>
                             <span v-text="feed.avatar.name" style="margin-left: 10px"></span>
                             <span
@@ -1323,7 +1326,7 @@
                                     :class="statusClass(feed.previousStatus)"
                                     style="margin-left: 10px; width: 20px; height: 20px"></i>
                                 <span>
-                                    <i class="ri-arrow-right-line"></i>
+                                    <ArrowRight class="mx-1 inline-block h-4 w-4" />
                                 </span>
                                 <i
                                     class="x-user-status"
@@ -1365,7 +1368,7 @@
                                 >iOS</span
                             >
                             <span v-if="!feed.inCache" style="color: #aaa; margin-left: 10px"
-                                ><i class="ri-download-line"></i>
+                                ><Download class="inline-block h-4 w-4" />
                             </span>
                             <span v-text="feed.avatar.name" style="margin-left: 10px"></span>
                         </template>
@@ -1408,6 +1411,33 @@
 </template>
 
 <script setup>
+    import {
+        AlertTriangle,
+        ArrowRight,
+        Ban,
+        Check,
+        Circle,
+        Download,
+        Footprints,
+        GraduationCap,
+        Heart,
+        HeartHandshake,
+        HeartPlus,
+        Info,
+        Loader2,
+        Megaphone,
+        MessageSquare,
+        Music,
+        Pencil,
+        Play,
+        Send,
+        ThumbsDown,
+        VolumeX,
+        Volume2,
+        X,
+        XCircle,
+        Youtube
+    } from 'lucide-vue-next';
     import { nextTick, onBeforeUnmount, onMounted, reactive, toRefs } from 'vue';
     import { useI18n } from 'vue-i18n';
 
diff --git a/src/vr/components/VrLocation.vue b/src/vr/components/VrLocation.vue
index eb621953..010ac3e5 100644
--- a/src/vr/components/VrLocation.vue
+++ b/src/vr/components/VrLocation.vue
@@ -9,12 +9,13 @@
             style="display: inline-block; margin-bottom: 2px; margin-left: 5px">
         </span>
 
-        <i v-if="strict" style="display: inline-block; margin-left: 5px" class="ri-lock-line"></i>
+        <Lock v-if="strict" class="h-4 w-4" style="display: inline-block; margin-left: 5px" />
     </span>
 </template>
 
 <script setup>
     import { onMounted, ref, watch } from 'vue';
+    import { Lock } from 'lucide-vue-next';
 
     import { parseLocation } from '../../shared/utils/location';