diff --git a/packages/pl-fe/src/components/account-hover-card.tsx b/packages/pl-fe/src/components/account-hover-card.tsx
index ee887f9fc..be90e0ca3 100644
--- a/packages/pl-fe/src/components/account-hover-card.tsx
+++ b/packages/pl-fe/src/components/account-hover-card.tsx
@@ -170,7 +170,7 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
             {account.pronouns.length > 0 && (
               <HStack alignItems='center' space={0.5}>
                 <Icon
-                  src={require('@tabler/icons/outline/tags.svg')}
+                  src={require('@phosphor-icons/core/regular/tag.svg')}
                   className='size-4 text-gray-800 dark:text-gray-200'
                 />
 
diff --git a/packages/pl-fe/src/components/account-local-time.tsx b/packages/pl-fe/src/components/account-local-time.tsx
index f9a80ddf2..2649e0ba9 100644
--- a/packages/pl-fe/src/components/account-local-time.tsx
+++ b/packages/pl-fe/src/components/account-local-time.tsx
@@ -78,7 +78,7 @@ const AccountLocalTime: React.FC<IAccountLocalTime> = ({ accountId, field }) =>
   return (
     <HStack className='mt-1' alignItems='center' space={0.5} title={intl.formatMessage(messages.timezone, { timezone: field.value })}>
       <Icon
-        src={require('@tabler/icons/outline/clock.svg')}
+        src={require('@phosphor-icons/core/regular/clock.svg')}
         className='size-4 text-gray-800 dark:text-gray-200'
       />
       <Text size='sm'>
diff --git a/packages/pl-fe/src/components/alt-indicator.tsx b/packages/pl-fe/src/components/alt-indicator.tsx
index ba1ac8ca6..32a432f8e 100644
--- a/packages/pl-fe/src/components/alt-indicator.tsx
+++ b/packages/pl-fe/src/components/alt-indicator.tsx
@@ -15,7 +15,7 @@ const AltIndicator: React.FC<IAltIndicator> = React.forwardRef<HTMLSpanElement,
     {...props}
     ref={ref}
   >
-    {warning && <Icon className='size-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />}
+    {warning && <Icon className='size-4' src={require('@phosphor-icons/core/regular/warning.svg')} />}
     {message || <FormattedMessage id='upload_form.description_missing.indicator' defaultMessage='Alt' />}
   </span>
 ));
diff --git a/packages/pl-fe/src/components/autosuggest-location.tsx b/packages/pl-fe/src/components/autosuggest-location.tsx
index 22e692fbf..7a7d1eede 100644
--- a/packages/pl-fe/src/components/autosuggest-location.tsx
+++ b/packages/pl-fe/src/components/autosuggest-location.tsx
@@ -7,10 +7,10 @@ import Text from 'pl-fe/components/ui/text';
 
 import type { Location } from 'pl-api';
 
-const buildingCommunityIcon = require('@tabler/icons/outline/building-community.svg');
-const homeIcon = require('@tabler/icons/outline/home-2.svg');
-const mapPinIcon = require('@tabler/icons/outline/map-pin.svg');
-const roadIcon = require('@tabler/icons/outline/road.svg');
+const buildingCommunityIcon = require('@phosphor-icons/core/regular/city.svg');
+const homeIcon = require('@phosphor-icons/core/regular/house.svg');
+const mapPinIcon = require('@phosphor-icons/core/regular/map-pin.svg');
+const roadIcon = require('@phosphor-icons/core/regular/road-horizon.svg');
 
 const ADDRESS_ICONS: Record<string, string> = {
   house: homeIcon,
diff --git a/packages/pl-fe/src/components/birthday-input.tsx b/packages/pl-fe/src/components/birthday-input.tsx
index 58688074e..e57976ec7 100644
--- a/packages/pl-fe/src/components/birthday-input.tsx
+++ b/packages/pl-fe/src/components/birthday-input.tsx
@@ -70,7 +70,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
       <div className='flex items-center justify-between'>
         <IconButton
           className='datepicker__button rtl:rotate-180'
-          src={require('@tabler/icons/outline/chevron-left.svg')}
+          src={require('@phosphor-icons/core/regular/caret-left.svg')}
           onClick={decreaseMonth}
           disabled={prevMonthButtonDisabled}
           aria-label={intl.formatMessage(messages.previousMonth)}
@@ -79,7 +79,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
         {intl.formatDate(date, { month: 'long' })}
         <IconButton
           className='datepicker__button rtl:rotate-180'
-          src={require('@tabler/icons/outline/chevron-right.svg')}
+          src={require('@phosphor-icons/core/regular/caret-right.svg')}
           onClick={increaseMonth}
           disabled={nextMonthButtonDisabled}
           aria-label={intl.formatMessage(messages.nextMonth)}
@@ -89,7 +89,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
       <div className='flex items-center justify-between'>
         <IconButton
           className='datepicker__button rtl:rotate-180'
-          src={require('@tabler/icons/outline/chevron-left.svg')}
+          src={require('@phosphor-icons/core/regular/caret-left.svg')}
           onClick={decreaseYear}
           disabled={prevYearButtonDisabled}
           aria-label={intl.formatMessage(messages.previousYear)}
@@ -98,7 +98,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
         {intl.formatDate(date, { year: 'numeric' })}
         <IconButton
           className='datepicker__button rtl:rotate-180'
-          src={require('@tabler/icons/outline/chevron-right.svg')}
+          src={require('@phosphor-icons/core/regular/caret-right.svg')}
           onClick={increaseYear}
           disabled={nextYearButtonDisabled}
           aria-label={intl.formatMessage(messages.nextYear)}
diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
index 7cfee1204..343776e90 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
@@ -142,7 +142,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
         )}
 
         {!!item.items?.length && (
-          <Icon src={require('@tabler/icons/outline/chevron-right.svg')} containerClassName='ml-auto' className='size-5 flex-none' />
+          <Icon src={require('@phosphor-icons/core/regular/caret-right.svg')} containerClassName='ml-auto' className='size-5 flex-none' />
         )}
       </a>
     </li>
diff --git a/packages/pl-fe/src/components/list.tsx b/packages/pl-fe/src/components/list.tsx
index 4c5a1b908..3fa1baba5 100644
--- a/packages/pl-fe/src/components/list.tsx
+++ b/packages/pl-fe/src/components/list.tsx
@@ -76,7 +76,7 @@ const ListItem: React.FC<IListItem> = ({ className, label, hint, children, to, h
         <HStack space={1} alignItems='center' className='⁂-list-item__body'>
           {children}
 
-          <Icon src={require('@tabler/icons/outline/chevron-right.svg')} />
+          <Icon src={require('@phosphor-icons/core/regular/caret-right.svg')} />
         </HStack>
       ) : null}
 
diff --git a/packages/pl-fe/src/components/pending-items-row.tsx b/packages/pl-fe/src/components/pending-items-row.tsx
index 78c3adf56..e84bf8ef2 100644
--- a/packages/pl-fe/src/components/pending-items-row.tsx
+++ b/packages/pl-fe/src/components/pending-items-row.tsx
@@ -44,7 +44,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
       </HStack>
 
       <Icon
-        src={require('@tabler/icons/outline/chevron-right.svg')}
+        src={require('@phosphor-icons/core/regular/caret-right.svg')}
         className='size-5 text-gray-600 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-500'
       />
     </HStack>
diff --git a/packages/pl-fe/src/components/status-content.tsx b/packages/pl-fe/src/components/status-content.tsx
index ba0886a33..a0d6ef238 100644
--- a/packages/pl-fe/src/components/status-content.tsx
+++ b/packages/pl-fe/src/components/status-content.tsx
@@ -55,7 +55,7 @@ const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick, quote, poll, previ
     {!preview && (
       <button className='flex items-center border-0 bg-transparent p-0 pt-2 text-gray-900 hover:underline active:underline dark:text-gray-300' onClick={onClick}>
         <FormattedMessage id='status.read_more' defaultMessage='Read more' />
-        <Icon className='inline-block size-5' src={require('@tabler/icons/outline/chevron-right.svg')} />
+        <Icon className='inline-block size-5' src={require('@phosphor-icons/core/regular/caret-right.svg')} />
       </button>
     )}
   </div>
@@ -201,7 +201,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
             theme='muted'
             size='xs'
             onClick={toggleExpanded}
-            icon={require('@tabler/icons/outline/chevron-down.svg')}
+            icon={require('@phosphor-icons/core/regular/caret-down.svg')}
             iconClassName={clsx(
               'transition-transform', {
                 'rotate-180': expanded,
diff --git a/packages/pl-fe/src/components/ui/accordion.tsx b/packages/pl-fe/src/components/ui/accordion.tsx
index cc5e7fd3a..922a90995 100644
--- a/packages/pl-fe/src/components/ui/accordion.tsx
+++ b/packages/pl-fe/src/components/ui/accordion.tsx
@@ -70,7 +70,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
             </button>
           )}
           <Icon
-            src={require('@tabler/icons/outline/chevron-down.svg')}
+            src={require('@phosphor-icons/core/regular/caret-down.svg')}
             className='⁂-accordion__header__chevron'
           />
         </div>
diff --git a/packages/pl-fe/src/features/compose-event/components/upload-button.tsx b/packages/pl-fe/src/features/compose-event/components/upload-button.tsx
index 7b696e9be..dcffb1cc7 100644
--- a/packages/pl-fe/src/features/compose-event/components/upload-button.tsx
+++ b/packages/pl-fe/src/features/compose-event/components/upload-button.tsx
@@ -33,7 +33,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
   return (
     <HStack className='size-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
       <Icon
-        src={require('@tabler/icons/outline/photo-plus.svg')}
+        src={require('@phosphor-icons/core/regular/upload.svg')}
         className='size-7'
         onClick={handleClick}
       />
diff --git a/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx b/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx
index 65403d414..97b3d872e 100644
--- a/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx
+++ b/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx
@@ -190,7 +190,7 @@ const BlockTypeDropdown = ({ editor, anchorElem, blockType, icon }: {
         type='button'
       >
         <Icon src={icon} />
-        <Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='-bottom-2 size-4' />
+        <Icon src={require('@phosphor-icons/core/regular/caret-down.svg')} className='-bottom-2 size-4' />
         {showDropDown && (
           <div
             className='absolute left-0 top-9 z-10 flex h-[38px] gap-0.5 rounded-lg bg-white p-1 shadow-lg transition-opacity dark:bg-gray-900'
diff --git a/packages/pl-fe/src/features/edit-profile/components/header-picker.tsx b/packages/pl-fe/src/features/edit-profile/components/header-picker.tsx
index 1bb1a8e4e..210dcb3a9 100644
--- a/packages/pl-fe/src/features/edit-profile/components/header-picker.tsx
+++ b/packages/pl-fe/src/features/edit-profile/components/header-picker.tsx
@@ -82,7 +82,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
         justifyContent='center'
       >
         <Icon
-          src={require('@tabler/icons/outline/photo-plus.svg')}
+          src={require('@phosphor-icons/core/regular/upload.svg')}
           className='size-4.5'
         />
 
diff --git a/packages/pl-fe/src/features/ui/components/theme-selector.tsx b/packages/pl-fe/src/features/ui/components/theme-selector.tsx
index 86f090043..0572c0fe9 100644
--- a/packages/pl-fe/src/features/ui/components/theme-selector.tsx
+++ b/packages/pl-fe/src/features/ui/components/theme-selector.tsx
@@ -23,13 +23,13 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
   const themeIconSrc = useMemo(() => {
     switch (value) {
       case 'system':
-        return require('@tabler/icons/outline/device-desktop.svg');
+        return require('@phosphor-icons/core/regular/desktop.svg');
       case 'light':
-        return require('@tabler/icons/outline/sun.svg');
+        return require('@phosphor-icons/core/regular/sun-dim.svg');
       case 'dark':
-        return require('@tabler/icons/outline/moon.svg');
+        return require('@phosphor-icons/core/regular/moon.svg');
       case 'black':
-        return require('@tabler/icons/outline/shadow.svg');
+        return require('@phosphor-icons/core/regular/moon-starsa.svg');
       default:
         return null;
     }
@@ -58,7 +58,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
         </Select>
 
         <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
-          <Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='size-4 text-gray-600 dark:text-gray-700' />
+          <Icon src={require('@phosphor-icons/core/regular/caret-down.svg')} className='size-4 text-gray-600 dark:text-gray-700' />
         </div>
       </div>
     </label>
diff --git a/packages/pl-fe/src/pages/dashboard/report.tsx b/packages/pl-fe/src/pages/dashboard/report.tsx
index 0e94b1765..c7b7c2f87 100644
--- a/packages/pl-fe/src/pages/dashboard/report.tsx
+++ b/packages/pl-fe/src/pages/dashboard/report.tsx
@@ -53,7 +53,7 @@ const ReportStatuses: React.FC<IReportStatuses> = ({ statusIds }) => {
             onClick={() => handleChangeIndex(index - 1)}
             className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/outline/chevron-left.svg')} className='size-6 text-black dark:text-white' />
+            <Icon src={require('@phosphor-icons/core/regular/caret-left.svg')} className='size-6 text-black dark:text-white' />
           </button>
         </div>
       )}
@@ -66,7 +66,7 @@ const ReportStatuses: React.FC<IReportStatuses> = ({ statusIds }) => {
             onClick={() => handleChangeIndex(index + 1)}
             className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='size-6 text-black dark:text-white' />
+            <Icon src={require('@phosphor-icons/core/regular/caret-right.svg')} className='size-6 text-black dark:text-white' />
           </button>
         </div>
       )}
diff --git a/packages/pl-fe/src/pages/status-lists/events.tsx b/packages/pl-fe/src/pages/status-lists/events.tsx
index c952ad34b..01bca850c 100644
--- a/packages/pl-fe/src/pages/status-lists/events.tsx
+++ b/packages/pl-fe/src/pages/status-lists/events.tsx
@@ -66,7 +66,7 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
             onClick={() => handleChangeIndex(index - 1)}
             className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/outline/chevron-left.svg')} className='size-6 text-black dark:text-white' />
+            <Icon src={require('@phosphor-icons/core/regular/caret-left.svg')} className='size-6 text-black dark:text-white' />
           </button>
         </div>
       )}
@@ -79,7 +79,7 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
             onClick={() => handleChangeIndex(index + 1)}
             className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='size-6 text-black dark:text-white' />
+            <Icon src={require('@phosphor-icons/core/regular/caret-right.svg')} className='size-6 text-black dark:text-white' />
           </button>
         </div>
       )}
diff --git a/packages/pl-fe/src/pages/statuses/status.tsx b/packages/pl-fe/src/pages/statuses/status.tsx
index 3e027f3e6..919252bfe 100644
--- a/packages/pl-fe/src/pages/statuses/status.tsx
+++ b/packages/pl-fe/src/pages/statuses/status.tsx
@@ -103,7 +103,7 @@ const StatusPage: React.FC<IStatusDetails> = (props) => {
         {
           text: intl.formatMessage(messages.expandAll),
           action: expandAllStatuses,
-          icon: require('@tabler/icons/outline/chevron-down.svg'),
+          icon: require('@phosphor-icons/core/regular/caret-down.svg'),
         },
       );
     }