diff --git a/app.vue b/app.vue
index dc2fbaa..d61b565 100644
--- a/app.vue
+++ b/app.vue
@@ -8,6 +8,7 @@
 
 <script setup lang="ts">
 import { convert } from "html-to-text";
+import "iconify-icon";
 // Use SSR-safe IDs for Headless UI
 provideHeadlessUseId(() => useId());
 
diff --git a/bun.lockb b/bun.lockb
index 8a2cf00..71ba841 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/buttons/DropdownElement.vue b/components/buttons/DropdownElement.vue
index 6ea71ea..f52fc2d 100644
--- a/components/buttons/DropdownElement.vue
+++ b/components/buttons/DropdownElement.vue
@@ -1,7 +1,7 @@
 <template>
     <ButtonsBase
         class="bg-white/10 hover:bg-white/20 !text-left flex flex-row gap-x-3 !rounded-none !ring-0 !p-4 sm:!p-3">
-        <Icon :name="icon" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+        <iconify-icon :icon="icon" width="1.25rem" height="1.25rem" class="text-gray-200" aria-hidden="true" />
         <slot />
     </ButtonsBase>
 </template>
@@ -9,7 +9,7 @@
 <script lang="ts" setup>
 import type { ButtonHTMLAttributes } from "vue";
 
-interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
+interface Props extends /* @vue-ignore */ ButtonHTMLAttributes { }
 
 defineProps<
     Props & {
diff --git a/components/buttons/base.vue b/components/buttons/base.vue
index 687884f..2230398 100644
--- a/components/buttons/base.vue
+++ b/components/buttons/base.vue
@@ -2,7 +2,7 @@
     <button v-bind="$props" type="button" :disabled="loading"
         :class="['rounded-md duration-200 relative hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed px-3 py-2 text-sm font-semibold text-white shadow-sm', loading && '[&>*]:invisible']">
         <div v-if="loading" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 !visible">
-            <Icon name="tabler:loader-2" class="animate-spin w-5 h-5" />
+            <iconify-icon icon="tabler:loader-2" height="1.25rem" width="1.25rem" class="animate-spin" />
         </div>
         <slot />
     </button>
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
 import type { ButtonHTMLAttributes } from "vue";
 
-interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
+interface Props extends /* @vue-ignore */ ButtonHTMLAttributes { }
 
 defineProps<
     Props & {
diff --git a/components/composer/composer.vue b/components/composer/composer.vue
index ad6fd26..a306d0b 100644
--- a/components/composer/composer.vue
+++ b/components/composer/composer.vue
@@ -3,11 +3,13 @@
         <div class="py-2 relative">
             <div v-if="respondingTo" class="mb-4">
                 <span v-if="respondingType === 'reply'" class="text-gray-400 uppercase text-xs font-semibold">
-                    <Icon name="tabler:arrow-back-up" class="h-4 w-4 text-gray-400 mb-0.5" aria-hidden="true" />
+                    <iconify-icon width="1rem" height="1rem" icon="tabler:arrow-back-up" class="text-gray-400 mb-0.5"
+                        aria-hidden="true" />
                     Replying to
                 </span>
                 <span v-else-if="respondingType === 'quote'" class="text-gray-400 uppercase text-xs font-semibold">
-                    <Icon name="tabler:quote" class="h-4 w-4 text-gray-400" aria-hidden="true" />
+                    <iconify-icon width="1rem" height="1rem" icon="tabler:quote" class="text-gray-400"
+                        aria-hidden="true" />
                     Quoting
                 </span>
                 <OverlayScrollbarsComponent :defer="true" class="mt-2 max-h-72 overflow-y-auto">
@@ -28,22 +30,23 @@
         </div>
         <div class="flex flex-row gap-1 border-white/20">
             <ComposerButton title="Mention someone">
-                <Icon name="tabler:at" class="size-6" aria-hidden="true" />
+                <iconify-icon height="1.5rem" width="1.5rem" icon="tabler:at" aria-hidden="true" />
             </ComposerButton>
             <ComposerButton title="Toggle Markdown" @click="markdown = !markdown" :toggled="markdown">
-                <Icon :name="markdown ? 'tabler:markdown' : 'tabler:markdown-off'" class="size-6" aria-hidden="true" />
+                <iconify-icon width="1.25rem" height="1.25rem"
+                    :icon="markdown ? 'tabler:markdown' : 'tabler:markdown-off'" aria-hidden="true" />
             </ComposerButton>
             <ComposerButton title="Use a custom emoji">
-                <Icon name="tabler:mood-smile" class="size-6" aria-hidden="true" />
+                <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:mood-smile" aria-hidden="true" />
             </ComposerButton>
             <ComposerButton title="Add media">
-                <Icon name="tabler:photo-up" class="size-6" aria-hidden="true" />
+                <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:photo-up" aria-hidden="true" />
             </ComposerButton>
             <ComposerButton title="Add a file">
-                <Icon name="tabler:file-upload" class="size-6" aria-hidden="true" />
+                <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:file-upload" aria-hidden="true" />
             </ComposerButton>
             <ComposerButton title="Add content warning" @click="cw = cw === null ? '' : null" :toggled="cw !== null">
-                <Icon name="tabler:rating-18-plus" class="size-6" aria-hidden="true" />
+                <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:rating-18-plus" aria-hidden="true" />
             </ComposerButton>
             <ButtonsPrimary :loading="submitting" @click="send" class="ml-auto rounded-full">
                 <span>Send!</span>
diff --git a/components/headers/navbar.vue b/components/headers/navbar.vue
index 47677f5..252d212 100644
--- a/components/headers/navbar.vue
+++ b/components/headers/navbar.vue
@@ -23,7 +23,7 @@
                     class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-200"
                     @click="mobileMenuOpen = true">
                     <span class="sr-only">Open main menu</span>
-                    <Icon name="tabler:menu-2" class="h-6 w-6" aria-hidden="true" />
+                    <iconify-icon icon="tabler:menu-2" width="1.5rem" height="1.5rem" aria-hidden="true" />
                 </button>
             </div>
             <div class="hidden lg:flex lg:gap-x-12">
@@ -45,7 +45,7 @@
                     </NuxtLink>
                     <button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-200" @click="mobileMenuOpen = false">
                         <span class="sr-only">Close menu</span>
-                        <Icon name="tabler:x" class="h-6 w-6" aria-hidden="true" />
+                        <iconify-icon icon="tabler:x" width="1.5rem" height="1.5rem" aria-hidden="true" />
                     </button>
                 </div>
                 <div class="mt-6 flow-root">
diff --git a/components/sidebars/collapsible-aside.vue b/components/sidebars/collapsible-aside.vue
index edbd47d..aae50c8 100644
--- a/components/sidebars/collapsible-aside.vue
+++ b/components/sidebars/collapsible-aside.vue
@@ -7,7 +7,7 @@
         </OverlayScrollbarsComponent>
         <button @click="open = !open"
             class="h-full bg-dark-700 hover:bg-dark-400 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
-            <Icon name="tabler:chevron-right"
+            <iconify-icon icon="tabler:chevron-right"
                 :class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
                 aria-hidden="true" />
         </button>
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index 2ff44aa..c5bdaa5 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -13,7 +13,7 @@
                 <NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
                     <ButtonsBase
                         class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
-                        <Icon :name="timeline.icon" class="shrink-0 text-2xl" />
+                        <iconify-icon :icon="timeline.icon" class="shrink-0 text-2xl" />
                         <span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
                     </ButtonsBase>
                 </NuxtLink>
@@ -27,18 +27,18 @@
                 <ButtonsBase v-if="tokenData" @click="signOut().finally(() => loadingAuth = false)"
                     :loading="loadingAuth"
                     class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
-                    <Icon name="tabler:logout" class="shrink-0 text-2xl" />
+                    <iconify-icon icon="tabler:logout" class="shrink-0 text-2xl" />
                     <span class="pr-28 line-clamp-1">Sign Out</span>
                 </ButtonsBase>
                 <ButtonsBase v-else @click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth"
                     class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
-                    <Icon name="tabler:login" class="shrink-0 text-2xl" />
+                    <iconify-icon icon="tabler:login" class="shrink-0 text-2xl" />
                     <span class="pr-28 line-clamp-1">Sign In</span>
                 </ButtonsBase>
                 <NuxtLink href="/register" v-if="!tokenData">
                     <ButtonsBase
                         class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
-                        <Icon name="tabler:certificate" class="shrink-0 text-2xl" />
+                        <iconify-icon icon="tabler:certificate" class="shrink-0 text-2xl" />
                         <span class="pr-28 line-clamp-1">Register</span>
                     </ButtonsBase>
                 </NuxtLink>
@@ -47,16 +47,18 @@
                     Posts</h3>
                 <ButtonsBase v-if="tokenData" @click="compose" title="Open composer (shortcut: n)"
                     class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
-                    <Icon name="tabler:writing" class="shrink-0 text-2xl" />
+                    <iconify-icon icon="tabler:writing" class="shrink-0 text-2xl" />
                     <span class="pr-28 line-clamp-1">Compose</span>
                     <kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row">
-                        <Icon name="tabler:keyboard" class="size-4 inline" aria-hidden="true" />
-                        <Icon name="tabler:letter-n-small" class="size-4 inline -mr-1" aria-hidden="true" />
+                        <iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline"
+                            aria-hidden="true" />
+                        <iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
+                            aria-hidden="true" />
                     </kbd>
                 </ButtonsBase>
                 <ButtonsBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker"
                     class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2   ring-pink-600 overflow-hidden h-12 w-full duration-200">
-                    <Icon name="tabler:refresh" class="shrink-0 text-2xl" />
+                    <iconify-icon icon="tabler:refresh" class="shrink-0 text-2xl" />
                     <span class="pr-28 line-clamp-1">Update</span>
                 </ButtonsBase>
             </ClientOnly>
@@ -69,7 +71,7 @@
             <DropdownsAdaptiveDropdown>
                 <template #button>
                     <HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded">
-                        <Icon name="tabler:home" class="text-2xl" />
+                        <iconify-icon icon="tabler:home" class="text-2xl" />
                         <span class="text-xs">Timelines</span>
                     </HeadlessMenuButton>
                 </template>
@@ -88,20 +90,20 @@
                 </template>
             </DropdownsAdaptiveDropdown>
             <NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
-                <Icon name="tabler:bell" class="text-2xl" />
+                <iconify-icon icon="tabler:bell" class="text-2xl" />
                 <span class="text-xs">Notifications</span>
             </NuxtLink>
             <ClientOnly v-if="$pwa?.needRefresh">
                 <button class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-pink-600"
                     @click="$pwa?.updateServiceWorker(true)">
-                    <Icon name="tabler:refresh" class="text-2xl" />
+                    <iconify-icon icon="tabler:refresh" class="text-2xl" />
                     <span class="text-xs">Update</span>
                 </button>
             </ClientOnly>
             <DropdownsAdaptiveDropdown v-else>
                 <template #button>
                     <HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded">
-                        <Icon name="tabler:user" class="text-2xl" />
+                        <iconify-icon icon="tabler:user" class="text-2xl" />
                         <span class="text-xs">Account</span>
                     </HeadlessMenuButton>
                 </template>
@@ -132,7 +134,7 @@
             </DropdownsAdaptiveDropdown>
             <button @click="compose" v-if="tokenData"
                 class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-pink-300/70 via-purple-300/70 to-indigo-400/70">
-                <Icon name="tabler:writing" class="text-2xl" />
+                <iconify-icon icon="tabler:writing" class="text-2xl" />
                 <span class="text-xs">Compose</span>
             </button>
         </ClientOnly>
diff --git a/components/social-elements/notes/attachment.vue b/components/social-elements/notes/attachment.vue
index 3427ecf..40f052f 100644
--- a/components/social-elements/notes/attachment.vue
+++ b/components/social-elements/notes/attachment.vue
@@ -21,11 +21,11 @@
                             @click="lightbox = false">
                             <div class="w-full absolute inset-x-0 top-0 p-10 shrink text-gray-400 flex flex-row gap-3">
                                 <a @click.stop :href="attachment.url" target="_blank" download class="ml-auto">
-                                    <Icon name="tabler:download" class="w-6 h-6" />
+                                    <iconify-icon icon="tabler:download" width="1.5rem" height="1.5rem" />
                                     <span class="sr-only">Close</span>
                                 </a>
-                                <button @click.stop="lightbox = false" class="">
-                                    <Icon name="tabler:x" class="w-6 h-6" />
+                                <button @click.stop="lightbox = false">
+                                    <iconify-icon icon="tabler:x" width="1.5rem" height="1.5rem" />
                                     <span class="sr-only">Close</span>
                                 </button>
                             </div>
diff --git a/components/social-elements/notes/header.vue b/components/social-elements/notes/header.vue
index b399fc3..fd19d6a 100644
--- a/components/social-elements/notes/header.vue
+++ b/components/social-elements/notes/header.vue
@@ -48,11 +48,13 @@
                         }}</span>
                     <span @click="copyAccount" v-if="!hasCopied"
                         class="hidden select-none group-hover:flex cursor-pointer items-center gap-x-1">
-                        <Icon name="tabler:clipboard" class="h-4 w-4 text-gray-200" aria-hidden="true" />
+                        <iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
+                            aria-hidden="true" />
                         Click to copy
                     </span>
                     <span v-else class="hidden group-hover:flex select-none items-center gap-x-1">
-                        <Icon name="tabler:check" class="h-4 w-4 text-green-500" aria-hidden="true" />
+                        <iconify-icon icon="tabler:check" height="1rem" width="1rem" class="text-green-500"
+                            aria-hidden="true" />
                         Copied!
                     </span>
                 </Skeleton>
diff --git a/components/social-elements/notes/note-content.vue b/components/social-elements/notes/note-content.vue
index d772c82..27d84fb 100644
--- a/components/social-elements/notes/note-content.vue
+++ b/components/social-elements/notes/note-content.vue
@@ -1,21 +1,18 @@
 <template>
-    <div v-if="!collapsed">
-        <div class="mt-6 block relative">
-            <Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
-                type="content">
-                <div v-if="content"
-                    :class="['prose prose-invert duration-200 !max-w-full break-words prose-a:no-underline', $style.content]"
-                    v-html="content">
-                </div>
-            </Skeleton>
-        </div>
+    <div v-if="!collapsed" class="mt-6">
+        <Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
+            type="content">
+            <div v-if="content"
+                :class="['prose block relative prose-invert duration-200 !max-w-full break-words prose-a:no-underline', $style.content]"
+                v-html="content">
+            </div>
+        </Skeleton>
         <div v-if="note && note.media_attachments.length > 0" class="[&:not(:first-child)]:mt-6">
             <SocialElementsNotesAttachment v-for="attachment of note.media_attachments" :key="attachment.id"
                 :attachment="attachment" />
         </div>
-        <div v-if="isQuote && note?.reblog" class="mt-4">
-            <LazySocialElementsNotesNote :note="note?.reblog" :small="true" />
-        </div>
+        <LazySocialElementsNotesNote v-if="isQuote && note?.reblog" :note="note?.reblog" :small="true"
+            class="mt-4 !rounded" />
     </div>
     <div v-else
         class="rounded text-center ring-1 !max-w-full ring-white/10 h-52 mt-6 prose prose-invert p-4 flex flex-col justify-center items-center">
diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
index f0cd301..1c95624 100644
--- a/components/social-elements/notes/note.vue
+++ b/components/social-elements/notes/note.vue
@@ -6,7 +6,7 @@
         </div>
         <div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-pink-500">
             <Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
-                <Icon name="tabler:repeat" class="size-6" aria-hidden="true" />
+                <iconify-icon width="1.5rem" height="1.5rem" icon="tabler:repeat" class="size-6" aria-hidden="true" />
                 <AvatarsCentered v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
                     class="size-6 rounded shrink-0 ring-1 ring-white/10" />
                 <span><strong v-html="reblogDisplayName"></strong> reblogged</span>
@@ -20,33 +20,34 @@
             <div v-if="showInteractions"
                 class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
                 <button class="group" @click="note && useEvent('note:reply', note)" :disabled="!isSignedIn">
-                    <Icon name="tabler:arrow-back-up"
-                        class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
+                    <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:arrow-back-up"
+                        class="text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
                     <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.replies_count) }}</span>
                 </button>
                 <button class="group" :disabled="!isSignedIn">
-                    <Icon name="tabler:heart" v-if="!note?.favourited"
-                        class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-pink-600" aria-hidden="true" />
-                    <Icon name="tabler:heart-filled" v-else
-                        class="h-5 w-5 text-pink-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
+                    <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!note?.favourited"
+                        class="size-5 text-gray-200 group-hover:group-enabled:text-pink-600" aria-hidden="true" />
+                    <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else
+                        class="size-5 text-pink-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
                     <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.favourites_count) }}</span>
                 </button>
                 <button class="group" :disabled="!isSignedIn">
-                    <Icon name="tabler:repeat" v-if="!note?.reblogged"
-                        class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
-                    <Icon name="tabler:repeat-off" v-else
-                        class="h-5 w-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
+                    <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-if="!note?.reblogged"
+                        class="size-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
+                    <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat-off" v-else
+                        class="size-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
                     <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.reblogs_count) }}</span>
                 </button>
                 <button class="group" @click="note && useEvent('note:quote', note)" :disabled="!isSignedIn">
-                    <Icon name="tabler:quote" class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-blue-600"
-                        aria-hidden="true" />
+                    <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:quote"
+                        class="size-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
                     <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
                 </button>
                 <DropdownsAdaptiveDropdown>
                     <template #button>
                         <HeadlessMenuButton>
-                            <Icon name="tabler:dots" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+                            <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots"
+                                class="size-5 text-gray-200" aria-hidden="true" />
                             <span class="sr-only">Open menu</span>
                         </HeadlessMenuButton>
                     </template>
diff --git a/components/social-elements/notes/reply-header.vue b/components/social-elements/notes/reply-header.vue
index e55901d..d40267d 100644
--- a/components/social-elements/notes/reply-header.vue
+++ b/components/social-elements/notes/reply-header.vue
@@ -2,7 +2,7 @@
     <NuxtLink :href="`/@${account?.acct}`"
         class="mb-4 flex flex-row gap-2 items-center text-gray-300 opacity-70 line-clamp-1">
         <Skeleton :enabled="!account" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
-            <Icon name="tabler:arrow-back-up" class="size-6" aria-hidden="true" />
+            <iconify-icon icon="tabler:arrow-back-up" width="1.5rem" height="1.5rem" aria-hidden="true" />
             <span class="flex flex-row items-center gap-2 overflow-hidden flex-wrap break-all">
                 Replying to
                 <AvatarsCentered v-if="account?.avatar" :url="account?.avatar" :alt="`${account?.acct}'s avatar'`"
diff --git a/components/social-elements/notifications/notif.vue b/components/social-elements/notifications/notif.vue
index bdd8671..6f036ff 100644
--- a/components/social-elements/notifications/notif.vue
+++ b/components/social-elements/notifications/notif.vue
@@ -3,7 +3,7 @@
         <div class="px-4 pt-2 pb-3 flex flex-row gap-2 items-center">
             <Skeleton :enabled="!notification" shape="rect" class="!h-6" :min-width="40" :max-width="100"
                 width-unit="%">
-                <Icon :name="icon" class="h-6 w-6 text-gray-200" aria-hidden="true" />
+                <iconify-icon :icon="icon" width="1.5rem" height="1.5rem" class="text-gray-200" aria-hidden="true" />
                 <AvatarsCentered v-if="notification?.account?.avatar" :src="notification?.account.avatar"
                     :alt="`${notification?.account.acct}'s avatar'`"
                     class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />
diff --git a/components/social-elements/users/Account.vue b/components/social-elements/users/Account.vue
index e2d5d0b..f0493f1 100644
--- a/components/social-elements/users/Account.vue
+++ b/components/social-elements/users/Account.vue
@@ -31,8 +31,8 @@
                     class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
                     <Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6">
                         {{ account?.display_name }}
-                        <Icon v-if="account?.locked" name="tabler:lock"
-                            class="w-5 h-5 mb-0.5 text-gray-400 cursor-pointer"
+                        <iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
+                            class="text-gray-400 cursor-pointer align-text-top"
                             title="This account manually approves its followers" />
                     </Skeleton>
                 </h2>
@@ -51,12 +51,12 @@
             <div class="mt-3 flex items-center space-x-4 px-4">
                 <div class="flex items-center space-x-1">
                     <Skeleton :enabled="skeleton" :min-width="150" :max-width="150" shape="rect">
-                        <Icon name="tabler:calendar" class="w-5 h-5 text-gray-400" />
+                        <iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-gray-400" />
                         <span class="text-gray-400">Created {{ formattedJoin }}</span>
                     </Skeleton>
                 </div>
                 <div v-if="account?.bot" class="flex items-center space-x-1">
-                    <Icon name="tabler:robot" class="w-5 h-5 text-gray-400" />
+                    <iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
                     <span class="text-gray-400">Bot</span>
                 </div>
             </div>
diff --git a/components/timelines/Notifications.vue b/components/timelines/Notifications.vue
index 2c94282..04b8a20 100644
--- a/components/timelines/Notifications.vue
+++ b/components/timelines/Notifications.vue
@@ -7,7 +7,7 @@
 
         <div v-if="hasReachedEnd"
             class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
-            <Icon name="tabler:message-off" class="h-6 w-6" />
+            <iconify-icon name="tabler:message-off" width="1.5rem" height="1.5rem" />
             <span>No more notifications, you've seen them all</span>
         </div>
     </ClientOnly>
diff --git a/components/timelines/timeline.vue b/components/timelines/timeline.vue
index 0e084f5..adea9a0 100644
--- a/components/timelines/timeline.vue
+++ b/components/timelines/timeline.vue
@@ -9,7 +9,7 @@
 
         <div v-if="hasReachedEnd"
             class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
-            <Icon name="tabler:message-off" class="h-6 w-6" />
+            <iconify-icon icon="tabler:message-off" width="1.5rem" height="1.5rem" />
             <span>No more posts, you've seen them all</span>
         </div>
     </ClientOnly>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 586fe20..8df696a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -6,12 +6,16 @@ export default defineNuxtConfig({
         "@vueuse/nuxt",
         "nuxt-headlessui",
         "@nuxt/fonts",
-        "nuxt-icon",
         //"nuxt-shiki",
         "@vee-validate/nuxt",
         "nuxt-security",
         "@vite-pwa/nuxt",
     ],
+    vue: {
+        compilerOptions: {
+            isCustomElement: (tag) => tag === "iconify-icon",
+        },
+    },
     pwa: {
         manifest: {
             name: "Lysand",
diff --git a/package.json b/package.json
index 1fa2e8c..76b38f7 100644
--- a/package.json
+++ b/package.json
@@ -1,68 +1,68 @@
 {
-    "name": "lysand-fe",
-    "private": true,
-    "type": "module",
-    "license": "AGPL-3.0",
-    "author": {
-        "email": "contact@cpluspatch.com",
-        "name": "CPlusPatch",
-        "url": "https://cpluspatch.com"
-    },
-    "maintainers": [
-        {
-            "email": "contact@cpluspatch.com",
-            "name": "CPlusPatch",
-            "url": "https://cpluspatch.com"
-        }
-    ],
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/lysand-org/lysand-fe.git"
-    },
-    "scripts": {
-        "build": "nuxt build",
-        "dev": "nuxt dev --https --https.cert config/lysand-fe.localhost.pem --https.key config/lysand-fe.localhost-key.pem --host lysand-fe.localhost",
-        "generate": "nuxt generate",
-        "preview": "nuxt preview",
-        "postinstall": "nuxt prepare"
-    },
-    "dependencies": {
-        "@nuxt/fonts": "^0.7.0",
-        "@tailwindcss/typography": "^0.5.12",
-        "@vee-validate/nuxt": "^4.12.6",
-        "@vee-validate/zod": "^4.12.6",
-        "@vite-pwa/nuxt": "^0.7.0",
-        "c12": "^1.10.0",
-        "html-to-text": "^9.0.5",
-        "megalodon": "^10.0.0",
-        "mitt": "^3.0.1",
-        "nuxt": "^3.11.2",
-        "nuxt-headlessui": "^1.2.0",
-        "nuxt-icon": "^0.6.10",
-        "nuxt-security": "^2.0.0-beta.0",
-        "nuxt-shiki": "^0.3.0",
-        "overlayscrollbars": "^2.8.0",
-        "overlayscrollbars-vue": "^0.5.9",
-        "shiki": "^1.3.0",
-        "vue": "^3.4.21",
-        "vue-router": "^4.3.0",
-        "zod": "^3.23.0"
-    },
-    "devDependencies": {
-        "@biomejs/biome": "^1.6.4",
-        "@nuxtjs/seo": "^2.0.0-rc.10",
-        "@nuxtjs/tailwindcss": "^6.11.4",
-        "@tailwindcss/forms": "^0.5.7",
-        "@types/html-to-text": "^9.0.4",
-        "@vue-email/nuxt": "^0.8.19"
-    },
-    "trustedDependencies": [
-        "@biomejs/biome",
-        "@fortawesome/fontawesome-common-types",
-        "@fortawesome/free-regular-svg-icons",
-        "@fortawesome/free-solid-svg-icons",
-        "esbuild",
-        "json-editor-vue",
-        "vue-demi"
-    ]
+  "name": "lysand-fe",
+  "private": true,
+  "type": "module",
+  "license": "AGPL-3.0",
+  "author": {
+    "email": "contact@cpluspatch.com",
+    "name": "CPlusPatch",
+    "url": "https://cpluspatch.com"
+  },
+  "maintainers": [
+    {
+      "email": "contact@cpluspatch.com",
+      "name": "CPlusPatch",
+      "url": "https://cpluspatch.com"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lysand-org/lysand-fe.git"
+  },
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev --https --https.cert config/lysand-fe.localhost.pem --https.key config/lysand-fe.localhost-key.pem --host lysand-fe.localhost",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/fonts": "^0.7.0",
+    "@tailwindcss/typography": "^0.5.12",
+    "@vee-validate/nuxt": "^4.12.6",
+    "@vee-validate/zod": "^4.12.6",
+    "@vite-pwa/nuxt": "^0.7.0",
+    "c12": "^1.10.0",
+    "html-to-text": "^9.0.5",
+    "iconify-icon": "^2.1.0",
+    "megalodon": "^10.0.0",
+    "mitt": "^3.0.1",
+    "nuxt": "^3.11.2",
+    "nuxt-headlessui": "^1.2.0",
+    "nuxt-security": "^2.0.0-beta.0",
+    "nuxt-shiki": "^0.3.0",
+    "overlayscrollbars": "^2.8.0",
+    "overlayscrollbars-vue": "^0.5.9",
+    "shiki": "^1.3.0",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
+    "zod": "^3.23.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.6.4",
+    "@nuxtjs/seo": "^2.0.0-rc.10",
+    "@nuxtjs/tailwindcss": "^6.11.4",
+    "@tailwindcss/forms": "^0.5.7",
+    "@types/html-to-text": "^9.0.4",
+    "@vue-email/nuxt": "^0.8.19"
+  },
+  "trustedDependencies": [
+    "@biomejs/biome",
+    "@fortawesome/fontawesome-common-types",
+    "@fortawesome/free-regular-svg-icons",
+    "@fortawesome/free-solid-svg-icons",
+    "esbuild",
+    "json-editor-vue",
+    "vue-demi"
+  ]
 }
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 665a895..7229866 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -4,7 +4,7 @@
             <div class="shrink-0 p-10 h-dvh" v-if="!tokenData">
                 <button type="button"
                     class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
-                    <Icon name="tabler:notification" class="mx-auto h-12 w-12 text-gray-400" />
+                    <iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-gray-400" />
                     <span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
                         will
                         appear here