diff --git a/app/soapbox/actions/moderation.tsx b/app/soapbox/actions/moderation.tsx
index 69342277b..ea5861eca 100644
--- a/app/soapbox/actions/moderation.tsx
+++ b/app/soapbox/actions/moderation.tsx
@@ -44,7 +44,7 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm =
     const name = state.accounts.get(accountId)!.username;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/user-off.svg'),
+      icon: require('@tabler/icons/user-off.svg'),
       heading: intl.formatMessage(messages.deactivateUserHeading, { acct }),
       message: intl.formatMessage(messages.deactivateUserPrompt, { acct }),
       confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }),
@@ -83,7 +83,7 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
     const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/user-minus.svg'),
+      icon: require('@tabler/icons/user-minus.svg'),
       heading: intl.formatMessage(messages.deleteUserHeading, { acct }),
       message,
       confirm,
@@ -106,7 +106,7 @@ const rejectUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
     const name = state.accounts.get(accountId)!.username;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/user-off.svg'),
+      icon: require('@tabler/icons/user-off.svg'),
       heading: intl.formatMessage(messages.rejectUserHeading, { acct }),
       message: intl.formatMessage(messages.rejectUserPrompt, { acct }),
       confirm: intl.formatMessage(messages.rejectUserConfirm, { name }),
@@ -127,7 +127,7 @@ const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensiti
     const acct = state.accounts.get(accountId)!.acct;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/alert-triangle.svg'),
+      icon: require('@tabler/icons/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),
@@ -148,7 +148,7 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
     const acct = state.accounts.get(accountId)!.acct;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/trash.svg'),
+      icon: require('@tabler/icons/trash.svg'),
       heading: intl.formatMessage(messages.deleteStatusHeading),
       message: intl.formatMessage(messages.deleteStatusPrompt, { acct }),
       confirm: intl.formatMessage(messages.deleteStatusConfirm),
diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index 2d53e6da8..efa8b423c 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -227,7 +227,7 @@ const Account = ({
                 <>
                   <Text tag='span' theme='muted' size='sm'>&middot;</Text>
 
-                  <Icon className='h-5 w-5 stroke-[1.35]' src={require('@tabler/icons/icons/pencil.svg')} />
+                  <Icon className='h-5 w-5 stroke-[1.35]' src={require('@tabler/icons/pencil.svg')} />
                 </>
               ) : null}
             </HStack>
diff --git a/app/soapbox/components/account_search.tsx b/app/soapbox/components/account_search.tsx
index 3acda1152..adbb5501d 100644
--- a/app/soapbox/components/account_search.tsx
+++ b/app/soapbox/components/account_search.tsx
@@ -70,8 +70,8 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
         />
       </label>
       <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-        <Icon src={require('@tabler/icons/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty() })} />
-        <Icon src={require('@tabler/icons/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
+        <Icon src={require('@tabler/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty() })} />
+        <Icon src={require('@tabler/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
       </div>
     </div>
   );
diff --git a/app/soapbox/components/birthday_input.tsx b/app/soapbox/components/birthday_input.tsx
index a1dc36c88..e263fb02e 100644
--- a/app/soapbox/components/birthday_input.tsx
+++ b/app/soapbox/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'
-            src={require('@tabler/icons/icons/chevron-left.svg')}
+            src={require('@tabler/icons/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'
-            src={require('@tabler/icons/icons/chevron-right.svg')}
+            src={require('@tabler/icons/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'
-            src={require('@tabler/icons/icons/chevron-left.svg')}
+            src={require('@tabler/icons/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'
-            src={require('@tabler/icons/icons/chevron-right.svg')}
+            src={require('@tabler/icons/chevron-right.svg')}
             onClick={increaseYear}
             disabled={nextYearButtonDisabled}
             aria-label={intl.formatMessage(messages.nextYear)}
diff --git a/app/soapbox/components/display-name.tsx b/app/soapbox/components/display-name.tsx
index d27d0efc7..1bb72a319 100644
--- a/app/soapbox/components/display-name.tsx
+++ b/app/soapbox/components/display-name.tsx
@@ -22,7 +22,7 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = fal
 
   const joinedAt = createdAt ? (
     <div className='account__joined-at'>
-      <Icon src={require('@tabler/icons/icons/clock.svg')} />
+      <Icon src={require('@tabler/icons/clock.svg')} />
       <RelativeTimestamp timestamp={createdAt} />
     </div>
   ) : null;
diff --git a/app/soapbox/components/domain.tsx b/app/soapbox/components/domain.tsx
index 005848c89..22c8272de 100644
--- a/app/soapbox/components/domain.tsx
+++ b/app/soapbox/components/domain.tsx
@@ -21,7 +21,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
 
   // const onBlockDomain = () => {
   //   dispatch(openModal('CONFIRM', {
-  //     icon: require('@tabler/icons/icons/ban.svg'),
+  //     icon: require('@tabler/icons/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),
@@ -41,7 +41,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
         </span>
 
         <div className='domain__buttons'>
-          <IconButton active src={require('@tabler/icons/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
+          <IconButton active src={require('@tabler/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
         </div>
       </div>
     </div>
diff --git a/app/soapbox/components/dropdown_menu.tsx b/app/soapbox/components/dropdown_menu.tsx
index 957583b60..ed8d87c16 100644
--- a/app/soapbox/components/dropdown_menu.tsx
+++ b/app/soapbox/components/dropdown_menu.tsx
@@ -366,7 +366,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
   }
 
   render() {
-    const { src = require('@tabler/icons/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children } = this.props;
+    const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children } = this.props;
     const open = this.state.id === openDropdownId;
 
     return (
diff --git a/app/soapbox/components/error_boundary.tsx b/app/soapbox/components/error_boundary.tsx
index c1025d465..f28fecd0c 100644
--- a/app/soapbox/components/error_boundary.tsx
+++ b/app/soapbox/components/error_boundary.tsx
@@ -120,7 +120,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
               {logo ? (
                 <img className='h-12' src={logo} alt={siteTitle} />
               ) : (
-                <SvgIcon className='h-12 w-12' src={require('@tabler/icons/icons/home.svg')} alt={siteTitle} />
+                <SvgIcon className='h-12 w-12' src={require('@tabler/icons/home.svg')} alt={siteTitle} />
               )}
             </a>
           </div>
diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index e7d858334..23ff05086 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -54,7 +54,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick }) => {
         <div className='flex flex-row items-center text-gray-500 dark:text-gray-400'>
           {children}
 
-          <Icon src={require('@tabler/icons/icons/chevron-right.svg')} className='ml-1' />
+          <Icon src={require('@tabler/icons/chevron-right.svg')} className='ml-1' />
         </div>
       ) : renderChildren()}
     </Comp>
diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 5e528d4be..4f16f5a73 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -149,7 +149,7 @@ class Item extends React.PureComponent {
       const attachmentIcon = (
         <Icon
           className='h-16 w-16 text-gray-800 dark:text-gray-200'
-          src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type'])] || require('@tabler/icons/icons/paperclip.svg')}
+          src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type'])] || require('@tabler/icons/paperclip.svg')}
         />
       );
 
@@ -602,7 +602,7 @@ class MediaGallery extends React.PureComponent {
             (visible || compact) ? (
               <Button
                 text={intl.formatMessage(messages.toggle_visible)}
-                icon={visible ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}
+                icon={visible ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
                 onClick={this.handleOpen}
                 theme='transparent'
                 size='sm'
@@ -617,7 +617,7 @@ class MediaGallery extends React.PureComponent {
                     </Text>
                   </div>
 
-                  <Button type='button' theme='primary' size='sm' icon={require('@tabler/icons/icons/eye.svg')}>
+                  <Button type='button' theme='primary' size='sm' icon={require('@tabler/icons/eye.svg')}>
                     <FormattedMessage id='status.sensitive_warning.action' defaultMessage='Show content' />
                   </Button>
                 </div>
diff --git a/app/soapbox/components/modal_root.js b/app/soapbox/components/modal_root.js
index 842b66ba6..7eb25b9aa 100644
--- a/app/soapbox/components/modal_root.js
+++ b/app/soapbox/components/modal_root.js
@@ -78,7 +78,7 @@ class ModalRoot extends React.PureComponent {
 
     if (hasComposeContent && type === 'COMPOSE') {
       onOpenModal('CONFIRM', {
-        icon: require('@tabler/icons/icons/trash.svg'),
+        icon: require('@tabler/icons/trash.svg'),
         heading: isEditing ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' /> : <FormattedMessage id='confirmations.delete.heading' defaultMessage='Delete post' />,
         message: isEditing ? <FormattedMessage id='confirmations.cancel_editing.message' defaultMessage='Are you sure you want to cancel editing this post? All changes will be lost.' /> : <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this post?' />,
         confirm: intl.formatMessage(messages.confirm),
diff --git a/app/soapbox/components/polls/poll-option.tsx b/app/soapbox/components/polls/poll-option.tsx
index 9b3da5cfa..b242f649b 100644
--- a/app/soapbox/components/polls/poll-option.tsx
+++ b/app/soapbox/components/polls/poll-option.tsx
@@ -85,7 +85,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
             aria-label={option.title}
           >
             {active && (
-              <Icon src={require('@tabler/icons/icons/check.svg')} className='text-white dark:text-primary-900 w-4 h-4' />
+              <Icon src={require('@tabler/icons/check.svg')} className='text-white dark:text-primary-900 w-4 h-4' />
             )}
           </span>
         </div>
@@ -138,7 +138,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
             <HStack space={2} alignItems='center' className='relative'>
               {voted ? (
                 <Icon
-                  src={require('@tabler/icons/icons/circle-check.svg')}
+                  src={require('@tabler/icons/circle-check.svg')}
                   alt={intl.formatMessage(messages.voted)}
                   className='text-primary-600 dark:text-primary-800 dark:fill-white w-4 h-4'
                 />
diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx
index 5d6eb526e..4c48e85a1 100644
--- a/app/soapbox/components/quoted-status.tsx
+++ b/app/soapbox/components/quoted-status.tsx
@@ -116,7 +116,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   if (onCancel) {
     actions = {
       onActionClick: handleClose,
-      actionIcon: require('@tabler/icons/icons/x.svg'),
+      actionIcon: require('@tabler/icons/x.svg'),
       actionAlignment: 'top',
       actionTitle: intl.formatMessage(messages.cancel),
     };
diff --git a/app/soapbox/components/scroll-top-button.tsx b/app/soapbox/components/scroll-top-button.tsx
index 3652296ef..37be35ee6 100644
--- a/app/soapbox/components/scroll-top-button.tsx
+++ b/app/soapbox/components/scroll-top-button.tsx
@@ -84,7 +84,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
   return (
     <div className={classes}>
       <a className='flex items-center bg-primary-600 hover:bg-primary-700 hover:scale-105 active:scale-100 transition-transform text-white rounded-full px-4 py-2 space-x-1.5 cursor-pointer whitespace-nowrap' onClick={handleClick}>
-        <Icon src={require('@tabler/icons/icons/arrow-bar-to-up.svg')} />
+        <Icon src={require('@tabler/icons/arrow-bar-to-up.svg')} />
 
         {(count > 0) && (
           <Text theme='inherit' size='sm'>
diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx
index f4cf64e49..b2bbc941f 100644
--- a/app/soapbox/components/sidebar-navigation.tsx
+++ b/app/soapbox/components/sidebar-navigation.tsx
@@ -31,7 +31,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/follow_requests',
           text: <FormattedMessage id='navigation_bar.follow_requests' defaultMessage='Follow requests' />,
-          icon: require('@tabler/icons/icons/user-plus.svg'),
+          icon: require('@tabler/icons/user-plus.svg'),
           count: followRequestsCount,
         });
       }
@@ -40,7 +40,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/bookmarks',
           text: <FormattedMessage id='column.bookmarks' defaultMessage='Bookmarks' />,
-          icon: require('@tabler/icons/icons/bookmark.svg'),
+          icon: require('@tabler/icons/bookmark.svg'),
         });
       }
 
@@ -48,14 +48,14 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/lists',
           text: <FormattedMessage id='column.lists' defaultMessage='Lists' />,
-          icon: require('@tabler/icons/icons/list.svg'),
+          icon: require('@tabler/icons/list.svg'),
         });
       }
 
       if (settings.get('isDeveloper')) {
         menu.push({
           to: '/developers',
-          icon: require('@tabler/icons/icons/code.svg'),
+          icon: require('@tabler/icons/code.svg'),
           text: <FormattedMessage id='navigation.developers' defaultMessage='Developers' />,
         });
       }
@@ -63,7 +63,7 @@ const SidebarNavigation = () => {
       if (account.staff) {
         menu.push({
           to: '/soapbox/admin',
-          icon: require('@tabler/icons/icons/dashboard.svg'),
+          icon: require('@tabler/icons/dashboard.svg'),
           text: <FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />,
           count: dashboardCount,
         });
@@ -77,7 +77,7 @@ const SidebarNavigation = () => {
     if (features.publicTimeline) {
       menu.push({
         to: '/timeline/local',
-        icon: features.federating ? require('@tabler/icons/icons/users.svg') : require('@tabler/icons/icons/world.svg'),
+        icon: features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg'),
         text: features.federating ? instance.title : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />,
       });
     }
@@ -101,7 +101,7 @@ const SidebarNavigation = () => {
       return (
         <SidebarNavigationLink
           to='/chats'
-          icon={require('@tabler/icons/icons/messages.svg')}
+          icon={require('@tabler/icons/messages.svg')}
           count={chatsCount}
           text={<FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' />}
         />
@@ -112,7 +112,7 @@ const SidebarNavigation = () => {
       return (
         <SidebarNavigationLink
           to='/messages'
-          icon={require('@tabler/icons/icons/mail.svg')}
+          icon={require('@tabler/icons/mail.svg')}
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
         />
       );
@@ -126,13 +126,13 @@ const SidebarNavigation = () => {
       <div className='flex flex-col space-y-2'>
         <SidebarNavigationLink
           to='/'
-          icon={require('@tabler/icons/icons/home.svg')}
+          icon={require('@tabler/icons/home.svg')}
           text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
         />
 
         <SidebarNavigationLink
           to='/search'
-          icon={require('@tabler/icons/icons/search.svg')}
+          icon={require('@tabler/icons/search.svg')}
           text={<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />}
         />
 
@@ -140,7 +140,7 @@ const SidebarNavigation = () => {
           <>
             <SidebarNavigationLink
               to='/notifications'
-              icon={require('@tabler/icons/icons/bell.svg')}
+              icon={require('@tabler/icons/bell.svg')}
               count={notificationCount}
               text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
             />
@@ -149,13 +149,13 @@ const SidebarNavigation = () => {
 
             <SidebarNavigationLink
               to={`/@${account.acct}`}
-              icon={require('@tabler/icons/icons/user.svg')}
+              icon={require('@tabler/icons/user.svg')}
               text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
             />
 
             <SidebarNavigationLink
               to='/settings'
-              icon={require('@tabler/icons/icons/settings.svg')}
+              icon={require('@tabler/icons/settings.svg')}
               text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
             />
           </>
@@ -164,7 +164,7 @@ const SidebarNavigation = () => {
         {menu.length > 0 && (
           <DropdownMenu items={menu}>
             <SidebarNavigationLink
-              icon={require('@tabler/icons/icons/dots-circle-horizontal.svg')}
+              icon={require('@tabler/icons/dots-circle-horizontal.svg')}
               count={dashboardCount}
               text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
             />
diff --git a/app/soapbox/components/sidebar_menu.tsx b/app/soapbox/components/sidebar_menu.tsx
index 2940c5bfa..787c8ed76 100644
--- a/app/soapbox/components/sidebar_menu.tsx
+++ b/app/soapbox/components/sidebar_menu.tsx
@@ -158,7 +158,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 <IconButton
                   title='close'
                   onClick={handleClose}
-                  src={require('@tabler/icons/icons/x.svg')}
+                  src={require('@tabler/icons/x.svg')}
                   ref={closeButtonRef}
                   className='text-gray-400 hover:text-gray-600'
                 />
@@ -177,7 +177,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                       </Text>
 
                       <Icon
-                        src={require('@tabler/icons/icons/chevron-down.svg')}
+                        src={require('@tabler/icons/chevron-down.svg')}
                         className={classNames('text-black dark:text-white transition-transform', {
                           'rotate-180': switcher,
                         })}
@@ -190,7 +190,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                       {otherAccounts.map(account => renderAccount(account))}
 
                       <NavLink className='flex py-2 space-x-1' to='/login/add' onClick={handleClose}>
-                        <Icon className='dark:text-white' src={require('@tabler/icons/icons/plus.svg')} />
+                        <Icon className='dark:text-white' src={require('@tabler/icons/plus.svg')} />
                         <Text>{intl.formatMessage(messages.addAccount)}</Text>
                       </NavLink>
                     </div>
@@ -208,7 +208,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                 <SidebarLink
                   to={`/@${account.acct}`}
-                  icon={require('@tabler/icons/icons/user.svg')}
+                  icon={require('@tabler/icons/user.svg')}
                   text={intl.formatMessage(messages.profile)}
                   onClick={onClose}
                 />
@@ -216,7 +216,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 {features.bookmarks && (
                   <SidebarLink
                     to='/bookmarks'
-                    icon={require('@tabler/icons/icons/bookmark.svg')}
+                    icon={require('@tabler/icons/bookmark.svg')}
                     text={intl.formatMessage(messages.bookmarks)}
                     onClick={onClose}
                   />
@@ -225,7 +225,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 {features.lists && (
                   <SidebarLink
                     to='/lists'
-                    icon={require('@tabler/icons/icons/list.svg')}
+                    icon={require('@tabler/icons/list.svg')}
                     text={intl.formatMessage(messages.lists)}
                     onClick={onClose}
                   />
@@ -234,7 +234,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 {settings.get('isDeveloper') && (
                   <SidebarLink
                     to='/developers'
-                    icon={require('@tabler/icons/icons/code.svg')}
+                    icon={require('@tabler/icons/code.svg')}
                     text={intl.formatMessage(messages.developers)}
                     onClick={onClose}
                   />
@@ -245,7 +245,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to='/timeline/local'
-                    icon={features.federating ? require('@tabler/icons/icons/users.svg') : require('@tabler/icons/icons/world.svg')}
+                    icon={features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg')}
                     text={features.federating ? instance.title : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
                     onClick={onClose}
                   />
@@ -264,21 +264,21 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                 <SidebarLink
                   to='/blocks'
-                  icon={require('@tabler/icons/icons/ban.svg')}
+                  icon={require('@tabler/icons/ban.svg')}
                   text={intl.formatMessage(messages.blocks)}
                   onClick={onClose}
                 />
 
                 <SidebarLink
                   to='/mutes'
-                  icon={require('@tabler/icons/icons/circle-x.svg')}
+                  icon={require('@tabler/icons/circle-x.svg')}
                   text={intl.formatMessage(messages.mutes)}
                   onClick={onClose}
                 />
 
                 <SidebarLink
                   to='/settings/preferences'
-                  icon={require('@tabler/icons/icons/settings.svg')}
+                  icon={require('@tabler/icons/settings.svg')}
                   text={intl.formatMessage(messages.preferences)}
                   onClick={onClose}
                 />
@@ -286,7 +286,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 {features.federating && (
                   <SidebarLink
                     to='/domain_blocks'
-                    icon={require('@tabler/icons/icons/ban.svg')}
+                    icon={require('@tabler/icons/ban.svg')}
                     text={intl.formatMessage(messages.domainBlocks)}
                     onClick={onClose}
                   />
@@ -295,7 +295,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 {features.filters && (
                   <SidebarLink
                     to='/filters'
-                    icon={require('@tabler/icons/icons/filter.svg')}
+                    icon={require('@tabler/icons/filter.svg')}
                     text={intl.formatMessage(messages.filters)}
                     onClick={onClose}
                   />
@@ -304,7 +304,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 {account.admin && (
                   <SidebarLink
                     to='/soapbox/config'
-                    icon={require('@tabler/icons/icons/settings.svg')}
+                    icon={require('@tabler/icons/settings.svg')}
                     text={intl.formatMessage(messages.soapboxConfig)}
                     onClick={onClose}
                   />
@@ -313,7 +313,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 {features.import && (
                   <SidebarLink
                     to='/settings/import'
-                    icon={require('@tabler/icons/icons/cloud-upload.svg')}
+                    icon={require('@tabler/icons/cloud-upload.svg')}
                     text={intl.formatMessage(messages.importData)}
                     onClick={onClose}
                   />
@@ -323,7 +323,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                 <SidebarLink
                   to='/logout'
-                  icon={require('@tabler/icons/icons/logout.svg')}
+                  icon={require('@tabler/icons/logout.svg')}
                   text={intl.formatMessage(messages.logout)}
                   onClick={onClickLogOut}
                 />
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 90d7e13df..a7a775427 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -344,7 +344,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
       prepend = (
         <div className='pt-4 px-4'>
           <HStack alignItems='center' space={1}>
-            <Icon src={require('@tabler/icons/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
+            <Icon src={require('@tabler/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
 
             <Text size='sm' theme='muted' weight='medium'>
               <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
@@ -363,7 +363,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
           onClick={(event) => event.stopPropagation()}
           className='hidden sm:flex items-center text-gray-500 text-xs font-medium space-x-1 hover:underline'
         >
-          <Icon src={require('@tabler/icons/icons/repeat.svg')} className='text-green-600' />
+          <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
 
           <HStack alignItems='center'>
             <FormattedMessage
@@ -386,7 +386,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
             onClick={(event) => event.stopPropagation()}
             className='flex items-center text-gray-500 text-xs font-medium space-x-1 hover:underline'
           >
-            <Icon src={require('@tabler/icons/icons/repeat.svg')} className='text-green-600' />
+            <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
 
             <span>
               <FormattedMessage
diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx
index e2e3a0ed4..fe79fb2db 100644
--- a/app/soapbox/components/status_action_bar.tsx
+++ b/app/soapbox/components/status_action_bar.tsx
@@ -377,21 +377,21 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     menu.push({
       text: intl.formatMessage(messages.open),
       action: this.handleOpen,
-      icon: require('@tabler/icons/icons/arrows-vertical.svg'),
+      icon: require('@tabler/icons/arrows-vertical.svg'),
     });
 
     if (publicStatus) {
       menu.push({
         text: intl.formatMessage(messages.copy),
         action: this.handleCopy,
-        icon: require('@tabler/icons/icons/link.svg'),
+        icon: require('@tabler/icons/link.svg'),
       });
 
       if (features.embeds) {
         menu.push({
           text: intl.formatMessage(messages.embed),
           action: this.handleEmbed,
-          icon: require('@tabler/icons/icons/share.svg'),
+          icon: require('@tabler/icons/share.svg'),
         });
       }
     }
@@ -404,7 +404,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       menu.push({
         text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
         action: this.handleBookmarkClick,
-        icon: require(status.bookmarked ? '@tabler/icons/icons/bookmark-off.svg' : '@tabler/icons/icons/bookmark.svg'),
+        icon: require(status.bookmarked ? '@tabler/icons/bookmark-off.svg' : '@tabler/icons/bookmark.svg'),
       });
     }
 
@@ -414,7 +414,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       menu.push({
         text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
         action: this.handleConversationMuteClick,
-        icon: require(mutingConversation ? '@tabler/icons/icons/bell.svg' : '@tabler/icons/icons/bell-off.svg'),
+        icon: require(mutingConversation ? '@tabler/icons/bell.svg' : '@tabler/icons/bell-off.svg'),
       });
       menu.push(null);
     }
@@ -424,14 +424,14 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         menu.push({
           text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
           action: this.handlePinClick,
-          icon: require(mutingConversation ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'),
+          icon: require(mutingConversation ? '@tabler/icons/pinned-off.svg' : '@tabler/icons/pin.svg'),
         });
       } else {
         if (status.visibility === 'private') {
           menu.push({
             text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
             action: this.handleReblogClick,
-            icon: require('@tabler/icons/icons/repeat.svg'),
+            icon: require('@tabler/icons/repeat.svg'),
           });
         }
       }
@@ -439,20 +439,20 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       menu.push({
         text: intl.formatMessage(messages.delete),
         action: this.handleDeleteClick,
-        icon: require('@tabler/icons/icons/trash.svg'),
+        icon: require('@tabler/icons/trash.svg'),
         destructive: true,
       });
       if (features.editStatuses) {
         menu.push({
           text: intl.formatMessage(messages.edit),
           action: this.handleEditClick,
-          icon: require('@tabler/icons/icons/edit.svg'),
+          icon: require('@tabler/icons/edit.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.redraft),
           action: this.handleRedraftClick,
-          icon: require('@tabler/icons/icons/edit.svg'),
+          icon: require('@tabler/icons/edit.svg'),
           destructive: true,
         });
       }
@@ -460,20 +460,20 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       menu.push({
         text: intl.formatMessage(messages.mention, { name: username }),
         action: this.handleMentionClick,
-        icon: require('@tabler/icons/icons/at.svg'),
+        icon: require('@tabler/icons/at.svg'),
       });
 
       // if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) {
       //   menu.push({
       //     text: intl.formatMessage(messages.chat, { name: username }),
       //     action: this.handleChatClick,
-      //     icon: require('@tabler/icons/icons/messages.svg'),
+      //     icon: require('@tabler/icons/messages.svg'),
       //   });
       // } else {
       //   menu.push({
       //     text: intl.formatMessage(messages.direct, { name: username }),
       //     action: this.handleDirectClick,
-      //     icon: require('@tabler/icons/icons/mail.svg'),
+      //     icon: require('@tabler/icons/mail.svg'),
       //   });
       // }
 
@@ -481,17 +481,17 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       menu.push({
         text: intl.formatMessage(messages.mute, { name: username }),
         action: this.handleMuteClick,
-        icon: require('@tabler/icons/icons/circle-x.svg'),
+        icon: require('@tabler/icons/circle-x.svg'),
       });
       menu.push({
         text: intl.formatMessage(messages.block, { name: username }),
         action: this.handleBlockClick,
-        icon: require('@tabler/icons/icons/ban.svg'),
+        icon: require('@tabler/icons/ban.svg'),
       });
       menu.push({
         text: intl.formatMessage(messages.report, { name: username }),
         action: this.handleReport,
-        icon: require('@tabler/icons/icons/flag.svg'),
+        icon: require('@tabler/icons/flag.svg'),
       });
     }
 
@@ -502,13 +502,13 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         menu.push({
           text: intl.formatMessage(messages.admin_account, { name: username }),
           href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
-          icon: require('@tabler/icons/icons/gavel.svg'),
+          icon: require('@tabler/icons/gavel.svg'),
           action: (event) => event.stopPropagation(),
         });
         menu.push({
           text: intl.formatMessage(messages.admin_status),
           href: `/pleroma/admin/#/statuses/${status.id}/`,
-          icon: require('@tabler/icons/icons/pencil.svg'),
+          icon: require('@tabler/icons/pencil.svg'),
           action: (event) => event.stopPropagation(),
         });
       }
@@ -516,25 +516,25 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       menu.push({
         text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
         action: this.handleToggleStatusSensitivity,
-        icon: require('@tabler/icons/icons/alert-triangle.svg'),
+        icon: require('@tabler/icons/alert-triangle.svg'),
       });
 
       if (!ownAccount) {
         menu.push({
           text: intl.formatMessage(messages.deactivateUser, { name: username }),
           action: this.handleDeactivateUser,
-          icon: require('@tabler/icons/icons/user-off.svg'),
+          icon: require('@tabler/icons/user-off.svg'),
         });
         menu.push({
           text: intl.formatMessage(messages.deleteUser, { name: username }),
           action: this.handleDeleteUser,
-          icon: require('@tabler/icons/icons/user-minus.svg'),
+          icon: require('@tabler/icons/user-minus.svg'),
           destructive: true,
         });
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: this.handleDeleteStatus,
-          icon: require('@tabler/icons/icons/trash.svg'),
+          icon: require('@tabler/icons/trash.svg'),
           destructive: true,
         });
       }
@@ -545,13 +545,13 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     //   menu.push({
     //     text: intl.formatMessage(messages.group_remove_account),
     //     action: this.handleGroupRemoveAccount,
-    //     icon: require('@tabler/icons/icons/user-x.svg'),
+    //     icon: require('@tabler/icons/user-x.svg'),
     //     destructive: true,
     //   });
     //   menu.push({
     //     text: intl.formatMessage(messages.group_remove_post),
     //     action: this.handleGroupRemovePost,
-    //     icon: require('@tabler/icons/icons/trash.svg'),
+    //     icon: require('@tabler/icons/trash.svg'),
     //     destructive: true,
     //   });
     // }
@@ -601,23 +601,23 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiReact || ''] || messages.favourite);
 
     const menu = this._makeMenu(publicStatus);
-    let reblogIcon = require('@tabler/icons/icons/repeat.svg');
+    let reblogIcon = require('@tabler/icons/repeat.svg');
     let replyTitle;
 
     if (status.visibility === 'direct') {
-      reblogIcon = require('@tabler/icons/icons/mail.svg');
+      reblogIcon = require('@tabler/icons/mail.svg');
     } else if (status.visibility === 'private') {
-      reblogIcon = require('@tabler/icons/icons/lock.svg');
+      reblogIcon = require('@tabler/icons/lock.svg');
     }
 
     const reblogMenu = [{
       text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
       action: this.handleReblogClick,
-      icon: require('@tabler/icons/icons/repeat.svg'),
+      icon: require('@tabler/icons/repeat.svg'),
     }, {
       text: intl.formatMessage(messages.quotePost),
       action: this.handleQuoteClick,
-      icon: require('@tabler/icons/icons/quote.svg'),
+      icon: require('@tabler/icons/quote.svg'),
     }];
 
     const reblogButton = (
@@ -644,7 +644,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       <div className='pt-4 flex flex-row space-x-2'>
         <StatusActionButton
           title={replyTitle}
-          icon={require('@tabler/icons/icons/message-circle-2.svg')}
+          icon={require('@tabler/icons/message-circle-2.svg')}
           onClick={this.handleReplyClick}
           count={replyCount}
         />
@@ -665,7 +665,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
           <EmojiButtonWrapper statusId={status.id}>
             <StatusActionButton
               title={meEmojiTitle}
-              icon={require('@tabler/icons/icons/heart.svg')}
+              icon={require('@tabler/icons/heart.svg')}
               filled
               color='accent'
               active={Boolean(meEmojiReact)}
@@ -676,7 +676,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         ) : (
           <StatusActionButton
             title={intl.formatMessage(messages.favourite)}
-            icon={require('@tabler/icons/icons/heart.svg')}
+            icon={require('@tabler/icons/heart.svg')}
             color='accent'
             filled
             onClick={this.handleFavouriteClick}
@@ -688,7 +688,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         {canShare && (
           <StatusActionButton
             title={intl.formatMessage(messages.share)}
-            icon={require('@tabler/icons/icons/upload.svg')}
+            icon={require('@tabler/icons/upload.svg')}
             onClick={this.handleShareClick}
           />
         )}
@@ -696,7 +696,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         <DropdownMenuContainer items={menu} status={status}>
           <StatusActionButton
             title={intl.formatMessage(messages.more)}
-            icon={require('@tabler/icons/icons/dots.svg')}
+            icon={require('@tabler/icons/dots.svg')}
           />
         </DropdownMenuContainer>
       </div>
diff --git a/app/soapbox/components/thumb_navigation.tsx b/app/soapbox/components/thumb_navigation.tsx
index adb89869f..e46f7c7c3 100644
--- a/app/soapbox/components/thumb_navigation.tsx
+++ b/app/soapbox/components/thumb_navigation.tsx
@@ -17,7 +17,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     if (features.chats) {
       return (
         <ThumbNavigationLink
-          src={require('@tabler/icons/icons/messages.svg')}
+          src={require('@tabler/icons/messages.svg')}
           text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
           to='/chats'
           exact
@@ -29,7 +29,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     if (features.directTimeline || features.conversations) {
       return (
         <ThumbNavigationLink
-          src={require('@tabler/icons/icons/mail.svg')}
+          src={require('@tabler/icons/mail.svg')}
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
           to='/messages'
           paths={['/messages', '/conversations']}
@@ -43,14 +43,14 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
   return (
     <div className='thumb-navigation'>
       <ThumbNavigationLink
-        src={require('@tabler/icons/icons/home.svg')}
+        src={require('@tabler/icons/home.svg')}
         text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
         to='/'
         exact
       />
 
       <ThumbNavigationLink
-        src={require('@tabler/icons/icons/search.svg')}
+        src={require('@tabler/icons/search.svg')}
         text={<FormattedMessage id='navigation.search' defaultMessage='Search' />}
         to='/search'
         exact
@@ -58,7 +58,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {account && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/icons/bell.svg')}
+          src={require('@tabler/icons/bell.svg')}
           text={<FormattedMessage id='navigation.notifications' defaultMessage='Alerts' />}
           to='/notifications'
           exact
@@ -70,7 +70,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {(account && account.staff) && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/icons/dashboard.svg')}
+          src={require('@tabler/icons/dashboard.svg')}
           text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
           to='/soapbox/admin'
           count={dashboardCount}
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 3eedaaf40..c876219f4 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -64,7 +64,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
 
     return (
       <Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2' aria-label={intl.formatMessage(messages.back)}>
-        <SvgIcon src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' />
+        <SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
     );
diff --git a/app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx b/app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx
index a1e269dd8..c56a6d190 100644
--- a/app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx
+++ b/app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx
@@ -5,7 +5,7 @@ import SvgIcon from '../svg-icon';
 
 describe('<SvgIcon />', () => {
   it('renders loading element with default size', () => {
-    render(<SvgIcon className='text-primary-500' src={require('@tabler/icons/icons/code.svg')} />);
+    render(<SvgIcon className='text-primary-500' src={require('@tabler/icons/code.svg')} />);
 
     const svg = screen.getByTestId('svg-icon-loader');
     expect(svg.getAttribute('width')).toBe('24');
diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 8ba0d6ff9..488f2733e 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -88,7 +88,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 className='text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 h-full px-2 focus:ring-primary-500 focus:ring-2'
               >
                 <SvgIcon
-                  src={revealed ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}
+                  src={revealed ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
                   className='h-4 w-4'
                 />
               </button>
diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index 10f0976ec..259783539 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -59,7 +59,7 @@ const Modal: React.FC<IModal> = ({
   cancelAction,
   cancelText,
   children,
-  closeIcon = require('@tabler/icons/icons/x.svg'),
+  closeIcon = require('@tabler/icons/x.svg'),
   closePosition = 'right',
   confirmationAction,
   confirmationDisabled,
diff --git a/app/soapbox/components/ui/streamfield/streamfield.tsx b/app/soapbox/components/ui/streamfield/streamfield.tsx
index 902ae2873..140a194b6 100644
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/app/soapbox/components/ui/streamfield/streamfield.tsx
@@ -74,7 +74,7 @@ const Streamfield: React.FC<IStreamfield> = ({
                 <IconButton
                   iconClassName='w-4 h-4'
                   className='bg-transparent text-gray-400 hover:text-gray-600'
-                  src={require('@tabler/icons/icons/x.svg')}
+                  src={require('@tabler/icons/x.svg')}
                   onClick={() => onRemoveItem(i)}
                   title={intl.formatMessage(messages.remove)}
                 />
@@ -86,7 +86,7 @@ const Streamfield: React.FC<IStreamfield> = ({
 
       {onAddItem && (
         <Button
-          icon={require('@tabler/icons/icons/plus.svg')}
+          icon={require('@tabler/icons/plus.svg')}
           onClick={onAddItem}
           disabled={values.length >= maxItems}
           theme='ghost'
diff --git a/app/soapbox/components/ui/widget/widget.tsx b/app/soapbox/components/ui/widget/widget.tsx
index dee12198d..7b966a6ef 100644
--- a/app/soapbox/components/ui/widget/widget.tsx
+++ b/app/soapbox/components/ui/widget/widget.tsx
@@ -36,7 +36,7 @@ const Widget: React.FC<IWidget> = ({
   title,
   children,
   onActionClick,
-  actionIcon = require('@tabler/icons/icons/arrow-right.svg'),
+  actionIcon = require('@tabler/icons/arrow-right.svg'),
   actionTitle,
   action,
 }): JSX.Element => {
diff --git a/app/soapbox/components/upload-progress.tsx b/app/soapbox/components/upload-progress.tsx
index d910747cb..a7996e1bf 100644
--- a/app/soapbox/components/upload-progress.tsx
+++ b/app/soapbox/components/upload-progress.tsx
@@ -15,7 +15,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
   return (
     <HStack alignItems='center' space={2}>
       <Icon
-        src={require('@tabler/icons/icons/cloud-upload.svg')}
+        src={require('@tabler/icons/cloud-upload.svg')}
         className='w-7 h-7 text-gray-500'
       />
 
diff --git a/app/soapbox/components/validation-checkmark.tsx b/app/soapbox/components/validation-checkmark.tsx
index 111066ccf..e606f450b 100644
--- a/app/soapbox/components/validation-checkmark.tsx
+++ b/app/soapbox/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/icons/check.svg') : require('@tabler/icons/icons/point.svg')}
+        src={isValid ? require('@tabler/icons/check.svg') : require('@tabler/icons/point.svg')}
         className={classNames({
           'w-4 h-4': true,
           'text-gray-400 fill-gray-400': !isValid,
diff --git a/app/soapbox/containers/account_container.js b/app/soapbox/containers/account_container.js
index 9b65f3b10..3ee72a60e 100644
--- a/app/soapbox/containers/account_container.js
+++ b/app/soapbox/containers/account_container.js
@@ -38,7 +38,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
       if (account.relationship?.following || account.relationship?.requested) {
         if (unfollowModal) {
           dispatch(openModal('CONFIRM', {
-            icon: require('@tabler/icons/icons/minus.svg'),
+            icon: require('@tabler/icons/minus.svg'),
             heading: <FormattedMessage id='confirmations.unfollow.heading' defaultMessage='Unfollow {name}' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
             message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
             confirm: intl.formatMessage(messages.unfollowConfirm),
diff --git a/app/soapbox/containers/status_container.js b/app/soapbox/containers/status_container.js
index cf8b0b089..987774aa7 100644
--- a/app/soapbox/containers/status_container.js
+++ b/app/soapbox/containers/status_container.js
@@ -163,7 +163,7 @@ const mapDispatchToProps = (dispatch, { intl }) => {
           dispatch(deleteStatus(status.get('id'), withRedraft));
         } else {
           dispatch(openModal('CONFIRM', {
-            icon: withRedraft ? require('@tabler/icons/icons/edit.svg') : require('@tabler/icons/icons/trash.svg'),
+            icon: withRedraft ? require('@tabler/icons/edit.svg') : require('@tabler/icons/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),
@@ -204,7 +204,7 @@ const mapDispatchToProps = (dispatch, { intl }) => {
     onBlock(status) {
       const account = status.get('account');
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/icons/ban.svg'),
+        icon: require('@tabler/icons/ban.svg'),
         heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
         message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
         confirm: intl.formatMessage(messages.blockConfirm),
diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index c7da47cf1..081d346bd 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -175,7 +175,7 @@ class Header extends ImmutablePureComponent {
       menu.push({
         text: intl.formatMessage(messages.share, { name: account.get('username') }),
         action: this.handleShare,
-        icon: require('@tabler/icons/icons/upload.svg'),
+        icon: require('@tabler/icons/upload.svg'),
       });
       menu.push(null);
     }
@@ -184,53 +184,53 @@ class Header extends ImmutablePureComponent {
       menu.push({
         text: intl.formatMessage(messages.edit_profile),
         to: '/settings/profile',
-        icon: require('@tabler/icons/icons/user.svg'),
+        icon: require('@tabler/icons/user.svg'),
       });
       menu.push({
         text: intl.formatMessage(messages.preferences),
         to: '/settings',
-        icon: require('@tabler/icons/icons/settings.svg'),
+        icon: require('@tabler/icons/settings.svg'),
       });
       // menu.push(null);
       // menu.push({
       //   text: intl.formatMessage(messages.follow_requests),
       //   to: '/follow_requests',
-      //   icon: require('@tabler/icons/icons/user-plus.svg'),
+      //   icon: require('@tabler/icons/user-plus.svg'),
       // });
       menu.push(null);
       menu.push({
         text: intl.formatMessage(messages.mutes),
         to: '/mutes',
-        icon: require('@tabler/icons/icons/circle-x.svg'),
+        icon: require('@tabler/icons/circle-x.svg'),
       });
       menu.push({
         text: intl.formatMessage(messages.blocks),
         to: '/blocks',
-        icon: require('@tabler/icons/icons/ban.svg'),
+        icon: require('@tabler/icons/ban.svg'),
       });
       // menu.push({
       //   text: intl.formatMessage(messages.domain_blocks),
       //   to: '/domain_blocks',
-      //   icon: require('@tabler/icons/icons/ban.svg'),
+      //   icon: require('@tabler/icons/ban.svg'),
       // });
     } else {
       menu.push({
         text: intl.formatMessage(messages.mention, { name: account.get('username') }),
         action: this.props.onMention,
-        icon: require('@tabler/icons/icons/at.svg'),
+        icon: require('@tabler/icons/at.svg'),
       });
 
       // if (account.getIn(['pleroma', 'accepts_chat_messages'], false) === true) {
       //   menu.push({
       //     text: intl.formatMessage(messages.chat, { name: account.get('username') }),
       //     action: this.props.onChat,
-      //     icon: require('@tabler/icons/icons/messages.svg'),
+      //     icon: require('@tabler/icons/messages.svg'),
       //   });
       // } else {
       //   menu.push({
       //     text: intl.formatMessage(messages.direct, { name: account.get('username') }),
       //     action: this.props.onDirect,
-      //     icon: require('@tabler/icons/icons/mail.svg'),
+      //     icon: require('@tabler/icons/mail.svg'),
       //   });
       // }
 
@@ -239,13 +239,13 @@ class Header extends ImmutablePureComponent {
           menu.push({
             text: intl.formatMessage(messages.hideReblogs, { name: account.get('username') }),
             action: this.props.onReblogToggle,
-            icon: require('@tabler/icons/icons/repeat.svg'),
+            icon: require('@tabler/icons/repeat.svg'),
           });
         } else {
           menu.push({
             text: intl.formatMessage(messages.showReblogs, { name: account.get('username') }),
             action: this.props.onReblogToggle,
-            icon: require('@tabler/icons/icons/repeat.svg'),
+            icon: require('@tabler/icons/repeat.svg'),
           });
         }
 
@@ -253,7 +253,7 @@ class Header extends ImmutablePureComponent {
           menu.push({
             text: intl.formatMessage(messages.add_or_remove_from_list),
             action: this.props.onAddToList,
-            icon: require('@tabler/icons/icons/list.svg'),
+            icon: require('@tabler/icons/list.svg'),
           });
         }
 
@@ -263,7 +263,7 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.add_or_remove_from_list),
           action: this.props.onAddToList,
-          icon: require('@tabler/icons/icons/list.svg'),
+          icon: require('@tabler/icons/list.svg'),
         });
       }
 
@@ -271,7 +271,7 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.removeFromFollowers),
           action: this.props.onRemoveFromFollowers,
-          icon: require('@tabler/icons/icons/user-x.svg'),
+          icon: require('@tabler/icons/user-x.svg'),
         });
       }
 
@@ -279,13 +279,13 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.unmute, { name: account.get('username') }),
           action: this.props.onMute,
-          icon: require('@tabler/icons/icons/circle-x.svg'),
+          icon: require('@tabler/icons/circle-x.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.mute, { name: account.get('username') }),
           action: this.props.onMute,
-          icon: require('@tabler/icons/icons/circle-x.svg'),
+          icon: require('@tabler/icons/circle-x.svg'),
         });
       }
 
@@ -293,20 +293,20 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.unblock, { name: account.get('username') }),
           action: this.props.onBlock,
-          icon: require('@tabler/icons/icons/ban.svg'),
+          icon: require('@tabler/icons/ban.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.block, { name: account.get('username') }),
           action: this.props.onBlock,
-          icon: require('@tabler/icons/icons/ban.svg'),
+          icon: require('@tabler/icons/ban.svg'),
         });
       }
 
       menu.push({
         text: intl.formatMessage(messages.report, { name: account.get('username') }),
         action: this.props.onReport,
-        icon: require('@tabler/icons/icons/flag.svg'),
+        icon: require('@tabler/icons/flag.svg'),
       });
     }
 
@@ -319,13 +319,13 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.unblockDomain, { domain }),
           action: this.props.onUnblockDomain,
-          icon: require('@tabler/icons/icons/ban.svg'),
+          icon: require('@tabler/icons/ban.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.blockDomain, { domain }),
           action: this.props.onBlockDomain,
-          icon: require('@tabler/icons/icons/ban.svg'),
+          icon: require('@tabler/icons/ban.svg'),
         });
       }
     }
@@ -338,7 +338,7 @@ class Header extends ImmutablePureComponent {
           text: intl.formatMessage(messages.admin_account, { name: account.get('username') }),
           to: `/pleroma/admin/#/users/${account.id}/`,
           newTab: true,
-          icon: require('@tabler/icons/icons/gavel.svg'),
+          icon: require('@tabler/icons/gavel.svg'),
         });
       }
 
@@ -347,34 +347,34 @@ class Header extends ImmutablePureComponent {
           menu.push({
             text: intl.formatMessage(messages.demoteToModerator, { name: account.get('username') }),
             action: this.props.onPromoteToModerator,
-            icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
+            icon: require('@tabler/icons/arrow-up-circle.svg'),
           });
           menu.push({
             text: intl.formatMessage(messages.demoteToUser, { name: account.get('username') }),
             action: this.props.onDemoteToUser,
-            icon: require('@tabler/icons/icons/arrow-down-circle.svg'),
+            icon: require('@tabler/icons/arrow-down-circle.svg'),
           });
         } else if (account.moderator) {
           menu.push({
             text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }),
             action: this.props.onPromoteToAdmin,
-            icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
+            icon: require('@tabler/icons/arrow-up-circle.svg'),
           });
           menu.push({
             text: intl.formatMessage(messages.demoteToUser, { name: account.get('username') }),
             action: this.props.onDemoteToUser,
-            icon: require('@tabler/icons/icons/arrow-down-circle.svg'),
+            icon: require('@tabler/icons/arrow-down-circle.svg'),
           });
         } else {
           menu.push({
             text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }),
             action: this.props.onPromoteToAdmin,
-            icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
+            icon: require('@tabler/icons/arrow-up-circle.svg'),
           });
           menu.push({
             text: intl.formatMessage(messages.promoteToModerator, { name: account.get('username') }),
             action: this.props.onPromoteToModerator,
-            icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
+            icon: require('@tabler/icons/arrow-up-circle.svg'),
           });
         }
       }
@@ -383,13 +383,13 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.unverifyUser, { name: account.username }),
           action: this.props.onUnverifyUser,
-          icon: require('@tabler/icons/icons/check.svg'),
+          icon: require('@tabler/icons/check.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.verifyUser, { name: account.username }),
           action: this.props.onVerifyUser,
-          icon: require('@tabler/icons/icons/check.svg'),
+          icon: require('@tabler/icons/check.svg'),
         });
       }
 
@@ -397,13 +397,13 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.removeDonor, { name: account.username }),
           action: this.props.onRemoveDonor,
-          icon: require('@tabler/icons/icons/coin.svg'),
+          icon: require('@tabler/icons/coin.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.setDonor, { name: account.username }),
           action: this.props.onSetDonor,
-          icon: require('@tabler/icons/icons/coin.svg'),
+          icon: require('@tabler/icons/coin.svg'),
         });
       }
 
@@ -412,13 +412,13 @@ class Header extends ImmutablePureComponent {
           menu.push({
             text: intl.formatMessage(messages.unsuggestUser, { name: account.get('username') }),
             action: this.props.onUnsuggestUser,
-            icon: require('@tabler/icons/icons/user-x.svg'),
+            icon: require('@tabler/icons/user-x.svg'),
           });
         } else {
           menu.push({
             text: intl.formatMessage(messages.suggestUser, { name: account.get('username') }),
             action: this.props.onSuggestUser,
-            icon: require('@tabler/icons/icons/user-check.svg'),
+            icon: require('@tabler/icons/user-check.svg'),
           });
         }
       }
@@ -427,11 +427,11 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.deactivateUser, { name: account.get('username') }),
           action: this.props.onDeactivateUser,
-          icon: require('@tabler/icons/icons/user-off.svg'),
+          icon: require('@tabler/icons/user-off.svg'),
         });
         menu.push({
           text: intl.formatMessage(messages.deleteUser, { name: account.get('username') }),
-          icon: require('@tabler/icons/icons/user-minus.svg'),
+          icon: require('@tabler/icons/user-minus.svg'),
         });
       }
     }
@@ -497,7 +497,7 @@ class Header extends ImmutablePureComponent {
     if (canChat) {
       return (
         <IconButton
-          src={require('@tabler/icons/icons/messages.svg')}
+          src={require('@tabler/icons/messages.svg')}
           onClick={this.props.onChat}
           title={intl.formatMessage(messages.chat, { name: account.get('username') })}
         />
@@ -505,7 +505,7 @@ class Header extends ImmutablePureComponent {
     } else {
       return (
         <IconButton
-          src={require('@tabler/icons/icons/mail.svg')}
+          src={require('@tabler/icons/mail.svg')}
           onClick={this.props.onDirect}
           title={intl.formatMessage(messages.direct, { name: account.get('username') })}
           className='text-primary-700 bg-primary-100 hover:bg-primary-200 p-2'
@@ -525,7 +525,7 @@ class Header extends ImmutablePureComponent {
 
     return (
       <IconButton
-        src={require('@tabler/icons/icons/upload.svg')}
+        src={require('@tabler/icons/upload.svg')}
         onClick={this.handleShare}
         title={intl.formatMessage(messages.share, { name: account.get('username') })}
         className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 p-2'
@@ -602,7 +602,7 @@ class Header extends ImmutablePureComponent {
                   <Menu>
                     <MenuButton
                       as={IconButton}
-                      src={require('@tabler/icons/icons/dots.svg')}
+                      src={require('@tabler/icons/dots.svg')}
                       className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 p-2'
                       iconClassName='w-5 h-5'
                     />
diff --git a/app/soapbox/features/account_timeline/components/column_settings.js b/app/soapbox/features/account_timeline/components/column_settings.js
index 9f4ed2015..236fb4583 100644
--- a/app/soapbox/features/account_timeline/components/column_settings.js
+++ b/app/soapbox/features/account_timeline/components/column_settings.js
@@ -31,7 +31,7 @@ class ColumnSettings extends React.PureComponent {
             <FormattedMessage id='account.column_settings.title' defaultMessage='Account timeline settings' />
           </h1>
           <div className='column-settings__close'>
-            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
+            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/x.svg')} onClick={onClose} />
           </div>
         </div>
 
diff --git a/app/soapbox/features/account_timeline/containers/header_container.js b/app/soapbox/features/account_timeline/containers/header_container.js
index a0585c0c3..f7a8d7ba8 100644
--- a/app/soapbox/features/account_timeline/containers/header_container.js
+++ b/app/soapbox/features/account_timeline/containers/header_container.js
@@ -96,7 +96,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
       dispatch(unblockAccount(account.get('id')));
     } else {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/icons/ban.svg'),
+        icon: require('@tabler/icons/ban.svg'),
         heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
         message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
         confirm: intl.formatMessage(messages.blockConfirm),
@@ -164,7 +164,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onBlockDomain(domain) {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/ban.svg'),
+      icon: require('@tabler/icons/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),
diff --git a/app/soapbox/features/admin/components/report.tsx b/app/soapbox/features/admin/components/report.tsx
index 82ec5804e..fb1c5bf5d 100644
--- a/app/soapbox/features/admin/components/report.tsx
+++ b/app/soapbox/features/admin/components/report.tsx
@@ -40,11 +40,11 @@ const Report: React.FC<IReport> = ({ report }) => {
     return [{
       text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username as string }),
       action: handleDeactivateUser,
-      icon: require('@tabler/icons/icons/user-off.svg'),
+      icon: require('@tabler/icons/user-off.svg'),
     }, {
       text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username as string }),
       action: handleDeleteUser,
-      icon: require('@tabler/icons/icons/user-minus.svg'),
+      icon: require('@tabler/icons/user-minus.svg'),
     }];
   };
 
@@ -124,7 +124,7 @@ const Report: React.FC<IReport> = ({ report }) => {
           <FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
         </Button>
 
-        <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} />
+        <DropdownMenu items={menu} src={require('@tabler/icons/dots-vertical.svg')} />
       </HStack>
     </div>
   );
diff --git a/app/soapbox/features/admin/components/report_status.tsx b/app/soapbox/features/admin/components/report_status.tsx
index 7503675e4..8ec01792e 100644
--- a/app/soapbox/features/admin/components/report_status.tsx
+++ b/app/soapbox/features/admin/components/report_status.tsx
@@ -40,11 +40,11 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
     return [{
       text: intl.formatMessage(messages.viewStatus, { acct: `@${acct}` }),
       to: `/@${acct}/posts/${status.id}`,
-      icon: require('@tabler/icons/icons/pencil.svg'),
+      icon: require('@tabler/icons/pencil.svg'),
     }, {
       text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }),
       action: handleDeleteStatus,
-      icon: require('@tabler/icons/icons/trash.svg'),
+      icon: require('@tabler/icons/trash.svg'),
       destructive: true,
     }];
   };
@@ -123,7 +123,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
       <div className='admin-report__status-actions'>
         <DropdownMenu
           items={menu}
-          src={require('@tabler/icons/icons/dots-vertical.svg')}
+          src={require('@tabler/icons/dots-vertical.svg')}
         />
       </div>
     </div>
diff --git a/app/soapbox/features/admin/components/unapproved_account.tsx b/app/soapbox/features/admin/components/unapproved_account.tsx
index ffd76fc30..b5a08c956 100644
--- a/app/soapbox/features/admin/components/unapproved_account.tsx
+++ b/app/soapbox/features/admin/components/unapproved_account.tsx
@@ -52,8 +52,8 @@ const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
         <blockquote className='md'>{adminAccount?.invite_request || ''}</blockquote>
       </div>
       <div className='unapproved-account__actions'>
-        <IconButton src={require('@tabler/icons/icons/check.svg')} onClick={handleApprove} />
-        <IconButton src={require('@tabler/icons/icons/x.svg')} onClick={handleReject} />
+        <IconButton src={require('@tabler/icons/check.svg')} onClick={handleApprove} />
+        <IconButton src={require('@tabler/icons/x.svg')} onClick={handleReject} />
       </div>
     </div>
   );
diff --git a/app/soapbox/features/aliases/components/account.tsx b/app/soapbox/features/aliases/components/account.tsx
index adcd1b072..3d24c0543 100644
--- a/app/soapbox/features/aliases/components/account.tsx
+++ b/app/soapbox/features/aliases/components/account.tsx
@@ -48,7 +48,7 @@ const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
   if (!added && accountId !== me) {
     button = (
       <div className='account__relationship'>
-        <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
+        <IconButton src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
       </div>
     );
   }
diff --git a/app/soapbox/features/aliases/components/search.tsx b/app/soapbox/features/aliases/components/search.tsx
index 3720a6930..4d2a55a6a 100644
--- a/app/soapbox/features/aliases/components/search.tsx
+++ b/app/soapbox/features/aliases/components/search.tsx
@@ -54,7 +54,7 @@ const Search: React.FC = () => {
         />
 
         <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-          <Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
+          <Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
         </div>
       </label>
       <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
diff --git a/app/soapbox/features/audio/index.js b/app/soapbox/features/audio/index.js
index 067856abf..2a6732ec9 100644
--- a/app/soapbox/features/audio/index.js
+++ b/app/soapbox/features/audio/index.js
@@ -491,8 +491,8 @@ class Audio extends React.PureComponent {
         <div className='video-player__controls active'>
           <div className='video-player__buttons-bar'>
             <div className='video-player__buttons left'>
-              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon src={paused ? require('@tabler/icons/icons/player-play.svg') : require('@tabler/icons/icons/player-pause.svg')} /></button>
-              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon src={muted ? require('@tabler/icons/icons/volume-3.svg') : require('@tabler/icons/icons/volume.svg')} /></button>
+              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon src={paused ? require('@tabler/icons/player-play.svg') : require('@tabler/icons/player-pause.svg')} /></button>
+              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon src={muted ? require('@tabler/icons/volume-3.svg') : require('@tabler/icons/volume.svg')} /></button>
 
               <div className={classNames('video-player__volume', { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}>
                 <div className='video-player__volume__current' style={{ width: `${volume * 100}%`, backgroundColor: this._getAccentColor() }} />
@@ -522,7 +522,7 @@ class Audio extends React.PureComponent {
                 download
                 target='_blank'
               >
-                <Icon src={require('@tabler/icons/icons/download.svg')} />
+                <Icon src={require('@tabler/icons/download.svg')} />
               </a>
             </div>
           </div>
diff --git a/app/soapbox/features/auth_layout/index.tsx b/app/soapbox/features/auth_layout/index.tsx
index 87026e4b4..d4f6517bd 100644
--- a/app/soapbox/features/auth_layout/index.tsx
+++ b/app/soapbox/features/auth_layout/index.tsx
@@ -54,7 +54,7 @@ const AuthLayout = () => {
               <div className='relative z-10 ml-auto flex items-center'>
                 <Button
                   theme='link'
-                  icon={require('@tabler/icons/icons/user.svg')}
+                  icon={require('@tabler/icons/user.svg')}
                   to='/signup'
                 >
                   {intl.formatMessage(messages.register)}
diff --git a/app/soapbox/features/auth_login/components/registration_form.tsx b/app/soapbox/features/auth_login/components/registration_form.tsx
index eba70437a..bdf4bc05d 100644
--- a/app/soapbox/features/auth_login/components/registration_form.tsx
+++ b/app/soapbox/features/auth_login/components/registration_form.tsx
@@ -130,7 +130,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
     </>);
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/check.svg'),
+      icon: require('@tabler/icons/check.svg'),
       heading: needsConfirmation
         ? intl.formatMessage(messages.needsConfirmationHeader)
         : needsApproval
diff --git a/app/soapbox/features/backups/index.tsx b/app/soapbox/features/backups/index.tsx
index bfb2a3f4f..c74b1bf60 100644
--- a/app/soapbox/features/backups/index.tsx
+++ b/app/soapbox/features/backups/index.tsx
@@ -33,7 +33,7 @@ const Backups = () => {
     return [{
       text: intl.formatMessage(messages.create),
       action: handleCreateBackup,
-      icon: require('@tabler/icons/icons/plus.svg'),
+      icon: require('@tabler/icons/plus.svg'),
     }];
   };
 
diff --git a/app/soapbox/features/birthdays/account.tsx b/app/soapbox/features/birthdays/account.tsx
index eea3266e2..738ad5ec9 100644
--- a/app/soapbox/features/birthdays/account.tsx
+++ b/app/soapbox/features/birthdays/account.tsx
@@ -51,7 +51,7 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
             date: formattedBirthday,
           })}
         >
-          <Icon src={require('@tabler/icons/icons/ballon.svg')} />
+          <Icon src={require('@tabler/icons/ballon.svg')} />
           {formattedBirthday}
         </div>
       </div>
diff --git a/app/soapbox/features/chats/components/chat-box.tsx b/app/soapbox/features/chats/components/chat-box.tsx
index 0baabb43b..869764961 100644
--- a/app/soapbox/features/chats/components/chat-box.tsx
+++ b/app/soapbox/features/chats/components/chat-box.tsx
@@ -144,7 +144,7 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
         </div>
         <div className='chat-box__remove-attachment'>
           <IconButton
-            src={require('@tabler/icons/icons/x.svg')}
+            src={require('@tabler/icons/x.svg')}
             onClick={handleRemoveFile}
           />
         </div>
@@ -155,7 +155,7 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
   const renderActionButton = () => {
     return canSubmit() ? (
       <IconButton
-        src={require('@tabler/icons/icons/send.svg')}
+        src={require('@tabler/icons/send.svg')}
         title={intl.formatMessage(messages.send)}
         onClick={sendMessage}
       />
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 935a3707d..70f843ebd 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -219,7 +219,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
       {
         text: intl.formatMessage(messages.delete),
         action: handleDeleteMessage(chatMessage.chat_id, chatMessage.id),
-        icon: require('@tabler/icons/icons/trash.svg'),
+        icon: require('@tabler/icons/trash.svg'),
         destructive: true,
       },
     ];
@@ -228,7 +228,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
       menu.push({
         text: intl.formatMessage(messages.report),
         action: handleReportUser(chatMessage.account_id),
-        icon: require('@tabler/icons/icons/flag.svg'),
+        icon: require('@tabler/icons/flag.svg'),
       });
     }
 
@@ -251,7 +251,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
           <div className='chat-message__menu'>
             <DropdownMenuContainer
               items={menu}
-              src={require('@tabler/icons/icons/dots.svg')}
+              src={require('@tabler/icons/dots.svg')}
               title={intl.formatMessage(messages.more)}
             />
           </div>
diff --git a/app/soapbox/features/chats/components/chat-window.tsx b/app/soapbox/features/chats/components/chat-window.tsx
index 5a71f6598..8b30d3ba8 100644
--- a/app/soapbox/features/chats/components/chat-window.tsx
+++ b/app/soapbox/features/chats/components/chat-window.tsx
@@ -98,7 +98,7 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
           @{getAcct(account, displayFqn)}
         </button>
         <div className='pane__close'>
-          <IconButton src={require('@tabler/icons/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
+          <IconButton src={require('@tabler/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
         </div>
       </HStack>
       <div className='pane__content'>
diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index e2e4e90c1..13d2b7fee 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -44,7 +44,7 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
           {attachment && (
             <Icon
               className='chat__attachment-icon'
-              src={image ? require('@tabler/icons/icons/photo.svg') : require('@tabler/icons/icons/paperclip.svg')}
+              src={image ? require('@tabler/icons/photo.svg') : require('@tabler/icons/paperclip.svg')}
             />
           )}
           {content ? (
diff --git a/app/soapbox/features/community_timeline/components/column_settings.js b/app/soapbox/features/community_timeline/components/column_settings.js
index a5bf9a91f..52781f1f4 100644
--- a/app/soapbox/features/community_timeline/components/column_settings.js
+++ b/app/soapbox/features/community_timeline/components/column_settings.js
@@ -31,7 +31,7 @@ class ColumnSettings extends React.PureComponent {
             <FormattedMessage id='community.column_settings.title' defaultMessage='Local timeline settings' />
           </h1>
           <div className='column-settings__close'>
-            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
+            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/x.svg')} onClick={onClose} />
           </div>
         </div>
 
diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js
index 69dffd7de..66010cfd3 100644
--- a/app/soapbox/features/compose/components/compose_form.js
+++ b/app/soapbox/features/compose/components/compose_form.js
@@ -270,14 +270,14 @@ class ComposeForm extends ImmutablePureComponent {
     } else if (this.props.privacy === 'direct') {
       publishText = (
         <>
-          <Icon src={require('@tabler/icons/icons/mail.svg')} />
+          <Icon src={require('@tabler/icons/mail.svg')} />
           {intl.formatMessage(messages.message)}
         </>
       );
     } else if (this.props.privacy === 'private') {
       publishText = (
         <>
-          <Icon src={require('@tabler/icons/icons/lock.svg')} />
+          <Icon src={require('@tabler/icons/lock.svg')} />
           {intl.formatMessage(messages.publish)}
         </>
       );
diff --git a/app/soapbox/features/compose/components/emoji_picker_dropdown.js b/app/soapbox/features/compose/components/emoji_picker_dropdown.js
index ca1fff018..675d87de5 100644
--- a/app/soapbox/features/compose/components/emoji_picker_dropdown.js
+++ b/app/soapbox/features/compose/components/emoji_picker_dropdown.js
@@ -365,7 +365,7 @@ class EmojiPickerDropdown extends React.PureComponent {
             'pulse-loading': active && loading,
           })}
           alt='😀'
-          src={require('@tabler/icons/icons/mood-happy.svg')}
+          src={require('@tabler/icons/mood-happy.svg')}
           title={title}
           aria-label={title}
           aria-expanded={active}
diff --git a/app/soapbox/features/compose/components/markdown_button.tsx b/app/soapbox/features/compose/components/markdown_button.tsx
index 01b0620a0..7d0d56eb6 100644
--- a/app/soapbox/features/compose/components/markdown_button.tsx
+++ b/app/soapbox/features/compose/components/markdown_button.tsx
@@ -18,7 +18,7 @@ const MarkdownButton: React.FC<IMarkdownButton> = ({ active, onClick }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/icons/markdown.svg')}
+      icon={require('@tabler/icons/markdown.svg')}
       title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
       active={active}
       onClick={onClick}
diff --git a/app/soapbox/features/compose/components/poll_button.tsx b/app/soapbox/features/compose/components/poll_button.tsx
index c59ae3151..c7e087347 100644
--- a/app/soapbox/features/compose/components/poll_button.tsx
+++ b/app/soapbox/features/compose/components/poll_button.tsx
@@ -24,7 +24,7 @@ const PollButton: React.FC<IPollButton> = ({ active, unavailable, disabled, onCl
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/icons/chart-bar.svg')}
+      icon={require('@tabler/icons/chart-bar.svg')}
       title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
       active={active}
       disabled={disabled}
diff --git a/app/soapbox/features/compose/components/privacy_dropdown.tsx b/app/soapbox/features/compose/components/privacy_dropdown.tsx
index 94ebfcc09..7553c2c9d 100644
--- a/app/soapbox/features/compose/components/privacy_dropdown.tsx
+++ b/app/soapbox/features/compose/components/privacy_dropdown.tsx
@@ -161,10 +161,10 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
   const [placement, setPlacement] = useState('bottom');
 
   const options = [
-    { icon: require('@tabler/icons/icons/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
-    { icon: require('@tabler/icons/icons/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
-    { icon: require('@tabler/icons/icons/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
-    { icon: require('@tabler/icons/icons/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
+    { 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) },
   ];
 
   const handleToggle: React.MouseEventHandler<HTMLButtonElement> = (e) => {
diff --git a/app/soapbox/features/compose/components/reply_indicator.tsx b/app/soapbox/features/compose/components/reply_indicator.tsx
index f47b0494b..1e76e616e 100644
--- a/app/soapbox/features/compose/components/reply_indicator.tsx
+++ b/app/soapbox/features/compose/components/reply_indicator.tsx
@@ -26,7 +26,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
   if (!hideActions && onCancel) {
     actions = {
       onActionClick: handleClick,
-      actionIcon: require('@tabler/icons/icons/x.svg'),
+      actionIcon: require('@tabler/icons/x.svg'),
       actionAlignment: 'top',
       actionTitle: 'Dismiss',
     };
diff --git a/app/soapbox/features/compose/components/schedule_button.tsx b/app/soapbox/features/compose/components/schedule_button.tsx
index 8d1509884..44669e06f 100644
--- a/app/soapbox/features/compose/components/schedule_button.tsx
+++ b/app/soapbox/features/compose/components/schedule_button.tsx
@@ -28,7 +28,7 @@ const ScheduleButton: React.FC<IScheduleButton> = ({ active, unavailable, disabl
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/icons/calendar-stats.svg')}
+      icon={require('@tabler/icons/calendar-stats.svg')}
       title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
       active={active}
       disabled={disabled}
diff --git a/app/soapbox/features/compose/components/schedule_form.tsx b/app/soapbox/features/compose/components/schedule_form.tsx
index 5352b15ee..32137a71f 100644
--- a/app/soapbox/features/compose/components/schedule_form.tsx
+++ b/app/soapbox/features/compose/components/schedule_form.tsx
@@ -72,7 +72,7 @@ const ScheduleForm: React.FC = () => {
         <IconButton
           iconClassName='w-4 h-4'
           className='bg-transparent text-gray-400 hover:text-gray-600'
-          src={require('@tabler/icons/icons/x.svg')}
+          src={require('@tabler/icons/x.svg')}
           onClick={handleRemove}
           title={intl.formatMessage(messages.remove)}
         />
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index e70786cb7..b51164f80 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -105,7 +105,7 @@ const Search = (props: ISearch) => {
   const makeMenu = () => [
     {
       text: intl.formatMessage(messages.action, { query: value }),
-      icon: require('@tabler/icons/icons/search.svg'),
+      icon: require('@tabler/icons/search.svg'),
       action: handleSubmit,
     },
   ];
@@ -140,12 +140,12 @@ const Search = (props: ISearch) => {
           onClick={handleClear}
         >
           <SvgIcon
-            src={require('@tabler/icons/icons/search.svg')}
+            src={require('@tabler/icons/search.svg')}
             className={classNames('h-4 w-4 text-gray-400', { hidden: hasValue })}
           />
 
           <SvgIcon
-            src={require('@tabler/icons/icons/x.svg')}
+            src={require('@tabler/icons/x.svg')}
             className={classNames('h-4 w-4 text-gray-400', { hidden: !hasValue })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
diff --git a/app/soapbox/features/compose/components/spoiler_button.tsx b/app/soapbox/features/compose/components/spoiler_button.tsx
index 6d9c1aa76..0bc009406 100644
--- a/app/soapbox/features/compose/components/spoiler_button.tsx
+++ b/app/soapbox/features/compose/components/spoiler_button.tsx
@@ -18,7 +18,7 @@ const SpoilerButton: React.FC<ISpoilerButton> = ({ active, onClick }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/icons/alert-triangle.svg')}
+      icon={require('@tabler/icons/alert-triangle.svg')}
       title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
       active={active}
       onClick={onClick}
diff --git a/app/soapbox/features/compose/components/upload.tsx b/app/soapbox/features/compose/components/upload.tsx
index b637e262f..df64fdbb3 100644
--- a/app/soapbox/features/compose/components/upload.tsx
+++ b/app/soapbox/features/compose/components/upload.tsx
@@ -12,13 +12,13 @@ import Motion from '../../ui/util/optional_motion';
 
 import type { Map as ImmutableMap } from 'immutable';
 
-const bookIcon = require('@tabler/icons/icons/book.svg');
-const fileAnalyticsIcon = require('@tabler/icons/icons/file-analytics.svg');
-const fileCodeIcon = require('@tabler/icons/icons/file-code.svg');
-const fileTextIcon = require('@tabler/icons/icons/file-text.svg');
-const fileZipIcon = require('@tabler/icons/icons/file-zip.svg');
-const defaultIcon = require('@tabler/icons/icons/paperclip.svg');
-const presentationIcon = require('@tabler/icons/icons/presentation.svg');
+const bookIcon = require('@tabler/icons/book.svg');
+const fileAnalyticsIcon = require('@tabler/icons/file-analytics.svg');
+const fileCodeIcon = require('@tabler/icons/file-code.svg');
+const fileTextIcon = require('@tabler/icons/file-text.svg');
+const fileZipIcon = require('@tabler/icons/file-zip.svg');
+const defaultIcon = require('@tabler/icons/paperclip.svg');
+const presentationIcon = require('@tabler/icons/presentation.svg');
 
 export const MIMETYPE_ICONS: Record<string, string> = {
   'application/x-freearc': fileZipIcon,
@@ -157,7 +157,7 @@ const Upload: React.FC<IUpload> = (props) => {
             <div className={classNames('compose-form__upload__actions', { active })}>
               <IconButton
                 onClick={handleUndoClick}
-                src={require('@tabler/icons/icons/x.svg')}
+                src={require('@tabler/icons/x.svg')}
                 text={<FormattedMessage id='upload_form.undo' defaultMessage='Delete' />}
               />
 
@@ -165,7 +165,7 @@ const Upload: React.FC<IUpload> = (props) => {
               {(mediaType !== 'unknown' && Boolean(props.media.get('url'))) && (
                 <IconButton
                   onClick={handleOpenModal}
-                  src={require('@tabler/icons/icons/zoom-in.svg')}
+                  src={require('@tabler/icons/zoom-in.svg')}
                   text={<FormattedMessage id='upload_form.preview' defaultMessage='Preview' />}
                 />
               )}
diff --git a/app/soapbox/features/compose/components/upload_button.tsx b/app/soapbox/features/compose/components/upload_button.tsx
index cc29b61aa..eac158af5 100644
--- a/app/soapbox/features/compose/components/upload_button.tsx
+++ b/app/soapbox/features/compose/components/upload_button.tsx
@@ -48,8 +48,8 @@ const UploadButton: React.FC<IUploadButton> = ({
   }
 
   const src = onlyImages(attachmentTypes)
-    ? require('@tabler/icons/icons/photo.svg')
-    : require('@tabler/icons/icons/paperclip.svg');
+    ? require('@tabler/icons/photo.svg')
+    : require('@tabler/icons/paperclip.svg');
 
   return (
     <div>
diff --git a/app/soapbox/features/crypto_donate/components/crypto_address.tsx b/app/soapbox/features/crypto_donate/components/crypto_address.tsx
index afffd085a..1ecccf083 100644
--- a/app/soapbox/features/crypto_donate/components/crypto_address.tsx
+++ b/app/soapbox/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='text-gray-500 ml-1' href='#' onClick={handleModalClick}>
-            <Icon src={require('@tabler/icons/icons/qrcode.svg')} size={20} />
+            <Icon src={require('@tabler/icons/qrcode.svg')} size={20} />
           </a>
 
           {explorerUrl && (
             <a className='text-gray-500 ml-1' href={explorerUrl} target='_blank'>
-              <Icon src={require('@tabler/icons/icons/external-link.svg')} size={20} />
+              <Icon src={require('@tabler/icons/external-link.svg')} size={20} />
             </a>
           )}
         </HStack>
diff --git a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx b/app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx
index 3df4b40de..76b83c196 100644
--- a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx
+++ b/app/soapbox/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/icons/external-link.svg')} />
+            <Icon src={require('@tabler/icons/external-link.svg')} />
           </a>}
         </div>
       </div>
diff --git a/app/soapbox/features/developers/developers_menu.tsx b/app/soapbox/features/developers/developers_menu.tsx
index 876ce6d10..b4dfdd9c4 100644
--- a/app/soapbox/features/developers/developers_menu.tsx
+++ b/app/soapbox/features/developers/developers_menu.tsx
@@ -32,7 +32,7 @@ const Developers = () => {
     <Column label={intl.formatMessage(messages.heading)}>
       <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
         <Link to='/developers/apps/create' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <SvgIcon src={require('@tabler/icons/icons/apps.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/apps.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@@ -40,7 +40,7 @@ const Developers = () => {
         </Link>
 
         <Link to='/developers/settings_store' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <SvgIcon src={require('@tabler/icons/icons/code-plus.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/code-plus.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@@ -48,7 +48,7 @@ const Developers = () => {
         </Link>
 
         <Link to='/developers/timeline' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <SvgIcon src={require('@tabler/icons/icons/home.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/home.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
@@ -56,7 +56,7 @@ const Developers = () => {
         </Link>
 
         <Link to='/error' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <SvgIcon src={require('@tabler/icons/icons/mood-sad.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/mood-sad.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@@ -64,7 +64,7 @@ const Developers = () => {
         </Link>
 
         <Link to='/error/network' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <SvgIcon src={require('@tabler/icons/icons/refresh.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/refresh.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
@@ -72,7 +72,7 @@ const Developers = () => {
         </Link>
 
         <button onClick={leaveDevelopers} className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <SvgIcon src={require('@tabler/icons/icons/logout.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/logout.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />
diff --git a/app/soapbox/features/federation_restrictions/components/instance_restrictions.js b/app/soapbox/features/federation_restrictions/components/instance_restrictions.js
index 5539b845b..fc873da87 100644
--- a/app/soapbox/features/federation_restrictions/components/instance_restrictions.js
+++ b/app/soapbox/features/federation_restrictions/components/instance_restrictions.js
@@ -51,7 +51,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
     if (followers_only) {
       items.push((
         <Text key='followers_only'>
-          <Icon className='mr-2' src={require('@tabler/icons/icons/lock.svg')} />
+          <Icon className='mr-2' src={require('@tabler/icons/lock.svg')} />
           <FormattedMessage
             id='federation_restriction.followers_only'
             defaultMessage='Hidden except to followers'
@@ -61,7 +61,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
     } else if (federated_timeline_removal) {
       items.push((
         <Text key='federated_timeline_removal'>
-          <Icon className='mr-2' src={require('@tabler/icons/icons/lock-open.svg')} />
+          <Icon className='mr-2' src={require('@tabler/icons/lock-open.svg')} />
           <FormattedMessage
             id='federation_restriction.federated_timeline_removal'
             defaultMessage='Fediverse timeline removal'
@@ -73,7 +73,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
     if (fullMediaRemoval) {
       items.push((
         <Text key='full_media_removal'>
-          <Icon className='mr-2' src={require('@tabler/icons/icons/photo-off.svg')} />
+          <Icon className='mr-2' src={require('@tabler/icons/photo-off.svg')} />
           <FormattedMessage
             id='federation_restriction.full_media_removal'
             defaultMessage='Full media removal'
@@ -83,7 +83,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
     } else if (partialMediaRemoval) {
       items.push((
         <Text key='partial_media_removal'>
-          <Icon className='mr-2' src={require('@tabler/icons/icons/photo-off.svg')} />
+          <Icon className='mr-2' src={require('@tabler/icons/photo-off.svg')} />
           <FormattedMessage
             id='federation_restriction.partial_media_removal'
             defaultMessage='Partial media removal'
diff --git a/app/soapbox/features/federation_restrictions/components/restricted_instance.tsx b/app/soapbox/features/federation_restrictions/components/restricted_instance.tsx
index 789cb215f..4949bf0cb 100644
--- a/app/soapbox/features/federation_restrictions/components/restricted_instance.tsx
+++ b/app/soapbox/features/federation_restrictions/components/restricted_instance.tsx
@@ -31,7 +31,7 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
     >
       <a href='#' className='restricted-instance__header' onClick={toggleExpanded}>
         <div className='restricted-instance__icon'>
-          <Icon src={expanded ? require('@tabler/icons/icons/caret-down.svg') : require('@tabler/icons/icons/caret-right.svg')} />
+          <Icon src={expanded ? require('@tabler/icons/caret-down.svg') : require('@tabler/icons/caret-right.svg')} />
         </div>
         <div className='restricted-instance__host'>
           {remoteInstance.get('host')}
diff --git a/app/soapbox/features/feed-filtering/feed-carousel.tsx b/app/soapbox/features/feed-filtering/feed-carousel.tsx
index 6a50f39df..54bdd960d 100644
--- a/app/soapbox/features/feed-filtering/feed-carousel.tsx
+++ b/app/soapbox/features/feed-filtering/feed-carousel.tsx
@@ -26,7 +26,7 @@ const CarouselItem = ({ avatar }: { avatar: any }) => {
         <div className='block mx-auto relative w-14 h-14 rounded-full'>
           {isSelected && (
             <div className='absolute inset-0 bg-primary-600 bg-opacity-50 rounded-full flex items-center justify-center'>
-              <Icon src={require('@tabler/icons/icons/x.svg')} className='text-white h-6 w-6' />
+              <Icon src={require('@tabler/icons/x.svg')} className='text-white h-6 w-6' />
             </div>
           )}
 
@@ -104,7 +104,7 @@ const FeedCarousel = () => {
                 onClick={handlePrevPage}
                 className='bg-white/85 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
               >
-                <Icon src={require('@tabler/icons/icons/chevron-left.svg')} className='text-black dark:text-white h-6 w-6' />
+                <Icon src={require('@tabler/icons/chevron-left.svg')} className='text-black dark:text-white h-6 w-6' />
               </button>
             </div>
           </div>
@@ -140,7 +140,7 @@ const FeedCarousel = () => {
                 onClick={handleNextPage}
                 className='bg-white/85 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
               >
-                <Icon src={require('@tabler/icons/icons/chevron-right.svg')} className='text-black dark:text-white h-6 w-6' />
+                <Icon src={require('@tabler/icons/chevron-right.svg')} className='text-black dark:text-white h-6 w-6' />
               </button>
             </div>
           </div>
diff --git a/app/soapbox/features/follow_requests/components/account_authorize.tsx b/app/soapbox/features/follow_requests/components/account_authorize.tsx
index ff66df26b..4355b8f46 100644
--- a/app/soapbox/features/follow_requests/components/account_authorize.tsx
+++ b/app/soapbox/features/follow_requests/components/account_authorize.tsx
@@ -51,8 +51,8 @@ const AccountAuthorize: React.FC<IAccountAuthorize> = ({ id }) => {
       </div>
 
       <div className='account--panel'>
-        <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} src={require('@tabler/icons/icons/check.svg')} onClick={onAuthorize} /></div>
-        <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} src={require('@tabler/icons/icons/x.svg')} onClick={onReject} /></div>
+        <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} src={require('@tabler/icons/check.svg')} onClick={onAuthorize} /></div>
+        <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} src={require('@tabler/icons/x.svg')} onClick={onReject} /></div>
       </div>
     </div>
   );
diff --git a/app/soapbox/features/groups/removed_accounts/index.js b/app/soapbox/features/groups/removed_accounts/index.js
index e5d0dae41..10aa20333 100644
--- a/app/soapbox/features/groups/removed_accounts/index.js
+++ b/app/soapbox/features/groups/removed_accounts/index.js
@@ -82,7 +82,7 @@ class GroupRemovedAccounts extends ImmutablePureComponent {
           {accountIds.map(id => (<AccountContainer
             key={id}
             id={id}
-            actionIcon={require('@tabler/icons/icons/x.svg')}
+            actionIcon={require('@tabler/icons/x.svg')}
             onActionClick={this.handleOnActionClick(group, id)}
             actionTitle={intl.formatMessage(messages.remove)}
           />))}
diff --git a/app/soapbox/features/groups/timeline/components/header.js b/app/soapbox/features/groups/timeline/components/header.js
index 9cb26eae3..c08210afd 100644
--- a/app/soapbox/features/groups/timeline/components/header.js
+++ b/app/soapbox/features/groups/timeline/components/header.js
@@ -51,17 +51,17 @@ class Header extends ImmutablePureComponent {
       {
         text: intl.formatMessage(messages.edit),
         to: `/groups/${group.get('id')}/edit`,
-        icon: require('@tabler/icons/icons/edit.svg'),
+        icon: require('@tabler/icons/edit.svg'),
       },
       {
         text: intl.formatMessage(messages.removed_accounts),
         to: `/groups/${group.get('id')}/removed_accounts`,
-        icon: require('@tabler/icons/icons/trash.svg'),
+        icon: require('@tabler/icons/trash.svg'),
         destructive: true,
       },
     ];
 
-    return <DropdownMenuContainer items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />;
+    return <DropdownMenuContainer items={menu} src={require('@tabler/icons/dots-vertical.svg')} direction='right' />;
   }
 
   render() {
diff --git a/app/soapbox/features/home_timeline/components/column_settings.js b/app/soapbox/features/home_timeline/components/column_settings.js
index 78ca71919..a643c7e17 100644
--- a/app/soapbox/features/home_timeline/components/column_settings.js
+++ b/app/soapbox/features/home_timeline/components/column_settings.js
@@ -31,7 +31,7 @@ class ColumnSettings extends React.PureComponent {
             <FormattedMessage id='home.column_settings.title' defaultMessage='Home settings' />
           </h1>
           <div className='column-settings__close'>
-            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
+            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/x.svg')} onClick={onClose} />
           </div>
         </div>
 
diff --git a/app/soapbox/features/list_adder/components/list.tsx b/app/soapbox/features/list_adder/components/list.tsx
index 822833476..c9358c98e 100644
--- a/app/soapbox/features/list_adder/components/list.tsx
+++ b/app/soapbox/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/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/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/icons/list.svg')} fixedWidth />
+      <Icon src={require('@tabler/icons/list.svg')} fixedWidth />
       <span className='flex-grow'>
         {list.title}
       </span>
diff --git a/app/soapbox/features/list_editor/components/account.tsx b/app/soapbox/features/list_editor/components/account.tsx
index f3c52d9f3..79916ead2 100644
--- a/app/soapbox/features/list_editor/components/account.tsx
+++ b/app/soapbox/features/list_editor/components/account.tsx
@@ -34,9 +34,9 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
   let button;
 
   if (isAdded) {
-    button = <IconButton src={require('@tabler/icons/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={require('@tabler/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
diff --git a/app/soapbox/features/list_editor/components/search.tsx b/app/soapbox/features/list_editor/components/search.tsx
index edd78250f..4326ffa93 100644
--- a/app/soapbox/features/list_editor/components/search.tsx
+++ b/app/soapbox/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/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
+            <Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
           </div>
         </label>
 
diff --git a/app/soapbox/features/list_timeline/index.tsx b/app/soapbox/features/list_timeline/index.tsx
index f9d1e6f24..90f2be274 100644
--- a/app/soapbox/features/list_timeline/index.tsx
+++ b/app/soapbox/features/list_timeline/index.tsx
@@ -49,7 +49,7 @@ const ListTimeline: React.FC = () => {
 
   // const handleDeleteClick = () => {
   //   dispatch(openModal('CONFIRM', {
-  //     icon: require('@tabler/icons/icons/trash.svg'),
+  //     icon: require('@tabler/icons/trash.svg'),
   //     heading: intl.formatMessage(messages.deleteHeading),
   //     message: intl.formatMessage(messages.deleteMessage),
   //     confirm: intl.formatMessage(messages.deleteConfirm),
diff --git a/app/soapbox/features/lists/index.tsx b/app/soapbox/features/lists/index.tsx
index 187c05218..e2843f77a 100644
--- a/app/soapbox/features/lists/index.tsx
+++ b/app/soapbox/features/lists/index.tsx
@@ -93,12 +93,12 @@ const Lists: React.FC = () => {
       >
         {lists.map((list: any) => (
           <Link key={list.id} to={`/list/${list.id}`} className='flex items-center gap-1.5 p-2 text-black dark:text-white hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg'>
-            <Icon src={require('@tabler/icons/icons/list.svg')} fixedWidth />
+            <Icon src={require('@tabler/icons/list.svg')} fixedWidth />
             <span className='flex-grow'>
               {list.title}
             </span>
-            <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/icons/pencil.svg')} onClick={handleEditClick(list.id)} title={intl.formatMessage(messages.editList)} />
-            <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/icons/trash.svg')} onClick={handleDeleteClick(list.id)} title={intl.formatMessage(messages.deleteList)} />
+            <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/pencil.svg')} onClick={handleEditClick(list.id)} title={intl.formatMessage(messages.editList)} />
+            <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/trash.svg')} onClick={handleDeleteClick(list.id)} title={intl.formatMessage(messages.deleteList)} />
           </Link>
         ))}
       </ScrollableList>
diff --git a/app/soapbox/features/notifications/components/clear_column_button.js b/app/soapbox/features/notifications/components/clear_column_button.js
index ebb27cfbe..709deab78 100644
--- a/app/soapbox/features/notifications/components/clear_column_button.js
+++ b/app/soapbox/features/notifications/components/clear_column_button.js
@@ -12,7 +12,7 @@ export default class ClearColumnButton extends React.PureComponent {
 
   render() {
     return (
-      <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.props.onClick}><Icon src={require('@tabler/icons/icons/eraser.svg')} /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button>
+      <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.props.onClick}><Icon src={require('@tabler/icons/eraser.svg')} /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button>
     );
   }
 
diff --git a/app/soapbox/features/notifications/components/column_settings.js b/app/soapbox/features/notifications/components/column_settings.js
index 63093ec78..b71e8fa30 100644
--- a/app/soapbox/features/notifications/components/column_settings.js
+++ b/app/soapbox/features/notifications/components/column_settings.js
@@ -60,7 +60,7 @@ class ColumnSettings extends React.PureComponent {
             <FormattedMessage id='notifications.column_settings.title' defaultMessage='Notification settings' />
           </h1>
           <div className='column-settings__close'>
-            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
+            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/x.svg')} onClick={onClose} />
           </div>
         </div>
 
diff --git a/app/soapbox/features/notifications/components/filter_bar.js b/app/soapbox/features/notifications/components/filter_bar.js
index 6384b7788..81e370a3a 100644
--- a/app/soapbox/features/notifications/components/filter_bar.js
+++ b/app/soapbox/features/notifications/components/filter_bar.js
@@ -51,19 +51,19 @@ class NotificationFilterBar extends React.PureComponent {
       });
     } else {
       items.push({
-        text: <Icon src={require('@tabler/icons/icons/at.svg')} />,
+        text: <Icon src={require('@tabler/icons/at.svg')} />,
         title: intl.formatMessage(messages.mentions),
         action: this.onClick('mention'),
         name: 'mention',
       });
       items.push({
-        text: <Icon src={require('@tabler/icons/icons/thumb-up.svg')} />,
+        text: <Icon src={require('@tabler/icons/thumb-up.svg')} />,
         title: intl.formatMessage(messages.favourites),
         action: this.onClick('favourite'),
         name: 'favourite',
       });
       if (supportsEmojiReacts) items.push({
-        text: <Icon src={require('@tabler/icons/icons/mood-smile.svg')} />,
+        text: <Icon src={require('@tabler/icons/mood-smile.svg')} />,
         title: intl.formatMessage(messages.emoji_reacts),
         action: this.onClick('pleroma:emoji_reaction'),
         name: 'pleroma:emoji_reaction',
@@ -75,19 +75,19 @@ class NotificationFilterBar extends React.PureComponent {
         name: 'reblog',
       });
       items.push({
-        text: <Icon src={require('@tabler/icons/icons/chart-bar.svg')} />,
+        text: <Icon src={require('@tabler/icons/chart-bar.svg')} />,
         title: intl.formatMessage(messages.polls),
         action: this.onClick('poll'),
         name: 'poll',
       });
       items.push({
-        text: <Icon src={require('@tabler/icons/icons/home.svg')} />,
+        text: <Icon src={require('@tabler/icons/home.svg')} />,
         title: intl.formatMessage(messages.statuses),
         action: this.onClick('status'),
         name: 'status',
       });
       items.push({
-        text: <Icon src={require('@tabler/icons/icons/user-plus.svg')} />,
+        text: <Icon src={require('@tabler/icons/user-plus.svg')} />,
         title: intl.formatMessage(messages.follows),
         action: this.onClick('follow'),
         name: 'follow',
diff --git a/app/soapbox/features/notifications/components/follow_request.js b/app/soapbox/features/notifications/components/follow_request.js
index 4c386227e..be781a948 100644
--- a/app/soapbox/features/notifications/components/follow_request.js
+++ b/app/soapbox/features/notifications/components/follow_request.js
@@ -49,8 +49,8 @@ class FollowRequest extends ImmutablePureComponent {
           </Permalink>
 
           <div className='account__relationship'>
-            <IconButton title={intl.formatMessage(messages.authorize)} src={require('@tabler/icons/icons/check.svg')} onClick={onAuthorize} />
-            <IconButton title={intl.formatMessage(messages.reject)} src={require('@tabler/icons/icons/x.svg')} onClick={onReject} />
+            <IconButton title={intl.formatMessage(messages.authorize)} src={require('@tabler/icons/check.svg')} onClick={onAuthorize} />
+            <IconButton title={intl.formatMessage(messages.reject)} src={require('@tabler/icons/x.svg')} onClick={onReject} />
           </div>
         </div>
       </div>
diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx
index 4b67e5645..1073ff3aa 100644
--- a/app/soapbox/features/notifications/components/notification.tsx
+++ b/app/soapbox/features/notifications/components/notification.tsx
@@ -35,17 +35,17 @@ const buildLink = (account: Account): JSX.Element => (
 );
 
 const icons: Record<NotificationType, string> = {
-  follow: require('@tabler/icons/icons/user-plus.svg'),
-  follow_request: require('@tabler/icons/icons/user-plus.svg'),
-  mention: require('@tabler/icons/icons/at.svg'),
-  favourite: require('@tabler/icons/icons/heart.svg'),
-  reblog: require('@tabler/icons/icons/repeat.svg'),
-  status: require('@tabler/icons/icons/bell-ringing.svg'),
-  poll: require('@tabler/icons/icons/chart-bar.svg'),
-  move: require('@tabler/icons/icons/briefcase.svg'),
-  'pleroma:chat_mention': require('@tabler/icons/icons/messages.svg'),
-  'pleroma:emoji_reaction': require('@tabler/icons/icons/mood-happy.svg'),
-  user_approved: require('@tabler/icons/icons/user-plus.svg'),
+  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'),
+  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'),
 };
 
 const messages: Record<string | number | symbol, MessageDescriptor> = defineMessages({
diff --git a/app/soapbox/features/notifications/containers/column_settings_container.js b/app/soapbox/features/notifications/containers/column_settings_container.js
index 7e01f2fca..6375e59f5 100644
--- a/app/soapbox/features/notifications/containers/column_settings_container.js
+++ b/app/soapbox/features/notifications/containers/column_settings_container.js
@@ -42,7 +42,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onClear() {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/eraser.svg'),
+      icon: require('@tabler/icons/eraser.svg'),
       heading: intl.formatMessage(messages.clearHeading),
       message: intl.formatMessage(messages.clearMessage),
       confirm: intl.formatMessage(messages.clearConfirm),
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index 5278ed529..4593406bb 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -108,7 +108,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
                   })}
                   disabled={isSubmitting}
                 >
-                  <Icon src={require('@tabler/icons/icons/plus.svg')} className='text-white w-5 h-5' />
+                  <Icon src={require('@tabler/icons/plus.svg')} className='text-white w-5 h-5' />
                 </button>
 
                 <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
diff --git a/app/soapbox/features/onboarding/steps/completed-step.tsx b/app/soapbox/features/onboarding/steps/completed-step.tsx
index 60f6fba13..b6637589c 100644
--- a/app/soapbox/features/onboarding/steps/completed-step.tsx
+++ b/app/soapbox/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/icons/confetti.svg')} className='w-16 h-16 mx-auto text-primary-600 dark:text-primary-400' />
+        <Icon strokeWidth={1} src={require('@tabler/icons/confetti.svg')} className='w-16 h-16 mx-auto 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/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index 9efd311e8..5bc7d898f 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -120,7 +120,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
                     })}
                     disabled={isSubmitting}
                   >
-                    <Icon src={require('@tabler/icons/icons/plus.svg')} className='text-white w-5 h-5' />
+                    <Icon src={require('@tabler/icons/plus.svg')} className='text-white w-5 h-5' />
                   </button>
 
                   <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
diff --git a/app/soapbox/features/public_layout/components/header.tsx b/app/soapbox/features/public_layout/components/header.tsx
index 6598bc397..1813c7d8a 100644
--- a/app/soapbox/features/public_layout/components/header.tsx
+++ b/app/soapbox/features/public_layout/components/header.tsx
@@ -82,7 +82,7 @@ const Header = () => {
 
             <IconButton
               title='Open Menu'
-              src={require('@tabler/icons/icons/menu-2.svg')}
+              src={require('@tabler/icons/menu-2.svg')}
               onClick={open}
               className='md:hidden mr-4 bg-transparent text-gray-400 hover:text-gray-600'
             />
@@ -146,7 +146,7 @@ const Header = () => {
               <Link to='/reset-password'>
                 <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
                   <IconButton
-                    src={require('@tabler/icons/icons/help.svg')}
+                    src={require('@tabler/icons/help.svg')}
                     className='bg-transparent text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer'
                     iconClassName='w-5 h-5'
                   />
diff --git a/app/soapbox/features/public_timeline/components/column_settings.js b/app/soapbox/features/public_timeline/components/column_settings.js
index a2b2ca6f8..1d7022fa4 100644
--- a/app/soapbox/features/public_timeline/components/column_settings.js
+++ b/app/soapbox/features/public_timeline/components/column_settings.js
@@ -31,7 +31,7 @@ class ColumnSettings extends React.PureComponent {
             <FormattedMessage id='public.column_settings.title' defaultMessage='Fediverse timeline settings' />
           </h1>
           <div className='column-settings__close'>
-            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
+            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/x.svg')} onClick={onClose} />
           </div>
         </div>
 
diff --git a/app/soapbox/features/remote_timeline/index.tsx b/app/soapbox/features/remote_timeline/index.tsx
index d6443fc86..e19284891 100644
--- a/app/soapbox/features/remote_timeline/index.tsx
+++ b/app/soapbox/features/remote_timeline/index.tsx
@@ -68,7 +68,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
     <Column label={intl.formatMessage(messages.title)} heading={instance} transparent>
       {instance && <PinnedHostsPicker host={instance} />}
       {!pinned && <HStack className='mb-4 px-2' space={2}>
-        <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/icons/x.svg')} onClick={handleCloseClick} />
+        <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
         <Text>
           <FormattedMessage
             id='remote_timeline.filter_message'
diff --git a/app/soapbox/features/reply_mentions/account.tsx b/app/soapbox/features/reply_mentions/account.tsx
index fbfcdec0b..5ede1d013 100644
--- a/app/soapbox/features/reply_mentions/account.tsx
+++ b/app/soapbox/features/reply_mentions/account.tsx
@@ -42,9 +42,9 @@ const Account: React.FC<IAccount> = ({ accountId, author }) => {
   let button;
 
   if (added) {
-    button = <IconButton src={require('@tabler/icons/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={require('@tabler/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.tsx b/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.tsx
index 7b44805d4..dd73b8945 100644
--- a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.tsx
+++ b/app/soapbox/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/icons/calendar-stats.svg'),
+          icon: require('@tabler/icons/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/icons/x.svg')}
+        src={require('@tabler/icons/x.svg')}
         onClick={handleCancelClick}
       />
     </HStack>
diff --git a/app/soapbox/features/status/components/action-bar.tsx b/app/soapbox/features/status/components/action-bar.tsx
index 5ee95b39c..366c15a27 100644
--- a/app/soapbox/features/status/components/action-bar.tsx
+++ b/app/soapbox/features/status/components/action-bar.tsx
@@ -372,14 +372,14 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
       menu.push({
         text: intl.formatMessage(messages.copy),
         action: this.handleCopy,
-        icon: require('@tabler/icons/icons/link.svg'),
+        icon: require('@tabler/icons/link.svg'),
       });
 
       if (features.embeds) {
         menu.push({
           text: intl.formatMessage(messages.embed),
           action: this.handleEmbed,
-          icon: require('@tabler/icons/icons/share.svg'),
+          icon: require('@tabler/icons/share.svg'),
         });
       }
     }
@@ -389,7 +389,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
         menu.push({
           text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
           action: this.handleBookmarkClick,
-          icon: require(status.bookmarked ? '@tabler/icons/icons/bookmark-off.svg' : '@tabler/icons/icons/bookmark.svg'),
+          icon: require(status.bookmarked ? '@tabler/icons/bookmark-off.svg' : '@tabler/icons/bookmark.svg'),
         });
       }
 
@@ -400,7 +400,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
           menu.push({
             text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
             action: this.handlePinClick,
-            icon: require(mutingConversation ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'),
+            icon: require(mutingConversation ? '@tabler/icons/pinned-off.svg' : '@tabler/icons/pin.svg'),
           });
 
           menu.push(null);
@@ -408,7 +408,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
           menu.push({
             text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
             action: this.handleReblogClick,
-            icon: require('@tabler/icons/icons/repeat.svg'),
+            icon: require('@tabler/icons/repeat.svg'),
           });
 
           menu.push(null);
@@ -417,26 +417,26 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
         menu.push({
           text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
           action: this.handleConversationMuteClick,
-          icon: require(mutingConversation ? '@tabler/icons/icons/bell.svg' : '@tabler/icons/icons/bell-off.svg'),
+          icon: require(mutingConversation ? '@tabler/icons/bell.svg' : '@tabler/icons/bell-off.svg'),
         });
         menu.push(null);
         menu.push({
           text: intl.formatMessage(messages.delete),
           action: this.handleDeleteClick,
-          icon: require('@tabler/icons/icons/trash.svg'),
+          icon: require('@tabler/icons/trash.svg'),
           destructive: true,
         });
         if (features.editStatuses) {
           menu.push({
             text: intl.formatMessage(messages.edit),
             action: this.handleEditClick,
-            icon: require('@tabler/icons/icons/edit.svg'),
+            icon: require('@tabler/icons/edit.svg'),
           });
         } else {
           menu.push({
             text: intl.formatMessage(messages.redraft),
             action: this.handleRedraftClick,
-            icon: require('@tabler/icons/icons/edit.svg'),
+            icon: require('@tabler/icons/edit.svg'),
             destructive: true,
           });
         }
@@ -444,20 +444,20 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
         menu.push({
           text: intl.formatMessage(messages.mention, { name: username }),
           action: this.handleMentionClick,
-          icon: require('@tabler/icons/icons/at.svg'),
+          icon: require('@tabler/icons/at.svg'),
         });
 
         // if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) {
         //   menu.push({
         //     text: intl.formatMessage(messages.chat, { name: username }),
         //     action: this.handleChatClick,
-        //     icon: require('@tabler/icons/icons/messages.svg'),
+        //     icon: require('@tabler/icons/messages.svg'),
         //   });
         // } else {
         //   menu.push({
         //     text: intl.formatMessage(messages.direct, { name: username }),
         //     action: this.handleDirectClick,
-        //     icon: require('@tabler/icons/icons/mail.svg'),
+        //     icon: require('@tabler/icons/mail.svg'),
         //   });
         // }
 
@@ -465,17 +465,17 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
         menu.push({
           text: intl.formatMessage(messages.mute, { name: username }),
           action: this.handleMuteClick,
-          icon: require('@tabler/icons/icons/circle-x.svg'),
+          icon: require('@tabler/icons/circle-x.svg'),
         });
         menu.push({
           text: intl.formatMessage(messages.block, { name: username }),
           action: this.handleBlockClick,
-          icon: require('@tabler/icons/icons/ban.svg'),
+          icon: require('@tabler/icons/ban.svg'),
         });
         menu.push({
           text: intl.formatMessage(messages.report, { name: username }),
           action: this.handleReport,
-          icon: require('@tabler/icons/icons/flag.svg'),
+          icon: require('@tabler/icons/flag.svg'),
         });
       }
 
@@ -486,37 +486,37 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
           menu.push({
             text: intl.formatMessage(messages.admin_account, { name: username }),
             href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
-            icon: require('@tabler/icons/icons/gavel.svg'),
+            icon: require('@tabler/icons/gavel.svg'),
           });
           menu.push({
             text: intl.formatMessage(messages.admin_status),
             href: `/pleroma/admin/#/statuses/${status.id}/`,
-            icon: require('@tabler/icons/icons/pencil.svg'),
+            icon: require('@tabler/icons/pencil.svg'),
           });
         }
 
         menu.push({
           text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
           action: this.handleToggleStatusSensitivity,
-          icon: require('@tabler/icons/icons/alert-triangle.svg'),
+          icon: require('@tabler/icons/alert-triangle.svg'),
         });
 
         if (!ownAccount) {
           menu.push({
             text: intl.formatMessage(messages.deactivateUser, { name: username }),
             action: this.handleDeactivateUser,
-            icon: require('@tabler/icons/icons/user-off.svg'),
+            icon: require('@tabler/icons/user-off.svg'),
           });
           menu.push({
             text: intl.formatMessage(messages.deleteUser, { name: username }),
             action: this.handleDeleteUser,
-            icon: require('@tabler/icons/icons/user-minus.svg'),
+            icon: require('@tabler/icons/user-minus.svg'),
             destructive: true,
           });
           menu.push({
             text: intl.formatMessage(messages.deleteStatus),
             action: this.handleDeleteStatus,
-            icon: require('@tabler/icons/icons/trash.svg'),
+            icon: require('@tabler/icons/trash.svg'),
             destructive: true,
           });
         }
@@ -525,12 +525,12 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
 
     const canShare = ('share' in navigator) && status.visibility === 'public';
 
-    let reblogIcon = require('@tabler/icons/icons/repeat.svg');
+    let reblogIcon = require('@tabler/icons/repeat.svg');
 
     if (status.visibility === 'direct') {
-      reblogIcon = require('@tabler/icons/icons/mail.svg');
+      reblogIcon = require('@tabler/icons/mail.svg');
     } else if (status.visibility === 'private') {
-      reblogIcon = require('@tabler/icons/icons/lock.svg');
+      reblogIcon = require('@tabler/icons/lock.svg');
     }
 
     const reblog_disabled = (status.visibility === 'direct' || status.visibility === 'private');
@@ -538,11 +538,11 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
     const reblogMenu: Menu = [{
       text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
       action: this.handleReblogClick,
-      icon: require('@tabler/icons/icons/repeat.svg'),
+      icon: require('@tabler/icons/repeat.svg'),
     }, {
       text: intl.formatMessage(messages.quotePost),
       action: this.handleQuoteClick,
-      icon: require('@tabler/icons/icons/quote.svg'),
+      icon: require('@tabler/icons/quote.svg'),
     }];
 
     const reblogButton = (
@@ -563,7 +563,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
       <HStack justifyContent='between'>
         <IconButton
           title={intl.formatMessage(messages.reply)}
-          src={require('@tabler/icons/icons/message-circle-2.svg')}
+          src={require('@tabler/icons/message-circle-2.svg')}
           className='text-gray-400 hover:text-gray-600'
           onClick={this.handleReplyClick}
           text={intl.formatMessage(messages.reply)}
@@ -605,7 +605,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
                   'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
                 })}
                 title={meEmojiTitle}
-                src={require('@tabler/icons/icons/heart.svg')}
+                src={require('@tabler/icons/heart.svg')}
                 iconClassName={classNames({
                   'fill-accent-300': Boolean(meEmojiReact),
                 })}
@@ -620,7 +620,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
               'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
             })}
             title={meEmojiTitle}
-            src={require('@tabler/icons/icons/heart.svg')}
+            src={require('@tabler/icons/heart.svg')}
             iconClassName={classNames({
               'fill-accent-300': Boolean(meEmojiReact),
             })}
@@ -632,7 +632,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
         {canShare && (
           <IconButton
             title={intl.formatMessage(messages.share)}
-            src={require('@tabler/icons/icons/upload.svg')}
+            src={require('@tabler/icons/upload.svg')}
             className='text-gray-400 hover:text-gray-600'
             onClick={this.handleShare}
             text={intl.formatMessage(messages.share)}
@@ -640,7 +640,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
         )}
 
         <DropdownMenuContainer
-          src={require('@tabler/icons/icons/dots.svg')}
+          src={require('@tabler/icons/dots.svg')}
           items={menu}
           title='More'
         />
diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx
index 9aeeda38a..90ddc27e3 100644
--- a/app/soapbox/features/status/components/card.tsx
+++ b/app/soapbox/features/status/components/card.tsx
@@ -156,7 +156,7 @@ const Card: React.FC<ICard> = ({
     <div className='status-card__content cursor-default'>
       <span className='status-card__title'>{title}</span>
       <p className='status-card__description'>{trimmedDescription}</p>
-      <span className='status-card__host'><Icon src={require('@tabler/icons/icons/link.svg')} /> {card.provider_name}</span>
+      <span className='status-card__host'><Icon src={require('@tabler/icons/link.svg')} /> {card.provider_name}</span>
     </div>
   );
 
@@ -184,10 +184,10 @@ const Card: React.FC<ICard> = ({
     if (embedded) {
       embed = renderVideo();
     } else {
-      let iconVariant = require('@tabler/icons/icons/player-play.svg');
+      let iconVariant = require('@tabler/icons/player-play.svg');
 
       if (card.type === 'photo') {
-        iconVariant = require('@tabler/icons/icons/zoom-in.svg');
+        iconVariant = require('@tabler/icons/zoom-in.svg');
       }
 
       embed = (
@@ -214,7 +214,7 @@ const Card: React.FC<ICard> = ({
                     className='text-gray-400 hover:text-gray-600'
                   >
                     <Icon
-                      src={require('@tabler/icons/icons/external-link.svg')}
+                      src={require('@tabler/icons/external-link.svg')}
                       className='w-5 h-5 text-inherit'
                     />
                   </a>
@@ -242,7 +242,7 @@ const Card: React.FC<ICard> = ({
   } else {
     embed = (
       <div className='status-card__image status-card__image--empty'>
-        <Icon src={require('@tabler/icons/icons/file-text.svg')} />
+        <Icon src={require('@tabler/icons/file-text.svg')} />
       </div>
     );
   }
diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx
index 8745e6188..393fc58fe 100644
--- a/app/soapbox/features/status/components/detailed-status.tsx
+++ b/app/soapbox/features/status/components/detailed-status.tsx
@@ -120,9 +120,9 @@ class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedSt
     }
 
     if (status.visibility === 'direct') {
-      statusTypeIcon = <Icon src={require('@tabler/icons/icons/mail.svg')} />;
+      statusTypeIcon = <Icon src={require('@tabler/icons/mail.svg')} />;
     } else if (status.visibility === 'private') {
-      statusTypeIcon = <Icon src={require('@tabler/icons/icons/lock.svg')} />;
+      statusTypeIcon = <Icon src={require('@tabler/icons/lock.svg')} />;
     }
 
     return (
diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx
index 6f121780b..72cb061db 100644
--- a/app/soapbox/features/status/components/status-interaction-bar.tsx
+++ b/app/soapbox/features/status/components/status-interaction-bar.tsx
@@ -73,7 +73,7 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
         <HStack space={0.5} alignItems='center'>
           <IconButton
             className='text-success-600 cursor-pointer'
-            src={require('@tabler/icons/icons/repeat.svg')}
+            src={require('@tabler/icons/repeat.svg')}
             role='presentation'
             onClick={handleOpenReblogsModal}
           />
@@ -104,7 +104,7 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
               'text-accent-300': true,
               'cursor-default': !features.exposableReactions,
             })}
-            src={require('@tabler/icons/icons/heart.svg')}
+            src={require('@tabler/icons/heart.svg')}
             iconClassName='fill-accent-300'
             role='presentation'
             onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}
diff --git a/app/soapbox/features/status/containers/detailed_status_container.js b/app/soapbox/features/status/containers/detailed_status_container.js
index a88d9e7cd..be3b22d43 100644
--- a/app/soapbox/features/status/containers/detailed_status_container.js
+++ b/app/soapbox/features/status/containers/detailed_status_container.js
@@ -135,7 +135,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
         dispatch(deleteStatus(status.get('id'), withRedraft));
       } else {
         dispatch(openModal('CONFIRM', {
-          icon: withRedraft ? require('@tabler/icons/icons/edit.svg') : require('@tabler/icons/icons/trash.svg'),
+          icon: withRedraft ? require('@tabler/icons/edit.svg') : require('@tabler/icons/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),
@@ -172,7 +172,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   onBlock(status) {
     const account = status.get('account');
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/ban.svg'),
+      icon: require('@tabler/icons/ban.svg'),
       heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
       message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
       confirm: intl.formatMessage(messages.blockConfirm),
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index b27be7e5b..cc0ce6fcc 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -321,7 +321,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
         dispatch(deleteStatus(status.id, withRedraft));
       } else {
         dispatch(openModal('CONFIRM', {
-          icon: withRedraft ? require('@tabler/icons/icons/edit.svg') : require('@tabler/icons/icons/trash.svg'),
+          icon: withRedraft ? require('@tabler/icons/edit.svg') : require('@tabler/icons/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),
@@ -409,7 +409,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     if (!account || typeof account !== 'object') return;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/ban.svg'),
+      icon: require('@tabler/icons/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),
diff --git a/app/soapbox/features/ui/components/accordion.tsx b/app/soapbox/features/ui/components/accordion.tsx
index 40afbf7b1..32eb9da0c 100644
--- a/app/soapbox/features/ui/components/accordion.tsx
+++ b/app/soapbox/features/ui/components/accordion.tsx
@@ -32,7 +32,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
     <div className={classNames('accordion', { 'accordion--expanded': expanded })}>
       {menu && (
         <div className='accordion__menu'>
-          <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} />
+          <DropdownMenu items={menu} src={require('@tabler/icons/dots-vertical.svg')} />
         </div>
       )}
       <button
diff --git a/app/soapbox/features/ui/components/action-button.tsx b/app/soapbox/features/ui/components/action-button.tsx
index 18479111d..ae55174bc 100644
--- a/app/soapbox/features/ui/components/action-button.tsx
+++ b/app/soapbox/features/ui/components/action-button.tsx
@@ -122,7 +122,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
       return (
         <Button
           onClick={handleRemoteFollow}
-          icon={require('@tabler/icons/icons/plus.svg')}
+          icon={require('@tabler/icons/plus.svg')}
           text={intl.formatMessage(messages.follow)}
         />
       );
@@ -185,7 +185,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
           size='sm'
           disabled={blockedBy}
           theme={isFollowing ? 'secondary' : 'primary'}
-          icon={blockedBy ? require('@tabler/icons/icons/ban.svg') : (!isFollowing && require('@tabler/icons/icons/plus.svg'))}
+          icon={blockedBy ? require('@tabler/icons/ban.svg') : (!isFollowing && require('@tabler/icons/plus.svg'))}
           onClick={handleFollow}
         >
           {isFollowing ? (
diff --git a/app/soapbox/features/ui/components/bundle_column_error.tsx b/app/soapbox/features/ui/components/bundle_column_error.tsx
index c79013b73..44ad44852 100644
--- a/app/soapbox/features/ui/components/bundle_column_error.tsx
+++ b/app/soapbox/features/ui/components/bundle_column_error.tsx
@@ -26,7 +26,7 @@ const BundleColumnError: React.FC<IBundleColumnError> = ({ onRetry }) => {
         <IconButton
           iconClassName='w-20 h-20'
           title={intl.formatMessage(messages.retry)}
-          src={require('@tabler/icons/icons/refresh.svg')}
+          src={require('@tabler/icons/refresh.svg')}
           onClick={handleRetry}
         />
 
diff --git a/app/soapbox/features/ui/components/compose-button.tsx b/app/soapbox/features/ui/components/compose-button.tsx
index 0061612ef..6642d0fac 100644
--- a/app/soapbox/features/ui/components/compose-button.tsx
+++ b/app/soapbox/features/ui/components/compose-button.tsx
@@ -11,7 +11,7 @@ const ComposeButton = () => {
 
   return (
     <div className='mt-4'>
-      <Button icon={require('@tabler/icons/icons/pencil-plus.svg')} block size='lg' onClick={onOpenCompose}>
+      <Button icon={require('@tabler/icons/pencil-plus.svg')} block size='lg' onClick={onOpenCompose}>
         <span><FormattedMessage id='navigation.compose' defaultMessage='Compose' /></span>
       </Button>
     </div>
diff --git a/app/soapbox/features/ui/components/compose_modal.tsx b/app/soapbox/features/ui/components/compose_modal.tsx
index 470c04b69..8b8abc342 100644
--- a/app/soapbox/features/ui/components/compose_modal.tsx
+++ b/app/soapbox/features/ui/components/compose_modal.tsx
@@ -30,7 +30,7 @@ const ComposeModal: React.FC<IComposeModal> = ({ onClose }) => {
   const onClickClose = () => {
     if (composeText) {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/icons/trash.svg'),
+        icon: require('@tabler/icons/trash.svg'),
         heading: <FormattedMessage id='confirmations.delete.heading' defaultMessage='Delete post' />,
         message: <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this post?' />,
         confirm: intl.formatMessage(messages.confirm),
diff --git a/app/soapbox/features/ui/components/instance_info_panel.tsx b/app/soapbox/features/ui/components/instance_info_panel.tsx
index 4c2462e10..eeed8beda 100644
--- a/app/soapbox/features/ui/components/instance_info_panel.tsx
+++ b/app/soapbox/features/ui/components/instance_info_panel.tsx
@@ -43,7 +43,7 @@ const InstanceInfoPanel: React.FC<IInstanceInfoPanel> = ({ host }) => {
     <Widget
       title={remoteInstance.get('host')}
       onActionClick={handlePinHost}
-      actionIcon={require(pinned ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg')}
+      actionIcon={require(pinned ? '@tabler/icons/pinned-off.svg' : '@tabler/icons/pin.svg')}
       actionTitle={intl.formatMessage(pinned ? messages.unpinHost : messages.pinHost, { host })}
     />
   );
diff --git a/app/soapbox/features/ui/components/instance_moderation_panel.tsx b/app/soapbox/features/ui/components/instance_moderation_panel.tsx
index ed97495f1..3ea9cf715 100644
--- a/app/soapbox/features/ui/components/instance_moderation_panel.tsx
+++ b/app/soapbox/features/ui/components/instance_moderation_panel.tsx
@@ -37,7 +37,7 @@ const InstanceModerationPanel: React.FC<IInstanceModerationPanel> = ({ host }) =
     return [{
       text: intl.formatMessage(messages.editFederation),
       action: handleEditFederation,
-      icon: require('@tabler/icons/icons/edit.svg'),
+      icon: require('@tabler/icons/edit.svg'),
     }];
   };
 
@@ -47,7 +47,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/icons/dots-vertical.svg')} />
+        <DropdownMenu items={menu} src={require('@tabler/icons/dots-vertical.svg')} />
       ) : undefined}
     >
       <InstanceRestrictions remoteInstance={remoteInstance} />
diff --git a/app/soapbox/features/ui/components/media_modal.js b/app/soapbox/features/ui/components/media_modal.js
index 111bbede1..dcc670d15 100644
--- a/app/soapbox/features/ui/components/media_modal.js
+++ b/app/soapbox/features/ui/components/media_modal.js
@@ -121,13 +121,13 @@ class MediaModal extends ImmutablePureComponent {
 
     const leftNav  = media.size > 1 && (
       <button tabIndex='0' className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}>
-        <Icon src={require('@tabler/icons/icons/arrow-left.svg')} />
+        <Icon src={require('@tabler/icons/arrow-left.svg')} />
       </button>
     );
 
     const rightNav = media.size > 1 && (
       <button tabIndex='0' className='media-modal__nav  media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}>
-        <Icon src={require('@tabler/icons/icons/arrow-right.svg')} />
+        <Icon src={require('@tabler/icons/arrow-right.svg')} />
       </button>
     );
 
@@ -252,7 +252,7 @@ class MediaModal extends ImmutablePureComponent {
         </div>
 
         <div className={navigationClassName}>
-          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
+          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/x.svg')} onClick={onClose} />
 
           {leftNav}
           {rightNav}
diff --git a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
index d3e9b8be5..22a733f60 100644
--- a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
@@ -44,7 +44,7 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
               target='_blank'
               className='p-3 space-x-3 flex items-center rounded-md dark:hover:bg-slate-900/50 hover:bg-gray-50'
             >
-              <Icon src={require('@tabler/icons/icons/lifebuoy.svg')} className='flex-shrink-0 h-6 w-6 text-gray-400 dark:text-gray-200' />
+              <Icon src={require('@tabler/icons/lifebuoy.svg')} className='flex-shrink-0 h-6 w-6 text-gray-400 dark:text-gray-200' />
 
               <Text weight='medium'>
                 {intl.formatMessage(messages.helpCenter)}
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
index f22cde28b..7ce82995d 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
@@ -67,7 +67,7 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
 
                 <div>
                   <Button
-                    icon={require('@tabler/icons/icons/arrows-minimize.svg')}
+                    icon={require('@tabler/icons/arrows-minimize.svg')}
                     theme='secondary'
                     size='sm'
                     onClick={() => setShowAdditionalStatuses(false)}
@@ -78,7 +78,7 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
               </Stack>
             ) : (
               <Button
-                icon={require('@tabler/icons/icons/plus.svg')}
+                icon={require('@tabler/icons/plus.svg')}
                 theme='secondary'
                 size='sm'
                 onClick={() => setShowAdditionalStatuses(true)}
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index ca0d02705..331f4007f 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -130,7 +130,7 @@ const Navbar = () => {
                   <Link to='/reset-password'>
                     <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
                       <IconButton
-                        src={require('@tabler/icons/icons/help.svg')}
+                        src={require('@tabler/icons/help.svg')}
                         className='bg-transparent text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer'
                         iconClassName='w-5 h-5'
                       />
diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx
index 0216f3d39..3c8230c47 100644
--- a/app/soapbox/features/ui/components/profile-dropdown.tsx
+++ b/app/soapbox/features/ui/components/profile-dropdown.tsx
@@ -83,14 +83,14 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
     menu.push({
       text: intl.formatMessage(messages.add),
       to: '/login/add',
-      icon: require('@tabler/icons/icons/plus.svg'),
+      icon: require('@tabler/icons/plus.svg'),
     });
 
     menu.push({
       text: intl.formatMessage(messages.logout, { acct: account.acct }),
       to: '/logout',
       action: handleLogOut,
-      icon: require('@tabler/icons/icons/logout.svg'),
+      icon: require('@tabler/icons/logout.svg'),
     });
 
     return menu;
diff --git a/app/soapbox/features/ui/components/profile_fields_panel.tsx b/app/soapbox/features/ui/components/profile_fields_panel.tsx
index dbe02c5df..e5630275b 100644
--- a/app/soapbox/features/ui/components/profile_fields_panel.tsx
+++ b/app/soapbox/features/ui/components/profile_fields_panel.tsx
@@ -61,7 +61,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/icons/check.svg')} />
+              <Icon src={require('@tabler/icons/check.svg')} />
             </span>
           )}
 
diff --git a/app/soapbox/features/ui/components/profile_info_panel.tsx b/app/soapbox/features/ui/components/profile_info_panel.tsx
index 22eba415a..a91b5400d 100644
--- a/app/soapbox/features/ui/components/profile_info_panel.tsx
+++ b/app/soapbox/features/ui/components/profile_info_panel.tsx
@@ -87,7 +87,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
     return (
       <HStack alignItems='center' space={0.5}>
         <Icon
-          src={require('@tabler/icons/icons/ballon.svg')}
+          src={require('@tabler/icons/ballon.svg')}
           className='w-4 h-4 text-gray-800 dark:text-gray-200'
         />
 
@@ -157,7 +157,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
 
             {account.locked && (
               <Icon
-                src={require('@tabler/icons/icons/lock.svg')}
+                src={require('@tabler/icons/lock.svg')}
                 alt={intl.formatMessage(messages.account_locked)}
                 className='w-4 h-4 text-gray-600'
               />
@@ -175,7 +175,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {isLocal(account) ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/icons/calendar.svg')}
+                src={require('@tabler/icons/calendar.svg')}
                 className='w-4 h-4 text-gray-800 dark:text-gray-200'
               />
 
@@ -192,7 +192,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {account.location ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/icons/map-pin.svg')}
+                src={require('@tabler/icons/map-pin.svg')}
                 className='w-4 h-4 text-gray-800 dark:text-gray-200'
               />
 
@@ -205,7 +205,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {account.website ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/icons/link.svg')}
+                src={require('@tabler/icons/link.svg')}
                 className='w-4 h-4 text-gray-800 dark:text-gray-200'
               />
 
diff --git a/app/soapbox/features/ui/components/reply_mentions_modal.tsx b/app/soapbox/features/ui/components/reply_mentions_modal.tsx
index a21a92d3a..1a6a96060 100644
--- a/app/soapbox/features/ui/components/reply_mentions_modal.tsx
+++ b/app/soapbox/features/ui/components/reply_mentions_modal.tsx
@@ -29,7 +29,7 @@ const ReplyMentionsModal: React.FC<IReplyMentionsModal> = ({ onClose }) => {
     <Modal
       title={<FormattedMessage id='navigation_bar.in_reply_to' defaultMessage='In reply to' />}
       onClose={onClickClose}
-      closeIcon={require('@tabler/icons/icons/arrow-left.svg')}
+      closeIcon={require('@tabler/icons/arrow-left.svg')}
       closePosition='left'
     >
       <div className='reply-mentions-modal__accounts'>
diff --git a/app/soapbox/features/ui/components/subscription-button.tsx b/app/soapbox/features/ui/components/subscription-button.tsx
index 22eb637d7..6bcded63a 100644
--- a/app/soapbox/features/ui/components/subscription-button.tsx
+++ b/app/soapbox/features/ui/components/subscription-button.tsx
@@ -110,7 +110,7 @@ const SubscriptionButton = ({ account }: ISubscriptionButton) => {
   if (isRequested || isFollowing) {
     return (
       <IconButton
-        src={isSubscribed ? require('@tabler/icons/icons/bell-ringing.svg') : require('@tabler/icons/icons/bell.svg')}
+        src={isSubscribed ? require('@tabler/icons/bell-ringing.svg') : require('@tabler/icons/bell.svg')}
         onClick={handleToggle}
         title={title}
         className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 disabled:hover:bg-primary-100 p-2'
diff --git a/app/soapbox/features/ui/components/theme-selector.tsx b/app/soapbox/features/ui/components/theme-selector.tsx
index e6aba35f4..a3b388c07 100644
--- a/app/soapbox/features/ui/components/theme-selector.tsx
+++ b/app/soapbox/features/ui/components/theme-selector.tsx
@@ -21,11 +21,11 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
   const themeIconSrc = useMemo(() => {
     switch (value) {
       case 'system':
-        return require('@tabler/icons/icons/device-desktop.svg');
+        return require('@tabler/icons/device-desktop.svg');
       case 'light':
-        return require('@tabler/icons/icons/sun.svg');
+        return require('@tabler/icons/sun.svg');
       case 'dark':
-        return require('@tabler/icons/icons/moon.svg');
+        return require('@tabler/icons/moon.svg');
       default:
         return null;
     }
@@ -53,7 +53,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
         </select>
 
         <div className='absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none'>
-          <Icon src={require('@tabler/icons/icons/chevron-down.svg')} className='h-4 w-4 text-gray-400' />
+          <Icon src={require('@tabler/icons/chevron-down.svg')} className='h-4 w-4 text-gray-400' />
         </div>
       </div>
     </label>
diff --git a/app/soapbox/features/ui/components/upload_area.tsx b/app/soapbox/features/ui/components/upload_area.tsx
index d614d88e6..42e8783f8 100644
--- a/app/soapbox/features/ui/components/upload_area.tsx
+++ b/app/soapbox/features/ui/components/upload_area.tsx
@@ -55,7 +55,7 @@ const UploadArea: React.FC<IUploadArea> = ({ active, onClose }) => {
 
             <Stack space={3} justifyContent='center' alignItems='center'>
               <Icon
-                src={require('@tabler/icons/icons/cloud-upload.svg')}
+                src={require('@tabler/icons/cloud-upload.svg')}
                 className='w-12 h-12 text-white text-opacity-90'
               />
 
diff --git a/app/soapbox/features/ui/components/who-to-follow-panel.tsx b/app/soapbox/features/ui/components/who-to-follow-panel.tsx
index fd6089730..2458997f4 100644
--- a/app/soapbox/features/ui/components/who-to-follow-panel.tsx
+++ b/app/soapbox/features/ui/components/who-to-follow-panel.tsx
@@ -51,7 +51,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/icons/x.svg')}
+          actionIcon={require('@tabler/icons/x.svg')}
           actionTitle={intl.formatMessage(messages.dismissSuggestion)}
           onActionClick={handleDismiss}
         />
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 8cd5218d6..6bb77e2d0 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -631,7 +631,7 @@ const UI: React.FC = ({ children }) => {
       className='floating-action-button'
       aria-label={intl.formatMessage(messages.publish)}
     >
-      <Icon src={require('@tabler/icons/icons/pencil-plus.svg')} />
+      <Icon src={require('@tabler/icons/pencil-plus.svg')} />
     </button>
   );
 
diff --git a/app/soapbox/features/verification/email_passthru.tsx b/app/soapbox/features/verification/email_passthru.tsx
index ebe36e5f0..2211e6d96 100644
--- a/app/soapbox/features/verification/email_passthru.tsx
+++ b/app/soapbox/features/verification/email_passthru.tsx
@@ -33,7 +33,7 @@ const Success = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/icons/circle-check.svg')} className='text-primary-600 dark:text-primary-400 h-10 w-10' />
+      <Icon src={require('@tabler/icons/circle-check.svg')} className='text-primary-600 dark:text-primary-400 h-10 w-10' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.emailConfirmedHeading)}
       </Text>
@@ -49,7 +49,7 @@ const GenericFail = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
+      <Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.genericFailHeading)}
       </Text>
@@ -65,7 +65,7 @@ const TokenNotFound = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
+      <Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.tokenNotFoundHeading)}
       </Text>
@@ -82,7 +82,7 @@ const TokenExpired = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
+      <Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.tokenExpiredHeading)}
       </Text>
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index 02aea214c..a06d49963 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/app/soapbox/features/verification/registration.tsx
@@ -109,7 +109,7 @@ const Registration = () => {
               value={username}
               onChange={handleInputChange}
               required
-              icon={require('@tabler/icons/icons/at.svg')}
+              icon={require('@tabler/icons/at.svg')}
             />
           </FormGroup>
 
diff --git a/app/soapbox/features/verification/steps/email-verification.tsx b/app/soapbox/features/verification/steps/email-verification.tsx
index b8c1810b1..9ee87cbee 100644
--- a/app/soapbox/features/verification/steps/email-verification.tsx
+++ b/app/soapbox/features/verification/steps/email-verification.tsx
@@ -37,7 +37,7 @@ const EmailSent: React.FC<IEmailSent> = ({ handleSubmit }) => {
 
   return (
     <div className='sm:pt-10 mx-auto flex flex-col items-center justify-center'>
-      <Icon src={require('@tabler/icons/icons/send.svg')} className='text-primary-600 dark:text-primary-400 h-12 w-12 mb-5' />
+      <Icon src={require('@tabler/icons/send.svg')} className='text-primary-600 dark:text-primary-400 h-12 w-12 mb-5' />
 
       <div className='space-y-1 text-center mb-4'>
         <Text weight='bold' size='3xl'>We sent you an email</Text>
diff --git a/app/soapbox/features/video/index.js b/app/soapbox/features/video/index.js
index 0bcb094d7..d4250029b 100644
--- a/app/soapbox/features/video/index.js
+++ b/app/soapbox/features/video/index.js
@@ -589,8 +589,8 @@ class Video extends React.PureComponent {
 
           <div className='video-player__buttons-bar'>
             <div className='video-player__buttons left'>
-              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay} autoFocus={detailed}><Icon src={paused ? require('@tabler/icons/icons/player-play.svg') : require('@tabler/icons/icons/player-pause.svg')} /></button>
-              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon src={muted ? require('@tabler/icons/icons/volume-3.svg') : require('@tabler/icons/icons/volume.svg')} /></button>
+              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay} autoFocus={detailed}><Icon src={paused ? require('@tabler/icons/player-play.svg') : require('@tabler/icons/player-pause.svg')} /></button>
+              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon src={muted ? require('@tabler/icons/volume-3.svg') : require('@tabler/icons/volume.svg')} /></button>
 
               <div className={classNames('video-player__volume', { active: this.state.hovered })} onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
                 <div className='video-player__volume__current' style={{ width: `${volume * 100}%` }} />
@@ -613,10 +613,10 @@ class Video extends React.PureComponent {
             </div>
 
             <div className='video-player__buttons right'>
-              {(sensitive && !onCloseVideo) && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon src={require('@tabler/icons/icons/eye-off.svg')} /></button>}
-              {(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon src={require('@tabler/icons/icons/maximize.svg')} /></button>}
-              {/* onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon src={require('@tabler/icons/icons/x.svg')} /></button> */}
-              <button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon src={fullscreen ? require('@tabler/icons/icons/arrows-minimize.svg') : require('@tabler/icons/icons/arrows-maximize.svg')} /></button>
+              {(sensitive && !onCloseVideo) && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon src={require('@tabler/icons/eye-off.svg')} /></button>}
+              {(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon src={require('@tabler/icons/maximize.svg')} /></button>}
+              {/* onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon src={require('@tabler/icons/x.svg')} /></button> */}
+              <button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon src={fullscreen ? require('@tabler/icons/arrows-minimize.svg') : require('@tabler/icons/arrows-maximize.svg')} /></button>
             </div>
           </div>
         </div>
diff --git a/package.json b/package.json
index cb9ab4481..09b041554 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "@sentry/browser": "^7.2.0",
     "@sentry/react": "^7.2.0",
     "@sentry/tracing": "^7.2.0",
-    "@tabler/icons": "^1.71.0",
+    "@tabler/icons": "^1.73.0",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.1",
     "@testing-library/react": "^12.1.4",
diff --git a/webpack/shared.js b/webpack/shared.js
index 9dee79de1..fb8308ee4 100644
--- a/webpack/shared.js
+++ b/webpack/shared.js
@@ -145,9 +145,6 @@ module.exports = {
       'node_modules',
     ],
     alias: {
-      // Override tabler's package.json to allow importing .svg files directly
-      // https://stackoverflow.com/a/35990101/8811886
-      '@tabler': resolve('node_modules', '@tabler'),
       'icons': resolve('app', 'icons'),
       'custom': resolve('custom'),
     },
diff --git a/yarn.lock b/yarn.lock
index 8d2248152..1a0aa5c4e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2284,10 +2284,10 @@
     remark "^13.0.0"
     unist-util-find-all-after "^3.0.2"
 
-"@tabler/icons@^1.71.0":
-  version "1.71.0"
-  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-1.71.0.tgz#74d771aa18487ea92af07c67048e411ada0f0427"
-  integrity sha512-hOeXAWSXGgT2S8O9QrRTomEq6YE1AtuXrcOy5DgGVI93xub1JnGSA3Z9gZzuND4pSJ+Ee+geI5u8hTYbfIsuGw==
+"@tabler/icons@^1.73.0":
+  version "1.73.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-1.73.0.tgz#26d81858baf41be939504e1f9b4b32835eda6fdb"
+  integrity sha512-MhAHFzVj79ZWlAIRD++7Mk55PZsdlEdkfkjO3DD257mqj8iJZQRAQtkx2UFJXVs2mMrcOUu1qtj4rlVC8BfnKA==
 
 "@tailwindcss/forms@^0.4.0":
   version "0.4.0"