diff --git a/package.json b/package.json
index 2ffe7dfce..ebbeaa9b9 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "@soapbox.pub/wasmboy": "^0.8.0",
     "@soapbox/nspec": "npm:@jsr/soapbox__nspec",
     "@soapbox/weblock": "npm:@jsr/soapbox__weblock",
-    "@tabler/icons": "^2.0.0",
+    "@tabler/icons": "^3.1.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
diff --git a/src/actions/moderation.tsx b/src/actions/moderation.tsx
index 52b418b11..35ad6a4d7 100644
--- a/src/actions/moderation.tsx
+++ b/src/actions/moderation.tsx
@@ -58,7 +58,7 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm =
     );
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/user-off.svg'),
+      icon: require('@tabler/icons/outline/user-off.svg'),
       heading: intl.formatMessage(messages.deactivateUserHeading, { acct }),
       message,
       confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }),
@@ -96,7 +96,7 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
     const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/user-minus.svg'),
+      icon: require('@tabler/icons/outline/user-minus.svg'),
       heading: intl.formatMessage(messages.deleteUserHeading, { acct }),
       message,
       confirm,
@@ -118,7 +118,7 @@ const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensiti
     const acct = state.statuses.get(statusId)!.account.acct;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/alert-triangle.svg'),
+      icon: require('@tabler/icons/outline/alert-triangle.svg'),
       heading: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveHeading : messages.markStatusNotSensitiveHeading),
       message: intl.formatMessage(sensitive === false ? messages.markStatusSensitivePrompt : messages.markStatusNotSensitivePrompt, { acct }),
       confirm: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveConfirm : messages.markStatusNotSensitiveConfirm),
@@ -138,7 +138,7 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
     const acct = state.statuses.get(statusId)!.account.acct;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/trash.svg'),
+      icon: require('@tabler/icons/outline/trash.svg'),
       heading: intl.formatMessage(messages.deleteStatusHeading),
       message: intl.formatMessage(messages.deleteStatusPrompt, { acct: <strong className='break-words'>{acct}</strong> }),
       confirm: intl.formatMessage(messages.deleteStatusConfirm),
diff --git a/src/components/account-search.tsx b/src/components/account-search.tsx
index 50e6e8ee7..dec244674 100644
--- a/src/components/account-search.tsx
+++ b/src/components/account-search.tsx
@@ -76,12 +76,12 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
           onClick={handleClear}
         >
           <SvgIcon
-            src={require('@tabler/icons/search.svg')}
+            src={require('@tabler/icons/outline/search.svg')}
             className={clsx('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
           />
 
           <SvgIcon
-            src={require('@tabler/icons/x.svg')}
+            src={require('@tabler/icons/outline/x.svg')}
             className={clsx('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
diff --git a/src/components/account.tsx b/src/components/account.tsx
index d4c252654..5751b2c3a 100644
--- a/src/components/account.tsx
+++ b/src/components/account.tsx
@@ -264,7 +264,7 @@ const Account = ({
                   <>
                     <Text tag='span' theme='muted' size='sm'>&middot;</Text>
 
-                    <Icon className='h-5 w-5 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/pencil.svg')} />
+                    <Icon className='h-5 w-5 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/pencil.svg')} />
                   </>
                 ) : null}
 
diff --git a/src/components/authorize-reject-buttons.tsx b/src/components/authorize-reject-buttons.tsx
index aa6a39ab7..aa1bd9d74 100644
--- a/src/components/authorize-reject-buttons.tsx
+++ b/src/components/authorize-reject-buttons.tsx
@@ -106,7 +106,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
         <HStack space={3} alignItems='center'>
           <AuthorizeRejectButton
             theme='danger'
-            icon={require('@tabler/icons/x.svg')}
+            icon={require('@tabler/icons/outline/x.svg')}
             action={handleReject}
             isLoading={state === 'rejecting'}
             disabled={state === 'authorizing'}
@@ -114,7 +114,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
           />
           <AuthorizeRejectButton
             theme='primary'
-            icon={require('@tabler/icons/check.svg')}
+            icon={require('@tabler/icons/outline/check.svg')}
             action={handleAuthorize}
             isLoading={state === 'authorizing'}
             disabled={state === 'rejecting'}
@@ -162,7 +162,7 @@ const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon,
         }
       >
         <IconButton
-          src={isLoading ? require('@tabler/icons/player-stop-filled.svg') : icon}
+          src={isLoading ? require('@tabler/icons/filled/player-stop.svg') : icon}
           onClick={action}
           theme='seamless'
           className='h-10 w-10 items-center justify-center bg-white focus:!ring-0 dark:!bg-gray-900'
diff --git a/src/components/autosuggest-location.tsx b/src/components/autosuggest-location.tsx
index e94158bb0..ce6575dd6 100644
--- a/src/components/autosuggest-location.tsx
+++ b/src/components/autosuggest-location.tsx
@@ -4,10 +4,10 @@ import { useAppSelector } from 'soapbox/hooks';
 
 import { HStack, Icon, Stack, Text } from './ui';
 
-const buildingCommunityIcon = require('@tabler/icons/building-community.svg');
-const homeIcon = require('@tabler/icons/home-2.svg');
-const mapPinIcon = require('@tabler/icons/map-pin.svg');
-const roadIcon = require('@tabler/icons/road.svg');
+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');
 
 export const ADDRESS_ICONS: Record<string, string> = {
   house: homeIcon,
diff --git a/src/components/birthday-input.tsx b/src/components/birthday-input.tsx
index 62043bd51..53fbed409 100644
--- a/src/components/birthday-input.tsx
+++ b/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/chevron-left.svg')}
+            src={require('@tabler/icons/outline/chevron-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/chevron-right.svg')}
+            src={require('@tabler/icons/outline/chevron-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/chevron-left.svg')}
+            src={require('@tabler/icons/outline/chevron-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/chevron-right.svg')}
+            src={require('@tabler/icons/outline/chevron-right.svg')}
             onClick={increaseYear}
             disabled={nextYearButtonDisabled}
             aria-label={intl.formatMessage(messages.nextYear)}
diff --git a/src/components/domain.tsx b/src/components/domain.tsx
index 99ae9f50b..2b2d25bea 100644
--- a/src/components/domain.tsx
+++ b/src/components/domain.tsx
@@ -21,7 +21,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
 
   // const onBlockDomain = () => {
   //   dispatch(openModal('CONFIRM', {
-  //     icon: require('@tabler/icons/ban.svg'),
+  //     icon: require('@tabler/icons/outline/ban.svg'),
   //     heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
   //     message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable.' values={{ domain: <strong>{domain}</strong> }} />,
   //     confirm: intl.formatMessage(messages.blockDomainConfirm),
@@ -38,7 +38,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
       <Text tag='span'>
         {domain}
       </Text>
-      <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
+      <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
     </HStack>
   );
 };
diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index 2c94f9be0..7bdaff994 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -41,7 +41,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
     onOpen,
     onShiftClick,
     placement: initialPlacement = 'top',
-    src = require('@tabler/icons/dots.svg'),
+    src = require('@tabler/icons/outline/dots.svg'),
     title = 'Menu',
     ...filteredProps
   } = props;
diff --git a/src/components/event-preview.tsx b/src/components/event-preview.tsx
index 710075764..5ef36a4d5 100644
--- a/src/components/event-preview.tsx
+++ b/src/components/event-preview.tsx
@@ -67,7 +67,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
 
         <div className='flex flex-wrap gap-x-2 gap-y-1 text-gray-700 dark:text-gray-600'>
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/user.svg')} />
+            <Icon src={require('@tabler/icons/outline/user.svg')} />
             <HStack space={1} alignItems='center' grow>
               <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
               {account.verified && <VerificationBadge />}
@@ -78,7 +78,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
 
           {event.location && (
             <HStack alignItems='center' space={2}>
-              <Icon src={require('@tabler/icons/map-pin.svg')} />
+              <Icon src={require('@tabler/icons/outline/map-pin.svg')} />
               <span>
                 {event.location.get('name')}
               </span>
diff --git a/src/components/gameboy.tsx b/src/components/gameboy.tsx
index 234b62097..fca9ab16b 100644
--- a/src/components/gameboy.tsx
+++ b/src/components/gameboy.tsx
@@ -138,13 +138,13 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
             theme='transparent'
             className='text-white'
             onClick={togglePaused}
-            src={paused ? require('@tabler/icons/player-play.svg') : require('@tabler/icons/player-pause.svg')}
+            src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')}
           />
           <IconButton
             theme='transparent'
             className='text-white'
             onClick={toggleMuted}
-            src={muted ? require('@tabler/icons/volume-3.svg') : require('@tabler/icons/volume.svg')}
+            src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')}
           />
         </HStack>
 
@@ -152,14 +152,14 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
           <IconButton
             theme='transparent'
             className='text-white'
-            src={require('@tabler/icons/download.svg')}
+            src={require('@tabler/icons/outline/download.svg')}
             onClick={handleDownload}
           />
           <IconButton
             theme='transparent'
             className='text-white'
             onClick={toggleFullscreen}
-            src={fullscreen ? require('@tabler/icons/arrows-minimize.svg') : require('@tabler/icons/arrows-maximize.svg')}
+            src={fullscreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')}
           />
         </HStack>
       </HStack>
diff --git a/src/components/list.tsx b/src/components/list.tsx
index 303690593..b26eea116 100644
--- a/src/components/list.tsx
+++ b/src/components/list.tsx
@@ -73,7 +73,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
         <HStack space={1} alignItems='center' className='overflow-hidden text-gray-700 dark:text-gray-600'>
           {children}
 
-          <Icon src={require('@tabler/icons/chevron-right.svg')} className='ml-1 rtl:rotate-180' />
+          <Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='ml-1 rtl:rotate-180' />
         </HStack>
       ) : null}
 
@@ -91,7 +91,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
             }
           >
             <Icon
-              src={require('@tabler/icons/check.svg')}
+              src={require('@tabler/icons/outline/check.svg')}
               className={
                 clsx({
                   'h-4 w-4 text-white dark:text-white transition-all duration-500': true,
diff --git a/src/components/load-gap.tsx b/src/components/load-gap.tsx
index 3ccdf4f81..33ef63645 100644
--- a/src/components/load-gap.tsx
+++ b/src/components/load-gap.tsx
@@ -20,7 +20,7 @@ const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {
 
   return (
     <button className='load-more load-gap' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
-      <Icon src={require('@tabler/icons/dots.svg')} />
+      <Icon src={require('@tabler/icons/outline/dots.svg')} />
     </button>
   );
 };
diff --git a/src/components/location-search.tsx b/src/components/location-search.tsx
index d2d8d4f29..b3c9430b6 100644
--- a/src/components/location-search.tsx
+++ b/src/components/location-search.tsx
@@ -100,8 +100,8 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
         renderSuggestion={AutosuggestLocation}
       />
       <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-        <Icon src={require('@tabler/icons/search.svg')} className={clsx('svg-icon--search', { active: isEmpty() })} />
-        <Icon src={require('@tabler/icons/backspace.svg')} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
+        <Icon src={require('@tabler/icons/outline/search.svg')} className={clsx('svg-icon--search', { active: isEmpty() })} />
+        <Icon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
       </div>
     </div>
   );
diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index eb4f1988a..5eef12bcc 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -164,7 +164,7 @@ const Item: React.FC<IItem> = ({
     const attachmentIcon = (
       <Icon
         className='h-16 w-16 text-gray-800 dark:text-gray-200'
-        src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type']) as string] || require('@tabler/icons/paperclip.svg')}
+        src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type']) as string] || require('@tabler/icons/outline/paperclip.svg')}
       />
     );
 
@@ -240,7 +240,7 @@ const Item: React.FC<IItem> = ({
         target='_blank'
         title={attachment.description}
       >
-        <span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/volume.svg')} /></span>
+        <span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/outline/volume.svg')} /></span>
         <span className='media-gallery__file-extension__label uppercase'>{ext}</span>
       </a>
     );
diff --git a/src/components/modal-root.tsx b/src/components/modal-root.tsx
index 1c755b995..4216431b8 100644
--- a/src/components/modal-root.tsx
+++ b/src/components/modal-root.tsx
@@ -75,7 +75,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
       if (hasComposeContent && type === 'COMPOSE') {
         const isEditing = compose!.id !== null;
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/trash.svg'),
+          icon: require('@tabler/icons/outline/trash.svg'),
           heading: isEditing
             ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' />
             : <FormattedMessage id='confirmations.cancel.heading' defaultMessage='Discard post' />,
@@ -94,7 +94,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
       } else if (hasEventComposeContent && type === 'COMPOSE_EVENT') {
         const isEditing = getState().compose_event.id !== null;
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/trash.svg'),
+          icon: require('@tabler/icons/outline/trash.svg'),
           heading: isEditing
             ? <FormattedMessage id='confirmations.cancel_event_editing.heading' defaultMessage='Cancel event editing' />
             : <FormattedMessage id='confirmations.delete_event.heading' defaultMessage='Delete event' />,
diff --git a/src/components/pending-items-row.tsx b/src/components/pending-items-row.tsx
index f86be15d3..e37714b76 100644
--- a/src/components/pending-items-row.tsx
+++ b/src/components/pending-items-row.tsx
@@ -25,7 +25,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
           })}
           >
             <Icon
-              src={require('@tabler/icons/exclamation-circle.svg')}
+              src={require('@tabler/icons/outline/exclamation-circle.svg')}
               className={clsx({
                 'h-5 w-5': size === 'md',
                 'h-7 w-7': size === 'lg',
@@ -43,7 +43,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
         </HStack>
 
         <Icon
-          src={require('@tabler/icons/chevron-right.svg')}
+          src={require('@tabler/icons/outline/chevron-right.svg')}
           className='h-5 w-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/src/components/polls/poll-option.tsx b/src/components/polls/poll-option.tsx
index 7fb7a64d8..83b12a1e3 100644
--- a/src/components/polls/poll-option.tsx
+++ b/src/components/polls/poll-option.tsx
@@ -86,7 +86,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
             aria-label={option.title}
           >
             {active && (
-              <Icon src={require('@tabler/icons/check.svg')} className='h-4 w-4 text-white dark:text-primary-900' />
+              <Icon src={require('@tabler/icons/outline/check.svg')} className='h-4 w-4 text-white dark:text-primary-900' />
             )}
           </span>
         </div>
@@ -143,7 +143,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
             <HStack space={2} alignItems='center' className='relative'>
               {voted ? (
                 <Icon
-                  src={require('@tabler/icons/circle-check.svg')}
+                  src={require('@tabler/icons/outline/circle-check.svg')}
                   alt={intl.formatMessage(messages.voted)}
                   className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
                 />
diff --git a/src/components/preview-card.tsx b/src/components/preview-card.tsx
index 16a1a467c..9fbbb70b8 100644
--- a/src/components/preview-card.tsx
+++ b/src/components/preview-card.tsx
@@ -135,7 +135,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
       )}
       <HStack space={1} alignItems='center'>
         <Text tag='span' theme='muted'>
-          <Icon src={require('@tabler/icons/link.svg')} />
+          <Icon src={require('@tabler/icons/outline/link.svg')} />
         </Text>
         <Text tag='span' theme='muted' size='sm' direction={direction}>
           {card.provider_name}
@@ -168,10 +168,10 @@ const PreviewCard: React.FC<IPreviewCard> = ({
     if (embedded) {
       embed = renderVideo();
     } else {
-      let iconVariant = require('@tabler/icons/player-play.svg');
+      let iconVariant = require('@tabler/icons/outline/player-play.svg');
 
       if (card.type === 'photo') {
-        iconVariant = require('@tabler/icons/zoom-in.svg');
+        iconVariant = require('@tabler/icons/outline/zoom-in.svg');
       }
 
       embed = (
@@ -198,7 +198,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
                     className='text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100'
                   >
                     <Icon
-                      src={require('@tabler/icons/external-link.svg')}
+                      src={require('@tabler/icons/outline/external-link.svg')}
                       className='h-6 w-6 text-inherit'
                     />
                   </a>
diff --git a/src/components/profile-hover-card.tsx b/src/components/profile-hover-card.tsx
index 0def77693..db555e226 100644
--- a/src/components/profile-hover-card.tsx
+++ b/src/components/profile-hover-card.tsx
@@ -119,7 +119,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
             {account.local ? (
               <HStack alignItems='center' space={0.5}>
                 <Icon
-                  src={require('@tabler/icons/calendar.svg')}
+                  src={require('@tabler/icons/outline/calendar.svg')}
                   className='h-4 w-4 text-gray-800 dark:text-gray-200'
                 />
 
diff --git a/src/components/quoted-status.tsx b/src/components/quoted-status.tsx
index 4470cd453..edbca1457 100644
--- a/src/components/quoted-status.tsx
+++ b/src/components/quoted-status.tsx
@@ -84,7 +84,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   if (onCancel) {
     actions = {
       onActionClick: handleClose,
-      actionIcon: require('@tabler/icons/x.svg'),
+      actionIcon: require('@tabler/icons/outline/x.svg'),
       actionAlignment: 'top',
       actionTitle: intl.formatMessage(messages.cancel),
     };
diff --git a/src/components/scroll-top-button.tsx b/src/components/scroll-top-button.tsx
index 6c9f06c44..9e2dfafe4 100644
--- a/src/components/scroll-top-button.tsx
+++ b/src/components/scroll-top-button.tsx
@@ -92,7 +92,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
       >
         <Icon
           className='h-4 w-4'
-          src={require('@tabler/icons/arrow-bar-to-up.svg')}
+          src={require('@tabler/icons/outline/arrow-bar-to-up.svg')}
         />
 
         <Text theme='inherit' size='sm'>
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index e79853adc..f8d091b20 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -161,7 +161,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
           <IconButton
             title={intl.formatMessage(messages.close)}
             onClick={handleClose}
-            src={require('@tabler/icons/x.svg')}
+            src={require('@tabler/icons/outline/x.svg')}
             ref={closeButtonRef}
             iconClassName='h-6 w-6'
             className='absolute right-0 top-0 -mr-11 mt-2 text-gray-600 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300'
@@ -184,7 +184,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to={`/@${account.acct}`}
-                    icon={require('@tabler/icons/user.svg')}
+                    icon={require('@tabler/icons/outline/user.svg')}
                     text={intl.formatMessage(messages.profile)}
                     onClick={onClose}
                   />
@@ -192,7 +192,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {(account.locked || followRequestsCount > 0) && (
                     <SidebarLink
                       to='/follow_requests'
-                      icon={require('@tabler/icons/user-plus.svg')}
+                      icon={require('@tabler/icons/outline/user-plus.svg')}
                       text={intl.formatMessage(messages.followRequests)}
                       onClick={onClose}
                     />
@@ -201,7 +201,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.bookmarks && (
                     <SidebarLink
                       to='/bookmarks'
-                      icon={require('@tabler/icons/bookmark.svg')}
+                      icon={require('@tabler/icons/outline/bookmark.svg')}
                       text={intl.formatMessage(messages.bookmarks)}
                       onClick={onClose}
                     />
@@ -210,7 +210,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.groups && (
                     <SidebarLink
                       to={groupsPath}
-                      icon={require('@tabler/icons/circles.svg')}
+                      icon={require('@tabler/icons/outline/circles.svg')}
                       text={intl.formatMessage(messages.groups)}
                       onClick={onClose}
                     />
@@ -219,7 +219,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.lists && (
                     <SidebarLink
                       to='/lists'
-                      icon={require('@tabler/icons/list.svg')}
+                      icon={require('@tabler/icons/outline/list.svg')}
                       text={intl.formatMessage(messages.lists)}
                       onClick={onClose}
                     />
@@ -228,7 +228,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.events && (
                     <SidebarLink
                       to='/events'
-                      icon={require('@tabler/icons/calendar-event.svg')}
+                      icon={require('@tabler/icons/outline/calendar-event.svg')}
                       text={intl.formatMessage(messages.events)}
                       onClick={onClose}
                     />
@@ -237,7 +237,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {settings.get('isDeveloper') && (
                     <SidebarLink
                       to='/developers'
-                      icon={require('@tabler/icons/code.svg')}
+                      icon={require('@tabler/icons/outline/code.svg')}
                       text={intl.formatMessage(messages.developers)}
                       onClick={onClose}
                     />
@@ -248,7 +248,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                     <SidebarLink
                       to='/timeline/local'
-                      icon={features.federating ? require('@tabler/icons/affiliate.svg') : require('@tabler/icons/world.svg')}
+                      icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')}
                       text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
                       onClick={onClose}
                     />
@@ -256,7 +256,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                     {features.federating && (
                       <SidebarLink
                         to='/timeline/fediverse'
-                        icon={require('@tabler/icons/topology-star-ring-3.svg')}
+                        icon={require('@tabler/icons/outline/topology-star-ring-3.svg')}
                         text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
                         onClick={onClose}
                       />
@@ -267,21 +267,21 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to='/blocks'
-                    icon={require('@tabler/icons/ban.svg')}
+                    icon={require('@tabler/icons/outline/ban.svg')}
                     text={intl.formatMessage(messages.blocks)}
                     onClick={onClose}
                   />
 
                   <SidebarLink
                     to='/mutes'
-                    icon={require('@tabler/icons/circle-x.svg')}
+                    icon={require('@tabler/icons/outline/circle-x.svg')}
                     text={intl.formatMessage(messages.mutes)}
                     onClick={onClose}
                   />
 
                   <SidebarLink
                     to='/settings/preferences'
-                    icon={require('@tabler/icons/settings.svg')}
+                    icon={require('@tabler/icons/outline/settings.svg')}
                     text={intl.formatMessage(messages.preferences)}
                     onClick={onClose}
                   />
@@ -289,7 +289,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.federating && (
                     <SidebarLink
                       to='/domain_blocks'
-                      icon={require('@tabler/icons/ban.svg')}
+                      icon={require('@tabler/icons/outline/ban.svg')}
                       text={intl.formatMessage(messages.domainBlocks)}
                       onClick={onClose}
                     />
@@ -298,7 +298,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {(features.filters || features.filtersV2) && (
                     <SidebarLink
                       to='/filters'
-                      icon={require('@tabler/icons/filter.svg')}
+                      icon={require('@tabler/icons/outline/filter.svg')}
                       text={intl.formatMessage(messages.filters)}
                       onClick={onClose}
                     />
@@ -307,7 +307,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.followedHashtagsList && (
                     <SidebarLink
                       to='/followed_tags'
-                      icon={require('@tabler/icons/hash.svg')}
+                      icon={require('@tabler/icons/outline/hash.svg')}
                       text={intl.formatMessage(messages.followedTags)}
                       onClick={onClose}
                     />
@@ -316,7 +316,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {account.admin && (
                     <SidebarLink
                       to='/soapbox/config'
-                      icon={require('@tabler/icons/settings.svg')}
+                      icon={require('@tabler/icons/outline/settings.svg')}
                       text={intl.formatMessage(messages.soapboxConfig)}
                       onClick={onClose}
                     />
@@ -326,7 +326,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to='/logout'
-                    icon={require('@tabler/icons/logout.svg')}
+                    icon={require('@tabler/icons/outline/logout.svg')}
                     text={intl.formatMessage(messages.logout)}
                     onClick={onClickLogOut}
                   />
@@ -341,7 +341,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                         </Text>
 
                         <Icon
-                          src={require('@tabler/icons/chevron-down.svg')}
+                          src={require('@tabler/icons/outline/chevron-down.svg')}
                           className={clsx('h-4 w-4 text-gray-900 transition-transform dark:text-gray-100', {
                             'rotate-180': switcher,
                           })}
@@ -354,7 +354,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                         {otherAccounts.map(account => renderAccount(account))}
 
                         <NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
-                          <Icon className='h-4 w-4 text-primary-500' src={require('@tabler/icons/plus.svg')} />
+                          <Icon className='h-4 w-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
                           <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
                         </NavLink>
                       </div>
diff --git a/src/components/sidebar-navigation-link.tsx b/src/components/sidebar-navigation-link.tsx
index 906fabc42..d1b7465bf 100644
--- a/src/components/sidebar-navigation-link.tsx
+++ b/src/components/sidebar-navigation-link.tsx
@@ -11,6 +11,8 @@ interface ISidebarNavigationLink {
   countMax?: number;
   /** URL to an SVG icon. */
   icon: string;
+  /** URL to an SVG icon for active state. */
+  activeIcon?: string;
   /** Link label. */
   text: React.ReactNode;
   /** Route to an internal page. */
@@ -21,7 +23,7 @@ interface ISidebarNavigationLink {
 
 /** Desktop sidebar navigation link. */
 const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef<HTMLAnchorElement>): JSX.Element => {
-  const { icon, text, to = '', count, countMax, onClick } = props;
+  const { icon, activeIcon, text, to = '', count, countMax, onClick } = props;
   const isActive = location.pathname === to;
 
   const handleClick: React.EventHandler<React.MouseEvent> = (e) => {
@@ -45,7 +47,7 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
     >
       <span className='relative'>
         <Icon
-          src={icon}
+          src={(isActive && activeIcon) || icon}
           count={count}
           countMax={countMax}
           className={clsx('h-5 w-5', {
diff --git a/src/components/sidebar-navigation.tsx b/src/components/sidebar-navigation.tsx
index 4a4be2aba..a620dbad8 100644
--- a/src/components/sidebar-navigation.tsx
+++ b/src/components/sidebar-navigation.tsx
@@ -42,7 +42,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/follow_requests',
           text: intl.formatMessage(messages.follow_requests),
-          icon: require('@tabler/icons/user-plus.svg'),
+          icon: require('@tabler/icons/outline/user-plus.svg'),
           count: followRequestsCount,
         });
       }
@@ -51,7 +51,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/bookmarks',
           text: intl.formatMessage(messages.bookmarks),
-          icon: require('@tabler/icons/bookmark.svg'),
+          icon: require('@tabler/icons/outline/bookmark.svg'),
         });
       }
 
@@ -59,7 +59,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/lists',
           text: intl.formatMessage(messages.lists),
-          icon: require('@tabler/icons/list.svg'),
+          icon: require('@tabler/icons/outline/list.svg'),
         });
       }
 
@@ -67,14 +67,14 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/events',
           text: intl.formatMessage(messages.events),
-          icon: require('@tabler/icons/calendar-event.svg'),
+          icon: require('@tabler/icons/outline/calendar-event.svg'),
         });
       }
 
       if (isDeveloper) {
         menu.push({
           to: '/developers',
-          icon: require('@tabler/icons/code.svg'),
+          icon: require('@tabler/icons/outline/code.svg'),
           text: intl.formatMessage(messages.developers),
         });
       }
@@ -91,7 +91,7 @@ const SidebarNavigation = () => {
       return (
         <SidebarNavigationLink
           to='/chats'
-          icon={require('@tabler/icons/messages.svg')}
+          icon={require('@tabler/icons/outline/messages.svg')}
           count={unreadChatsCount}
           countMax={9}
           text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
@@ -103,7 +103,7 @@ const SidebarNavigation = () => {
       return (
         <SidebarNavigationLink
           to='/messages'
-          icon={require('@tabler/icons/mail.svg')}
+          icon={require('@tabler/icons/outline/mail.svg')}
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
         />
       );
@@ -117,13 +117,14 @@ const SidebarNavigation = () => {
       <Stack space={2}>
         <SidebarNavigationLink
           to='/'
-          icon={require('@tabler/icons/home.svg')}
+          icon={require('@tabler/icons/outline/home.svg')}
+          activeIcon={require('@tabler/icons/filled/home.svg')}
           text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
         />
 
         <SidebarNavigationLink
           to='/search'
-          icon={require('@tabler/icons/search.svg')}
+          icon={require('@tabler/icons/outline/search.svg')}
           text={<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />}
         />
 
@@ -131,7 +132,8 @@ const SidebarNavigation = () => {
           <>
             <SidebarNavigationLink
               to='/notifications'
-              icon={require('@tabler/icons/bell.svg')}
+              icon={require('@tabler/icons/outline/bell.svg')}
+              activeIcon={require('@tabler/icons/filled/bell.svg')}
               count={notificationCount}
               text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
             />
@@ -141,27 +143,30 @@ const SidebarNavigation = () => {
             {features.groups && (
               <SidebarNavigationLink
                 to={groupsPath}
-                icon={require('@tabler/icons/circles.svg')}
+                icon={require('@tabler/icons/outline/circles.svg')}
+                activeIcon={require('@tabler/icons/filled/circles.svg')}
                 text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
               />
             )}
 
             <SidebarNavigationLink
               to={`/@${account.acct}`}
-              icon={require('@tabler/icons/user.svg')}
+              icon={require('@tabler/icons/outline/user.svg')}
+              activeIcon={require('@tabler/icons/filled/user.svg')}
               text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
             />
 
             <SidebarNavigationLink
               to='/settings'
-              icon={require('@tabler/icons/settings.svg')}
+              icon={require('@tabler/icons/outline/settings.svg')}
+              activeIcon={require('@tabler/icons/filled/settings.svg')}
               text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
             />
 
             {account.staff && (
               <SidebarNavigationLink
                 to='/soapbox/admin'
-                icon={require('@tabler/icons/dashboard.svg')}
+                icon={require('@tabler/icons/outline/dashboard.svg')}
                 count={dashboardCount}
                 text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />}
               />
@@ -174,7 +179,8 @@ const SidebarNavigation = () => {
             {(account || !restrictUnauth.timelines.local) && (
               <SidebarNavigationLink
                 to='/timeline/local'
-                icon={features.federating ? require('@tabler/icons/affiliate.svg') : require('@tabler/icons/world.svg')}
+                icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')}
+                activeIcon={features.federating ? require('@tabler/icons/filled/affiliate.svg') : undefined}
                 text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
               />
             )}
@@ -182,7 +188,7 @@ const SidebarNavigation = () => {
             {(features.federating && (account || !restrictUnauth.timelines.federated)) && (
               <SidebarNavigationLink
                 to='/timeline/fediverse'
-                icon={require('@tabler/icons/topology-star-ring-3.svg')}
+                icon={require('@tabler/icons/outline/topology-star-ring-3.svg')}
                 text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
               />
             )}
@@ -192,7 +198,7 @@ const SidebarNavigation = () => {
         {menu.length > 0 && (
           <DropdownMenu items={menu} placement='top'>
             <SidebarNavigationLink
-              icon={require('@tabler/icons/dots-circle-horizontal.svg')}
+              icon={require('@tabler/icons/outline/dots-circle-horizontal.svg')}
               text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
             />
           </DropdownMenu>
diff --git a/src/components/status-action-bar.tsx b/src/components/status-action-bar.tsx
index 0d0de6a1f..2d7628fd3 100644
--- a/src/components/status-action-bar.tsx
+++ b/src/components/status-action-bar.tsx
@@ -232,7 +232,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         dispatch(deleteStatus(status.id, withRedraft));
       } else {
         dispatch(openModal('CONFIRM', {
-          icon: withRedraft ? require('@tabler/icons/edit.svg') : require('@tabler/icons/trash.svg'),
+          icon: withRedraft ? require('@tabler/icons/outline/edit.svg') : require('@tabler/icons/outline/trash.svg'),
           heading: intl.formatMessage(withRedraft ? messages.redraftHeading : messages.deleteHeading),
           message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
           confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
@@ -313,7 +313,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     const account = status.account;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/ban.svg'),
+      icon: require('@tabler/icons/outline/ban.svg'),
       heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
       message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
       confirm: intl.formatMessage(messages.blockConfirm),
@@ -409,7 +409,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.open),
         action: handleOpen,
-        icon: require('@tabler/icons/arrows-vertical.svg'),
+        icon: require('@tabler/icons/outline/arrows-vertical.svg'),
       });
     }
 
@@ -417,14 +417,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.copy),
         action: handleCopy,
-        icon: require('@tabler/icons/clipboard-copy.svg'),
+        icon: require('@tabler/icons/outline/clipboard-copy.svg'),
       });
 
       if (features.embeds && account.local) {
         menu.push({
           text: intl.formatMessage(messages.embed),
           action: handleEmbed,
-          icon: require('@tabler/icons/share.svg'),
+          icon: require('@tabler/icons/outline/share.svg'),
         });
       }
     }
@@ -441,7 +441,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: intl.formatMessage(status.pinned ? messages.unpinFromGroup : messages.pinToGroup),
           action: handleGroupPinClick,
-          icon: status.pinned ? require('@tabler/icons/pinned-off.svg') : require('@tabler/icons/pin.svg'),
+          icon: status.pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
         });
       }
     }
@@ -450,7 +450,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
         action: handleBookmarkClick,
-        icon: status.bookmarked ? require('@tabler/icons/bookmark-off.svg') : require('@tabler/icons/bookmark.svg'),
+        icon: status.bookmarked ? require('@tabler/icons/outline/bookmark-off.svg') : require('@tabler/icons/outline/bookmark.svg'),
       });
     }
 
@@ -458,7 +458,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.external, { domain }),
         action: handleExternalClick,
-        icon: require('@tabler/icons/external-link.svg'),
+        icon: require('@tabler/icons/outline/external-link.svg'),
       });
     }
 
@@ -467,7 +467,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     menu.push({
       text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
       action: handleConversationMuteClick,
-      icon: mutingConversation ? require('@tabler/icons/bell.svg') : require('@tabler/icons/bell-off.svg'),
+      icon: mutingConversation ? require('@tabler/icons/outline/bell.svg') : require('@tabler/icons/outline/bell-off.svg'),
     });
 
     menu.push(null);
@@ -477,14 +477,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
           action: handlePinClick,
-          icon: status.pinned ? require('@tabler/icons/pinned-off.svg') : require('@tabler/icons/pin.svg'),
+          icon: status.pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
         });
       } else {
         if (status.visibility === 'private') {
           menu.push({
             text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
             action: handleReblogClick,
-            icon: require('@tabler/icons/repeat.svg'),
+            icon: require('@tabler/icons/outline/repeat.svg'),
           });
         }
       }
@@ -492,20 +492,20 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.delete),
         action: handleDeleteClick,
-        icon: require('@tabler/icons/trash.svg'),
+        icon: require('@tabler/icons/outline/trash.svg'),
         destructive: true,
       });
       if (features.editStatuses) {
         menu.push({
           text: intl.formatMessage(messages.edit),
           action: handleEditClick,
-          icon: require('@tabler/icons/edit.svg'),
+          icon: require('@tabler/icons/outline/edit.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.redraft),
           action: handleRedraftClick,
-          icon: require('@tabler/icons/edit.svg'),
+          icon: require('@tabler/icons/outline/edit.svg'),
           destructive: true,
         });
       }
@@ -513,20 +513,20 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.mention, { name: username }),
         action: handleMentionClick,
-        icon: require('@tabler/icons/at.svg'),
+        icon: require('@tabler/icons/outline/at.svg'),
       });
 
       if (status.account.pleroma?.accepts_chat_messages === true) {
         menu.push({
           text: intl.formatMessage(messages.chat, { name: username }),
           action: handleChatClick,
-          icon: require('@tabler/icons/messages.svg'),
+          icon: require('@tabler/icons/outline/messages.svg'),
         });
       } else if (features.privacyScopes) {
         menu.push({
           text: intl.formatMessage(messages.direct, { name: username }),
           action: handleDirectClick,
-          icon: require('@tabler/icons/mail.svg'),
+          icon: require('@tabler/icons/outline/mail.svg'),
         });
       }
 
@@ -534,7 +534,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       if (features.groupsMuting && status.group) {
         menu.push({
           text: isMutingGroup ? intl.formatMessage(messages.unmuteGroup) : intl.formatMessage(messages.muteGroup),
-          icon: require('@tabler/icons/volume-3.svg'),
+          icon: require('@tabler/icons/outline/volume-3.svg'),
           action: isMutingGroup ? handleUnmuteGroupClick : handleMuteGroupClick,
         });
         menu.push(null);
@@ -543,17 +543,17 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.mute, { name: username }),
         action: handleMuteClick,
-        icon: require('@tabler/icons/volume-3.svg'),
+        icon: require('@tabler/icons/outline/volume-3.svg'),
       });
       menu.push({
         text: intl.formatMessage(messages.block, { name: username }),
         action: handleBlockClick,
-        icon: require('@tabler/icons/ban.svg'),
+        icon: require('@tabler/icons/outline/ban.svg'),
       });
       menu.push({
         text: intl.formatMessage(messages.report, { name: username }),
         action: handleReport,
-        icon: require('@tabler/icons/flag.svg'),
+        icon: require('@tabler/icons/outline/flag.svg'),
       });
     }
 
@@ -575,7 +575,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: 'Ban from Group',
           action: handleBlockFromGroup,
-          icon: require('@tabler/icons/ban.svg'),
+          icon: require('@tabler/icons/outline/ban.svg'),
           destructive: true,
         });
       }
@@ -584,7 +584,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: intl.formatMessage(messages.groupModDelete),
           action: handleDeleteFromGroup,
-          icon: require('@tabler/icons/trash.svg'),
+          icon: require('@tabler/icons/outline/trash.svg'),
           destructive: true,
         });
       }
@@ -596,28 +596,28 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.adminAccount, { name: username }),
         action: onModerate,
-        icon: require('@tabler/icons/gavel.svg'),
+        icon: require('@tabler/icons/outline/gavel.svg'),
       });
 
       if (isAdmin) {
         menu.push({
           text: intl.formatMessage(messages.admin_status),
           href: `/pleroma/admin/#/statuses/${status.id}/`,
-          icon: require('@tabler/icons/pencil.svg'),
+          icon: require('@tabler/icons/outline/pencil.svg'),
         });
       }
 
       menu.push({
         text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
         action: handleToggleStatusSensitivity,
-        icon: require('@tabler/icons/alert-triangle.svg'),
+        icon: require('@tabler/icons/outline/alert-triangle.svg'),
       });
 
       if (!ownAccount) {
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: handleDeleteStatus,
-          icon: require('@tabler/icons/trash.svg'),
+          icon: require('@tabler/icons/outline/trash.svg'),
           destructive: true,
         });
       }
@@ -655,14 +655,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiName || ''] || messages.favourite);
 
   const menu = _makeMenu(publicStatus);
-  let reblogIcon = require('@tabler/icons/repeat.svg');
+  let reblogIcon = require('@tabler/icons/outline/repeat.svg');
   let replyTitle;
   let replyDisabled = false;
 
   if (status.visibility === 'direct') {
-    reblogIcon = require('@tabler/icons/mail.svg');
+    reblogIcon = require('@tabler/icons/outline/mail.svg');
   } else if (status.visibility === 'private') {
-    reblogIcon = require('@tabler/icons/lock.svg');
+    reblogIcon = require('@tabler/icons/outline/lock.svg');
   }
 
   if ((status.group as Group)?.membership_required && !groupRelationship?.member) {
@@ -673,11 +673,11 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const reblogMenu = [{
     text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
     action: handleReblogClick,
-    icon: require('@tabler/icons/repeat.svg'),
+    icon: require('@tabler/icons/outline/repeat.svg'),
   }, {
     text: intl.formatMessage(messages.quotePost),
     action: handleQuoteClick,
-    icon: require('@tabler/icons/quote.svg'),
+    icon: require('@tabler/icons/outline/quote.svg'),
   }];
 
   const reblogButton = (
@@ -726,7 +726,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         >
           <StatusActionButton
             title={replyTitle}
-            icon={require('@tabler/icons/message-circle-2.svg')}
+            icon={require('@tabler/icons/outline/message-circle-2.svg')}
             onClick={handleReplyClick}
             count={replyCount}
             text={withLabels ? intl.formatMessage(messages.reply) : undefined}
@@ -751,7 +751,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
           <StatusReactionWrapper statusId={status.id}>
             <StatusActionButton
               title={meEmojiTitle}
-              icon={require('@tabler/icons/heart.svg')}
+              icon={require('@tabler/icons/outline/heart.svg')}
               filled
               color='accent'
               active={Boolean(meEmojiName)}
@@ -764,7 +764,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         ) : (
           <StatusActionButton
             title={intl.formatMessage(messages.favourite)}
-            icon={features.dislikes ? require('@tabler/icons/thumb-up.svg') : require('@tabler/icons/heart.svg')}
+            icon={features.dislikes ? require('@tabler/icons/outline/thumb-up.svg') : require('@tabler/icons/outline/heart.svg')}
             color='accent'
             filled
             onClick={handleFavouriteClick}
@@ -778,7 +778,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         {features.dislikes && (
           <StatusActionButton
             title={intl.formatMessage(messages.disfavourite)}
-            icon={require('@tabler/icons/thumb-down.svg')}
+            icon={require('@tabler/icons/outline/thumb-down.svg')}
             color='accent'
             filled
             onClick={handleDislikeClick}
@@ -792,7 +792,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         {(acceptsZaps && window.webln) && (
           <StatusActionButton
             title={intl.formatMessage(messages.zap)}
-            icon={require('@tabler/icons/bolt.svg')}
+            icon={require('@tabler/icons/outline/bolt.svg')}
             color='accent'
             filled
             onClick={handleZapClick}
@@ -805,7 +805,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         {canShare && (
           <StatusActionButton
             title={intl.formatMessage(messages.share)}
-            icon={require('@tabler/icons/upload.svg')}
+            icon={require('@tabler/icons/outline/upload.svg')}
             onClick={handleShareClick}
             theme={statusActionButtonTheme}
           />
@@ -814,7 +814,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         <DropdownMenu items={menu} status={status}>
           <StatusActionButton
             title={intl.formatMessage(messages.more)}
-            icon={require('@tabler/icons/dots.svg')}
+            icon={require('@tabler/icons/outline/dots.svg')}
             theme={statusActionButtonTheme}
           />
         </DropdownMenu>
diff --git a/src/components/status-content.tsx b/src/components/status-content.tsx
index c69459106..3302239f4 100644
--- a/src/components/status-content.tsx
+++ b/src/components/status-content.tsx
@@ -27,7 +27,7 @@ interface IReadMoreButton {
 const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
   <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 h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} />
+    <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/outline/chevron-right.svg')} />
   </button>
 );
 
diff --git a/src/components/status.tsx b/src/components/status.tsx
index e94755262..507e499f5 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -210,7 +210,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/repeat.svg')} className='h-4 w-4 text-green-600' />}
+          icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='h-4 w-4 text-green-600' />}
           text={
             <FormattedMessage
               id='status.reblogged_by_with_group'
@@ -250,7 +250,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/repeat.svg')} className='h-4 w-4 text-green-600' />}
+          icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='h-4 w-4 text-green-600' />}
           text={
             <FormattedMessage
               id='status.reblogged_by'
@@ -277,7 +277,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/pinned.svg')} className='h-4 w-4 text-gray-600 dark:text-gray-400' />}
+          icon={<Icon src={require('@tabler/icons/outline/pinned.svg')} className='h-4 w-4 text-gray-600 dark:text-gray-400' />}
           text={
             <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
           }
@@ -287,7 +287,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/circles.svg')} className='h-4 w-4 text-primary-600 dark:text-accent-blue' />}
+          icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='h-4 w-4 text-primary-600 dark:text-accent-blue' />}
           text={
             <FormattedMessage
               id='status.group'
diff --git a/src/components/statuses/sensitive-content-overlay.tsx b/src/components/statuses/sensitive-content-overlay.tsx
index e56c2f55b..6812b9531 100644
--- a/src/components/statuses/sensitive-content-overlay.tsx
+++ b/src/components/statuses/sensitive-content-overlay.tsx
@@ -61,7 +61,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
       dispatch(deleteStatus(status.id, false));
     } else {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/trash.svg'),
+        icon: require('@tabler/icons/outline/trash.svg'),
         heading: intl.formatMessage(messages.deleteHeading),
         message: intl.formatMessage(messages.deleteMessage),
         confirm: intl.formatMessage(messages.deleteConfirm),
@@ -75,7 +75,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
       {
         text: intl.formatMessage(messages.delete),
         action: handleDeleteStatus,
-        icon: require('@tabler/icons/trash.svg'),
+        icon: require('@tabler/icons/outline/trash.svg'),
         destructive: true,
       },
     ];
@@ -99,7 +99,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
       {visible ? (
         <Button
           text={intl.formatMessage(messages.hide)}
-          icon={require('@tabler/icons/eye-off.svg')}
+          icon={require('@tabler/icons/outline/eye-off.svg')}
           onClick={toggleVisibility}
           theme='primary'
           size='sm'
@@ -138,7 +138,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
                         type='button'
                         theme='outline'
                         size='sm'
-                        icon={require('@tabler/icons/headset.svg')}
+                        icon={require('@tabler/icons/outline/headset.svg')}
                       >
                         {intl.formatMessage(messages.contact)}
                       </Button>
@@ -151,7 +151,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
                 type='button'
                 theme='outline'
                 size='sm'
-                icon={require('@tabler/icons/eye.svg')}
+                icon={require('@tabler/icons/outline/eye.svg')}
                 onClick={toggleVisibility}
               >
                 {intl.formatMessage(messages.show)}
@@ -160,7 +160,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
               {(isUnderReview && isOwnStatus) ? (
                 <DropdownMenu
                   items={menu}
-                  src={require('@tabler/icons/dots.svg')}
+                  src={require('@tabler/icons/outline/dots.svg')}
                 />
               ) : null}
             </HStack>
diff --git a/src/components/thumb-navigation-link.tsx b/src/components/thumb-navigation-link.tsx
index a8176fb1d..f824392e5 100644
--- a/src/components/thumb-navigation-link.tsx
+++ b/src/components/thumb-navigation-link.tsx
@@ -9,13 +9,14 @@ interface IThumbNavigationLink {
   count?: number;
   countMax?: number;
   src: string;
+  activeSrc?: string;
   text: string | React.ReactElement;
   to: string;
   exact?: boolean;
   paths?: Array<string>;
 }
 
-const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax, src, text, to, exact, paths }): JSX.Element => {
+const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax, src, activeSrc, text, to, exact, paths }): JSX.Element => {
   const { pathname } = useLocation();
 
   const isActive = (): boolean => {
@@ -28,11 +29,13 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
 
   const active = isActive();
 
+  const icon = (active && activeSrc) || src;
+
   return (
     <NavLink to={to} exact={exact} className='thumb-navigation__link'>
       {count !== undefined ? (
         <IconWithCounter
-          src={src}
+          src={icon}
           className={clsx({
             'h-5 w-5': true,
             'text-gray-600 black:text-white': !active,
@@ -43,7 +46,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
         />
       ) : (
         <Icon
-          src={src}
+          src={icon}
           className={clsx({
             'h-5 w-5': true,
             'text-gray-600 black:text-white': !active,
diff --git a/src/components/thumb-navigation.tsx b/src/components/thumb-navigation.tsx
index b7cf24955..1aee06594 100644
--- a/src/components/thumb-navigation.tsx
+++ b/src/components/thumb-navigation.tsx
@@ -20,7 +20,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     if (features.chats) {
       return (
         <ThumbNavigationLink
-          src={require('@tabler/icons/messages.svg')}
+          src={require('@tabler/icons/outline/messages.svg')}
           text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
           to='/chats'
           exact
@@ -33,7 +33,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     if (features.directTimeline || features.conversations) {
       return (
         <ThumbNavigationLink
-          src={require('@tabler/icons/mail.svg')}
+          src={require('@tabler/icons/outline/mail.svg')}
+          activeSrc={require('@tabler/icons/filled/mail.svg')}
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
           to='/messages'
           paths={['/messages', '/conversations']}
@@ -47,7 +48,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
   return (
     <div className='thumb-navigation'>
       <ThumbNavigationLink
-        src={require('@tabler/icons/home.svg')}
+        src={require('@tabler/icons/outline/home.svg')}
+        activeSrc={require('@tabler/icons/filled/home.svg')}
         text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
         to='/'
         exact
@@ -55,7 +57,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {features.groups && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/circles.svg')}
+          src={require('@tabler/icons/outline/circles.svg')}
+          activeSrc={require('@tabler/icons/filled/circles.svg')}
           text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
           to={groupsPath}
           exact
@@ -63,7 +66,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
       )}
 
       <ThumbNavigationLink
-        src={require('@tabler/icons/search.svg')}
+        src={require('@tabler/icons/outline/search.svg')}
         text={<FormattedMessage id='navigation.search' defaultMessage='Search' />}
         to='/search'
         exact
@@ -71,7 +74,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {account && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/bell.svg')}
+          src={require('@tabler/icons/outline/bell.svg')}
+          activeSrc={require('@tabler/icons/filled/bell.svg')}
           text={<FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />}
           to='/notifications'
           exact
@@ -83,7 +87,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {(account && account.staff) && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/dashboard.svg')}
+          src={require('@tabler/icons/outline/dashboard.svg')}
           text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
           to='/soapbox/admin'
           count={dashboardCount}
diff --git a/src/components/translate-button.tsx b/src/components/translate-button.tsx
index 7a9c31976..57752ec28 100644
--- a/src/components/translate-button.tsx
+++ b/src/components/translate-button.tsx
@@ -53,7 +53,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
         <Button
           theme='muted'
           text={<FormattedMessage id='status.show_original' defaultMessage='Show original' />}
-          icon={require('@tabler/icons/language.svg')}
+          icon={require('@tabler/icons/outline/language.svg')}
           onClick={handleTranslate}
         />
         <Text theme='muted'>
@@ -68,7 +68,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
       <Button
         theme='muted'
         text={<FormattedMessage id='status.translate' defaultMessage='Translate' />}
-        icon={require('@tabler/icons/language.svg')}
+        icon={require('@tabler/icons/outline/language.svg')}
         onClick={handleTranslate}
       />
     </div>
diff --git a/src/components/ui/accordion/accordion.tsx b/src/components/ui/accordion/accordion.tsx
index 7e959c227..efaa02a69 100644
--- a/src/components/ui/accordion/accordion.tsx
+++ b/src/components/ui/accordion/accordion.tsx
@@ -60,7 +60,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
           {menu && (
             <DropdownMenu
               items={menu}
-              src={require('@tabler/icons/dots-vertical.svg')}
+              src={require('@tabler/icons/outline/dots-vertical.svg')}
             />
           )}
           {action && actionIcon && (
@@ -72,7 +72,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
             </button>
           )}
           <Icon
-            src={expanded ? require('@tabler/icons/chevron-up.svg') : require('@tabler/icons/chevron-down.svg')}
+            src={expanded ? require('@tabler/icons/outline/chevron-up.svg') : require('@tabler/icons/outline/chevron-down.svg')}
             className='h-5 w-5 text-gray-700 dark:text-gray-600'
           />
         </HStack>
diff --git a/src/components/ui/avatar/avatar.tsx b/src/components/ui/avatar/avatar.tsx
index d00f8ebf2..448ab7e52 100644
--- a/src/components/ui/avatar/avatar.tsx
+++ b/src/components/ui/avatar/avatar.tsx
@@ -35,7 +35,7 @@ const Avatar = (props: IAvatar) => {
         className={clsx('flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-900', className)}
       >
         <Icon
-          src={require('@tabler/icons/photo-off.svg')}
+          src={require('@tabler/icons/outline/photo-off.svg')}
           className='h-4 w-4 text-gray-500 dark:text-gray-700'
         />
       </div>
diff --git a/src/components/ui/card/card.tsx b/src/components/ui/card/card.tsx
index 7da58e758..a4bb389a1 100644
--- a/src/components/ui/card/card.tsx
+++ b/src/components/ui/card/card.tsx
@@ -72,7 +72,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
 
     return (
       <Comp {...backAttributes} className='rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
-        <SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6 rtl:rotate-180' />
+        <SvgIcon src={require('@tabler/icons/outline/arrow-left.svg')} className='h-6 w-6 rtl:rotate-180' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
     );
diff --git a/src/components/ui/carousel/carousel.tsx b/src/components/ui/carousel/carousel.tsx
index da94f30d9..0bece264c 100644
--- a/src/components/ui/carousel/carousel.tsx
+++ b/src/components/ui/carousel/carousel.tsx
@@ -68,7 +68,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
           disabled={!hasPrevPage || isDisabled}
         >
           <Icon
-            src={require('@tabler/icons/chevron-left.svg')}
+            src={require('@tabler/icons/outline/chevron-left.svg')}
             className='h-5 w-5 text-black dark:text-white'
           />
         </button>
@@ -100,7 +100,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
           disabled={!hasNextPage || isDisabled}
         >
           <Icon
-            src={require('@tabler/icons/chevron-right.svg')}
+            src={require('@tabler/icons/outline/chevron-right.svg')}
             className='h-5 w-5 text-black dark:text-white'
           />
         </button>
diff --git a/src/components/ui/emoji-selector/emoji-selector.tsx b/src/components/ui/emoji-selector/emoji-selector.tsx
index 2876aa0a4..114f94d96 100644
--- a/src/components/ui/emoji-selector/emoji-selector.tsx
+++ b/src/components/ui/emoji-selector/emoji-selector.tsx
@@ -134,7 +134,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
           {all && (
             <IconButton
               className='text-gray-600 hover:text-gray-600 dark:hover:text-white'
-              src={require('@tabler/icons/dots.svg')}
+              src={require('@tabler/icons/outline/dots.svg')}
               onClick={handleExpand}
             />
           )}
diff --git a/src/components/ui/icon/svg-icon.test.tsx b/src/components/ui/icon/svg-icon.test.tsx
index 8dc01be21..bd8c0a81b 100644
--- a/src/components/ui/icon/svg-icon.test.tsx
+++ b/src/components/ui/icon/svg-icon.test.tsx
@@ -1,4 +1,4 @@
-import IconCode from '@tabler/icons/code.svg';
+import IconCode from '@tabler/icons/outline/code.svg';
 import React from 'react';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/ui/input/input.tsx b/src/components/ui/input/input.tsx
index e1a069dd0..9d23b62a2 100644
--- a/src/components/ui/input/input.tsx
+++ b/src/components/ui/input/input.tsx
@@ -123,7 +123,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400'
               >
                 <SvgIcon
-                  src={revealed ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
+                  src={revealed ? require('@tabler/icons/outline/eye-off.svg') : require('@tabler/icons/outline/eye.svg')}
                   className='h-4 w-4'
                 />
               </button>
diff --git a/src/components/ui/modal/modal.tsx b/src/components/ui/modal/modal.tsx
index 5d17d6f67..8747cc4f0 100644
--- a/src/components/ui/modal/modal.tsx
+++ b/src/components/ui/modal/modal.tsx
@@ -65,7 +65,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
   cancelAction,
   cancelText,
   children,
-  closeIcon = require('@tabler/icons/x.svg'),
+  closeIcon = require('@tabler/icons/outline/x.svg'),
   closePosition = 'right',
   confirmationAction,
   confirmationDisabled,
@@ -107,7 +107,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
             >
               {onBack && (
                 <IconButton
-                  src={require('@tabler/icons/arrow-left.svg')}
+                  src={require('@tabler/icons/outline/arrow-left.svg')}
                   title={intl.formatMessage(messages.back)}
                   onClick={onBack}
                   className='text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200'
diff --git a/src/components/ui/streamfield/streamfield.tsx b/src/components/ui/streamfield/streamfield.tsx
index 64652ccc4..1dbb683d3 100644
--- a/src/components/ui/streamfield/streamfield.tsx
+++ b/src/components/ui/streamfield/streamfield.tsx
@@ -83,7 +83,7 @@ const Streamfield: React.FC<IStreamfield> = ({
                 <IconButton
                   iconClassName='h-4 w-4'
                   className='bg-transparent text-gray-600 hover:text-gray-600'
-                  src={require('@tabler/icons/x.svg')}
+                  src={require('@tabler/icons/outline/x.svg')}
                   onClick={() => onRemoveItem(i)}
                   title={intl.formatMessage(messages.remove)}
                 />
diff --git a/src/components/ui/tag-input/tag.tsx b/src/components/ui/tag-input/tag.tsx
index df4fb82fa..d6bf05c75 100644
--- a/src/components/ui/tag-input/tag.tsx
+++ b/src/components/ui/tag-input/tag.tsx
@@ -18,7 +18,7 @@ const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
 
       <IconButton
         iconClassName='h-4 w-4'
-        src={require('@tabler/icons/x.svg')}
+        src={require('@tabler/icons/outline/x.svg')}
         onClick={() => onDelete(tag)}
       />
     </div>
diff --git a/src/components/ui/toast/toast.tsx b/src/components/ui/toast/toast.tsx
index af6509b9c..bd6412da9 100644
--- a/src/components/ui/toast/toast.tsx
+++ b/src/components/ui/toast/toast.tsx
@@ -42,7 +42,7 @@ const Toast = (props: IToast) => {
       case 'success':
         return (
           <Icon
-            src={require('@tabler/icons/circle-check.svg')}
+            src={require('@tabler/icons/outline/circle-check.svg')}
             className='h-6 w-6 text-success-500 dark:text-success-400'
             aria-hidden
           />
@@ -50,7 +50,7 @@ const Toast = (props: IToast) => {
       case 'info':
         return (
           <Icon
-            src={require('@tabler/icons/info-circle.svg')}
+            src={require('@tabler/icons/outline/info-circle.svg')}
             className='h-6 w-6 text-primary-600 dark:text-accent-blue'
             aria-hidden
           />
@@ -58,7 +58,7 @@ const Toast = (props: IToast) => {
       case 'error':
         return (
           <Icon
-            src={require('@tabler/icons/alert-circle.svg')}
+            src={require('@tabler/icons/outline/alert-circle.svg')}
             className='h-6 w-6 text-danger-600'
             aria-hidden
           />
@@ -143,7 +143,7 @@ const Toast = (props: IToast) => {
               data-testid='toast-dismiss'
             >
               <span className='sr-only'><FormattedMessage id='lightbox.close' defaultMessage='Close' /></span>
-              <Icon src={require('@tabler/icons/x.svg')} className='h-5 w-5' />
+              <Icon src={require('@tabler/icons/outline/x.svg')} className='h-5 w-5' />
             </button>
           </div>
         </HStack>
diff --git a/src/components/ui/widget/widget.tsx b/src/components/ui/widget/widget.tsx
index 79c001674..3bd8d03ed 100644
--- a/src/components/ui/widget/widget.tsx
+++ b/src/components/ui/widget/widget.tsx
@@ -42,7 +42,7 @@ const Widget: React.FC<IWidget> = ({
   title,
   children,
   onActionClick,
-  actionIcon = require('@tabler/icons/arrow-right.svg'),
+  actionIcon = require('@tabler/icons/outline/arrow-right.svg'),
   actionTitle,
   action,
 }): JSX.Element => {
diff --git a/src/components/upload-progress.tsx b/src/components/upload-progress.tsx
index 1b2e90e33..9260a8083 100644
--- a/src/components/upload-progress.tsx
+++ b/src/components/upload-progress.tsx
@@ -13,7 +13,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
   return (
     <HStack alignItems='center' space={2}>
       <Icon
-        src={require('@tabler/icons/cloud-upload.svg')}
+        src={require('@tabler/icons/outline/cloud-upload.svg')}
         className='h-7 w-7 text-gray-500'
       />
 
diff --git a/src/components/upload.tsx b/src/components/upload.tsx
index 4a7a85ee2..8308950cc 100644
--- a/src/components/upload.tsx
+++ b/src/components/upload.tsx
@@ -1,12 +1,12 @@
-import bookIcon from '@tabler/icons/book.svg';
-import fileCodeIcon from '@tabler/icons/file-code.svg';
-import fileSpreadsheetIcon from '@tabler/icons/file-spreadsheet.svg';
-import fileTextIcon from '@tabler/icons/file-text.svg';
-import fileZipIcon from '@tabler/icons/file-zip.svg';
-import defaultIcon from '@tabler/icons/paperclip.svg';
-import presentationIcon from '@tabler/icons/presentation.svg';
-import xIcon from '@tabler/icons/x.svg';
-import zoomInIcon from '@tabler/icons/zoom-in.svg';
+import bookIcon from '@tabler/icons/outline/book.svg';
+import fileCodeIcon from '@tabler/icons/outline/file-code.svg';
+import fileSpreadsheetIcon from '@tabler/icons/outline/file-spreadsheet.svg';
+import fileTextIcon from '@tabler/icons/outline/file-text.svg';
+import fileZipIcon from '@tabler/icons/outline/file-zip.svg';
+import defaultIcon from '@tabler/icons/outline/paperclip.svg';
+import presentationIcon from '@tabler/icons/outline/presentation.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
+import zoomInIcon from '@tabler/icons/outline/zoom-in.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React, { useState } from 'react';
diff --git a/src/components/validation-checkmark.tsx b/src/components/validation-checkmark.tsx
index 36069157c..cb4e06816 100644
--- a/src/components/validation-checkmark.tsx
+++ b/src/components/validation-checkmark.tsx
@@ -12,7 +12,7 @@ const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
   return (
     <HStack alignItems='center' space={2} data-testid='validation-checkmark'>
       <Icon
-        src={isValid ? require('@tabler/icons/check.svg') : require('@tabler/icons/point.svg')}
+        src={isValid ? require('@tabler/icons/outline/check.svg') : require('@tabler/icons/outline/point.svg')}
         className={clsx({
           'w-4 h-4': true,
           'text-gray-400 dark:text-gray-600 dark:fill-gray-600 fill-gray-400': !isValid,
diff --git a/src/features/account-gallery/components/media-item.tsx b/src/features/account-gallery/components/media-item.tsx
index 27980c4e4..0e6603e4f 100644
--- a/src/features/account-gallery/components/media-item.tsx
+++ b/src/features/account-gallery/components/media-item.tsx
@@ -103,7 +103,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
     const fileExtension = remoteURL.slice(fileExtensionLastIndex + 1).toUpperCase();
     thumbnail = (
       <div className='media-gallery__item-thumbnail'>
-        <span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/volume.svg')} /></span>
+        <span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/outline/volume.svg')} /></span>
         <span className='media-gallery__file-extension__label'>{fileExtension}</span>
       </div>
     );
@@ -112,7 +112,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
   if (!visible) {
     icon = (
       <span className='media-gallery__item__icons'>
-        <Icon src={require('@tabler/icons/eye-off.svg')} />
+        <Icon src={require('@tabler/icons/outline/eye-off.svg')} />
       </span>
     );
   }
diff --git a/src/features/account-timeline/components/moved-note.tsx b/src/features/account-timeline/components/moved-note.tsx
index 73de8875a..c8924cdbe 100644
--- a/src/features/account-timeline/components/moved-note.tsx
+++ b/src/features/account-timeline/components/moved-note.tsx
@@ -16,7 +16,7 @@ const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
   <div className='p-4'>
     <HStack className='mb-2' alignItems='center' space={1.5}>
       <Icon
-        src={require('@tabler/icons/briefcase.svg')}
+        src={require('@tabler/icons/outline/briefcase.svg')}
         className='flex-none text-primary-600 dark:text-primary-400'
       />
 
diff --git a/src/features/account/components/header.tsx b/src/features/account/components/header.tsx
index c9cae466c..acf474e4c 100644
--- a/src/features/account/components/header.tsx
+++ b/src/features/account/components/header.tsx
@@ -131,7 +131,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       dispatch(unblockAccount(account.id));
     } else {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/ban.svg'),
+        icon: require('@tabler/icons/outline/ban.svg'),
         heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
         message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
         confirm: intl.formatMessage(messages.blockConfirm),
@@ -187,7 +187,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
   const onBlockDomain = (domain: string) => {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/ban.svg'),
+      icon: require('@tabler/icons/outline/ban.svg'),
       heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
       message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications.' values={{ domain: <strong>{domain}</strong> }} />,
       confirm: intl.formatMessage(messages.blockDomainConfirm),
@@ -291,7 +291,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.subscribeFeed),
         action: handleRssFeedClick,
-        icon: require('@tabler/icons/rss.svg'),
+        icon: require('@tabler/icons/outline/rss.svg'),
       });
     }
 
@@ -299,7 +299,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.share, { name: account.username }),
         action: handleShare,
-        icon: require('@tabler/icons/upload.svg'),
+        icon: require('@tabler/icons/outline/upload.svg'),
       });
     }
 
@@ -309,14 +309,14 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.profileExternal, { domain }),
         action: () => onProfileExternal(account.url),
-        icon: require('@tabler/icons/external-link.svg'),
+        icon: require('@tabler/icons/outline/external-link.svg'),
       });
     }
 
     menu.push({
       text: intl.formatMessage(messages.copy),
       action: handleCopy,
-      icon: require('@tabler/icons/clipboard-copy.svg'),
+      icon: require('@tabler/icons/outline/clipboard-copy.svg'),
     });
 
     if (!ownAccount) return menu;
@@ -325,7 +325,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(account.id === ownAccount.id ? messages.searchSelf : messages.search, { name: account.username }),
         action: onSearch,
-        icon: require('@tabler/icons/search.svg'),
+        icon: require('@tabler/icons/outline/search.svg'),
       });
     }
 
@@ -337,36 +337,36 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.edit_profile),
         to: '/settings/profile',
-        icon: require('@tabler/icons/user.svg'),
+        icon: require('@tabler/icons/outline/user.svg'),
       });
       menu.push({
         text: intl.formatMessage(messages.preferences),
         to: '/settings',
-        icon: require('@tabler/icons/settings.svg'),
+        icon: require('@tabler/icons/outline/settings.svg'),
       });
       menu.push(null);
       menu.push({
         text: intl.formatMessage(messages.mutes),
         to: '/mutes',
-        icon: require('@tabler/icons/circle-x.svg'),
+        icon: require('@tabler/icons/outline/circle-x.svg'),
       });
       menu.push({
         text: intl.formatMessage(messages.blocks),
         to: '/blocks',
-        icon: require('@tabler/icons/ban.svg'),
+        icon: require('@tabler/icons/outline/ban.svg'),
       });
     } else {
       menu.push({
         text: intl.formatMessage(messages.mention, { name: account.username }),
         action: onMention,
-        icon: require('@tabler/icons/at.svg'),
+        icon: require('@tabler/icons/outline/at.svg'),
       });
 
       if (features.privacyScopes) {
         menu.push({
           text: intl.formatMessage(messages.direct, { name: account.username }),
           action: onDirect,
-          icon: require('@tabler/icons/mail.svg'),
+          icon: require('@tabler/icons/outline/mail.svg'),
         });
       }
 
@@ -375,13 +375,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(messages.hideReblogs, { name: account.username }),
             action: onReblogToggle,
-            icon: require('@tabler/icons/repeat.svg'),
+            icon: require('@tabler/icons/outline/repeat.svg'),
           });
         } else {
           menu.push({
             text: intl.formatMessage(messages.showReblogs, { name: account.username }),
             action: onReblogToggle,
-            icon: require('@tabler/icons/repeat.svg'),
+            icon: require('@tabler/icons/outline/repeat.svg'),
           });
         }
 
@@ -389,7 +389,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(messages.add_or_remove_from_list),
             action: onAddToList,
-            icon: require('@tabler/icons/list.svg'),
+            icon: require('@tabler/icons/outline/list.svg'),
           });
         }
 
@@ -397,14 +397,14 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(account.relationship?.endorsed ? messages.unendorse : messages.endorse),
             action: onEndorseToggle,
-            icon: require('@tabler/icons/user-check.svg'),
+            icon: require('@tabler/icons/outline/user-check.svg'),
           });
         }
       } else if (features.lists && features.unrestrictedLists) {
         menu.push({
           text: intl.formatMessage(messages.add_or_remove_from_list),
           action: onAddToList,
-          icon: require('@tabler/icons/list.svg'),
+          icon: require('@tabler/icons/outline/list.svg'),
         });
       }
 
@@ -414,7 +414,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.removeFromFollowers),
           action: onRemoveFromFollowers,
-          icon: require('@tabler/icons/user-x.svg'),
+          icon: require('@tabler/icons/outline/user-x.svg'),
         });
       }
 
@@ -422,13 +422,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.unmute, { name: account.username }),
           action: onMute,
-          icon: require('@tabler/icons/circle-x.svg'),
+          icon: require('@tabler/icons/outline/circle-x.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.mute, { name: account.username }),
           action: onMute,
-          icon: require('@tabler/icons/circle-x.svg'),
+          icon: require('@tabler/icons/outline/circle-x.svg'),
         });
       }
 
@@ -436,20 +436,20 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.unblock, { name: account.username }),
           action: onBlock,
-          icon: require('@tabler/icons/ban.svg'),
+          icon: require('@tabler/icons/outline/ban.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.block, { name: account.username }),
           action: onBlock,
-          icon: require('@tabler/icons/ban.svg'),
+          icon: require('@tabler/icons/outline/ban.svg'),
         });
       }
 
       menu.push({
         text: intl.formatMessage(messages.report, { name: account.username }),
         action: onReport,
-        icon: require('@tabler/icons/flag.svg'),
+        icon: require('@tabler/icons/outline/flag.svg'),
       });
     }
 
@@ -462,13 +462,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.unblockDomain, { domain }),
           action: () => onUnblockDomain(domain),
-          icon: require('@tabler/icons/ban.svg'),
+          icon: require('@tabler/icons/outline/ban.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.blockDomain, { domain }),
           action: () => onBlockDomain(domain),
-          icon: require('@tabler/icons/ban.svg'),
+          icon: require('@tabler/icons/outline/ban.svg'),
         });
       }
     }
@@ -479,7 +479,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.adminAccount, { name: account.username }),
         action: onModerate,
-        icon: require('@tabler/icons/gavel.svg'),
+        icon: require('@tabler/icons/outline/gavel.svg'),
       });
     }
 
@@ -566,7 +566,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
       return (
         <IconButton
-          src={require('@tabler/icons/messages.svg')}
+          src={require('@tabler/icons/outline/messages.svg')}
           onClick={() => createAndNavigateToChat.mutate(account.id)}
           title={intl.formatMessage(messages.chat, { name: account.username })}
           theme='outlined'
@@ -578,7 +578,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
     } else if (account.pleroma?.accepts_chat_messages) {
       return (
         <IconButton
-          src={require('@tabler/icons/messages.svg')}
+          src={require('@tabler/icons/outline/messages.svg')}
           onClick={() => createAndNavigateToChat.mutate(account.id)}
           title={intl.formatMessage(messages.chat, { name: account.username })}
           theme='outlined'
@@ -600,7 +600,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
     return (
       <IconButton
-        src={require('@tabler/icons/upload.svg')}
+        src={require('@tabler/icons/outline/upload.svg')}
         onClick={handleShare}
         title={intl.formatMessage(messages.share, { name: account.username })}
         theme='outlined'
@@ -657,7 +657,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
               {menu.length > 0 && (
                 <DropdownMenu items={menu} placement='bottom-end'>
                   <IconButton
-                    src={require('@tabler/icons/dots.svg')}
+                    src={require('@tabler/icons/outline/dots.svg')}
                     theme='outlined'
                     className='px-2'
                     iconClassName='h-4 w-4'
diff --git a/src/features/admin/announcements.tsx b/src/features/admin/announcements.tsx
index c79fbd411..7014db02d 100644
--- a/src/features/admin/announcements.tsx
+++ b/src/features/admin/announcements.tsx
@@ -102,7 +102,7 @@ const Announcements: React.FC = () => {
       <Stack className='gap-4'>
         <Button
           className='sm:w-fit sm:self-end'
-          icon={require('@tabler/icons/plus.svg')}
+          icon={require('@tabler/icons/outline/plus.svg')}
           onClick={handleCreateAnnouncement}
           theme='secondary'
           block
diff --git a/src/features/admin/components/report-status.tsx b/src/features/admin/components/report-status.tsx
index 88c599fd7..d5ca1719e 100644
--- a/src/features/admin/components/report-status.tsx
+++ b/src/features/admin/components/report-status.tsx
@@ -34,11 +34,11 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
     return [{
       text: intl.formatMessage(messages.viewStatus, { acct: `@${acct}` }),
       to: `/@${acct}/posts/${status.id}`,
-      icon: require('@tabler/icons/pencil.svg'),
+      icon: require('@tabler/icons/outline/pencil.svg'),
     }, {
       text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }),
       action: handleDeleteStatus,
-      icon: require('@tabler/icons/trash.svg'),
+      icon: require('@tabler/icons/outline/trash.svg'),
       destructive: true,
     }];
   };
@@ -55,7 +55,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
       <div className='flex-none'>
         <DropdownMenu
           items={menu}
-          src={require('@tabler/icons/dots-vertical.svg')}
+          src={require('@tabler/icons/outline/dots-vertical.svg')}
         />
       </div>
     </HStack>
diff --git a/src/features/admin/components/report.tsx b/src/features/admin/components/report.tsx
index d11e22a18..495ba3596 100644
--- a/src/features/admin/components/report.tsx
+++ b/src/features/admin/components/report.tsx
@@ -45,11 +45,11 @@ const Report: React.FC<IReport> = ({ id }) => {
     return [{
       text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username }),
       action: handleDeactivateUser,
-      icon: require('@tabler/icons/hourglass-empty.svg'),
+      icon: require('@tabler/icons/outline/hourglass-empty.svg'),
     }, {
       text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username }),
       action: handleDeleteUser,
-      icon: require('@tabler/icons/trash.svg'),
+      icon: require('@tabler/icons/outline/trash.svg'),
       destructive: true,
     }];
   };
@@ -149,7 +149,7 @@ const Report: React.FC<IReport> = ({ id }) => {
           <FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
         </Button>
 
-        <DropdownMenu items={menu} src={require('@tabler/icons/dots-vertical.svg')} />
+        <DropdownMenu items={menu} src={require('@tabler/icons/outline/dots-vertical.svg')} />
       </HStack>
     </HStack>
   );
diff --git a/src/features/admin/domains.tsx b/src/features/admin/domains.tsx
index 024cf750c..28f360e81 100644
--- a/src/features/admin/domains.tsx
+++ b/src/features/admin/domains.tsx
@@ -116,7 +116,7 @@ const Domains: React.FC = () => {
       <Stack className='gap-4'>
         <Button
           className='sm:w-fit sm:self-end'
-          icon={require('@tabler/icons/plus.svg')}
+          icon={require('@tabler/icons/outline/plus.svg')}
           onClick={handleCreateDomain}
           theme='secondary'
           block
diff --git a/src/features/admin/tabs/dashboard.tsx b/src/features/admin/tabs/dashboard.tsx
index d608eab89..903fc9f82 100644
--- a/src/features/admin/tabs/dashboard.tsx
+++ b/src/features/admin/tabs/dashboard.tsx
@@ -133,7 +133,7 @@ const Dashboard: React.FC = () => {
 
             <Icon
               className='h-4 w-4'
-              src={require('@tabler/icons/external-link.svg')}
+              src={require('@tabler/icons/outline/external-link.svg')}
             />
           </a>
         </ListItem>
@@ -152,7 +152,7 @@ const Dashboard: React.FC = () => {
           <List>
             <ListItem label='subscribers.csv'>
               <IconButton
-                src={require('@tabler/icons/download.svg')}
+                src={require('@tabler/icons/outline/download.svg')}
                 onClick={handleSubscribersClick}
                 iconClassName='h-5 w-5'
               />
@@ -160,7 +160,7 @@ const Dashboard: React.FC = () => {
 
             <ListItem label='unsubscribers.csv'>
               <IconButton
-                src={require('@tabler/icons/download.svg')}
+                src={require('@tabler/icons/outline/download.svg')}
                 onClick={handleUnsubscribersClick}
                 iconClassName='h-5 w-5'
               />
@@ -168,7 +168,7 @@ const Dashboard: React.FC = () => {
 
             <ListItem label='combined.csv'>
               <IconButton
-                src={require('@tabler/icons/download.svg')}
+                src={require('@tabler/icons/outline/download.svg')}
                 onClick={handleCombinedClick}
                 iconClassName='h-5 w-5'
               />
diff --git a/src/features/aliases/components/account.tsx b/src/features/aliases/components/account.tsx
index 5c77c4e82..036dde092 100644
--- a/src/features/aliases/components/account.tsx
+++ b/src/features/aliases/components/account.tsx
@@ -37,7 +37,7 @@ const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
 
   if (!added && accountId !== me) {
     button = (
-      <IconButton src={require('@tabler/icons/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
+      <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
     );
   }
 
diff --git a/src/features/aliases/components/search.tsx b/src/features/aliases/components/search.tsx
index 286c7048d..5b654a777 100644
--- a/src/features/aliases/components/search.tsx
+++ b/src/features/aliases/components/search.tsx
@@ -53,7 +53,7 @@ const Search: React.FC = () => {
         />
 
         <div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
-          <Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
+          <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
         </div>
       </label>
       <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
diff --git a/src/features/aliases/index.tsx b/src/features/aliases/index.tsx
index d77975360..1b6caab8b 100644
--- a/src/features/aliases/index.tsx
+++ b/src/features/aliases/index.tsx
@@ -79,7 +79,7 @@ const Aliases = () => {
                 <Text tag='span'>{alias}</Text>
               </div>
               <div className='flex items-center' role='button' tabIndex={0} onClick={handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
-                <Icon className='mr-1.5' src={require('@tabler/icons/x.svg')} />
+                <Icon className='mr-1.5' src={require('@tabler/icons/outline/x.svg')} />
                 <Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
               </div>
             </HStack>
diff --git a/src/features/audio/index.tsx b/src/features/audio/index.tsx
index 2885dea5b..62903f125 100644
--- a/src/features/audio/index.tsx
+++ b/src/features/audio/index.tsx
@@ -518,7 +518,7 @@ const Audio: React.FC<IAudio> = (props) => {
               className='player-button'
               onClick={togglePlay}
             >
-              <Icon src={paused ? require('@tabler/icons/player-play.svg') : require('@tabler/icons/player-pause.svg')} />
+              <Icon src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')} />
             </button>
 
             <button
@@ -528,7 +528,7 @@ const Audio: React.FC<IAudio> = (props) => {
               className='player-button'
               onClick={toggleMute}
             >
-              <Icon src={muted ? require('@tabler/icons/volume-3.svg') : require('@tabler/icons/volume.svg')} />
+              <Icon src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
             </button>
 
             <div
@@ -569,7 +569,7 @@ const Audio: React.FC<IAudio> = (props) => {
               download
               target='_blank'
             >
-              <Icon src={require('@tabler/icons/download.svg')} />
+              <Icon src={require('@tabler/icons/outline/download.svg')} />
             </a>
           </div>
         </div>
diff --git a/src/features/auth-login/components/consumer-button.tsx b/src/features/auth-login/components/consumer-button.tsx
index 02003b8ca..feac5f75b 100644
--- a/src/features/auth-login/components/consumer-button.tsx
+++ b/src/features/auth-login/components/consumer-button.tsx
@@ -12,12 +12,12 @@ const messages = defineMessages({
 
 /** Map between OAuth providers and brand icons. */
 const BRAND_ICONS: Record<string, string> = {
-  twitter: require('@tabler/icons/brand-twitter.svg'),
-  facebook: require('@tabler/icons/brand-facebook.svg'),
-  google: require('@tabler/icons/brand-google.svg'),
-  microsoft: require('@tabler/icons/brand-windows.svg'),
-  slack: require('@tabler/icons/brand-slack.svg'),
-  github: require('@tabler/icons/brand-github.svg'),
+  twitter: require('@tabler/icons/outline/brand-twitter.svg'),
+  facebook: require('@tabler/icons/outline/brand-facebook.svg'),
+  google: require('@tabler/icons/outline/brand-google.svg'),
+  microsoft: require('@tabler/icons/outline/brand-windows.svg'),
+  slack: require('@tabler/icons/outline/brand-slack.svg'),
+  github: require('@tabler/icons/outline/brand-github.svg'),
 };
 
 interface IConsumerButton {
@@ -29,7 +29,7 @@ const ConsumerButton: React.FC<IConsumerButton> = ({ provider }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const icon = BRAND_ICONS[provider] || require('@tabler/icons/key.svg');
+  const icon = BRAND_ICONS[provider] || require('@tabler/icons/outline/key.svg');
 
   const handleClick = () => {
     dispatch(prepareRequest(provider));
diff --git a/src/features/auth-login/components/registration-form.tsx b/src/features/auth-login/components/registration-form.tsx
index 92c0ff52a..781e2cdbf 100644
--- a/src/features/auth-login/components/registration-form.tsx
+++ b/src/features/auth-login/components/registration-form.tsx
@@ -143,7 +143,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
     </>);
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/check.svg'),
+      icon: require('@tabler/icons/outline/check.svg'),
       heading: needsConfirmation
         ? intl.formatMessage(messages.needsConfirmationHeader)
         : needsApproval
@@ -250,7 +250,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
               autoCorrect='off'
               autoCapitalize='off'
               pattern='^[a-zA-Z\d_-]+'
-              icon={require('@tabler/icons/at.svg')}
+              icon={require('@tabler/icons/outline/at.svg')}
               onChange={onUsernameChange}
               value={params.get('username', '')}
               required
diff --git a/src/features/auth-token-list/index.tsx b/src/features/auth-token-list/index.tsx
index abad1c23a..40ca864c5 100644
--- a/src/features/auth-token-list/index.tsx
+++ b/src/features/auth-token-list/index.tsx
@@ -27,7 +27,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
   const handleRevoke = () => {
     if (isCurrent)
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/alert-triangle.svg'),
+        icon: require('@tabler/icons/outline/alert-triangle.svg'),
         heading: intl.formatMessage(messages.revokeSessionHeading),
         message: intl.formatMessage(messages.revokeSessionMessage),
         confirm: intl.formatMessage(messages.revokeSessionConfirm),
diff --git a/src/features/birthdays/account.tsx b/src/features/birthdays/account.tsx
index 7d6aa32c7..33d14cf1b 100644
--- a/src/features/birthdays/account.tsx
+++ b/src/features/birthdays/account.tsx
@@ -36,7 +36,7 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
           date: formattedBirthday,
         })}
       >
-        <Icon src={require('@tabler/icons/balloon.svg')} />
+        <Icon src={require('@tabler/icons/outline/balloon.svg')} />
         {formattedBirthday}
       </div>
     </HStack>
diff --git a/src/features/bookmark-folders/index.tsx b/src/features/bookmark-folders/index.tsx
index 8ebed7b5c..0e3427bc7 100644
--- a/src/features/bookmark-folders/index.tsx
+++ b/src/features/bookmark-folders/index.tsx
@@ -40,7 +40,7 @@ const BookmarkFolders: React.FC = () => {
             to='/bookmarks/all'
             label={
               <HStack alignItems='center' space={2}>
-                <Icon src={require('@tabler/icons/bookmarks.svg')} size={20} />
+                <Icon src={require('@tabler/icons/outline/bookmarks.svg')} size={20} />
                 <span><FormattedMessage id='bookmark_folders.all_bookmarks' defaultMessage='All bookmarks' /></span>
               </HStack>
             }
@@ -57,7 +57,7 @@ const BookmarkFolders: React.FC = () => {
                       src={folder.emoji_url || undefined}
                       className='h-5 w-5 flex-none'
                     />
-                  ) : <Icon src={require('@tabler/icons/folder.svg')} size={20} />}
+                  ) : <Icon src={require('@tabler/icons/outline/folder.svg')} size={20} />}
                   <span>{folder.name}</span>
                 </HStack>
               }
diff --git a/src/features/bookmarks/index.tsx b/src/features/bookmarks/index.tsx
index caedb5d0b..3522ede0a 100644
--- a/src/features/bookmarks/index.tsx
+++ b/src/features/bookmarks/index.tsx
@@ -91,12 +91,12 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
     {
       text: intl.formatMessage(messages.editFolder),
       action: handleEditFolder,
-      icon: require('@tabler/icons/edit.svg'),
+      icon: require('@tabler/icons/outline/edit.svg'),
     },
     {
       text: intl.formatMessage(messages.deleteFolder),
       action: handleDeleteFolder,
-      icon: require('@tabler/icons/trash.svg'),
+      icon: require('@tabler/icons/outline/trash.svg'),
     },
   ] : [];
 
@@ -104,7 +104,7 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
     <Column
       label={folder ? folder.name : intl.formatMessage(messages.heading)}
       action={
-        <DropdownMenu items={items} src={require('@tabler/icons/dots-vertical.svg')} />
+        <DropdownMenu items={items} src={require('@tabler/icons/outline/dots-vertical.svg')} />
       }
       transparent
     >
diff --git a/src/features/chats/components/chat-composer.tsx b/src/features/chats/components/chat-composer.tsx
index bcacf9ccf..5ba1a76e9 100644
--- a/src/features/chats/components/chat-composer.tsx
+++ b/src/features/chats/components/chat-composer.tsx
@@ -230,7 +230,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
           ) : null}
 
           <IconButton
-            src={require('@tabler/icons/send.svg')}
+            src={require('@tabler/icons/outline/send.svg')}
             iconClassName='h-5 w-5'
             className='text-primary-500'
             disabled={isSubmitDisabled}
diff --git a/src/features/chats/components/chat-list-item.tsx b/src/features/chats/components/chat-list-item.tsx
index 45b891bcb..3988cca46 100644
--- a/src/features/chats/components/chat-list-item.tsx
+++ b/src/features/chats/components/chat-list-item.tsx
@@ -59,7 +59,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
         },
       }));
     },
-    icon: require('@tabler/icons/logout.svg'),
+    icon: require('@tabler/icons/outline/logout.svg'),
   }], []);
 
   const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
@@ -124,7 +124,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
             <div className='hidden text-gray-600 hover:text-gray-100 group-hover:block'>
               <DropdownMenu items={menu}>
                 <IconButton
-                  src={require('@tabler/icons/dots.svg')}
+                  src={require('@tabler/icons/outline/dots.svg')}
                   title='Settings'
                   className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
                   iconClassName='h-4 w-4'
diff --git a/src/features/chats/components/chat-message-list-intro.tsx b/src/features/chats/components/chat-message-list-intro.tsx
index b63bea5e9..d41c55240 100644
--- a/src/features/chats/components/chat-message-list-intro.tsx
+++ b/src/features/chats/components/chat-message-list-intro.tsx
@@ -107,7 +107,7 @@ const ChatMessageListIntro = () => {
         </HStack>
       ) : (
         <HStack justifyContent='center' alignItems='center' space={1} className='shrink-0'>
-          <Icon src={require('@tabler/icons/clock.svg')} className='h-4 w-4 text-gray-600' />
+          <Icon src={require('@tabler/icons/outline/clock.svg')} className='h-4 w-4 text-gray-600' />
           {chat.message_expiration && (
             <Text size='sm' theme='muted'>
               {intl.formatMessage(messages.messageLifespan, { day: secondsToDays(chat.message_expiration) })}
diff --git a/src/features/chats/components/chat-message.tsx b/src/features/chats/components/chat-message.tsx
index d065e79a5..3498ecddf 100644
--- a/src/features/chats/components/chat-message.tsx
+++ b/src/features/chats/components/chat-message.tsx
@@ -159,7 +159,7 @@ const ChatMessage = (props: IChatMessage) => {
       menu.push({
         text: intl.formatMessage(messages.copy),
         action: () => handleCopyText(chatMessage),
-        icon: require('@tabler/icons/copy.svg'),
+        icon: require('@tabler/icons/outline/copy.svg'),
       });
     }
 
@@ -167,7 +167,7 @@ const ChatMessage = (props: IChatMessage) => {
       menu.push({
         text: intl.formatMessage(messages.delete),
         action: () => handleDeleteMessage.mutate(chatMessage.id),
-        icon: require('@tabler/icons/trash.svg'),
+        icon: require('@tabler/icons/outline/trash.svg'),
         destructive: true,
       });
     } else {
@@ -175,13 +175,13 @@ const ChatMessage = (props: IChatMessage) => {
         menu.push({
           text: intl.formatMessage(messages.report),
           action: () => dispatch(initReport(ReportableEntities.CHAT_MESSAGE, chat.account, { chatMessage })),
-          icon: require('@tabler/icons/flag.svg'),
+          icon: require('@tabler/icons/outline/flag.svg'),
         });
       }
       menu.push({
         text: intl.formatMessage(messages.deleteForMe),
         action: () => handleDeleteMessage.mutate(chatMessage.id),
-        icon: require('@tabler/icons/trash.svg'),
+        icon: require('@tabler/icons/outline/trash.svg'),
         destructive: true,
       });
     }
@@ -222,7 +222,7 @@ const ChatMessage = (props: IChatMessage) => {
               })}
             >
               <Icon
-                src={require('@tabler/icons/mood-smile.svg')}
+                src={require('@tabler/icons/outline/mood-smile.svg')}
                 className='h-4 w-4'
               />
             </button>
@@ -244,7 +244,7 @@ const ChatMessage = (props: IChatMessage) => {
               data-testid='chat-message-menu'
             >
               <Icon
-                src={require('@tabler/icons/dots.svg')}
+                src={require('@tabler/icons/outline/dots.svg')}
                 className='h-4 w-4'
               />
             </button>
@@ -362,7 +362,7 @@ const ChatMessage = (props: IChatMessage) => {
                   {isRead ? (
                     <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-primary-500 p-0.5 text-white dark:border-primary-400 dark:bg-primary-400 dark:text-primary-900'>
                       <Icon
-                        src={require('@tabler/icons/check.svg')}
+                        src={require('@tabler/icons/outline/check.svg')}
                         strokeWidth={3}
                         className='h-2.5 w-2.5'
                       />
@@ -370,7 +370,7 @@ const ChatMessage = (props: IChatMessage) => {
                   ) : (
                     <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-transparent p-0.5 text-primary-500 dark:border-primary-400 dark:text-primary-400'>
                       <Icon
-                        src={require('@tabler/icons/check.svg')}
+                        src={require('@tabler/icons/outline/check.svg')}
                         strokeWidth={3}
                         className='h-2.5 w-2.5'
                       />
diff --git a/src/features/chats/components/chat-page/components/chat-page-main.tsx b/src/features/chats/components/chat-page/components/chat-page-main.tsx
index 6a9acd1e2..15178e0c7 100644
--- a/src/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -120,7 +120,7 @@ const ChatPageMain = () => {
         <HStack alignItems='center' space={2} className='overflow-hidden'>
           <HStack alignItems='center'>
             <IconButton
-              src={require('@tabler/icons/arrow-left.svg')}
+              src={require('@tabler/icons/outline/arrow-left.svg')}
               className='mr-2 h-7 w-7 sm:mr-0 sm:hidden rtl:rotate-180'
               onClick={() => history.push('/chats')}
             />
@@ -162,7 +162,7 @@ const ChatPageMain = () => {
         <Menu>
           <MenuButton
             as={IconButton}
-            src={require('@tabler/icons/info-circle.svg')}
+            src={require('@tabler/icons/outline/info-circle.svg')}
             iconClassName='h-5 w-5 text-gray-600'
             children={null}
           />
@@ -213,7 +213,7 @@ const ChatPageMain = () => {
                   className='!px-0 hover:!bg-transparent'
                 >
                   <div className='flex w-full items-center space-x-2 text-sm font-bold text-primary-500 dark:text-accent-blue'>
-                    <Icon src={require('@tabler/icons/ban.svg')} className='h-5 w-5' />
+                    <Icon src={require('@tabler/icons/outline/ban.svg')} className='h-5 w-5' />
                     <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
                   </div>
                 </MenuItem>
@@ -225,7 +225,7 @@ const ChatPageMain = () => {
                     className='!px-0 hover:!bg-transparent'
                   >
                     <div className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600 dark:text-danger-500'>
-                      <Icon src={require('@tabler/icons/logout.svg')} className='h-5 w-5' />
+                      <Icon src={require('@tabler/icons/outline/logout.svg')} className='h-5 w-5' />
                       <span>{intl.formatMessage(messages.leaveChat)}</span>
                     </div>
                   </MenuItem>
diff --git a/src/features/chats/components/chat-page/components/chat-page-new.tsx b/src/features/chats/components/chat-page/components/chat-page-new.tsx
index ed9535efd..0c7fa0a60 100644
--- a/src/features/chats/components/chat-page/components/chat-page-new.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-new.tsx
@@ -23,7 +23,7 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
       <Stack className='grow px-4 pt-6 sm:px-6'>
         <HStack alignItems='center'>
           <IconButton
-            src={require('@tabler/icons/arrow-left.svg')}
+            src={require('@tabler/icons/outline/arrow-left.svg')}
             className='mr-2 h-7 w-7 sm:mr-0 sm:hidden rtl:rotate-180'
             onClick={() => history.push('/chats')}
           />
diff --git a/src/features/chats/components/chat-page/components/chat-page-settings.tsx b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
index d042b75ac..12f665420 100644
--- a/src/features/chats/components/chat-page/components/chat-page-settings.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
@@ -50,7 +50,7 @@ const ChatPageSettings = () => {
     <Stack className='h-full space-y-8 px-4 py-6 sm:p-6'>
       <HStack alignItems='center'>
         <IconButton
-          src={require('@tabler/icons/arrow-left.svg')}
+          src={require('@tabler/icons/outline/arrow-left.svg')}
           className='mr-2 h-7 w-7 sm:mr-0 sm:hidden rtl:rotate-180'
           onClick={() => history.push('/chats')}
         />
diff --git a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index 6691acf5f..3f08e1a6b 100644
--- a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
@@ -42,13 +42,13 @@ const ChatPageSidebar = () => {
 
           <HStack space={1}>
             <IconButton
-              src={require('@tabler/icons/settings.svg')}
+              src={require('@tabler/icons/outline/settings.svg')}
               iconClassName='h-5 w-5 text-gray-600'
               onClick={handleSettingsClick}
             />
 
             <IconButton
-              src={require('@tabler/icons/edit.svg')}
+              src={require('@tabler/icons/outline/edit.svg')}
               iconClassName='h-5 w-5 text-gray-600'
               onClick={handleChatCreate}
             />
diff --git a/src/features/chats/components/chat-pane/chat-pane.tsx b/src/features/chats/components/chat-pane/chat-pane.tsx
index 81d1f0ad6..1f0dde8f8 100644
--- a/src/features/chats/components/chat-pane/chat-pane.tsx
+++ b/src/features/chats/components/chat-pane/chat-pane.tsx
@@ -111,7 +111,7 @@ const ChatPane = () => {
             toggleChatPane();
           }
         }}
-        secondaryActionIcon={require('@tabler/icons/edit.svg')}
+        secondaryActionIcon={require('@tabler/icons/outline/edit.svg')}
       />
 
       {isOpen ? renderBody() : null}
diff --git a/src/features/chats/components/chat-search-input.tsx b/src/features/chats/components/chat-search-input.tsx
index 23fbddf3a..703202ee1 100644
--- a/src/features/chats/components/chat-search-input.tsx
+++ b/src/features/chats/components/chat-search-input.tsx
@@ -34,7 +34,7 @@ const ChatSearchInput: React.FC<IChatSearchInput> = ({ value, onChange, onClear
       append={
         <button onClick={onClear}>
           <Icon
-            src={value.length ? require('@tabler/icons/x.svg') : require('@tabler/icons/search.svg')}
+            src={value.length ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
             className='h-4 w-4 text-gray-700 dark:text-gray-600'
             aria-hidden='true'
           />
diff --git a/src/features/chats/components/chat-search/chat-search.tsx b/src/features/chats/components/chat-search/chat-search.tsx
index 6f9b9c843..094e39d63 100644
--- a/src/features/chats/components/chat-search/chat-search.tsx
+++ b/src/features/chats/components/chat-search/chat-search.tsx
@@ -99,7 +99,7 @@ const ChatSearch = (props: IChatSearch) => {
           append={
             <button onClick={clearValue}>
               <Icon
-                src={hasSearchValue ? require('@tabler/icons/x.svg') : require('@tabler/icons/search.svg')}
+                src={hasSearchValue ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
                 className='h-4 w-4 text-gray-700 dark:text-gray-600'
                 aria-hidden='true'
               />
diff --git a/src/features/chats/components/chat-upload-preview.tsx b/src/features/chats/components/chat-upload-preview.tsx
index c0006068e..8bbeda372 100644
--- a/src/features/chats/components/chat-upload-preview.tsx
+++ b/src/features/chats/components/chat-upload-preview.tsx
@@ -5,7 +5,7 @@ import { MIMETYPE_ICONS } from 'soapbox/components/upload';
 
 import type { Attachment } from 'soapbox/types/entities';
 
-const defaultIcon = require('@tabler/icons/paperclip.svg');
+const defaultIcon = require('@tabler/icons/outline/paperclip.svg');
 
 interface IChatUploadPreview {
   className?: string;
diff --git a/src/features/chats/components/chat-upload.tsx b/src/features/chats/components/chat-upload.tsx
index e39b9651b..bdad04d29 100644
--- a/src/features/chats/components/chat-upload.tsx
+++ b/src/features/chats/components/chat-upload.tsx
@@ -57,7 +57,7 @@ const RemoveButton: React.FC<IRemoveButton> = ({ onClick }) => {
     >
       <Icon
         className='h-3 w-3 text-white'
-        src={require('@tabler/icons/x.svg')}
+        src={require('@tabler/icons/outline/x.svg')}
       />
     </button>
   );
diff --git a/src/features/chats/components/chat-widget/chat-pane-header.tsx b/src/features/chats/components/chat-widget/chat-pane-header.tsx
index aa59cbc76..c338c481a 100644
--- a/src/features/chats/components/chat-widget/chat-pane-header.tsx
+++ b/src/features/chats/components/chat-widget/chat-pane-header.tsx
@@ -63,7 +63,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
 
         <IconButton
           onClick={onToggle}
-          src={isOpen ? require('@tabler/icons/chevron-down.svg') : require('@tabler/icons/chevron-up.svg')}
+          src={isOpen ? require('@tabler/icons/outline/chevron-down.svg') : require('@tabler/icons/outline/chevron-up.svg')}
           iconClassName='h-5 w-5 text-gray-600'
         />
       </HStack>
diff --git a/src/features/chats/components/chat-widget/chat-settings.tsx b/src/features/chats/components/chat-widget/chat-settings.tsx
index 0e62f3cfd..e1b1cabf6 100644
--- a/src/features/chats/components/chat-widget/chat-settings.tsx
+++ b/src/features/chats/components/chat-widget/chat-settings.tsx
@@ -95,7 +95,7 @@ const ChatSettings = () => {
           <HStack alignItems='center' space={2}>
             <button onClick={closeSettings}>
               <Icon
-                src={require('@tabler/icons/arrow-left.svg')}
+                src={require('@tabler/icons/outline/arrow-left.svg')}
                 className='h-6 w-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
               />
             </button>
@@ -136,13 +136,13 @@ const ChatSettings = () => {
 
         <Stack space={5}>
           <button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-accent-blue'>
-            <Icon src={require('@tabler/icons/ban.svg')} className='h-5 w-5' />
+            <Icon src={require('@tabler/icons/outline/ban.svg')} className='h-5 w-5' />
             <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
           </button>
 
           {features.chatsDelete && (
             <button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
-              <Icon src={require('@tabler/icons/logout.svg')} className='h-5 w-5' />
+              <Icon src={require('@tabler/icons/outline/logout.svg')} className='h-5 w-5' />
               <span>{intl.formatMessage(messages.leaveChat)}</span>
             </button>
           )}
diff --git a/src/features/chats/components/chat-widget/chat-window.tsx b/src/features/chats/components/chat-widget/chat-window.tsx
index 66c02397f..72b7d81e6 100644
--- a/src/features/chats/components/chat-widget/chat-window.tsx
+++ b/src/features/chats/components/chat-widget/chat-window.tsx
@@ -72,7 +72,7 @@ const ChatWindow = () => {
             {isOpen && (
               <button onClick={closeChat}>
                 <Icon
-                  src={require('@tabler/icons/arrow-left.svg')}
+                  src={require('@tabler/icons/outline/arrow-left.svg')}
                   className='h-6 w-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
                 />
               </button>
@@ -107,7 +107,7 @@ const ChatWindow = () => {
           </HStack>
         }
         secondaryAction={secondaryAction()}
-        secondaryActionIcon={isOpen ? require('@tabler/icons/info-circle.svg') : require('@tabler/icons/edit.svg')}
+        secondaryActionIcon={isOpen ? require('@tabler/icons/outline/info-circle.svg') : require('@tabler/icons/outline/edit.svg')}
         isToggleable={!isOpen}
         isOpen={isOpen}
         onToggle={toggleChatPane}
diff --git a/src/features/chats/components/chat-widget/headers/chat-search-header.tsx b/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
index 15b0c6a4b..791dced52 100644
--- a/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
+++ b/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
@@ -26,7 +26,7 @@ const ChatSearchHeader = () => {
             }}
           >
             <Icon
-              src={require('@tabler/icons/arrow-left.svg')}
+              src={require('@tabler/icons/outline/arrow-left.svg')}
               className='h-6 w-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
             />
           </button>
diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index 45771dd94..79946dcf6 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -231,10 +231,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   if (isEditing) {
     publishText = intl.formatMessage(messages.saveChanges);
   } else if (privacy === 'direct') {
-    publishIcon = require('@tabler/icons/mail.svg');
+    publishIcon = require('@tabler/icons/outline/mail.svg');
     publishText = intl.formatMessage(messages.message);
   } else if (privacy === 'private') {
-    publishIcon = require('@tabler/icons/lock.svg');
+    publishIcon = require('@tabler/icons/outline/lock.svg');
     publishText = intl.formatMessage(messages.publish);
   } else {
     publishText = privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
diff --git a/src/features/compose/components/markdown-button.tsx b/src/features/compose/components/markdown-button.tsx
index e5267fc74..daedd132b 100644
--- a/src/features/compose/components/markdown-button.tsx
+++ b/src/features/compose/components/markdown-button.tsx
@@ -25,7 +25,7 @@ const MarkdownButton: React.FC<IMarkdownButton> = ({ composeId }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/markdown.svg')}
+      icon={require('@tabler/icons/outline/markdown.svg')}
       title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
       active={active}
       onClick={onClick}
diff --git a/src/features/compose/components/poll-button.tsx b/src/features/compose/components/poll-button.tsx
index 7990c6f46..c2a31c642 100644
--- a/src/features/compose/components/poll-button.tsx
+++ b/src/features/compose/components/poll-button.tsx
@@ -39,7 +39,7 @@ const PollButton: React.FC<IPollButton> = ({ composeId, disabled }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/chart-bar.svg')}
+      icon={require('@tabler/icons/outline/chart-bar.svg')}
       title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
       active={active}
       disabled={disabled}
diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx
index 1d46c3c0a..2571589b7 100644
--- a/src/features/compose/components/privacy-dropdown.tsx
+++ b/src/features/compose/components/privacy-dropdown.tsx
@@ -160,10 +160,10 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
   const [placement, setPlacement] = useState('bottom');
 
   const options = [
-    { icon: require('@tabler/icons/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
-    { icon: require('@tabler/icons/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
-    { icon: require('@tabler/icons/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
-    { icon: require('@tabler/icons/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
+    { icon: require('@tabler/icons/outline/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
+    { icon: require('@tabler/icons/outline/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
+    { icon: require('@tabler/icons/outline/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
+    { icon: require('@tabler/icons/outline/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
   ];
 
   const onChange = (value: string | null) => value && dispatch(changeComposeVisibility(composeId, value));
diff --git a/src/features/compose/components/reply-indicator.tsx b/src/features/compose/components/reply-indicator.tsx
index b5153c674..4ed3db70e 100644
--- a/src/features/compose/components/reply-indicator.tsx
+++ b/src/features/compose/components/reply-indicator.tsx
@@ -29,7 +29,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActi
   if (!hideActions && onCancel) {
     actions = {
       onActionClick: handleClick,
-      actionIcon: require('@tabler/icons/x.svg'),
+      actionIcon: require('@tabler/icons/outline/x.svg'),
       actionAlignment: 'top',
       actionTitle: 'Dismiss',
     };
diff --git a/src/features/compose/components/schedule-button.tsx b/src/features/compose/components/schedule-button.tsx
index fcc7f17a3..cf4e8bbbf 100644
--- a/src/features/compose/components/schedule-button.tsx
+++ b/src/features/compose/components/schedule-button.tsx
@@ -39,7 +39,7 @@ const ScheduleButton: React.FC<IScheduleButton> = ({ composeId, disabled }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/calendar-stats.svg')}
+      icon={require('@tabler/icons/outline/calendar-stats.svg')}
       title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
       active={active}
       disabled={disabled}
diff --git a/src/features/compose/components/schedule-form.tsx b/src/features/compose/components/schedule-form.tsx
index 70b27056c..fa8a1cd3e 100644
--- a/src/features/compose/components/schedule-form.tsx
+++ b/src/features/compose/components/schedule-form.tsx
@@ -73,7 +73,7 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
         <IconButton
           iconClassName='h-4 w-4'
           className='bg-transparent text-gray-400 hover:text-gray-600'
-          src={require('@tabler/icons/x.svg')}
+          src={require('@tabler/icons/outline/x.svg')}
           onClick={handleRemove}
           title={intl.formatMessage(messages.remove)}
         />
diff --git a/src/features/compose/components/search-results.tsx b/src/features/compose/components/search-results.tsx
index 096f24a93..362e4abe7 100644
--- a/src/features/compose/components/search-results.tsx
+++ b/src/features/compose/components/search-results.tsx
@@ -201,7 +201,7 @@ const SearchResults = () => {
     <>
       {filterByAccount ? (
         <HStack className='mb-4 border-b border-solid border-gray-200 px-2 pb-4 dark:border-gray-800' space={2}>
-          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleUnsetAccount} />
+          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} onClick={handleUnsetAccount} />
           <Text truncate>
             <FormattedMessage
               id='search_results.filter_message'
diff --git a/src/features/compose/components/search.tsx b/src/features/compose/components/search.tsx
index 4c3a5983c..6b9750104 100644
--- a/src/features/compose/components/search.tsx
+++ b/src/features/compose/components/search.tsx
@@ -111,7 +111,7 @@ const Search = (props: ISearch) => {
   const makeMenu = () => [
     {
       text: intl.formatMessage(messages.action, { query: value }),
-      icon: require('@tabler/icons/search.svg'),
+      icon: require('@tabler/icons/outline/search.svg'),
       action: handleSubmit,
     },
   ];
@@ -166,12 +166,12 @@ const Search = (props: ISearch) => {
           onClick={handleClear}
         >
           <SvgIcon
-            src={require('@tabler/icons/search.svg')}
+            src={require('@tabler/icons/outline/search.svg')}
             className={clsx('h-4 w-4 text-gray-600', { hidden: hasValue })}
           />
 
           <SvgIcon
-            src={require('@tabler/icons/x.svg')}
+            src={require('@tabler/icons/outline/x.svg')}
             className={clsx('h-4 w-4 text-gray-600', { hidden: !hasValue })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
diff --git a/src/features/compose/components/spoiler-button.tsx b/src/features/compose/components/spoiler-button.tsx
index da15689a0..235209a83 100644
--- a/src/features/compose/components/spoiler-button.tsx
+++ b/src/features/compose/components/spoiler-button.tsx
@@ -26,7 +26,7 @@ const SpoilerButton: React.FC<ISpoilerButton> = ({ composeId }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/alert-triangle.svg')}
+      icon={require('@tabler/icons/outline/alert-triangle.svg')}
       title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
       active={active}
       onClick={onClick}
diff --git a/src/features/compose/components/upload-button.tsx b/src/features/compose/components/upload-button.tsx
index 1ee61b2c8..62c1068a8 100644
--- a/src/features/compose/components/upload-button.tsx
+++ b/src/features/compose/components/upload-button.tsx
@@ -54,8 +54,8 @@ const UploadButton: React.FC<IUploadButton> = ({
 
   const src = icon || (
     onlyImages(attachmentTypes)
-      ? require('@tabler/icons/photo.svg')
-      : require('@tabler/icons/paperclip.svg')
+      ? require('@tabler/icons/outline/photo.svg')
+      : require('@tabler/icons/outline/paperclip.svg')
   );
 
   return (
diff --git a/src/features/crypto-donate/components/crypto-address.tsx b/src/features/crypto-donate/components/crypto-address.tsx
index 953ca5989..0c07387eb 100644
--- a/src/features/crypto-donate/components/crypto-address.tsx
+++ b/src/features/crypto-donate/components/crypto-address.tsx
@@ -42,12 +42,12 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
 
         <HStack alignItems='center' className='ml-auto'>
           <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}>
-            <Icon src={require('@tabler/icons/qrcode.svg')} size={20} />
+            <Icon src={require('@tabler/icons/outline/qrcode.svg')} size={20} />
           </a>
 
           {explorerUrl && (
             <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
-              <Icon src={require('@tabler/icons/external-link.svg')} size={20} />
+              <Icon src={require('@tabler/icons/outline/external-link.svg')} size={20} />
             </a>
           )}
         </HStack>
diff --git a/src/features/crypto-donate/components/detailed-crypto-address.tsx b/src/features/crypto-donate/components/detailed-crypto-address.tsx
index b0634f07a..554c05ade 100644
--- a/src/features/crypto-donate/components/detailed-crypto-address.tsx
+++ b/src/features/crypto-donate/components/detailed-crypto-address.tsx
@@ -30,7 +30,7 @@ const DetailedCryptoAddress: React.FC<IDetailedCryptoAddress> = ({ address, tick
         <div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
         <div className='crypto-address__actions'>
           {explorerUrl && <a href={explorerUrl} target='_blank'>
-            <Icon src={require('@tabler/icons/external-link.svg')} />
+            <Icon src={require('@tabler/icons/outline/external-link.svg')} />
           </a>}
         </div>
       </div>
diff --git a/src/features/developers/developers-menu.tsx b/src/features/developers/developers-menu.tsx
index 62744aa09..185f289b2 100644
--- a/src/features/developers/developers-menu.tsx
+++ b/src/features/developers/developers-menu.tsx
@@ -57,7 +57,7 @@ const Developers: React.FC = () => {
       <Column label={intl.formatMessage(messages.heading)}>
         <div className='grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3'>
           <DashWidget to='/developers/apps/create'>
-            <SvgIcon src={require('@tabler/icons/apps.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@tabler/icons/outline/apps.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@@ -65,7 +65,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/settings_store'>
-            <SvgIcon src={require('@tabler/icons/code-plus.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@tabler/icons/outline/code-plus.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@@ -73,7 +73,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/timeline'>
-            <SvgIcon src={require('@tabler/icons/home.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@tabler/icons/outline/home.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
@@ -81,7 +81,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/error'>
-            <SvgIcon src={require('@tabler/icons/mood-sad.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@tabler/icons/outline/mood-sad.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@@ -89,7 +89,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/error/network'>
-            <SvgIcon src={require('@tabler/icons/refresh.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@tabler/icons/outline/refresh.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
@@ -97,7 +97,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/sw'>
-            <SvgIcon src={require('@tabler/icons/script.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@tabler/icons/outline/script.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.service_worker_label' defaultMessage='Service Worker' />
@@ -105,7 +105,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget onClick={leaveDevelopers}>
-            <SvgIcon src={require('@tabler/icons/logout.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@tabler/icons/outline/logout.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />
@@ -113,7 +113,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget onClick={showToast}>
-            <SvgIcon src={require('@tabler/icons/urgent.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@tabler/icons/outline/urgent.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.show_toast' defaultMessage='Trigger Toast' />
diff --git a/src/features/developers/service-worker-info.tsx b/src/features/developers/service-worker-info.tsx
index d5c8e22da..362189c3e 100644
--- a/src/features/developers/service-worker-info.tsx
+++ b/src/features/developers/service-worker-info.tsx
@@ -120,7 +120,7 @@ const ServiceWorkerInfo: React.FC<IServiceWorkerInfo> = () => {
                 <span className='truncate'>{url}</span>
                 <Icon
                   className='h-4 w-4'
-                  src={require('@tabler/icons/external-link.svg')}
+                  src={require('@tabler/icons/outline/external-link.svg')}
                 />
               </a>
             </ListItem>
diff --git a/src/features/edit-identity/index.tsx b/src/features/edit-identity/index.tsx
index c5dc68ab3..2d65bd205 100644
--- a/src/features/edit-identity/index.tsx
+++ b/src/features/edit-identity/index.tsx
@@ -110,7 +110,7 @@ const UsernameInput: React.FC<React.ComponentProps<typeof Input>> = (props) => {
       placeholder={intl.formatMessage(messages.username)}
       append={(
         <HStack alignItems='center' space={1} className='rounded p-1 text-sm backdrop-blur'>
-          <Icon className='h-4 w-4' src={require('@tabler/icons/at.svg')} />
+          <Icon className='h-4 w-4' src={require('@tabler/icons/outline/at.svg')} />
           <span>{instance.domain}</span>
         </HStack>
       )}
diff --git a/src/features/edit-profile/components/avatar-picker.tsx b/src/features/edit-profile/components/avatar-picker.tsx
index ab06c522c..a973ec302 100644
--- a/src/features/edit-profile/components/avatar-picker.tsx
+++ b/src/features/edit-profile/components/avatar-picker.tsx
@@ -43,7 +43,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ classNam
         })}
       >
         <Icon
-          src={require('@tabler/icons/camera-plus.svg')}
+          src={require('@tabler/icons/outline/camera-plus.svg')}
           className='h-5 w-5 text-white'
         />
       </HStack>
diff --git a/src/features/edit-profile/components/header-picker.tsx b/src/features/edit-profile/components/header-picker.tsx
index 3176876c6..fd60e79c6 100644
--- a/src/features/edit-profile/components/header-picker.tsx
+++ b/src/features/edit-profile/components/header-picker.tsx
@@ -55,7 +55,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
         justifyContent='center'
       >
         <Icon
-          src={require('@tabler/icons/photo-plus.svg')}
+          src={require('@tabler/icons/outline/photo-plus.svg')}
           className='h-4.5 w-4.5'
         />
 
@@ -76,7 +76,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
       {onClear && src && (
         <IconButton
           onClick={handleClear}
-          src={require('@tabler/icons/x.svg')}
+          src={require('@tabler/icons/outline/x.svg')}
           theme='dark'
           className='absolute right-2 top-2 z-10 hover:scale-105 hover:bg-gray-900'
           iconClassName='h-5 w-5'
diff --git a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
index af662f7ad..51ade8de2 100644
--- a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
+++ b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
@@ -40,7 +40,7 @@ const EmojiPickerDropdownContainer = (
           'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
         })}
         ref={refs.setReference}
-        src={require('@tabler/icons/mood-happy.svg')}
+        src={require('@tabler/icons/outline/mood-happy.svg')}
         title={title}
         aria-label={title}
         aria-expanded={visible}
diff --git a/src/features/event/components/event-action-button.tsx b/src/features/event/components/event-action-button.tsx
index a3fb6f9d9..413942eed 100644
--- a/src/features/event/components/event-action-button.tsx
+++ b/src/features/event/components/event-action-button.tsx
@@ -70,14 +70,14 @@ const EventActionButton: React.FC<IEventAction> = ({ status, theme = 'secondary'
   switch (event.join_state) {
     case 'accept':
       buttonLabel = <FormattedMessage id='event.join_state.accept' defaultMessage='Going' />;
-      buttonIcon = require('@tabler/icons/check.svg');
+      buttonIcon = require('@tabler/icons/outline/check.svg');
       break;
     case 'pending':
       buttonLabel = <FormattedMessage id='event.join_state.pending' defaultMessage='Pending' />;
       break;
     case 'reject':
       buttonLabel = <FormattedMessage id='event.join_state.rejected' defaultMessage='Going' />;
-      buttonIcon = require('@tabler/icons/ban.svg');
+      buttonIcon = require('@tabler/icons/outline/ban.svg');
       buttonDisabled = true;
       break;
     default:
diff --git a/src/features/event/components/event-date.tsx b/src/features/event/components/event-date.tsx
index 081b79c9a..978f49213 100644
--- a/src/features/event/components/event-date.tsx
+++ b/src/features/event/components/event-date.tsx
@@ -50,7 +50,7 @@ const EventDate: React.FC<IEventDate> = ({ status }) => {
 
   return (
     <HStack alignItems='center' space={2}>
-      <Icon src={require('@tabler/icons/calendar.svg')} />
+      <Icon src={require('@tabler/icons/outline/calendar.svg')} />
       <span>{date}</span>
     </HStack>
   );
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index 78aad74eb..6d09147fb 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -140,7 +140,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
   const handleDeleteClick = () => {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/trash.svg'),
+      icon: require('@tabler/icons/outline/trash.svg'),
       heading: intl.formatMessage(messages.deleteHeading),
       message: intl.formatMessage(messages.deleteMessage),
       confirm: intl.formatMessage(messages.deleteConfirm),
@@ -166,7 +166,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
   const handleBlockClick = () => {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/ban.svg'),
+      icon: require('@tabler/icons/outline/ban.svg'),
       heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
       message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.acct}</strong> }} />,
       confirm: intl.formatMessage(messages.blockConfirm),
@@ -206,12 +206,12 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       {
         text: intl.formatMessage(messages.exportIcs),
         action: handleExportClick,
-        icon: require('@tabler/icons/calendar-plus.svg'),
+        icon: require('@tabler/icons/outline/calendar-plus.svg'),
       },
       {
         text: intl.formatMessage(messages.copy),
         action: handleCopy,
-        icon: require('@tabler/icons/link.svg'),
+        icon: require('@tabler/icons/outline/link.svg'),
       },
     ];
 
@@ -219,7 +219,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(messages.external, { domain }),
         action: handleExternalClick,
-        icon: require('@tabler/icons/external-link.svg'),
+        icon: require('@tabler/icons/outline/external-link.svg'),
       });
     }
 
@@ -229,7 +229,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
         action: handleBookmarkClick,
-        icon: status.bookmarked ? require('@tabler/icons/bookmark-off.svg') : require('@tabler/icons/bookmark.svg'),
+        icon: status.bookmarked ? require('@tabler/icons/outline/bookmark-off.svg') : require('@tabler/icons/outline/bookmark.svg'),
       });
     }
 
@@ -237,14 +237,14 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(status.reblogged ? messages.unreblog : messages.reblog),
         action: handleReblogClick,
-        icon: require('@tabler/icons/repeat.svg'),
+        icon: require('@tabler/icons/outline/repeat.svg'),
       });
 
       if (features.quotePosts) {
         menu.push({
           text: intl.formatMessage(messages.quotePost),
           action: handleQuoteClick,
-          icon: require('@tabler/icons/quote.svg'),
+          icon: require('@tabler/icons/outline/quote.svg'),
         });
       }
     }
@@ -256,34 +256,34 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
         menu.push({
           text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
           action: handlePinClick,
-          icon: status.pinned ? require('@tabler/icons/pinned-off.svg') : require('@tabler/icons/pin.svg'),
+          icon: status.pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
         });
       }
 
       menu.push({
         text: intl.formatMessage(messages.delete),
         action: handleDeleteClick,
-        icon: require('@tabler/icons/trash.svg'),
+        icon: require('@tabler/icons/outline/trash.svg'),
         destructive: true,
       });
     } else {
       menu.push({
         text: intl.formatMessage(messages.mention, { name: username }),
         action: handleMentionClick,
-        icon: require('@tabler/icons/at.svg'),
+        icon: require('@tabler/icons/outline/at.svg'),
       });
 
       if (status.getIn(['account', 'pleroma', 'accepts_chat_messages']) === true) {
         menu.push({
           text: intl.formatMessage(messages.chat, { name: username }),
           action: handleChatClick,
-          icon: require('@tabler/icons/messages.svg'),
+          icon: require('@tabler/icons/outline/messages.svg'),
         });
       } else if (features.privacyScopes) {
         menu.push({
           text: intl.formatMessage(messages.direct, { name: username }),
           action: handleDirectClick,
-          icon: require('@tabler/icons/mail.svg'),
+          icon: require('@tabler/icons/outline/mail.svg'),
         });
       }
 
@@ -291,17 +291,17 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(messages.mute, { name: username }),
         action: handleMuteClick,
-        icon: require('@tabler/icons/circle-x.svg'),
+        icon: require('@tabler/icons/outline/circle-x.svg'),
       });
       menu.push({
         text: intl.formatMessage(messages.block, { name: username }),
         action: handleBlockClick,
-        icon: require('@tabler/icons/ban.svg'),
+        icon: require('@tabler/icons/outline/ban.svg'),
       });
       menu.push({
         text: intl.formatMessage(messages.report, { name: username }),
         action: handleReport,
-        icon: require('@tabler/icons/flag.svg'),
+        icon: require('@tabler/icons/outline/flag.svg'),
       });
     }
 
@@ -311,28 +311,28 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(messages.adminAccount, { name: account.username }),
         action: handleModerate,
-        icon: require('@tabler/icons/gavel.svg'),
+        icon: require('@tabler/icons/outline/gavel.svg'),
       });
 
       if (isAdmin) {
         menu.push({
           text: intl.formatMessage(messages.adminStatus),
           action: handleModerateStatus,
-          icon: require('@tabler/icons/pencil.svg'),
+          icon: require('@tabler/icons/outline/pencil.svg'),
         });
       }
 
       menu.push({
         text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
         action: handleToggleStatusSensitivity,
-        icon: require('@tabler/icons/alert-triangle.svg'),
+        icon: require('@tabler/icons/outline/alert-triangle.svg'),
       });
 
       if (account.id !== ownAccount?.id) {
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: handleDeleteStatus,
-          icon: require('@tabler/icons/trash.svg'),
+          icon: require('@tabler/icons/outline/trash.svg'),
           destructive: true,
         });
       }
@@ -381,7 +381,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
           <Menu>
             <MenuButton
               as={IconButton}
-              src={require('@tabler/icons/dots.svg')}
+              src={require('@tabler/icons/outline/dots.svg')}
               theme='outlined'
               className='h-[30px] px-2'
               iconClassName='h-4 w-4'
@@ -424,7 +424,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
         <Stack space={1}>
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/flag-3.svg')} />
+            <Icon src={require('@tabler/icons/outline/flag-3.svg')} />
             <span>
               <FormattedMessage
                 id='event.organized_by'
@@ -444,7 +444,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
           </HStack>
 
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/users.svg')} />
+            <Icon src={require('@tabler/icons/outline/users.svg')} />
             <a href='#' className='hover:underline' onClick={handleParticipantsClick}>
               <span>
                 <FormattedMessage
@@ -463,7 +463,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
           {event.location && (
             <HStack alignItems='center' space={2}>
-              <Icon src={require('@tabler/icons/map-pin.svg')} />
+              <Icon src={require('@tabler/icons/outline/map-pin.svg')} />
               <span>
                 {event.location.get('name')}
               </span>
diff --git a/src/features/event/event-information.tsx b/src/features/event/event-information.tsx
index 11f6b9cb1..d84d6096b 100644
--- a/src/features/event/event-information.tsx
+++ b/src/features/event/event-information.tsx
@@ -102,7 +102,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
           <FormattedMessage id='event.location' defaultMessage='Location' />
         </Text>
         <HStack space={2} alignItems='center'>
-          <Icon src={require('@tabler/icons/map-pin.svg')} />
+          <Icon src={require('@tabler/icons/outline/map-pin.svg')} />
           <Text>{text}</Text>
         </HStack>
       </Stack>
@@ -125,7 +125,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
           <FormattedMessage id='event.date' defaultMessage='Date' />
         </Text>
         <HStack space={2} alignItems='center'>
-          <Icon src={require('@tabler/icons/calendar.svg')} />
+          <Icon src={require('@tabler/icons/outline/calendar.svg')} />
           <Text>
             <FormattedDate
               value={startDate}
@@ -165,7 +165,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
 
         {status.event.links.map(link => (
           <HStack space={2} alignItems='center'>
-            <Icon src={require('@tabler/icons/link.svg')} />
+            <Icon src={require('@tabler/icons/outline/link.svg')} />
             <a href={link.remote_url || link.url} className='text-primary-600 hover:underline dark:text-accent-blue' target='_blank'>
               {(link.remote_url || link.url).replace(/^https?:\/\//, '')}
             </a>
diff --git a/src/features/events/components/event-carousel.tsx b/src/features/events/components/event-carousel.tsx
index fe8225115..e6e25f604 100644
--- a/src/features/events/components/event-carousel.tsx
+++ b/src/features/events/components/event-carousel.tsx
@@ -59,7 +59,7 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
             onClick={() => handleChangeIndex(index - 1)}
             className='flex h-8 w-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/chevron-left.svg')} className='h-6 w-6 text-black dark:text-white' />
+            <Icon src={require('@tabler/icons/outline/chevron-left.svg')} className='h-6 w-6 text-black dark:text-white' />
           </button>
         </div>
       )}
@@ -72,7 +72,7 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
             onClick={() => handleChangeIndex(index + 1)}
             className='flex h-8 w-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/chevron-right.svg')} className='h-6 w-6 text-black dark:text-white' />
+            <Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='h-6 w-6 text-black dark:text-white' />
           </button>
         </div>
       )}
diff --git a/src/features/federation-restrictions/components/instance-restrictions.tsx b/src/features/federation-restrictions/components/instance-restrictions.tsx
index 344dc766d..d33aa5a85 100644
--- a/src/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/src/features/federation-restrictions/components/instance-restrictions.tsx
@@ -53,7 +53,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (followers_only) {
       items.push((
-        <Restriction key='followersOnly' icon={require('@tabler/icons/lock.svg')}>
+        <Restriction key='followersOnly' icon={require('@tabler/icons/outline/lock.svg')}>
           <FormattedMessage
             id='federation_restriction.followers_only'
             defaultMessage='Hidden except to followers'
@@ -62,7 +62,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       ));
     } else if (federated_timeline_removal) {
       items.push((
-        <Restriction key='federatedTimelineRemoval' icon={require('@tabler/icons/lock-open.svg')}>
+        <Restriction key='federatedTimelineRemoval' icon={require('@tabler/icons/outline/lock-open.svg')}>
           <FormattedMessage
             id='federation_restriction.federated_timeline_removal'
             defaultMessage='Fediverse timeline removal'
@@ -73,7 +73,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (fullMediaRemoval) {
       items.push((
-        <Restriction key='fullMediaRemoval' icon={require('@tabler/icons/photo-off.svg')}>
+        <Restriction key='fullMediaRemoval' icon={require('@tabler/icons/outline/photo-off.svg')}>
           <FormattedMessage
             id='federation_restriction.full_media_removal'
             defaultMessage='Full media removal'
@@ -82,7 +82,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       ));
     } else if (partialMediaRemoval) {
       items.push((
-        <Restriction key='partialMediaRemoval' icon={require('@tabler/icons/photo-off.svg')}>
+        <Restriction key='partialMediaRemoval' icon={require('@tabler/icons/outline/photo-off.svg')}>
           <FormattedMessage
             id='federation_restriction.partial_media_removal'
             defaultMessage='Partial media removal'
@@ -93,7 +93,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (!fullMediaRemoval && media_nsfw) {
       items.push((
-        <Restriction key='mediaNsfw' icon={require('@tabler/icons/eye-off.svg')}>
+        <Restriction key='mediaNsfw' icon={require('@tabler/icons/outline/eye-off.svg')}>
           <FormattedMessage
             id='federation_restriction.media_nsfw'
             defaultMessage='Attachments marked NSFW'
@@ -113,7 +113,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (remoteInstance.federation.reject === true) {
       return (
-        <Restriction icon={require('@tabler/icons/shield-x.svg')}>
+        <Restriction icon={require('@tabler/icons/outline/shield-x.svg')}>
           <FormattedMessage
             id='remote_instance.federation_panel.restricted_message'
             defaultMessage='{siteTitle} blocks all activities from {host}.'
@@ -124,7 +124,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
     } else if (hasRestrictions(remoteInstance)) {
       return (
         <>
-          <Restriction icon={require('@tabler/icons/shield-lock.svg')}>
+          <Restriction icon={require('@tabler/icons/outline/shield-lock.svg')}>
             <FormattedMessage
               id='remote_instance.federation_panel.some_restrictions_message'
               defaultMessage='{siteTitle} has placed some restrictions on {host}.'
@@ -137,7 +137,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       );
     } else {
       return (
-        <Restriction icon={require('@tabler/icons/shield-check.svg')}>
+        <Restriction icon={require('@tabler/icons/outline/shield-check.svg')}>
           <FormattedMessage
             id='remote_instance.federation_panel.no_restrictions_message'
             defaultMessage='{siteTitle} has placed no restrictions on {host}.'
diff --git a/src/features/federation-restrictions/components/restricted-instance.tsx b/src/features/federation-restrictions/components/restricted-instance.tsx
index 2f8424a2a..07e017521 100644
--- a/src/features/federation-restrictions/components/restricted-instance.tsx
+++ b/src/features/federation-restrictions/components/restricted-instance.tsx
@@ -26,7 +26,7 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
   return (
     <div>
       <a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
-        <Icon src={expanded ? require('@tabler/icons/caret-down.svg') : require('@tabler/icons/caret-right.svg')} />
+        <Icon src={expanded ? require('@tabler/icons/outline/caret-down.svg') : require('@tabler/icons/outline/caret-right.svg')} />
         <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
           {remoteInstance.host}
         </div>
diff --git a/src/features/group/components/group-header-image.tsx b/src/features/group/components/group-header-image.tsx
index 8871db097..79146b072 100644
--- a/src/features/group/components/group-header-image.tsx
+++ b/src/features/group/components/group-header-image.tsx
@@ -30,7 +30,7 @@ const GroupHeaderImage: React.FC<IGroupHeaderImage> = ({ className, group }) =>
         className={clsx(className, 'flex items-center justify-center bg-gray-200 dark:bg-gray-800/30')}
       >
         <Icon
-          src={require('@tabler/icons/photo-off.svg')}
+          src={require('@tabler/icons/outline/photo-off.svg')}
           className='h-6 w-6 text-gray-500 dark:text-gray-700'
         />
       </div>
diff --git a/src/features/group/components/group-header.tsx b/src/features/group/components/group-header.tsx
index 21eb7e5dd..de70bc237 100644
--- a/src/features/group/components/group-header.tsx
+++ b/src/features/group/components/group-header.tsx
@@ -112,7 +112,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
         className='flex h-32 w-full items-center justify-center bg-gray-200 md:rounded-t-xl lg:h-52 dark:bg-gray-800/30'
       >
         {isHeaderMissing ? (
-          <Icon src={require('@tabler/icons/photo-off.svg')} className='h-6 w-6 text-gray-500 dark:text-gray-700' />
+          <Icon src={require('@tabler/icons/outline/photo-off.svg')} className='h-6 w-6 text-gray-500 dark:text-gray-700' />
         ) : header}
       </div>
     );
diff --git a/src/features/group/components/group-member-list-item.tsx b/src/features/group/components/group-member-list-item.tsx
index 79be5ef50..eea6514f8 100644
--- a/src/features/group/components/group-member-list-item.tsx
+++ b/src/features/group/components/group-member-list-item.tsx
@@ -138,13 +138,13 @@ const GroupMemberListItem = (props: IGroupMemberListItem) => {
       if (isMemberUser) {
         items.push({
           text: intl.formatMessage(messages.groupModPromoteMod, { role: GroupRoles.ADMIN }),
-          icon: require('@tabler/icons/briefcase.svg'),
+          icon: require('@tabler/icons/outline/briefcase.svg'),
           action: handleAdminAssignment,
         });
       } else if (isMemberAdmin) {
         items.push({
           text: intl.formatMessage(messages.groupModDemote, { role: GroupRoles.ADMIN, name: account.username }),
-          icon: require('@tabler/icons/briefcase.svg'),
+          icon: require('@tabler/icons/outline/briefcase.svg'),
           action: handleUserAssignment,
           destructive: true,
         });
@@ -159,14 +159,14 @@ const GroupMemberListItem = (props: IGroupMemberListItem) => {
       if (features.groupsKick) {
         items.push({
           text: intl.formatMessage(messages.groupModKick, { name: account.username }),
-          icon: require('@tabler/icons/user-minus.svg'),
+          icon: require('@tabler/icons/outline/user-minus.svg'),
           action: handleKickFromGroup,
         });
       }
 
       items.push({
         text: intl.formatMessage(messages.groupModBlock, { name: account.username }),
-        icon: require('@tabler/icons/ban.svg'),
+        icon: require('@tabler/icons/outline/ban.svg'),
         action: handleBlockFromGroup,
         destructive: true,
       });
diff --git a/src/features/group/components/group-options-button.tsx b/src/features/group/components/group-options-button.tsx
index 6b35d03d7..c52bc1eaa 100644
--- a/src/features/group/components/group-options-button.tsx
+++ b/src/features/group/components/group-options-button.tsx
@@ -98,7 +98,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
     if (canShare) {
       items.push({
         text: intl.formatMessage(messages.share),
-        icon: require('@tabler/icons/share.svg'),
+        icon: require('@tabler/icons/outline/share.svg'),
         action: handleShare,
       });
     }
@@ -106,7 +106,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
     if (isInGroup) {
       items.push({
         text: isMuting ? intl.formatMessage(messages.unmute) : intl.formatMessage(messages.mute),
-        icon: require('@tabler/icons/volume-3.svg'),
+        icon: require('@tabler/icons/outline/volume-3.svg'),
         action: isMuting ? handleUnmute : handleMute,
       });
     }
@@ -114,7 +114,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
     if (isMember || isAdmin) {
       items.push({
         text: intl.formatMessage(messages.report),
-        icon: require('@tabler/icons/flag.svg'),
+        icon: require('@tabler/icons/outline/flag.svg'),
         action: () => dispatch(initReport(ReportableEntities.GROUP, account as Account, { group })),
       });
     }
@@ -123,7 +123,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
       items.push(null);
       items.push({
         text: intl.formatMessage(messages.leave),
-        icon: require('@tabler/icons/logout.svg'),
+        icon: require('@tabler/icons/outline/logout.svg'),
         action: handleLeave,
       });
     }
@@ -138,7 +138,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
   return (
     <DropdownMenu items={menu} placement='bottom'>
       <IconButton
-        src={require('@tabler/icons/dots.svg')}
+        src={require('@tabler/icons/outline/dots.svg')}
         theme='secondary'
         iconClassName='h-5 w-5'
         className='self-stretch px-2.5'
diff --git a/src/features/group/components/group-privacy.tsx b/src/features/group/components/group-privacy.tsx
index 8e72fdace..019a5bbcf 100644
--- a/src/features/group/components/group-privacy.tsx
+++ b/src/features/group/components/group-privacy.tsx
@@ -17,8 +17,8 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
           <Icon
             src={
               group.locked
-                ? require('@tabler/icons/lock.svg')
-                : require('@tabler/icons/world.svg')
+                ? require('@tabler/icons/outline/lock.svg')
+                : require('@tabler/icons/outline/world.svg')
             }
             className='h-6 w-6 text-gray-600 dark:text-gray-600'
           />
@@ -49,8 +49,8 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
         className='h-4 w-4'
         src={
           group.locked
-            ? require('@tabler/icons/lock.svg')
-            : require('@tabler/icons/world.svg')
+            ? require('@tabler/icons/outline/lock.svg')
+            : require('@tabler/icons/outline/world.svg')
         }
       />
 
diff --git a/src/features/group/components/group-relationship.tsx b/src/features/group/components/group-relationship.tsx
index 51782f46b..ff6e5ee5c 100644
--- a/src/features/group/components/group-relationship.tsx
+++ b/src/features/group/components/group-relationship.tsx
@@ -28,8 +28,8 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
         className='h-4 w-4'
         src={
           isOwner
-            ? require('@tabler/icons/users.svg')
-            : require('@tabler/icons/gavel.svg')
+            ? require('@tabler/icons/outline/users.svg')
+            : require('@tabler/icons/outline/gavel.svg')
         }
       />
 
diff --git a/src/features/group/components/group-tag-list-item.tsx b/src/features/group/components/group-tag-list-item.tsx
index 38db498b9..45a5dc82f 100644
--- a/src/features/group/components/group-tag-list-item.tsx
+++ b/src/features/group/components/group-tag-list-item.tsx
@@ -87,7 +87,7 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
     if (!isOwner && tag.pinned) {
       return (
         <Icon
-          src={require('@tabler/icons/pin-filled.svg')}
+          src={require('@tabler/icons/filled/pin.svg')}
           className='h-5 w-5 text-gray-600'
           data-testid='pin-icon'
         />
@@ -112,8 +112,8 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
             theme='transparent'
             src={
               tag.pinned ?
-                require('@tabler/icons/pin-filled.svg') :
-                require('@tabler/icons/pin.svg')
+                require('@tabler/icons/filled/pin.svg') :
+                require('@tabler/icons/outline/pin.svg')
             }
             iconClassName='h-5 w-5 text-primary-500 dark:text-accent-blue'
             data-testid='pin-icon'
@@ -128,7 +128,7 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
           <IconButton
             onClick={togglePin}
             theme='transparent'
-            src={require('@tabler/icons/pin-filled.svg')}
+            src={require('@tabler/icons/filled/pin.svg')}
             iconClassName='h-5 w-5 text-primary-500 dark:text-accent-blue'
           />
         </Tooltip>
@@ -181,8 +181,8 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
               theme='transparent'
               src={
                 tag.visible ?
-                  require('@tabler/icons/eye.svg') :
-                  require('@tabler/icons/eye-off.svg')
+                  require('@tabler/icons/outline/eye.svg') :
+                  require('@tabler/icons/outline/eye-off.svg')
               }
               iconClassName='h-5 w-5 text-primary-500 dark:text-accent-blue'
             />
diff --git a/src/features/group/edit-group.tsx b/src/features/group/edit-group.tsx
index b34eca26e..aa80d7ce5 100644
--- a/src/features/group/edit-group.tsx
+++ b/src/features/group/edit-group.tsx
@@ -115,7 +115,7 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { groupId } }) => {
             placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
             maxLength={maxName}
             {...displayName}
-            append={<Icon className='h-5 w-5 text-gray-600' src={require('@tabler/icons/lock.svg')} />}
+            append={<Icon className='h-5 w-5 text-gray-600' src={require('@tabler/icons/outline/lock.svg')} />}
             disabled
           />
         </FormGroup>
diff --git a/src/features/group/group-tag-timeline.tsx b/src/features/group/group-tag-timeline.tsx
index 02b7d9aca..085302b66 100644
--- a/src/features/group/group-tag-timeline.tsx
+++ b/src/features/group/group-tag-timeline.tsx
@@ -50,7 +50,7 @@ const GroupTagTimeline: React.FC<IGroupTimeline> = (props) => {
           <Stack space={4} className='py-6' justifyContent='center' alignItems='center'>
             <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
               <Icon
-                src={require('@tabler/icons/message-2.svg')}
+                src={require('@tabler/icons/outline/message-2.svg')}
                 className='h-6 w-6 text-gray-600'
               />
             </div>
diff --git a/src/features/group/group-tags.tsx b/src/features/group/group-tags.tsx
index e3b65b5f4..fcc37798f 100644
--- a/src/features/group/group-tags.tsx
+++ b/src/features/group/group-tags.tsx
@@ -41,7 +41,7 @@ const GroupTopics: React.FC<IGroupTopics> = (props) => {
         <Stack space={4} className='pt-6' justifyContent='center' alignItems='center'>
           <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
             <Icon
-              src={require('@tabler/icons/hash.svg')}
+              src={require('@tabler/icons/outline/hash.svg')}
               className='h-6 w-6 text-gray-600'
             />
           </div>
diff --git a/src/features/group/group-timeline.tsx b/src/features/group/group-timeline.tsx
index e1d11f0e3..d30506b6a 100644
--- a/src/features/group/group-timeline.tsx
+++ b/src/features/group/group-timeline.tsx
@@ -110,7 +110,7 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
           <Stack space={4} className='py-6' justifyContent='center' alignItems='center'>
             <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
               <Icon
-                src={require('@tabler/icons/message-2.svg')}
+                src={require('@tabler/icons/outline/message-2.svg')}
                 className='h-6 w-6 text-gray-600'
               />
             </div>
diff --git a/src/features/group/manage-group.tsx b/src/features/group/manage-group.tsx
index c669c026f..1fa02f174 100644
--- a/src/features/group/manage-group.tsx
+++ b/src/features/group/manage-group.tsx
@@ -62,7 +62,7 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
 
   const onDeleteGroup = () =>
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/trash.svg'),
+      icon: require('@tabler/icons/outline/trash.svg'),
       heading: intl.formatMessage(messages.deleteHeading),
       message: intl.formatMessage(messages.deleteMessage),
       confirm: intl.formatMessage(messages.deleteConfirm),
diff --git a/src/features/groups/components/discover/group-list-item.tsx b/src/features/groups/components/discover/group-list-item.tsx
index f092c3a20..a101a45cd 100644
--- a/src/features/groups/components/discover/group-list-item.tsx
+++ b/src/features/groups/components/discover/group-list-item.tsx
@@ -39,7 +39,7 @@ const GroupListItem = (props: IGroupListItem) => {
             <HStack className='text-gray-700 dark:text-gray-600' space={1} alignItems='center'>
               <Icon
                 className='h-4.5 w-4.5'
-                src={group.locked ? require('@tabler/icons/lock.svg') : require('@tabler/icons/world.svg')}
+                src={group.locked ? require('@tabler/icons/outline/lock.svg') : require('@tabler/icons/outline/world.svg')}
               />
 
               <Text theme='inherit' tag='span' size='sm' weight='medium'>
diff --git a/src/features/groups/components/discover/layout-buttons.tsx b/src/features/groups/components/discover/layout-buttons.tsx
index 7e116408f..fce0ad711 100644
--- a/src/features/groups/components/discover/layout-buttons.tsx
+++ b/src/features/groups/components/discover/layout-buttons.tsx
@@ -20,7 +20,7 @@ const LayoutButtons = ({ layout, onSelect }: ILayoutButtons) => (
       onClick={() => onSelect(GroupLayout.LIST)}
     >
       <Icon
-        src={require('@tabler/icons/layout-list.svg')}
+        src={require('@tabler/icons/outline/layout-list.svg')}
         className={
           clsx('h-5 w-5 text-gray-600', {
             'text-primary-600': layout === GroupLayout.LIST,
@@ -34,7 +34,7 @@ const LayoutButtons = ({ layout, onSelect }: ILayoutButtons) => (
       onClick={() => onSelect(GroupLayout.GRID)}
     >
       <Icon
-        src={require('@tabler/icons/layout-grid.svg')}
+        src={require('@tabler/icons/outline/layout-grid.svg')}
         className={
           clsx('h-5 w-5 text-gray-600', {
             'text-primary-600': layout === GroupLayout.GRID,
diff --git a/src/features/groups/components/discover/search/recent-searches.tsx b/src/features/groups/components/discover/search/recent-searches.tsx
index c11e499ed..58b0c43cb 100644
--- a/src/features/groups/components/discover/search/recent-searches.tsx
+++ b/src/features/groups/components/discover/search/recent-searches.tsx
@@ -62,7 +62,7 @@ export default (props: Props) => {
                   <HStack alignItems='center' space={2}>
                     <div className='flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-800 dark:group-hover:bg-gray-700/20'>
                       <Icon
-                        src={require('@tabler/icons/search.svg')}
+                        src={require('@tabler/icons/outline/search.svg')}
                         className='h-5 w-5 text-gray-600'
                       />
                     </div>
diff --git a/src/features/groups/discover.tsx b/src/features/groups/discover.tsx
index f91c3ca48..0bb5af179 100644
--- a/src/features/groups/discover.tsx
+++ b/src/features/groups/discover.tsx
@@ -36,7 +36,7 @@ const Discover: React.FC = () => {
         <HStack alignItems='center'>
           {isSearching ? (
             <IconButton
-              src={require('@tabler/icons/arrow-left.svg')}
+              src={require('@tabler/icons/outline/arrow-left.svg')}
               iconClassName='mr-2 h-5 w-5 fill-current text-gray-600 rtl:rotate-180'
               onClick={cancelSearch}
               data-testid='group-search-icon'
@@ -55,7 +55,7 @@ const Discover: React.FC = () => {
             append={
               <button onClick={clearValue}>
                 <Icon
-                  src={hasSearchValue ? require('@tabler/icons/x.svg') : require('@tabler/icons/search.svg')}
+                  src={hasSearchValue ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
                   className='h-4 w-4 text-gray-700 dark:text-gray-600'
                   aria-hidden='true'
                 />
diff --git a/src/features/groups/index.tsx b/src/features/groups/index.tsx
index 7b1c51c55..f85b9d474 100644
--- a/src/features/groups/index.tsx
+++ b/src/features/groups/index.tsx
@@ -79,7 +79,7 @@ const Groups: React.FC = () => {
       {canCreateGroup && (
         <Button
           className='xl:hidden'
-          icon={require('@tabler/icons/circles.svg')}
+          icon={require('@tabler/icons/outline/circles.svg')}
           onClick={createGroup}
           theme='secondary'
           block
diff --git a/src/features/groups/tag.tsx b/src/features/groups/tag.tsx
index 405b40365..44d30be0a 100644
--- a/src/features/groups/tag.tsx
+++ b/src/features/groups/tag.tsx
@@ -65,7 +65,7 @@ const Tag: React.FC<ITag> = (props) => {
         <HStack alignItems='center'>
           <button onClick={() => setLayout(Layout.LIST)}>
             <Icon
-              src={require('@tabler/icons/layout-list.svg')}
+              src={require('@tabler/icons/outline/layout-list.svg')}
               className={
                 clsx('h-5 w-5 text-gray-600', {
                   'text-primary-600': layout === Layout.LIST,
@@ -76,7 +76,7 @@ const Tag: React.FC<ITag> = (props) => {
 
           <button onClick={() => setLayout(Layout.GRID)}>
             <Icon
-              src={require('@tabler/icons/layout-grid.svg')}
+              src={require('@tabler/icons/outline/layout-grid.svg')}
               className={
                 clsx('h-5 w-5 text-gray-600', {
                   'text-primary-600': layout === Layout.GRID,
diff --git a/src/features/list-adder/components/list.tsx b/src/features/list-adder/components/list.tsx
index 05094ce73..a6f12ce53 100644
--- a/src/features/list-adder/components/list.tsx
+++ b/src/features/list-adder/components/list.tsx
@@ -30,14 +30,14 @@ const List: React.FC<IList> = ({ listId }) => {
   let button;
 
   if (added) {
-    button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
     <div className='flex items-center gap-1.5 px-2 py-4 text-black dark:text-white'>
-      <Icon src={require('@tabler/icons/list.svg')} />
+      <Icon src={require('@tabler/icons/outline/list.svg')} />
       <span className='grow'>
         {list.title}
       </span>
diff --git a/src/features/list-editor/components/account.tsx b/src/features/list-editor/components/account.tsx
index a950696c2..4a28a3c41 100644
--- a/src/features/list-editor/components/account.tsx
+++ b/src/features/list-editor/components/account.tsx
@@ -28,9 +28,9 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
   let button;
 
   if (isAdded) {
-    button = <IconButton src={require('@tabler/icons/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={require('@tabler/icons/outline/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@tabler/icons/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
diff --git a/src/features/list-editor/components/search.tsx b/src/features/list-editor/components/search.tsx
index 8d86da0b8..e3c3812c7 100644
--- a/src/features/list-editor/components/search.tsx
+++ b/src/features/list-editor/components/search.tsx
@@ -45,7 +45,7 @@ const Search = () => {
             placeholder={intl.formatMessage(messages.search)}
           />
           <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-            <Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
+            <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
           </div>
         </label>
 
diff --git a/src/features/lists/index.tsx b/src/features/lists/index.tsx
index 21861da0e..498b6472c 100644
--- a/src/features/lists/index.tsx
+++ b/src/features/lists/index.tsx
@@ -84,12 +84,12 @@ const Lists: React.FC = () => {
         >
           {lists.map((list: any) => (
             <Link key={list.id} to={`/list/${list.id}`} className='flex items-center gap-1.5 rounded-lg p-2 text-gray-900 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-gray-800'>
-              <Icon src={require('@tabler/icons/list.svg')} />
+              <Icon src={require('@tabler/icons/outline/list.svg')} />
               <span className='grow'>
                 {list.title}
               </span>
-              <IconButton iconClassName='h-5 w-5 text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500' src={require('@tabler/icons/pencil.svg')} onClick={handleEditClick(list.id)} title={intl.formatMessage(messages.editList)} />
-              <IconButton iconClassName='h-5 w-5 text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500' src={require('@tabler/icons/trash.svg')} onClick={handleDeleteClick(list.id)} title={intl.formatMessage(messages.deleteList)} />
+              <IconButton iconClassName='h-5 w-5 text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500' src={require('@tabler/icons/outline/pencil.svg')} onClick={handleEditClick(list.id)} title={intl.formatMessage(messages.editList)} />
+              <IconButton iconClassName='h-5 w-5 text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500' src={require('@tabler/icons/outline/trash.svg')} onClick={handleDeleteClick(list.id)} title={intl.formatMessage(messages.deleteList)} />
             </Link>
           ))}
         </ScrollableList>
diff --git a/src/features/notifications/components/filter-bar.tsx b/src/features/notifications/components/filter-bar.tsx
index 5ed194b6a..45f67d884 100644
--- a/src/features/notifications/components/filter-bar.tsx
+++ b/src/features/notifications/components/filter-bar.tsx
@@ -46,43 +46,43 @@ const NotificationFilterBar = () => {
     });
   } else {
     items.push({
-      text: <Icon src={require('@tabler/icons/at.svg')} />,
+      text: <Icon src={require('@tabler/icons/outline/at.svg')} />,
       title: intl.formatMessage(messages.mentions),
       action: onClick('mention'),
       name: 'mention',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/heart.svg')} />,
+      text: <Icon src={require('@tabler/icons/outline/heart.svg')} />,
       title: intl.formatMessage(messages.favourites),
       action: onClick('favourite'),
       name: 'favourite',
     });
     if (features.emojiReacts) items.push({
-      text: <Icon src={require('@tabler/icons/mood-smile.svg')} />,
+      text: <Icon src={require('@tabler/icons/outline/mood-smile.svg')} />,
       title: intl.formatMessage(messages.emoji_reacts),
       action: onClick('pleroma:emoji_reaction'),
       name: 'pleroma:emoji_reaction',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/repeat.svg')} />,
+      text: <Icon src={require('@tabler/icons/outline/repeat.svg')} />,
       title: intl.formatMessage(messages.boosts),
       action: onClick('reblog'),
       name: 'reblog',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/chart-bar.svg')} />,
+      text: <Icon src={require('@tabler/icons/outline/chart-bar.svg')} />,
       title: intl.formatMessage(messages.polls),
       action: onClick('poll'),
       name: 'poll',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/bell-ringing.svg')} />,
+      text: <Icon src={require('@tabler/icons/outline/bell-ringing.svg')} />,
       title: intl.formatMessage(messages.statuses),
       action: onClick('status'),
       name: 'status',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/user-plus.svg')} />,
+      text: <Icon src={require('@tabler/icons/outline/user-plus.svg')} />,
       title: intl.formatMessage(messages.follows),
       action: onClick('follow'),
       name: 'follow',
diff --git a/src/features/notifications/components/notification.tsx b/src/features/notifications/components/notification.tsx
index fbefbf44f..7a05a7d23 100644
--- a/src/features/notifications/components/notification.tsx
+++ b/src/features/notifications/components/notification.tsx
@@ -39,23 +39,23 @@ const buildLink = (account: AccountEntity): JSX.Element => (
 );
 
 const icons: Record<NotificationType, string> = {
-  follow: require('@tabler/icons/user-plus.svg'),
-  follow_request: require('@tabler/icons/user-plus.svg'),
-  mention: require('@tabler/icons/at.svg'),
-  favourite: require('@tabler/icons/heart.svg'),
-  group_favourite: require('@tabler/icons/heart.svg'),
-  reblog: require('@tabler/icons/repeat.svg'),
-  group_reblog: require('@tabler/icons/repeat.svg'),
-  status: require('@tabler/icons/bell-ringing.svg'),
-  poll: require('@tabler/icons/chart-bar.svg'),
-  move: require('@tabler/icons/briefcase.svg'),
-  'pleroma:chat_mention': require('@tabler/icons/messages.svg'),
-  'pleroma:emoji_reaction': require('@tabler/icons/mood-happy.svg'),
-  user_approved: require('@tabler/icons/user-plus.svg'),
-  update: require('@tabler/icons/pencil.svg'),
-  'pleroma:event_reminder': require('@tabler/icons/calendar-time.svg'),
-  'pleroma:participation_request': require('@tabler/icons/calendar-event.svg'),
-  'pleroma:participation_accepted': require('@tabler/icons/calendar-event.svg'),
+  follow: require('@tabler/icons/outline/user-plus.svg'),
+  follow_request: require('@tabler/icons/outline/user-plus.svg'),
+  mention: require('@tabler/icons/outline/at.svg'),
+  favourite: require('@tabler/icons/outline/heart.svg'),
+  group_favourite: require('@tabler/icons/outline/heart.svg'),
+  reblog: require('@tabler/icons/outline/repeat.svg'),
+  group_reblog: require('@tabler/icons/outline/repeat.svg'),
+  status: require('@tabler/icons/outline/bell-ringing.svg'),
+  poll: require('@tabler/icons/outline/chart-bar.svg'),
+  move: require('@tabler/icons/outline/briefcase.svg'),
+  'pleroma:chat_mention': require('@tabler/icons/outline/messages.svg'),
+  'pleroma:emoji_reaction': require('@tabler/icons/outline/mood-happy.svg'),
+  user_approved: require('@tabler/icons/outline/user-plus.svg'),
+  update: require('@tabler/icons/outline/pencil.svg'),
+  'pleroma:event_reminder': require('@tabler/icons/outline/calendar-time.svg'),
+  'pleroma:participation_request': require('@tabler/icons/outline/calendar-event.svg'),
+  'pleroma:participation_accepted': require('@tabler/icons/outline/calendar-event.svg'),
 };
 
 const nameMessage = defineMessage({
diff --git a/src/features/onboarding/steps/avatar-selection-step.tsx b/src/features/onboarding/steps/avatar-selection-step.tsx
index 149d5e3e3..2c2af64bb 100644
--- a/src/features/onboarding/steps/avatar-selection-step.tsx
+++ b/src/features/onboarding/steps/avatar-selection-step.tsx
@@ -90,7 +90,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
             })}
             disabled={isSubmitting}
           >
-            <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
+            <Icon src={require('@tabler/icons/outline/plus.svg')} className='h-5 w-5 text-white' />
           </button>
 
           <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
diff --git a/src/features/onboarding/steps/completed-step.tsx b/src/features/onboarding/steps/completed-step.tsx
index 082defb4d..813eff22a 100644
--- a/src/features/onboarding/steps/completed-step.tsx
+++ b/src/features/onboarding/steps/completed-step.tsx
@@ -7,7 +7,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
   <Card variant='rounded' size='xl'>
     <CardBody>
       <Stack space={2}>
-        <Icon strokeWidth={1} src={require('@tabler/icons/confetti.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
+        <Icon strokeWidth={1} src={require('@tabler/icons/outline/confetti.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
 
         <Text size='2xl' align='center' weight='bold'>
           <FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
diff --git a/src/features/onboarding/steps/cover-photo-selection-step.tsx b/src/features/onboarding/steps/cover-photo-selection-step.tsx
index 1e1c0107b..b09b89f6a 100644
--- a/src/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/src/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -103,7 +103,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
               })}
               disabled={isSubmitting}
             >
-              <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
+              <Icon src={require('@tabler/icons/outline/plus.svg')} className='h-5 w-5 text-white' />
             </button>
 
             <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
diff --git a/src/features/onboarding/steps/fediverse-step.tsx b/src/features/onboarding/steps/fediverse-step.tsx
index 87afc3680..c66f34eb7 100644
--- a/src/features/onboarding/steps/fediverse-step.tsx
+++ b/src/features/onboarding/steps/fediverse-step.tsx
@@ -13,7 +13,7 @@ const FediverseStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <Stack space={2}>
-          <Icon strokeWidth={1} src={require('@tabler/icons/affiliate.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
+          <Icon strokeWidth={1} src={require('@tabler/icons/outline/affiliate.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
 
           <Text size='2xl' weight='bold'>
             <FormattedMessage
diff --git a/src/features/public-timeline/index.tsx b/src/features/public-timeline/index.tsx
index e9caa6472..91c8df007 100644
--- a/src/features/public-timeline/index.tsx
+++ b/src/features/public-timeline/index.tsx
@@ -62,7 +62,7 @@ const CommunityTimeline = () => {
         <Accordion
           headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
           action={dismissExplanationBox}
-          actionIcon={require('@tabler/icons/x.svg')}
+          actionIcon={require('@tabler/icons/outline/x.svg')}
           actionLabel={intl.formatMessage(messages.dismiss)}
           expanded={explanationBoxExpanded}
           onToggle={toggleExplanationBox}
diff --git a/src/features/remote-timeline/index.tsx b/src/features/remote-timeline/index.tsx
index a50875531..ca996bb13 100644
--- a/src/features/remote-timeline/index.tsx
+++ b/src/features/remote-timeline/index.tsx
@@ -53,7 +53,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
 
       {!pinned && (
         <HStack className='mb-4 px-2' space={2}>
-          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
+          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} onClick={handleCloseClick} />
           <Text>
             <FormattedMessage
               id='remote_timeline.filter_message'
diff --git a/src/features/reply-mentions/account.tsx b/src/features/reply-mentions/account.tsx
index b5503a331..335690cac 100644
--- a/src/features/reply-mentions/account.tsx
+++ b/src/features/reply-mentions/account.tsx
@@ -42,9 +42,9 @@ const Account: React.FC<IAccount> = ({ composeId, accountId, author }) => {
   let button;
 
   if (added) {
-    button = <IconButton src={require('@tabler/icons/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={require('@tabler/icons/outline/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@tabler/icons/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
diff --git a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
index c4ea472ba..9b32f8330 100644
--- a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
@@ -34,7 +34,7 @@ const ScheduledStatusActionBar: React.FC<IScheduledStatusActionBar> = ({ status
         dispatch(cancelScheduledStatus(status.id));
       } else {
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/calendar-stats.svg'),
+          icon: require('@tabler/icons/outline/calendar-stats.svg'),
           heading: intl.formatMessage(messages.deleteHeading),
           message: intl.formatMessage(messages.deleteMessage),
           confirm: intl.formatMessage(messages.deleteConfirm),
@@ -49,7 +49,7 @@ const ScheduledStatusActionBar: React.FC<IScheduledStatusActionBar> = ({ status
       <IconButton
         title={intl.formatMessage(messages.cancel)}
         text={intl.formatMessage(messages.cancel)}
-        src={require('@tabler/icons/x.svg')}
+        src={require('@tabler/icons/outline/x.svg')}
         onClick={handleCancelClick}
       />
     </HStack>
diff --git a/src/features/status/components/detailed-status.tsx b/src/features/status/components/detailed-status.tsx
index 73948580f..e421ee35b 100644
--- a/src/features/status/components/detailed-status.tsx
+++ b/src/features/status/components/detailed-status.tsx
@@ -57,7 +57,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
             avatarSize={42}
             icon={
               <Icon
-                src={require('@tabler/icons/circles.svg')}
+                src={require('@tabler/icons/outline/circles.svg')}
                 className='h-4 w-4 text-primary-600 dark:text-accent-blue'
               />
             }
@@ -109,9 +109,9 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
   }
 
   if (actualStatus.visibility === 'direct') {
-    statusTypeIcon = <Icon className='h-4 w-4 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/mail.svg')} />;
+    statusTypeIcon = <Icon className='h-4 w-4 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/mail.svg')} />;
   } else if (actualStatus.visibility === 'private') {
-    statusTypeIcon = <Icon className='h-4 w-4 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/lock.svg')} />;
+    statusTypeIcon = <Icon className='h-4 w-4 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/lock.svg')} />;
   }
 
   return (
diff --git a/src/features/theme-editor/index.tsx b/src/features/theme-editor/index.tsx
index e6c624b35..66604a109 100644
--- a/src/features/theme-editor/index.tsx
+++ b/src/features/theme-editor/index.tsx
@@ -208,15 +208,15 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
             items={[{
               text: intl.formatMessage(messages.restore),
               action: restoreDefaultTheme,
-              icon: require('@tabler/icons/refresh.svg'),
+              icon: require('@tabler/icons/outline/refresh.svg'),
             }, {
               text: intl.formatMessage(messages.import),
               action: importTheme,
-              icon: require('@tabler/icons/upload.svg'),
+              icon: require('@tabler/icons/outline/upload.svg'),
             }, {
               text: intl.formatMessage(messages.export),
               action: exportTheme,
-              icon: require('@tabler/icons/download.svg'),
+              icon: require('@tabler/icons/outline/download.svg'),
             }]}
           />
           <Button theme='secondary' onClick={resetTheme}>
diff --git a/src/features/ui/components/action-button.tsx b/src/features/ui/components/action-button.tsx
index 0d72f2023..6d9502d5b 100644
--- a/src/features/ui/components/action-button.tsx
+++ b/src/features/ui/components/action-button.tsx
@@ -154,7 +154,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
       return (
         <Button
           onClick={handleRemoteFollow}
-          icon={require('@tabler/icons/plus.svg')}
+          icon={require('@tabler/icons/outline/plus.svg')}
           text={intl.formatMessage(messages.follow)}
           size='sm'
         />
@@ -224,7 +224,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
           size='sm'
           disabled={blockedBy}
           theme={isFollowing ? 'secondary' : 'primary'}
-          icon={blockedBy ? require('@tabler/icons/ban.svg') : (!isFollowing && require('@tabler/icons/plus.svg'))}
+          icon={blockedBy ? require('@tabler/icons/outline/ban.svg') : (!isFollowing && require('@tabler/icons/outline/plus.svg'))}
           onClick={handleFollow}
         >
           {isFollowing ? (
diff --git a/src/features/ui/components/error-column.tsx b/src/features/ui/components/error-column.tsx
index 39964cca8..6c91fa144 100644
--- a/src/features/ui/components/error-column.tsx
+++ b/src/features/ui/components/error-column.tsx
@@ -32,7 +32,7 @@ const ErrorColumn: React.FC<IErrorColumn> = ({ error, onRetry = () => location.r
         <IconButton
           iconClassName='h-10 w-10'
           title={intl.formatMessage(messages.retry)}
-          src={require('@tabler/icons/refresh.svg')}
+          src={require('@tabler/icons/outline/refresh.svg')}
           onClick={handleRetry}
         />
 
diff --git a/src/features/ui/components/floating-action-button.tsx b/src/features/ui/components/floating-action-button.tsx
index 11032641f..73c43e7c1 100644
--- a/src/features/ui/components/floating-action-button.tsx
+++ b/src/features/ui/components/floating-action-button.tsx
@@ -42,7 +42,7 @@ const HomeFAB: React.FC = () => {
       aria-label={intl.formatMessage(messages.publish)}
     >
       <Icon
-        src={require('@tabler/icons/pencil-plus.svg')}
+        src={require('@tabler/icons/outline/pencil-plus.svg')}
         className='h-6 w-6'
       />
     </button>
@@ -74,7 +74,7 @@ const GroupFAB: React.FC = () => {
       <HStack space={3} alignItems='center'>
         <Avatar className='-my-3 -ml-2 border-white' size={42} src={group.avatar} />
         <Icon
-          src={require('@tabler/icons/pencil-plus.svg')}
+          src={require('@tabler/icons/outline/pencil-plus.svg')}
           className='h-6 w-6'
         />
       </HStack>
diff --git a/src/features/ui/components/instance-info-panel.tsx b/src/features/ui/components/instance-info-panel.tsx
index 16093516f..26a52df84 100644
--- a/src/features/ui/components/instance-info-panel.tsx
+++ b/src/features/ui/components/instance-info-panel.tsx
@@ -41,7 +41,7 @@ const InstanceInfoPanel: React.FC<IInstanceInfoPanel> = ({ host }) => {
     <Widget
       title={remoteInstance.host}
       onActionClick={handlePinHost}
-      actionIcon={pinned ? require('@tabler/icons/pinned-off.svg') : require('@tabler/icons/pin.svg')}
+      actionIcon={pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg')}
       actionTitle={intl.formatMessage(pinned ? messages.unpinHost : messages.pinHost, { host })}
     />
   );
diff --git a/src/features/ui/components/instance-moderation-panel.tsx b/src/features/ui/components/instance-moderation-panel.tsx
index cd9055a21..75cb34b05 100644
--- a/src/features/ui/components/instance-moderation-panel.tsx
+++ b/src/features/ui/components/instance-moderation-panel.tsx
@@ -35,7 +35,7 @@ const InstanceModerationPanel: React.FC<IInstanceModerationPanel> = ({ host }) =
     return [{
       text: intl.formatMessage(messages.editFederation),
       action: handleEditFederation,
-      icon: require('@tabler/icons/edit.svg'),
+      icon: require('@tabler/icons/outline/edit.svg'),
     }];
   };
 
@@ -45,7 +45,7 @@ const InstanceModerationPanel: React.FC<IInstanceModerationPanel> = ({ host }) =
     <Widget
       title={<FormattedMessage id='remote_instance.federation_panel.heading' defaultMessage='Federation Restrictions' />}
       action={account?.admin ? (
-        <DropdownMenu items={menu} src={require('@tabler/icons/dots-vertical.svg')} />
+        <DropdownMenu items={menu} src={require('@tabler/icons/outline/dots-vertical.svg')} />
       ) : undefined}
     >
       <InstanceRestrictions remoteInstance={remoteInstance} />
diff --git a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
index 2e7bcdb7e..76ea614d9 100644
--- a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
@@ -172,7 +172,7 @@ const AccountModerationModal: React.FC<IAccountModerationModal> = ({ onClose, ac
 
         {features.adminFE && (
           <HStack justifyContent='center'>
-            <Button icon={require('@tabler/icons/external-link.svg')} size='sm' theme='secondary' onClick={handleAdminFE}>
+            <Button icon={require('@tabler/icons/outline/external-link.svg')} size='sm' theme='secondary' onClick={handleAdminFE}>
               <FormattedMessage id='account_moderation_modal.admin_fe' defaultMessage='Open in AdminFE' />
             </Button>
           </HStack>
diff --git a/src/features/ui/components/modals/boost-modal.tsx b/src/features/ui/components/modals/boost-modal.tsx
index df7d530e4..bc4d73177 100644
--- a/src/features/ui/components/modals/boost-modal.tsx
+++ b/src/features/ui/components/modals/boost-modal.tsx
@@ -38,7 +38,7 @@ const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
         <ReplyIndicator status={status} hideActions />
 
         <Text>
-          <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon className='inline-block align-middle' src={require('@tabler/icons/repeat.svg')} /></span> }} />
+          <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon className='inline-block align-middle' src={require('@tabler/icons/outline/repeat.svg')} /></span> }} />
         </Text>
       </Stack>
     </Modal>
diff --git a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index 0e25d4119..8f20ce69c 100644
--- a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -137,7 +137,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
     dispatch((dispatch, getState) => {
       if (checkEventComposeContent(getState().compose_event)) {
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/trash.svg'),
+          icon: require('@tabler/icons/outline/trash.svg'),
           heading: id
             ? <FormattedMessage id='confirmations.cancel_event_editing.heading' defaultMessage='Cancel event editing' />
             : <FormattedMessage id='confirmations.delete_event.heading' defaultMessage='Delete event' />,
@@ -177,12 +177,12 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
 
   const renderLocation = () => location && (
     <HStack className='h-[38px] text-gray-700 dark:text-gray-500' alignItems='center' space={2}>
-      <Icon src={ADDRESS_ICONS[location.type] || require('@tabler/icons/map-pin.svg')} />
+      <Icon src={ADDRESS_ICONS[location.type] || require('@tabler/icons/outline/map-pin.svg')} />
       <Stack className='grow'>
         <Text>{location.description}</Text>
         <Text theme='muted' size='xs'>{[location.street, location.locality, location.country].filter(val => val?.trim()).join(' · ')}</Text>
       </Stack>
-      <IconButton title={intl.formatMessage(messages.resetLocation)} src={require('@tabler/icons/x.svg')} onClick={() => onChangeLocation(null)} />
+      <IconButton title={intl.formatMessage(messages.resetLocation)} src={require('@tabler/icons/outline/x.svg')} onClick={() => onChangeLocation(null)} />
     </HStack>
   );
 
@@ -213,7 +213,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
           {banner ? (
             <>
               <img className='h-full w-full object-cover' src={banner.url} alt='' />
-              <IconButton className='absolute right-2 top-2' src={require('@tabler/icons/x.svg')} onClick={handleClearBanner} />
+              <IconButton className='absolute right-2 top-2' src={require('@tabler/icons/outline/x.svg')} onClick={handleClearBanner} />
             </>
           ) : (
             <UploadButton disabled={isUploading} onSelectFile={handleFiles} />
diff --git a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
index be9f59818..ab377d62f 100644
--- a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -28,7 +28,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
   return (
     <HStack className='h-full w-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
       <Icon
-        src={require('@tabler/icons/photo-plus.svg')}
+        src={require('@tabler/icons/outline/photo-plus.svg')}
         className='h-7 w-7'
         onClick={handleClick}
       />
diff --git a/src/features/ui/components/modals/compose-modal.tsx b/src/features/ui/components/modals/compose-modal.tsx
index 83e471475..b5fc73c33 100644
--- a/src/features/ui/components/modals/compose-modal.tsx
+++ b/src/features/ui/components/modals/compose-modal.tsx
@@ -36,7 +36,7 @@ const ComposeModal: React.FC<IComposeModal> = ({ onClose, composeId = 'compose-m
   const onClickClose = () => {
     if (checkComposeContent(compose)) {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/trash.svg'),
+        icon: require('@tabler/icons/outline/trash.svg'),
         heading: statusId
           ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' />
           : <FormattedMessage id='confirmations.cancel.heading' defaultMessage='Discard post' />,
diff --git a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
index 0acb130d5..e2a407829 100644
--- a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
@@ -58,7 +58,7 @@ const EmojiPicker: React.FC<IEmojiPicker> = ({ emoji, emojiUrl, ...props }) => {
       >
         {emoji
           ? <Emoji height={20} width={20} emoji={emoji} />
-          : <Icon className='h-5 w-5 text-gray-600 hover:text-gray-700 dark:hover:text-gray-500' src={require('@tabler/icons/mood-happy.svg')} />}
+          : <Icon className='h-5 w-5 text-gray-600 hover:text-gray-700 dark:hover:text-gray-500' src={require('@tabler/icons/outline/mood-happy.svg')} />}
       </button>
 
       {createPortal(
diff --git a/src/features/ui/components/modals/event-map-modal.tsx b/src/features/ui/components/modals/event-map-modal.tsx
index 5000c8fa7..2a16a84f3 100644
--- a/src/features/ui/components/modals/event-map-modal.tsx
+++ b/src/features/ui/components/modals/event-map-modal.tsx
@@ -64,7 +64,7 @@ const EventMapModal: React.FC<IEventMapModal> = ({ onClose, statusId }) => {
     >
       <Stack alignItems='center' space={6}>
         <div className='h-96 w-full' id='event-map' />
-        <Button onClick={onClickNavigate} icon={require('@tabler/icons/gps.svg')}>
+        <Button onClick={onClickNavigate} icon={require('@tabler/icons/outline/gps.svg')}>
           <FormattedMessage id='event_map.navigate' defaultMessage='Navigate' />
         </Button>
       </Stack>
diff --git a/src/features/ui/components/modals/landing-page-modal.tsx b/src/features/ui/components/modals/landing-page-modal.tsx
index 8b451257d..cdb3c9bb8 100644
--- a/src/features/ui/components/modals/landing-page-modal.tsx
+++ b/src/features/ui/components/modals/landing-page-modal.tsx
@@ -38,7 +38,7 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
               target='_blank'
               className='flex items-center space-x-3 rounded-md p-3 hover:bg-gray-50 dark:hover:bg-gray-900/50'
             >
-              <Icon src={require('@tabler/icons/lifebuoy.svg')} className='h-6 w-6 shrink-0 text-gray-600 dark:text-gray-700' />
+              <Icon src={require('@tabler/icons/outline/lifebuoy.svg')} className='h-6 w-6 shrink-0 text-gray-600 dark:text-gray-700' />
 
               <Text weight='medium'>
                 {intl.formatMessage(messages.helpCenter)}
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
index f9a032398..86972b83a 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -101,12 +101,12 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
 
       <HStack space={2} justifyContent='center'>
         {('share' in navigator) && (
-          <Button onClick={handleShare} theme='transparent' icon={require('@tabler/icons/share.svg')} className='text-primary-600'>
+          <Button onClick={handleShare} theme='transparent' icon={require('@tabler/icons/outline/share.svg')} className='text-primary-600'>
             <FormattedMessage id='manage_group.confirmation.share' defaultMessage='Share this group' />
           </Button>
         )}
 
-        <Button onClick={handleCopyLink} theme='transparent' icon={require('@tabler/icons/link.svg')} className='text-primary-600'>
+        <Button onClick={handleCopyLink} theme='transparent' icon={require('@tabler/icons/outline/link.svg')} className='text-primary-600'>
           <FormattedMessage id='manage_group.confirmation.copy' defaultMessage='Copy link' />
         </Button>
       </HStack>
diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index 6f78a8ed5..fe30f7247 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/src/features/ui/components/modals/media-modal.tsx
@@ -255,7 +255,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
           >
             <IconButton
               title={intl.formatMessage(messages.close)}
-              src={require('@tabler/icons/x.svg')}
+              src={require('@tabler/icons/outline/x.svg')}
               onClick={onClose}
               theme='dark'
               className='!p-1.5 hover:scale-105 hover:bg-gray-900'
@@ -264,7 +264,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
 
             <HStack alignItems='center' space={2}>
               <IconButton
-                src={require('@tabler/icons/download.svg')}
+                src={require('@tabler/icons/outline/download.svg')}
                 theme='dark'
                 className='!p-1.5 hover:scale-105 hover:bg-gray-900'
                 iconClassName='h-5 w-5'
@@ -273,7 +273,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
 
               {status && (
                 <IconButton
-                  src={isFullScreen ? require('@tabler/icons/arrows-minimize.svg') : require('@tabler/icons/arrows-maximize.svg')}
+                  src={isFullScreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')}
                   title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)}
                   theme='dark'
                   className='hidden !p-1.5 hover:scale-105 hover:bg-gray-900 xl:block'
@@ -296,7 +296,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                   onClick={handlePrevClick}
                   aria-label={intl.formatMessage(messages.previous)}
                 >
-                  <Icon src={require('@tabler/icons/arrow-left.svg')} className='h-5 w-5' />
+                  <Icon src={require('@tabler/icons/outline/arrow-left.svg')} className='h-5 w-5' />
                 </button>
               </div>
             )}
@@ -318,7 +318,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                   onClick={handleNextClick}
                   aria-label={intl.formatMessage(messages.next)}
                 >
-                  <Icon src={require('@tabler/icons/arrow-right.svg')} className='h-5 w-5' />
+                  <Icon src={require('@tabler/icons/outline/arrow-right.svg')} className='h-5 w-5' />
                 </button>
               </div>
             )}
diff --git a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
index 4fe7869c2..83d604fa7 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
@@ -53,7 +53,7 @@ const KeygenStep: React.FC<IKeygenStep> = ({ onClose }) => {
         <EmojiGraphic emoji='🔑' />
 
         <Stack alignItems='center'>
-          <Button theme='primary' size='lg' icon={require('@tabler/icons/download.svg')} onClick={handleDownload}>
+          <Button theme='primary' size='lg' icon={require('@tabler/icons/outline/download.svg')} onClick={handleDownload}>
             Download key
           </Button>
         </Stack>
diff --git a/src/features/ui/components/modals/reply-mentions-modal.tsx b/src/features/ui/components/modals/reply-mentions-modal.tsx
index bb21d99ac..69ae41acd 100644
--- a/src/features/ui/components/modals/reply-mentions-modal.tsx
+++ b/src/features/ui/components/modals/reply-mentions-modal.tsx
@@ -33,7 +33,7 @@ const ReplyMentionsModal: React.FC<IReplyMentionsModal> = ({ composeId, onClose
     <Modal
       title={<FormattedMessage id='navigation_bar.in_reply_to' defaultMessage='In reply to' />}
       onClose={onClickClose}
-      closeIcon={require('@tabler/icons/arrow-left.svg')}
+      closeIcon={require('@tabler/icons/outline/arrow-left.svg')}
       closePosition='left'
     >
       <div className='reply-mentions-modal__accounts'>
diff --git a/src/features/ui/components/modals/report-modal/report-modal.tsx b/src/features/ui/components/modals/report-modal/report-modal.tsx
index ea242e940..ce961d0fb 100644
--- a/src/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/src/features/ui/components/modals/report-modal/report-modal.tsx
@@ -226,7 +226,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
 
           <List>
             <ListItem
-              label={<Icon src={require('@tabler/icons/info-circle.svg')} className='text-gray-600' />}
+              label={<Icon src={require('@tabler/icons/outline/info-circle.svg')} className='text-gray-600' />}
             >
               <Text size='sm'>{intl.formatMessage(messages.reportContext)}</Text>
             </ListItem>
diff --git a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
index 9db7a3bc1..8aaf7734c 100644
--- a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
@@ -65,7 +65,7 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
 
                 <div>
                   <Button
-                    icon={require('@tabler/icons/arrows-minimize.svg')}
+                    icon={require('@tabler/icons/outline/arrows-minimize.svg')}
                     theme='tertiary'
                     size='sm'
                     onClick={() => setShowAdditionalStatuses(false)}
@@ -76,7 +76,7 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
               </Stack>
             ) : (
               <Button
-                icon={require('@tabler/icons/plus.svg')}
+                icon={require('@tabler/icons/outline/plus.svg')}
                 theme='tertiary'
                 size='sm'
                 onClick={() => setShowAdditionalStatuses(true)}
diff --git a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
index 756e34d62..bafa1081f 100644
--- a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
@@ -42,7 +42,7 @@ const SelectBookmarkFolderModal: React.FC<ISelectBookmarkFolderModal> = ({ statu
     <RadioItem
       label={
         <HStack alignItems='center' space={2}>
-          <Icon src={require('@tabler/icons/bookmarks.svg')} size={20} />
+          <Icon src={require('@tabler/icons/outline/bookmarks.svg')} size={20} />
           <span><FormattedMessage id='bookmark_folders.all_bookmarks' defaultMessage='All bookmarks' /></span>
         </HStack>
       }
@@ -63,7 +63,7 @@ const SelectBookmarkFolderModal: React.FC<ISelectBookmarkFolderModal> = ({ statu
                 src={folder.emoji_url || undefined}
                 className='h-5 w-5 flex-none'
               />
-            ) : <Icon src={require('@tabler/icons/folder.svg')} size={20} />}
+            ) : <Icon src={require('@tabler/icons/outline/folder.svg')} size={20} />}
             <span>{folder.name}</span>
           </HStack>
         }
diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx
index 79d478404..384690f10 100644
--- a/src/features/ui/components/navbar.tsx
+++ b/src/features/ui/components/navbar.tsx
@@ -145,7 +145,7 @@ const Navbar = () => {
                     <Link to='/reset-password'>
                       <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
                         <IconButton
-                          src={require('@tabler/icons/help.svg')}
+                          src={require('@tabler/icons/outline/help.svg')}
                           className='cursor-pointer bg-transparent text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200'
                           iconClassName='h-5 w-5'
                         />
diff --git a/src/features/ui/components/panels/new-event-panel.tsx b/src/features/ui/components/panels/new-event-panel.tsx
index 47331253e..bf444ffc6 100644
--- a/src/features/ui/components/panels/new-event-panel.tsx
+++ b/src/features/ui/components/panels/new-event-panel.tsx
@@ -25,7 +25,7 @@ const NewEventPanel = () => {
       </Stack>
 
       <Button
-        icon={require('@tabler/icons/calendar-event.svg')}
+        icon={require('@tabler/icons/outline/calendar-event.svg')}
         onClick={createEvent}
         theme='secondary'
         block
diff --git a/src/features/ui/components/profile-dropdown.tsx b/src/features/ui/components/profile-dropdown.tsx
index 39eb60c16..853e11d32 100644
--- a/src/features/ui/components/profile-dropdown.tsx
+++ b/src/features/ui/components/profile-dropdown.tsx
@@ -87,14 +87,14 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
     menu.push({
       text: intl.formatMessage(messages.add),
       to: '/login/add',
-      icon: require('@tabler/icons/plus.svg'),
+      icon: require('@tabler/icons/outline/plus.svg'),
     });
 
     menu.push({
       text: intl.formatMessage(messages.logout, { acct: account.acct }),
       to: '/logout',
       action: handleLogOut,
-      icon: require('@tabler/icons/logout.svg'),
+      icon: require('@tabler/icons/outline/logout.svg'),
     });
 
     return menu;
diff --git a/src/features/ui/components/profile-field.tsx b/src/features/ui/components/profile-field.tsx
index 45a801678..7f4e43728 100644
--- a/src/features/ui/components/profile-field.tsx
+++ b/src/features/ui/components/profile-field.tsx
@@ -57,7 +57,7 @@ const ProfileField: React.FC<IProfileField> = ({ field }) => {
         <HStack space={2} alignItems='center'>
           {field.verified_at && (
             <span className='flex-none' title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(field.verified_at, dateFormatOptions) })}>
-              <Icon src={require('@tabler/icons/check.svg')} />
+              <Icon src={require('@tabler/icons/outline/check.svg')} />
             </span>
           )}
 
diff --git a/src/features/ui/components/profile-info-panel.tsx b/src/features/ui/components/profile-info-panel.tsx
index f3556cf7f..a14f6bce7 100644
--- a/src/features/ui/components/profile-info-panel.tsx
+++ b/src/features/ui/components/profile-info-panel.tsx
@@ -101,7 +101,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
     return (
       <HStack alignItems='center' space={0.5}>
         <Icon
-          src={require('@tabler/icons/balloon.svg')}
+          src={require('@tabler/icons/outline/balloon.svg')}
           className='h-4 w-4 text-gray-800 dark:text-gray-200'
         />
 
@@ -160,7 +160,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
 
             {account.locked && (
               <Icon
-                src={require('@tabler/icons/lock.svg')}
+                src={require('@tabler/icons/outline/lock.svg')}
                 alt={intl.formatMessage(messages.account_locked)}
                 className='h-4 w-4 text-gray-600'
               />
@@ -178,7 +178,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {account.local ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/calendar.svg')}
+                src={require('@tabler/icons/outline/calendar.svg')}
                 className='h-4 w-4 text-gray-800 dark:text-gray-200'
               />
 
@@ -195,7 +195,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {account.location ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/map-pin.svg')}
+                src={require('@tabler/icons/outline/map-pin.svg')}
                 className='h-4 w-4 text-gray-800 dark:text-gray-200'
               />
 
@@ -208,7 +208,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {account.website ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/link.svg')}
+                src={require('@tabler/icons/outline/link.svg')}
                 className='h-4 w-4 text-gray-800 dark:text-gray-200'
               />
 
diff --git a/src/features/ui/components/subscription-button.tsx b/src/features/ui/components/subscription-button.tsx
index e0bd36db7..cdd2ec5bb 100644
--- a/src/features/ui/components/subscription-button.tsx
+++ b/src/features/ui/components/subscription-button.tsx
@@ -91,7 +91,7 @@ const SubscriptionButton = ({ account }: ISubscriptionButton) => {
   if (isRequested || isFollowing) {
     return (
       <IconButton
-        src={isSubscribed ? require('@tabler/icons/bell-ringing.svg') : require('@tabler/icons/bell.svg')}
+        src={isSubscribed ? require('@tabler/icons/outline/bell-ringing.svg') : require('@tabler/icons/outline/bell.svg')}
         onClick={handleToggle}
         title={title}
         theme='outlined'
diff --git a/src/features/ui/components/theme-selector.tsx b/src/features/ui/components/theme-selector.tsx
index f11c19213..e1648437e 100644
--- a/src/features/ui/components/theme-selector.tsx
+++ b/src/features/ui/components/theme-selector.tsx
@@ -22,13 +22,13 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
   const themeIconSrc = useMemo(() => {
     switch (value) {
       case 'system':
-        return require('@tabler/icons/device-desktop.svg');
+        return require('@tabler/icons/outline/device-desktop.svg');
       case 'light':
-        return require('@tabler/icons/sun.svg');
+        return require('@tabler/icons/outline/sun.svg');
       case 'dark':
-        return require('@tabler/icons/moon.svg');
+        return require('@tabler/icons/outline/moon.svg');
       case 'black':
-        return require('@tabler/icons/shadow.svg');
+        return require('@tabler/icons/outline/shadow.svg');
       default:
         return null;
     }
@@ -57,7 +57,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/chevron-down.svg')} className='h-4 w-4 text-gray-600 dark:text-gray-700' />
+          <Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='h-4 w-4 text-gray-600 dark:text-gray-700' />
         </div>
       </div>
     </label>
diff --git a/src/features/ui/components/who-to-follow-panel.tsx b/src/features/ui/components/who-to-follow-panel.tsx
index c5ab68369..8b6486a08 100644
--- a/src/features/ui/components/who-to-follow-panel.tsx
+++ b/src/features/ui/components/who-to-follow-panel.tsx
@@ -52,7 +52,7 @@ const WhoToFollowPanel = ({ limit }: IWhoToFollowPanel) => {
             key={suggestion.account}
             // @ts-ignore: TS thinks `id` is passed to <Account>, but it isn't
             id={suggestion.account}
-            actionIcon={require('@tabler/icons/x.svg')}
+            actionIcon={require('@tabler/icons/outline/x.svg')}
             actionTitle={intl.formatMessage(messages.dismissSuggestion)}
             onActionClick={handleDismiss}
           />
diff --git a/src/features/video/index.tsx b/src/features/video/index.tsx
index 1918fdef0..b9697f4ea 100644
--- a/src/features/video/index.tsx
+++ b/src/features/video/index.tsx
@@ -519,7 +519,7 @@ const Video: React.FC<IVideo> = ({
               onClick={togglePlay}
               autoFocus={autoFocus}
             >
-              <Icon src={paused ? require('@tabler/icons/player-play.svg') : require('@tabler/icons/player-pause.svg')} />
+              <Icon src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')} />
             </button>
 
             <button
@@ -529,7 +529,7 @@ const Video: React.FC<IVideo> = ({
               className='player-button'
               onClick={toggleMute}
             >
-              <Icon src={muted ? require('@tabler/icons/volume-3.svg') : require('@tabler/icons/volume.svg')} />
+              <Icon src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
             </button>
 
             <div className={clsx('video-player__volume', { active: hovered })} onMouseDown={handleVolumeMouseDown} ref={slider}>
@@ -562,7 +562,7 @@ const Video: React.FC<IVideo> = ({
               className='player-button'
               onClick={toggleFullscreen}
             >
-              <Icon src={fullscreen ? require('@tabler/icons/arrows-minimize.svg') : require('@tabler/icons/arrows-maximize.svg')} />
+              <Icon src={fullscreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')} />
             </button>
           </div>
         </div>
diff --git a/src/pages/group-page.tsx b/src/pages/group-page.tsx
index ab7bf6469..e2fbfccdd 100644
--- a/src/pages/group-page.tsx
+++ b/src/pages/group-page.tsx
@@ -34,7 +34,7 @@ const DeletedBlankslate = () => (
   <Stack space={4} className='py-10' alignItems='center'>
     <div className='rounded-full bg-danger-200 p-3 dark:bg-danger-400/20'>
       <Icon
-        src={require('@tabler/icons/trash.svg')}
+        src={require('@tabler/icons/outline/trash.svg')}
         className='h-6 w-6 text-danger-600 dark:text-danger-400'
       />
     </div>
@@ -52,7 +52,7 @@ const PrivacyBlankslate = () => (
   <Stack space={4} className='py-10' alignItems='center'>
     <div className='rounded-full bg-gray-200 p-3 dark:bg-gray-800'>
       <Icon
-        src={require('@tabler/icons/eye-off.svg')}
+        src={require('@tabler/icons/outline/eye-off.svg')}
         className='h-6 w-6 text-gray-600 dark:text-gray-600'
       />
     </div>
@@ -70,7 +70,7 @@ const BlockedBlankslate = ({ group }: { group: Group }) => (
   <Stack space={4} className='py-10' alignItems='center'>
     <div className='rounded-full bg-danger-200 p-3 dark:bg-danger-400/20'>
       <Icon
-        src={require('@tabler/icons/ban.svg')}
+        src={require('@tabler/icons/outline/ban.svg')}
         className='h-6 w-6 text-danger-600 dark:text-danger-400'
       />
     </div>
diff --git a/yarn.lock b/yarn.lock
index c4ed986bf..4d82d447b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2312,10 +2312,10 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
-"@tabler/icons@^2.0.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-2.4.0.tgz#34b1b0d818dc00926b956c3424bff48b89a5b439"
-  integrity sha512-JZY9Kk3UsQoqp7Rw/BuWw1PrkRwv5h0psjJBbj+Cn9UVyhdzr5vztg2mywXBAJ+jFBUL/pjnVcIvOzKFw4CXng==
+"@tabler/icons@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-3.1.0.tgz#d69d184eae572db6adb452b511562442133cc26d"
+  integrity sha512-CpZGyS1IVJKFcv88yZ2sYZIpWWhQ6oy76BQKQ5SF0fGgOqgyqKdBGG/YGyyMW632on37MX7VqQIMTzN/uQqmFg==
 
 "@tailwindcss/aspect-ratio@^0.4.2":
   version "0.4.2"