diff --git a/components/Navbar.vue b/components/Navbar.vue
index 628c13744f..5acc9e5c8d 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -89,8 +89,7 @@
               <NeoIcon
                 class="ml-1"
                 icon="fire-flame-curved"
-                custom-size="fa-solid"
-                pack="fa-sharp"
+                pack="fass"
                 variant="primary" />
             </div>
           </nuxt-link>
@@ -161,7 +160,7 @@
                 {{ $t('profile.page') }}
                 <NeoIcon icon="user-circle" />
               </span>
-              <NeoIcon class="icon--right" icon="chevron-right" pack="fas" />
+              <NeoIcon class="icon--right" icon="chevron-right" />
             </div>
 
             <div v-if="!account" id="NavProfile">
diff --git a/components/TheFooter.vue b/components/TheFooter.vue
index cb3309af71..b52793d952 100644
--- a/components/TheFooter.vue
+++ b/components/TheFooter.vue
@@ -40,10 +40,7 @@
                 rel="nofollow noopener noreferrer"
                 class="is-flex is-align-items-center">
                 {{ item.name }}
-                <NeoIcon
-                  icon="arrow-up-right"
-                  class="ml-1 has-text-grey"
-                  pack="fas" />
+                <NeoIcon icon="arrow-up-right" class="ml-1 has-text-grey" />
               </a>
               <nuxt-link v-else :to="item.url">
                 {{ item.name }}
@@ -67,10 +64,7 @@
                 rel="nofollow noopener noreferrer"
                 class="is-flex is-align-items-center">
                 {{ item.name }}
-                <NeoIcon
-                  icon="arrow-up-right"
-                  class="ml-1 has-text-grey"
-                  pack="fas" />
+                <NeoIcon icon="arrow-up-right" class="ml-1 has-text-grey" />
               </a>
               <nuxt-link v-else :to="item.url">
                 {{ item.name }}
@@ -94,10 +88,7 @@
                 rel="nofollow noopener noreferrer"
                 class="is-flex is-align-items-center">
                 {{ item.name }}
-                <NeoIcon
-                  icon="arrow-up-right"
-                  class="ml-1 has-text-grey"
-                  pack="fas" />
+                <NeoIcon icon="arrow-up-right" class="ml-1 has-text-grey" />
               </a>
               <nuxt-link v-else :to="item.url">
                 {{ item.name }}
@@ -148,7 +139,7 @@
 
               <NeoIcon
                 v-else
-                :pack="item.name == 'Swag' ? 'fas' : 'fab'"
+                :pack="item.name == 'Swag' ? 'fasr' : 'fab'"
                 :icon="item.icon" />
             </a>
           </li>
diff --git a/components/base/SubmitButton.vue b/components/base/SubmitButton.vue
index 750817f360..29aadedd02 100644
--- a/components/base/SubmitButton.vue
+++ b/components/base/SubmitButton.vue
@@ -7,7 +7,6 @@
       :disabled="disabled"
       :loading="loading"
       :expanded="expanded"
-      icon-pack="far"
       outlined
       @click.native="$emit('click')">
       <slot>
diff --git a/components/blog/BlogPost.vue b/components/blog/BlogPost.vue
index 572f15bb00..7c04fd4fc9 100644
--- a/components/blog/BlogPost.vue
+++ b/components/blog/BlogPost.vue
@@ -2,7 +2,7 @@
   <div v-if="attributes.title" class="article">
     <div class="is-flex is-align-items-center has-text-grey is-size-5 mb-1">
       <nuxt-link class="has-text-grey" to="/blog">{{ $t('blog') }}</nuxt-link>
-      <NeoIcon icon="chevron-right" pack="far" class="mx-5" />
+      <NeoIcon icon="chevron-right" class="mx-5" />
       <span>{{ attributes.title?.slice(0, 15) }}...</span>
     </div>
     <h1>{{ attributes.title }}</h1>
diff --git a/components/collection/unlockable/UnlockableLoader.vue b/components/collection/unlockable/UnlockableLoader.vue
index e5499ee08b..c090c07bdc 100644
--- a/components/collection/unlockable/UnlockableLoader.vue
+++ b/components/collection/unlockable/UnlockableLoader.vue
@@ -6,7 +6,6 @@
         variant="text"
         no-shadow
         icon="xmark"
-        icon-pack="fa-sharp"
         size="medium"
         @click.native="closeLoading" />
       <img src="/unlockable-loader.svg" />
diff --git a/components/collection/voteDrop/DropContainer.vue b/components/collection/voteDrop/DropContainer.vue
index 2552c3e4d8..1d59fa4789 100644
--- a/components/collection/voteDrop/DropContainer.vue
+++ b/components/collection/voteDrop/DropContainer.vue
@@ -66,7 +66,7 @@
                   :label="buttonLabel"
                   @click.native="handleMint" />
                 <div class="is-flex is-align-items-center mt-2">
-                  <NeoIcon icon="timer" pak="far" class="mr-2" />
+                  <NeoIcon icon="timer" class="mr-2" />
                   {{ leftTime }}
                 </div>
               </div>
@@ -91,7 +91,7 @@
           class="column is-half-desktop is-flex is-flex-direction-column is-justify-content-center order-1">
           <div
             class="is-flex is-align-items-center has-text-weight-bold is-size-6 mb-2">
-            <NeoIcon icon="unlock" class="mr-2" pack="far" />
+            <NeoIcon icon="unlock" class="mr-2" />
             {{ $t('mint.unlockable.howItemWork') }}
           </div>
           <div>
@@ -186,13 +186,13 @@ const statusInformation = computed(() => {
         icon: 'circle-info',
         iconClass: 'has-text-grey',
         labelClass: 'has-text-grey',
-        iconPack: 'far',
+        iconPack: 'fasr',
       }
     : isEligibleUser.value
     ? {
         label: $i18n.t('mint.unlockable.eligible'),
         icon: 'circle-check',
-        iconPack: 'fas',
+        iconPack: 'fasr',
         iconClass: 'has-text-success',
       }
     : {
@@ -200,7 +200,7 @@ const statusInformation = computed(() => {
         icon: 'circle-info',
         iconClass: 'has-text-grey',
         labelClass: 'has-text-grey',
-        iconPack: 'far',
+        iconPack: 'fasr',
       }
 })
 
diff --git a/components/common/ConnectWallet/WalletMenuItem.vue b/components/common/ConnectWallet/WalletMenuItem.vue
index dc73a2b0a0..10ecbdf634 100644
--- a/components/common/ConnectWallet/WalletMenuItem.vue
+++ b/components/common/ConnectWallet/WalletMenuItem.vue
@@ -26,7 +26,7 @@
     <div
       v-if="isAuth && walletAccounts.length === 0"
       class="pl-5 pt-2 pb-2 is-flex is-align-items-center auth-tip">
-      <NeoIcon icon="spinner-third" pack="fad" />
+      <NeoIcon icon="spinner-third" />
       <span class="has-text-grey is-size-7 pl-4">
         {{ $i18n.t('walletConnect.authTip') }}
       </span>
diff --git a/components/common/IdentityForm.vue b/components/common/IdentityForm.vue
index 2ed26bd40c..37bd7e3401 100644
--- a/components/common/IdentityForm.vue
+++ b/components/common/IdentityForm.vue
@@ -8,7 +8,7 @@
           :label="$i18n.t('identity.fundsReserve')"
           position="bottom"
           multiline>
-          <NeoIcon icon="info-circle" pack="fas" />
+          <NeoIcon icon="info-circle" />
         </NeoTooltip>
       </h1>
 
diff --git a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
index 6ef5b09c8c..cfa59c6c3e 100644
--- a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
+++ b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
@@ -17,7 +17,6 @@
           variant="text"
           no-shadow
           icon="xmark"
-          icon-pack="fa-sharp"
           size="medium"
           @click.native="onClose" />
       </header>
diff --git a/components/common/shoppingCart/ShoppingCartItemRow.vue b/components/common/shoppingCart/ShoppingCartItemRow.vue
index 156515a552..82cec331ef 100644
--- a/components/common/shoppingCart/ShoppingCartItemRow.vue
+++ b/components/common/shoppingCart/ShoppingCartItemRow.vue
@@ -40,7 +40,6 @@
         class="inherit-background-color"
         no-shadow
         icon="trash"
-        icon-pack="far"
         @click.native="emit('delete', nft.id)" />
     </div>
   </div>
diff --git a/components/drops/TimeTag.vue b/components/drops/TimeTag.vue
index a4d8f377bf..28d5ef3448 100644
--- a/components/drops/TimeTag.vue
+++ b/components/drops/TimeTag.vue
@@ -3,7 +3,7 @@
     class="tag-container is-flex border py-1 px-2 is-justify-content-space-between is-align-items-center">
     <div class="image is-24x24 has-text-centered">
       <img v-if="isMintingLive" src="/drop/unlockable-pulse.svg" />
-      <NeoIcon v-else icon="calendar-day" pack="far" variant="k-grey" />
+      <NeoIcon v-else icon="calendar-day" variant="k-grey" />
     </div>
 
     <span class="pr-1">{{ displayText }}</span>
diff --git a/components/explore/FilterMenuButton.vue b/components/explore/FilterMenuButton.vue
index 2a86057404..d67f2f0f5b 100644
--- a/components/explore/FilterMenuButton.vue
+++ b/components/explore/FilterMenuButton.vue
@@ -8,7 +8,6 @@
       @click="toggleSidebarFilters">
       <NeoIcon
         :icon="isSidebarFiltersOpen && !disabled ? 'times' : 'bars'"
-        pack="fa-sharp"
         size="medium" />
     </a>
     <div class="is-hidden-tablet is-relative">
diff --git a/components/massmint/OnBoarding.vue b/components/massmint/OnBoarding.vue
index 556df2d879..ea060a9138 100644
--- a/components/massmint/OnBoarding.vue
+++ b/components/massmint/OnBoarding.vue
@@ -8,7 +8,6 @@
       <NeoButton
         :label="$t('massmint.onboarding.skip')"
         icon="arrow-right"
-        icon-pack="fas"
         @click.native="toMassMint" />
     </div>
     <div class="is-relative mb-6">
diff --git a/components/navbar/MobileExpandableSection.vue b/components/navbar/MobileExpandableSection.vue
index 5588c783af..551e4e2808 100644
--- a/components/navbar/MobileExpandableSection.vue
+++ b/components/navbar/MobileExpandableSection.vue
@@ -4,11 +4,11 @@
       {{ title }}
       <NeoIcon v-if="icon" :icon="icon" :pack="iconFamily" />
     </span>
-    <NeoIcon class="icon--right" icon="chevron-right" pack="fas" />
+    <NeoIcon class="icon--right" icon="chevron-right" />
   </div>
   <div v-else class="navbar-item--fullpage">
     <div class="navbar-item navbar-item--reverse" @click.stop="close">
-      <NeoIcon icon="chevron-left" pack="fas" />
+      <NeoIcon icon="chevron-left" />
       {{ title }}
     </div>
     <div :class="{ 'navbar-item': !noPadding }" class="navbar-item-body">
@@ -31,7 +31,7 @@ defineProps({
   },
   iconFamily: {
     type: String,
-    default: 'fas',
+    default: 'fasr',
   },
   noPadding: {
     type: Boolean,
diff --git a/components/navbar/NotificationBoxButton.vue b/components/navbar/NotificationBoxButton.vue
index 867178d294..53482432a6 100644
--- a/components/navbar/NotificationBoxButton.vue
+++ b/components/navbar/NotificationBoxButton.vue
@@ -1,7 +1,7 @@
 <template>
   <a class="navbar-item" @click="toggleNotificationModal">
     <span v-if="props.showLabel">{{ $t('notification.notifications') }}</span>
-    <NeoIcon icon="bell" pack="far" class="icon" />
+    <NeoIcon icon="bell" class="icon" />
   </a>
 </template>
 
diff --git a/components/rmrk/Gallery/EmotionList.vue b/components/rmrk/Gallery/EmotionList.vue
index afef3179f3..89b313a46a 100644
--- a/components/rmrk/Gallery/EmotionList.vue
+++ b/components/rmrk/Gallery/EmotionList.vue
@@ -23,7 +23,7 @@
       class="emoji-box mb-2"
       no-shadow
       @click.native="openEmotionModal()">
-      <NeoIcon pack="fas" icon="info-circle" />
+      <NeoIcon icon="info-circle" />
     </NeoButton>
   </div>
 </template>
diff --git a/components/search/SearchBar.vue b/components/search/SearchBar.vue
index ea61373737..89b7933ff0 100644
--- a/components/search/SearchBar.vue
+++ b/components/search/SearchBar.vue
@@ -7,6 +7,7 @@
       :class="{ 'is-collection-search': isSearchInCollectionMode }"
       :placeholder="placeholderContent"
       icon="search"
+      icon-pack="fasr"
       :open-on-focus="showDefaultSuggestions"
       menu-position="bottom"
       expanded
diff --git a/components/settings/Minting.vue b/components/settings/Minting.vue
index 1794556843..a236738f4f 100644
--- a/components/settings/Minting.vue
+++ b/components/settings/Minting.vue
@@ -9,7 +9,7 @@
         :label="$i18n.t('support.tooltip')"
         position="bottom"
         multiline>
-        <NeoIcon icon="info-circle" pack="fas" />
+        <NeoIcon icon="info-circle" />
       </NeoTooltip>
     </div>
     <div class="py-2 is-flex">
@@ -22,7 +22,7 @@
         :label="$i18n.t('carbonOffset.tooltip')"
         position="bottom"
         multiline>
-        <NeoIcon icon="info-circle" pack="fas" />
+        <NeoIcon icon="info-circle" />
       </NeoTooltip>
     </div>
   </div>
diff --git a/components/shared/DragDrop.vue b/components/shared/DragDrop.vue
index e48f912bfe..cbcdf9b38d 100644
--- a/components/shared/DragDrop.vue
+++ b/components/shared/DragDrop.vue
@@ -17,8 +17,8 @@
         <NeoIcon
           :icon="icon"
           class="icon-size has-text-grey py-3"
-          size="large"
-          pack="fas" />
+          custom-size="fa-2x"
+          pack="fass" />
         <p class="has-text-grey mt-8">
           {{ subtitle }}
         </p>
diff --git a/components/shared/DropUpload.vue b/components/shared/DropUpload.vue
index 47ed5a6ce1..15012a27c0 100644
--- a/components/shared/DropUpload.vue
+++ b/components/shared/DropUpload.vue
@@ -19,7 +19,7 @@
           @input="createInput">
           <section class="section">
             <div class="content has-text-centered">
-              <NeoIcon v-if="!file && !url" :icon="icon" size="large" />
+              <NeoIcon v-if="!file && !url" :icon="icon" custom-size="fa-2x" />
               <div v-if="url && !isModelMedia" @click.prevent>
                 <MediaResolver
                   :src="url"
@@ -27,7 +27,7 @@
                   :preview="false"
                   @error="hasError = true" />
               </div>
-              <NeoIcon v-if="hasError" icon="eye-slash" size="large" />
+              <NeoIcon v-if="hasError" icon="eye-slash" custom-size="fa-2x" />
               <p v-if="!file">
                 {{ label }}
               </p>
diff --git a/components/shared/OnRampModal.vue b/components/shared/OnRampModal.vue
index a5c0e841b0..47a47de0e0 100644
--- a/components/shared/OnRampModal.vue
+++ b/components/shared/OnRampModal.vue
@@ -11,7 +11,6 @@
           variant="text"
           no-shadow
           icon="xmark"
-          icon-pack="fa-sharp"
           size="medium"
           class="cross"
           @click.native="onClose" />
diff --git a/components/shared/TransactionLoader.vue b/components/shared/TransactionLoader.vue
index 392fb184d2..d24049f4b1 100644
--- a/components/shared/TransactionLoader.vue
+++ b/components/shared/TransactionLoader.vue
@@ -12,7 +12,6 @@
           variant="text"
           no-shadow
           icon="xmark"
-          icon-pack="fa-sharp"
           size="medium"
           @click.native="emit('close')" />
       </div>
@@ -31,7 +30,6 @@
           variant="text"
           no-shadow
           icon="xmark"
-          icon-pack="fa-sharp"
           size="medium"
           @click.native="emit('close')" />
       </div>
@@ -72,7 +70,6 @@
           <NeoButton
             v-clipboard:copy="explorerLink"
             icon="copy"
-            icon-pack="far"
             class="ml-4 px-4"
             rounded
             no-shadow
diff --git a/components/shared/modals/ModalWrapper.vue b/components/shared/modals/ModalWrapper.vue
index 1fbd3fd632..575a1cc411 100644
--- a/components/shared/modals/ModalWrapper.vue
+++ b/components/shared/modals/ModalWrapper.vue
@@ -2,7 +2,6 @@
   <div :id="id">
     <slot name="trigger" :handle-open="handleOpen">
       <NeoButton
-        icon-pack="fas"
         :icon-left="icon"
         :expanded="expanded"
         :class="{
diff --git a/components/shared/view/InfoBox.vue b/components/shared/view/InfoBox.vue
index 1f8de428f2..e8f535face 100644
--- a/components/shared/view/InfoBox.vue
+++ b/components/shared/view/InfoBox.vue
@@ -7,7 +7,6 @@
         variant="text"
         no-shadow
         icon="xmark"
-        icon-pack="fa-sharp"
         size="medium"
         class="cross"
         @click.native="onClose" />
diff --git a/components/transfer/DonationButton.vue b/components/transfer/DonationButton.vue
index f1ebf99423..61ba29a352 100644
--- a/components/transfer/DonationButton.vue
+++ b/components/transfer/DonationButton.vue
@@ -3,7 +3,6 @@
     style="width: 40px"
     no-shadow
     icon-left="gift"
-    icon-pack="fas"
     tag="nuxt-link"
     :to="`/${urlPrefix}/transfer?target=${props.address}&usdamount=10&donation=true`">
   </NeoButton>
diff --git a/components/transfer/Transfer.vue b/components/transfer/Transfer.vue
index 5d94801f43..8ee11ad8d5 100644
--- a/components/transfer/Transfer.vue
+++ b/components/transfer/Transfer.vue
@@ -37,7 +37,7 @@
             v-if="accountId"
             v-clipboard:copy="generatePaymentLink([accountId])"
             @click="toast(`${$i18n.t('toast.urlCopy')}`)">
-            <NeoIcon icon="sack-dollar" pack="fa" class="mr-2" />{{
+            <NeoIcon icon="sack-dollar" class="mr-2" />{{
               $t('transfers.payMeLink')
             }}
           </NeoDropdownItem>
@@ -46,7 +46,7 @@
             v-clipboard:copy="generateRecurringPaymentLink()"
             class="no-wrap"
             @click="toast(`${$i18n.t('toast.urlCopy')}`)">
-            <NeoIcon icon="rotate" pack="fas" class="mr-2" />{{
+            <NeoIcon icon="rotate" class="mr-2" />{{
               $t('transfers.recurringPaymentLink')
             }}
           </NeoDropdownItem>
@@ -58,7 +58,7 @@
         :value="unit"
         @select="handleTokenSelect" />
       <div class="mb-5">
-        <NeoIcon class="ml-2" icon="circle-info" pack="far" />
+        <NeoIcon class="ml-2" icon="circle-info" />
         <span
           v-dompurify-html="
             $t('transfers.tooltip', [unit, chainNames[unit.toLowerCase()]])
@@ -118,7 +118,7 @@
             class="has-text-weight-bold is-size-6 mb-3 is-flex is-align-items-center is-justify-content-space-between">
             {{ $t('transfers.recipient') }} {{ index + 1 }}
             <a v-if="targetAddresses.length > 1" @click="deleteAddress(index)">
-              <NeoIcon class="p-3" icon="fa-trash" pack="fa-regular" />
+              <NeoIcon class="p-3" icon="trash" />
             </a>
           </div>
           <div
@@ -170,7 +170,7 @@
                 v-if="!isMobile && targetAddresses.length > 1"
                 class="is-flex"
                 @click="deleteAddress(index)">
-                <NeoIcon class="p-3" icon="fa-trash" pack="fa-regular" />
+                <NeoIcon class="p-3" icon="trash" />
               </a>
             </div>
           </div>
@@ -191,7 +191,7 @@
         class="mb-5 is-flex is-justify-content-center is-clickable"
         @click="addAddress">
         {{ $t('transfers.addAddress') }}
-        <NeoIcon class="ml-2" icon="plus" pack="fas" />
+        <NeoIcon class="ml-2" icon="plus" />
       </div>
       <div
         class="is-flex is-justify-content-space-between is-align-items-center mb-5">
@@ -201,7 +201,7 @@
           <!-- tips: don't use `margin` or `padding` directly on the tooltip trigger, it will cause misalignment of the tooltip -->
           <span class="mr-2" />
           <NeoTooltip :label="$t('transfers.setSameAmount')"
-            ><NeoIcon icon="circle-info" pack="far"
+            ><NeoIcon icon="circle-info"
           /></NeoTooltip>
         </div>
         <NeoSwitch v-model="sendSameAmount" :rounded="false" />
diff --git a/components/transfer/TransferConfirmModal.vue b/components/transfer/TransferConfirmModal.vue
index 21d86f4cd1..938c844d6e 100644
--- a/components/transfer/TransferConfirmModal.vue
+++ b/components/transfer/TransferConfirmModal.vue
@@ -30,7 +30,6 @@
             variant="text"
             no-shadow
             icon="xmark"
-            icon-pack="fa-sharp"
             size="medium"
             @click.native="closeModal" />
         </header>
@@ -82,7 +81,7 @@
                 :label="targetAddresses[0].address"
                 append-to-body
                 content-class="transfer-tooltip">
-                <NeoIcon icon="circle-info" class="is-size-6" pack="far" />
+                <NeoIcon icon="circle-info" class="is-size-6" />
               </NeoTooltip>
             </div>
             <div
@@ -92,9 +91,7 @@
               <span class="mx-2 is-size-6">
                 {{ targetAddresses.length }} {{ $t('transfers.recipients') }}
               </span>
-              <NeoIcon
-                :icon="isExpandList ? 'angle-up' : 'angle-down'"
-                pack="far" />
+              <NeoIcon :icon="isExpandList ? 'angle-up' : 'angle-down'" />
             </div>
           </div>
           <div class="fixed-height">
@@ -119,10 +116,7 @@
                       :label="address.address"
                       append-to-body
                       content-class="transfer-tooltip">
-                      <NeoIcon
-                        icon="circle-info"
-                        class="is-size-6"
-                        pack="far" />
+                      <NeoIcon icon="circle-info" class="is-size-6" />
                     </NeoTooltip>
                   </div>
                 </div>
diff --git a/libs/ui/src/components/NeoAutocomplete/NeoAutocomplete.story.vue b/libs/ui/src/components/NeoAutocomplete/NeoAutocomplete.story.vue
index f4a9440fce..6970537c44 100644
--- a/libs/ui/src/components/NeoAutocomplete/NeoAutocomplete.story.vue
+++ b/libs/ui/src/components/NeoAutocomplete/NeoAutocomplete.story.vue
@@ -3,7 +3,7 @@
     <Variant title="Autocomplete">
       {{ label }}
       <template #items>
-        <NeoAutocomplete placeholder="Search..." icon="search">
+        <NeoAutocomplete placeholder="Search..." icon="search" icon-pack="fasr">
           <template #header>header</template>
         </NeoAutocomplete>
       </template>
diff --git a/libs/ui/src/components/NeoButton/NeoButton.vue b/libs/ui/src/components/NeoButton/NeoButton.vue
index bdfc3a206a..7043df347f 100644
--- a/libs/ui/src/components/NeoButton/NeoButton.vue
+++ b/libs/ui/src/components/NeoButton/NeoButton.vue
@@ -11,7 +11,7 @@
     :variant="variant"
     :disabled="disabled"
     :expanded="expanded"
-    :icon-pack="iconPack || 'fas'"
+    :icon-pack="iconPack || 'fasr'"
     :label="label"
     class="is-neo"
     :rounded="rounded"
diff --git a/libs/ui/src/components/NeoIcon/NeoIcon.vue b/libs/ui/src/components/NeoIcon/NeoIcon.vue
index 7f591b3a47..4f6f8176fd 100644
--- a/libs/ui/src/components/NeoIcon/NeoIcon.vue
+++ b/libs/ui/src/components/NeoIcon/NeoIcon.vue
@@ -1,6 +1,6 @@
 <template>
   <o-icon
-    :pack="pack || 'fas'"
+    :pack="pack || 'fasr'"
     :icon="icon"
     :size="size || 'default'"
     :custom-size="customSize"
diff --git a/libs/ui/src/components/NeoInput/NeoInput.vue b/libs/ui/src/components/NeoInput/NeoInput.vue
index 9d7cec0668..7619e24636 100644
--- a/libs/ui/src/components/NeoInput/NeoInput.vue
+++ b/libs/ui/src/components/NeoInput/NeoInput.vue
@@ -6,7 +6,7 @@ export default {
   props: {
     iconPack: {
       type: String,
-      default: 'fas',
+      default: 'fasr',
     },
   },
   computed: {
diff --git a/libs/ui/src/components/NeoModalHead/NeoModalHead.vue b/libs/ui/src/components/NeoModalHead/NeoModalHead.vue
index 6f7a40d57f..07f7a20f30 100644
--- a/libs/ui/src/components/NeoModalHead/NeoModalHead.vue
+++ b/libs/ui/src/components/NeoModalHead/NeoModalHead.vue
@@ -1,7 +1,7 @@
 <template>
   <header v-if="isMobile" class="modal-card-head">
     <div class="modal-card-title" @click.stop="emit('close')">
-      <NeoIcon icon="chevron-left" pack="fas" />
+      <NeoIcon icon="chevron-left" />
       {{ title }}
     </div>
   </header>
@@ -16,7 +16,6 @@
       variant="text"
       no-shadow
       icon="xmark"
-      icon-pack="fa-sharp"
       size="medium"
       @click.native="emit('close')" />
   </header>
@@ -24,6 +23,7 @@
 
 <script lang="ts" setup>
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
+
 defineProps<{
   title: string
 }>()
diff --git a/package.json b/package.json
index 680a1f96b9..c2e9504daa 100644
--- a/package.json
+++ b/package.json
@@ -62,9 +62,6 @@
     "@braintree/sanitize-url": "^6.0.4",
     "@chenfengyuan/vue-qrcode": "1",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/vue-fontawesome": "^2.0.10",
     "@google/model-viewer": "^1.12.1",
     "@kodadot1/brick": "workspace:*",
diff --git a/plugins/icons.ts b/plugins/icons.ts
index 63c7dafaef..3f57f0daae 100644
--- a/plugins/icons.ts
+++ b/plugins/icons.ts
@@ -1,255 +1,27 @@
-import Vue from 'vue'
 import { Neo } from '@kodadot1/brick'
+
+import { config } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { config, library } from '@fortawesome/fontawesome-svg-core'
 
 // nuxt will handle css
 config.autoAddCss = false
 
-import {
-  faAngleLeft,
-  faAngleRight,
-  faArrowRight,
-  faArrowUp,
-  faArrowUpRightFromSquare,
-  faArrowsAlt,
-  faBars,
-  faBookOpen,
-  faBookmark,
-  faCalculator,
-  faCalendar,
-  faCameraRetro,
-  faCaretDown,
-  faCaretUp,
-  faChartLine,
-  faCheck,
-  faChevronDown,
-  faChevronLeft,
-  faChevronRight,
-  faChevronUp,
-  faClock,
-  faCloudDownloadAlt,
-  faCode,
-  faCommentAlt,
-  faCompress,
-  faCompressAlt,
-  faCompressArrowsAlt,
-  faCopy,
-  faCube,
-  faDice,
-  faDownload,
-  faEllipsisH,
-  faEllipsisV,
-  faEnvelope,
-  faExclamationCircle,
-  faExclamationTriangle,
-  faExpand,
-  faExternalLinkAlt,
-  faExternalLinkSquareAlt,
-  faEye,
-  faEyeSlash,
-  faFileImage,
-  faFilter,
-  faFire,
-  faFlask,
-  faGhost,
-  faGift,
-  faGlobe,
-  faHeart,
-  faHistory,
-  faImage,
-  faInfo,
-  faInfoCircle,
-  faKey,
-  faLanguage,
-  faLeaf,
-  faLightbulb,
-  faLink,
-  faListUl,
-  faMagic,
-  faMinus,
-  faMoneyBill,
-  faMoneyBillAlt,
-  faPalette,
-  faPaperPlane,
-  faPlus,
-  faPrint,
-  faQrcode,
-  faQuestion,
-  faQuestionCircle,
-  faReply,
-  faSearch,
-  faShare,
-  faShareAlt,
-  faShareSquare,
-  faShop,
-  faSignOutAlt,
-  faSort,
-  faSquareArrowUpRight,
-  faSync,
-  faTable,
-  faTag,
-  faTh,
-  faThLarge,
-  faTimes,
-  faTimesCircle,
-  faTrash,
-  faUpload,
-  faUser,
-  faUserCircle,
-  faUsers,
-  faWallet,
-  faX,
-} from '@fortawesome/free-solid-svg-icons'
-
-// throws error, idk why
-import {
-  faCommentDots,
-  faThumbsDown,
-  faThumbsUp,
-} from '@fortawesome/free-regular-svg-icons'
-
-import {
-  faDiscord,
-  faFacebook,
-  faFacebookMessenger,
-  faInstagram,
-  faLine,
-  faMedium,
-  faPinterest,
-  faRedditAlien,
-  faTelegram,
-  faTelegramPlane,
-  faWhatsapp,
-  faWpexplorer,
-  faXTwitter,
-  faYoutube,
-} from '@fortawesome/free-brands-svg-icons'
-
-library.add(
-  faArrowRight,
-  faSort,
-  faArrowUpRightFromSquare,
-  faSquareArrowUpRight,
-  faBars,
-  faBookOpen,
-  faPaperPlane,
-  faFileImage,
-  faPlus,
-  faSync,
-  faTimes,
-  faTimesCircle,
-  faCopy,
-  faTrash,
-  faCloudDownloadAlt,
-  faKey,
-  faExternalLinkAlt,
-  faUpload,
-  faUsers,
-  faEllipsisV,
-  faQuestionCircle,
-  faMinus,
-  faSearch,
-  faInfoCircle,
-  faChevronDown,
-  faChevronUp,
-  faChevronLeft,
-  faChevronRight,
-  faCaretDown,
-  faCaretUp,
-  faInfo,
-  faShareSquare,
-  faShop,
-  faBookmark,
-  faLink,
-  faHeart,
-  faLanguage,
-  faQuestion,
-  faEye,
-  faPrint,
-  faCommentAlt,
-  faMagic,
-  faDice,
-  faLeaf,
-  faFlask,
-  faCalendar,
-  faEnvelope,
-  faClock,
-  faCommentDots,
-  faGhost,
-  faCode,
-  faWpexplorer,
-  faRedditAlien,
-  faCameraRetro,
-  faTag,
-  faShareAlt,
-  faShare,
-  faExclamationTriangle,
-  faCalculator,
-  faArrowsAlt,
-  faCompressAlt,
-  faCompress,
-  faCompressArrowsAlt,
-  faTable,
-  faEyeSlash,
-  faArrowUp,
-  faUser,
-  faUserCircle,
-  faGlobe,
-  faExclamationCircle,
-  faFilter,
-  faQrcode,
-  faGift,
-  faThLarge,
-  faTh,
-  faFire,
-  faMoneyBill,
-  faMoneyBillAlt,
-  faPalette,
-  faHistory,
-  faEllipsisH,
-  faLightbulb,
-  faCube,
-  faExpand,
-  faImage,
-  faSignOutAlt,
-  faWallet,
-  faChartLine,
-  faListUl,
-  faDownload,
-  faCheck,
-
-  // Social
-  faXTwitter,
-  faTelegram,
-  faFacebook,
-  faFacebookMessenger,
-  faDiscord,
-  faLine,
-  faTelegramPlane,
-  faWhatsapp,
-  faPinterest,
-  faMedium,
-  faAngleLeft,
-  faAngleRight,
-  faReply,
-  faThumbsUp,
-  faUserCircle,
-  faThumbsDown,
-  faExternalLinkSquareAlt,
-  faYoutube,
-  faInstagram,
-  faX
-)
-
-Vue.component('VueFontawesome', FontAwesomeIcon).use(Neo, {
-  iconPack: 'fa-sharp',
-  customIconPacks: {
-    'fa-sharp': {
-      iconPrefix: 'fa-',
-      sizes: {
-        default: 'fw fa-regular',
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon).use(Neo, {
+    customIconPacks: {
+      // https://fontawesome.com/docs/apis/javascript/methods#prefixes-and-style-classes
+      // fa-sharp solid
+      fass: {
+        iconPrefix: 'fa-fw fa-',
+      },
+      // fa-sharp regular
+      fasr: {
+        iconPrefix: 'fa-fw fa-',
+      },
+      // fa brands
+      fab: {
+        iconPrefix: 'fa-fw fa-',
       },
     },
-  },
+  })
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0052aef91e..1695251bf2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: false
@@ -23,15 +23,6 @@ importers:
       '@fortawesome/fontawesome-svg-core':
         specifier: ^6.2.1
         version: 6.4.2
-      '@fortawesome/free-brands-svg-icons':
-        specifier: ^6.4.2
-        version: 6.4.2
-      '@fortawesome/free-regular-svg-icons':
-        specifier: ^6.2.1
-        version: 6.2.1
-      '@fortawesome/free-solid-svg-icons':
-        specifier: ^6.2.1
-        version: 6.2.1
       '@fortawesome/vue-fontawesome':
         specifier: ^2.0.10
         version: 2.0.10(@fortawesome/fontawesome-svg-core@6.4.2)(vue@2.7.14)
@@ -3606,12 +3597,6 @@ packages:
       '@ethersproject/strings': 5.7.0
     dev: false
 
-  /@fortawesome/fontawesome-common-types@6.2.1:
-    resolution: {integrity: sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==}
-    engines: {node: '>=6'}
-    requiresBuild: true
-    dev: false
-
   /@fortawesome/fontawesome-common-types@6.4.2:
     resolution: {integrity: sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==}
     engines: {node: '>=6'}
@@ -3626,30 +3611,6 @@ packages:
       '@fortawesome/fontawesome-common-types': 6.4.2
     dev: false
 
-  /@fortawesome/free-brands-svg-icons@6.4.2:
-    resolution: {integrity: sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==}
-    engines: {node: '>=6'}
-    requiresBuild: true
-    dependencies:
-      '@fortawesome/fontawesome-common-types': 6.4.2
-    dev: false
-
-  /@fortawesome/free-regular-svg-icons@6.2.1:
-    resolution: {integrity: sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA==}
-    engines: {node: '>=6'}
-    requiresBuild: true
-    dependencies:
-      '@fortawesome/fontawesome-common-types': 6.2.1
-    dev: false
-
-  /@fortawesome/free-solid-svg-icons@6.2.1:
-    resolution: {integrity: sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==}
-    engines: {node: '>=6'}
-    requiresBuild: true
-    dependencies:
-      '@fortawesome/fontawesome-common-types': 6.2.1
-    dev: false
-
   /@fortawesome/vue-fontawesome@2.0.10(@fortawesome/fontawesome-svg-core@6.4.2)(vue@2.7.14):
     resolution: {integrity: sha512-OTETSXz+3ygD2OK2/vy82cmUBpuJqeOAg4gfnnv+f2Rir1tDIhQg026Q3NQxznq83ZLz8iNqGG9XJm26inpDeg==}
     peerDependencies:
@@ -8789,7 +8750,7 @@ packages:
     resolution: {integrity: sha512-udMmmF1ts3zwxUJEIAj5ziioR900reDrt6C9H3XpWPsLBx2lpHKoA4BTdd9HNIYbkGltWw+JjWJ+5O6QBwiyEw==}
     peerDependencies:
       vue: 2.x
-      vue-template-compiler: ^2.x
+      vue-template-compiler: 2.7.14
     dependencies:
       dom-event-types: 1.1.0
       lodash: 4.17.21
@@ -9244,6 +9205,7 @@ packages:
 
   /anymatch@2.0.0:
     resolution: {integrity: sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==}
+    requiresBuild: true
     dependencies:
       micromatch: 3.1.10
       normalize-path: 2.1.1
@@ -10166,6 +10128,7 @@ packages:
 
   /async-each@1.0.6:
     resolution: {integrity: sha512-c646jH1avxr+aVpndVMeAfYw7wAa6idufrlN3LPA4PmKS0QEGp6PIC9nwz0WQkkvBGAMEki3pFdtxaF39J9vvg==}
+    requiresBuild: true
     optional: true
 
   /async-retry@1.3.3:
@@ -10364,6 +10327,7 @@ packages:
   /binary-extensions@1.13.1:
     resolution: {integrity: sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==}
     engines: {node: '>=0.10.0'}
+    requiresBuild: true
     optional: true
 
   /binary-extensions@2.2.0:
@@ -10990,6 +10954,7 @@ packages:
   /chokidar@2.1.8:
     resolution: {integrity: sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==}
     deprecated: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
+    requiresBuild: true
     dependencies:
       anymatch: 2.0.0
       async-each: 1.0.6
@@ -14138,6 +14103,7 @@ packages:
 
   /file-uri-to-path@1.0.0:
     resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
+    requiresBuild: true
 
   /filelist@1.0.4:
     resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}
@@ -14634,6 +14600,7 @@ packages:
 
   /glob-parent@3.1.0:
     resolution: {integrity: sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==}
+    requiresBuild: true
     dependencies:
       is-glob: 3.1.0
       path-dirname: 1.0.2
@@ -15596,6 +15563,7 @@ packages:
   /is-binary-path@1.0.1:
     resolution: {integrity: sha512-9fRVlXc0uCxEDj1nQzaWONSpbTfx0FmJfzHF7pwlI8DkWGoHBBea4Pg5Ky0ojwwxQmnSifgbKkI06Qv0Ljgj+Q==}
     engines: {node: '>=0.10.0'}
+    requiresBuild: true
     dependencies:
       binary-extensions: 1.13.1
     optional: true
@@ -15715,6 +15683,7 @@ packages:
   /is-glob@3.1.0:
     resolution: {integrity: sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==}
     engines: {node: '>=0.10.0'}
+    requiresBuild: true
     dependencies:
       is-extglob: 2.1.1
     optional: true
@@ -17248,6 +17217,7 @@ packages:
 
   /nan@2.18.0:
     resolution: {integrity: sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==}
+    requiresBuild: true
     optional: true
 
   /nanoid@3.3.4:
@@ -18157,6 +18127,7 @@ packages:
 
   /path-dirname@1.0.2:
     resolution: {integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==}
+    requiresBuild: true
     optional: true
 
   /path-exists@3.0.0:
@@ -20079,6 +20050,7 @@ packages:
   /readdirp@2.2.1:
     resolution: {integrity: sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==}
     engines: {node: '>=0.10'}
+    requiresBuild: true
     dependencies:
       graceful-fs: 4.2.11
       micromatch: 3.1.10
@@ -22298,6 +22270,7 @@ packages:
   /upath@1.2.0:
     resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
     engines: {node: '>=4'}
+    requiresBuild: true
     optional: true
 
   /upath@2.0.1:
@@ -22532,7 +22505,7 @@ packages:
     resolution: {integrity: sha512-t3Tu93GWsMHbpeIv66MTO5e/rRAo8/+/eWoUtFYuAdKDMyEnn1dqsrXh+CfG+SJAlxJvcTP8U0eXkzhLjKNyMg==}
     peerDependencies:
       vite: ^2.0.0 || ^3.0.0 || ^4.0.0
-      vue-template-compiler: ^2.2.0
+      vue-template-compiler: 2.7.14
     dependencies:
       '@babel/core': 7.22.20
       '@babel/parser': 7.22.16
@@ -23157,7 +23130,7 @@ packages:
     resolution: {integrity: sha512-CScBSX1/wCdmmZ/Lvj/63p2CCVTS0FMj0F69VRBo73CuJrjvPAPGmeNJ7D/cwt/VS2PduowRWbO8N4Zh4Z3b0g==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
-      vue-template-compiler: ^2.6.0
+      vue-template-compiler: 2.7.14
     dependencies:
       '@babel/core': 7.22.20
       '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.22.20)