From 3f27ec2e61df00792b63ca4216697165cd003ecc Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Nov 2024 16:13:22 -0600
Subject: [PATCH 1/6] Remove "npx" from package.json commands

---
 package.json | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 8ada79d3e..7be62bef9 100644
--- a/package.json
+++ b/package.json
@@ -21,16 +21,15 @@
     "url": "lightning:alex@alexgleason.me"
   },
   "scripts": {
-    "start": "npx vite serve",
-    "dev": "npx vite serve",
-    "build": "npx vite build --emptyOutDir",
-    "preview": "npx vite preview",
-    "audit:fix": "npx yarn-audit-fix",
-    "i18n": "npx formatjs extract 'src/**/*.{ts,tsx}' --ignore '**/*.d.ts' --out-file build/messages.json && npx formatjs compile build/messages.json --out-file src/locales/en.json",
-    "test": "npx vitest",
+    "start": "vite serve",
+    "dev": "vite serve",
+    "build": "vite build --emptyOutDir",
+    "preview": "vite preview",
+    "i18n": "formatjs extract 'src/**/*.{ts,tsx}' --ignore '**/*.d.ts' --out-file build/messages.json && formatjs compile build/messages.json --out-file src/locales/en.json",
+    "test": "vitest",
     "lint": "npm run lint:js && npm run lint:sass",
-    "lint:js": "npx eslint --ext .js,.jsx,.cjs,.mjs,.ts,.tsx . --cache",
-    "lint:sass": "npx stylelint src/styles/**/*.scss",
+    "lint:js": "eslint --ext .js,.jsx,.cjs,.mjs,.ts,.tsx . --cache",
+    "lint:sass": "stylelint src/styles/**/*.scss",
     "prepare": "husky install"
   },
   "license": "AGPL-3.0-or-later",

From 8c130e6bef09763e32216d054e5aab2a3ff214b6 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Nov 2024 16:42:35 -0600
Subject: [PATCH 2/6] Remove usage of csstype package

---
 src/components/media-gallery.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index 0edf7528c..381cfdf89 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState, useRef, useLayoutEffect } from 'react';
+import React, { useState, useRef, useLayoutEffect, CSSProperties } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';
 import StillImage from 'soapbox/components/still-image';
@@ -13,7 +13,6 @@ import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maxi
 
 import SvgIcon from './ui/icon/svg-icon';
 
-import type { Property } from 'csstype';
 import type { List as ImmutableList } from 'immutable';
 
 // const Gameboy = React.lazy(() => import('./gameboy'));
@@ -22,18 +21,18 @@ const ATTACHMENT_LIMIT = 4;
 const MAX_FILENAME_LENGTH = 45;
 
 interface Dimensions {
-  w: Property.Width | number;
-  h: Property.Height | number;
-  t?: Property.Top;
-  r?: Property.Right;
-  b?: Property.Bottom;
-  l?: Property.Left;
-  float?: Property.Float;
-  pos?: Property.Position;
+  w: CSSProperties['width'];
+  h: CSSProperties['height'];
+  t?: CSSProperties['top'];
+  r?: CSSProperties['right'];
+  b?: CSSProperties['bottom'];
+  l?: CSSProperties['left'];
+  float?: CSSProperties['float'];
+  pos?: CSSProperties['position'];
 }
 
 interface SizeData {
-  style: React.CSSProperties;
+  style: CSSProperties;
   itemsDimensions: Dimensions[];
   size: number;
   width: number;

From 9d9f237fd213824b99f86d1cd49864fdd5761023 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Nov 2024 18:31:13 -0600
Subject: [PATCH 3/6] Rewrite all `require` to ES6 imports

---
 package.json                                  |   1 -
 src/actions/moderation.tsx                    |  12 +-
 src/components/account-search.tsx             |   6 +-
 src/components/account.tsx                    |   3 +-
 src/components/authorize-reject-buttons.tsx   |   9 +-
 src/components/autosuggest-location.tsx       |   9 +-
 src/components/big-card.tsx                   |   3 +-
 src/components/domain.tsx                     |   5 +-
 .../dropdown-menu/dropdown-menu.tsx           |   3 +-
 src/components/event-preview.tsx              |   6 +-
 src/components/gameboy.tsx                    |  17 +-
 src/components/list.tsx                       |   6 +-
 src/components/load-gap.tsx                   |   3 +-
 src/components/location-search.tsx            |   6 +-
 src/components/media-gallery.tsx              |   6 +-
 src/components/modal-root.tsx                 |   5 +-
 src/components/pending-items-row.tsx          |   6 +-
 src/components/polls/poll-option.tsx          |   6 +-
 src/components/preview-card.tsx               |  12 +-
 src/components/profile-hover-card.tsx         |   3 +-
 src/components/quoted-status-indicator.tsx    |   3 +-
 src/components/quoted-status.tsx              |   3 +-
 src/components/scroll-top-button.tsx          |   3 +-
 src/components/sidebar-menu.tsx               |  58 ++-
 src/components/sidebar-navigation.tsx         |  66 ++-
 src/components/site-logo.tsx                  |   6 +-
 src/components/status-action-bar.tsx          | 112 ++++--
 src/components/status-content.tsx             |   3 +-
 src/components/status.tsx                     |  11 +-
 .../statuses/sensitive-content-overlay.tsx    |  17 +-
 src/components/thumb-navigation.tsx           |  33 +-
 src/components/translate-button.tsx           |   5 +-
 src/components/ui/accordion/accordion.tsx     |   7 +-
 src/components/ui/avatar/avatar.tsx           |   3 +-
 src/components/ui/card/card.tsx               |   3 +-
 src/components/ui/carousel/carousel.tsx       |   6 +-
 .../ui/emoji-selector/emoji-selector.tsx      |   3 +-
 src/components/ui/input/input.tsx             |   4 +-
 .../language-dropdown/language-dropdown.tsx   |   5 +-
 src/components/ui/modal/modal.tsx             |   6 +-
 src/components/ui/streamfield/streamfield.tsx |   3 +-
 src/components/ui/tag-input/tag.tsx           |   3 +-
 src/components/ui/toast/toast.tsx             |  12 +-
 src/components/ui/widget/widget.tsx           |   3 +-
 src/components/upload-progress.tsx            |   3 +-
 src/components/upload.tsx                     |   3 +-
 src/components/validation-checkmark.tsx       |   4 +-
 src/components/verification-badge.tsx         |   3 +-
 .../account-gallery/components/media-item.tsx |   6 +-
 .../components/moved-note.tsx                 |   3 +-
 src/features/account/components/header.tsx    |  86 ++--
 src/features/admin/announcements.tsx          |   3 +-
 .../admin/components/report-status.tsx        |   9 +-
 src/features/admin/components/report.tsx      |   9 +-
 src/features/admin/domains.tsx                |   3 +-
 src/features/admin/manage-zap-split.tsx       |   3 +-
 src/features/admin/rules.tsx                  |   3 +-
 src/features/admin/tabs/dashboard.tsx         |  10 +-
 src/features/aliases/components/account.tsx   |   3 +-
 src/features/aliases/components/search.tsx    |   3 +-
 src/features/aliases/index.tsx                |   3 +-
 src/features/audio/index.tsx                  |  11 +-
 .../auth-login/components/consumer-button.tsx |  21 +-
 .../components/registration-form.tsx          |   6 +-
 src/features/auth-token-list/index.tsx        |   3 +-
 src/features/birthdays/account.tsx            |   3 +-
 src/features/bookmark-folders/index.tsx       |   6 +-
 src/features/bookmarks/index.tsx              |   9 +-
 .../chats/components/chat-composer.tsx        |   3 +-
 .../chats/components/chat-list-item.tsx       |   6 +-
 .../components/chat-message-list-intro.tsx    |   3 +-
 .../chats/components/chat-message.tsx         |  22 +-
 .../chat-page/components/chat-page-main.tsx   |  12 +-
 .../chat-page/components/chat-page-new.tsx    |   3 +-
 .../components/chat-page-settings.tsx         |   3 +-
 .../components/chat-page-sidebar.tsx          |   6 +-
 .../chats/components/chat-pane/chat-pane.tsx  |   3 +-
 .../chats/components/chat-search-input.tsx    |   4 +-
 .../components/chat-search/chat-search.tsx    |   4 +-
 .../chats/components/chat-upload-preview.tsx  |   3 +-
 src/features/chats/components/chat-upload.tsx |   3 +-
 .../chat-widget/chat-pane-header.tsx          |   4 +-
 .../components/chat-widget/chat-settings.tsx  |   9 +-
 .../components/chat-widget/chat-window.tsx    |   7 +-
 .../headers/chat-search-header.tsx            |   3 +-
 .../compose/components/compose-form.tsx       |   6 +-
 .../compose/components/markdown-button.tsx    |   3 +-
 .../compose/components/poll-button.tsx        |   3 +-
 .../compose/components/privacy-dropdown.tsx   |  12 +-
 .../compose/components/reply-indicator.tsx    |   3 +-
 .../compose/components/schedule-button.tsx    |   3 +-
 .../compose/components/schedule-form.tsx      |   3 +-
 .../compose/components/search-results.tsx     |   3 +-
 .../compose/components/search-zap-split.tsx   |   3 +-
 src/features/compose/components/search.tsx    |   8 +-
 .../compose/components/spoiler-button.tsx     |   3 +-
 .../compose/components/upload-button.tsx      |   6 +-
 .../components/crypto-address.tsx             |   6 +-
 .../components/detailed-crypto-address.tsx    |   3 +-
 src/features/developers/developers-menu.tsx   |  24 +-
 .../developers/service-worker-info.tsx        |   3 +-
 src/features/edit-identity/index.tsx          |   3 +-
 .../edit-profile/components/avatar-picker.tsx |   3 +-
 .../edit-profile/components/header-picker.tsx |   6 +-
 .../emoji/components/emoji-picker.tsx         |   5 +-
 .../emoji-picker-dropdown-container.tsx       |   3 +-
 .../event/components/event-action-button.tsx  |   6 +-
 src/features/event/components/event-date.tsx  |   3 +-
 .../event/components/event-header.tsx         |  71 ++--
 src/features/event/event-information.tsx      |   9 +-
 .../events/components/event-carousel.tsx      |   6 +-
 .../components/instance-restrictions.tsx      |  23 +-
 .../components/restricted-instance.tsx        |   4 +-
 .../group/components/group-header-image.tsx   |   3 +-
 .../group/components/group-header.tsx         |   3 +-
 .../components/group-member-list-item.tsx     |  11 +-
 .../group/components/group-options-button.tsx |  15 +-
 .../group/components/group-privacy.tsx        |  10 +-
 .../group/components/group-relationship.tsx   |   6 +-
 .../group/components/group-tag-list-item.tsx  |  16 +-
 src/features/group/edit-group.tsx             |   3 +-
 src/features/group/group-tag-timeline.tsx     |   3 +-
 src/features/group/group-tags.tsx             |   3 +-
 src/features/group/group-timeline.tsx         |   3 +-
 src/features/group/manage-group.tsx           |   3 +-
 .../components/discover/group-list-item.tsx   |   4 +-
 .../components/discover/layout-buttons.tsx    |   6 +-
 .../discover/search/recent-searches.tsx       |   3 +-
 src/features/groups/discover.tsx              |   7 +-
 src/features/groups/index.tsx                 |   3 +-
 src/features/groups/tag.tsx                   |   6 +-
 src/features/list-adder/components/list.tsx   |   9 +-
 .../list-editor/components/account.tsx        |   6 +-
 .../list-editor/components/search.tsx         |   3 +-
 src/features/lists/index.tsx                  |   9 +-
 .../notifications/components/filter-bar.tsx   |  21 +-
 .../notifications/components/notification.tsx |  52 ++-
 src/features/public-timeline/index.tsx        |   3 +-
 src/features/remote-timeline/index.tsx        |   3 +-
 src/features/reply-mentions/account.tsx       |   6 +-
 .../scheduled-status-action-bar.tsx           |   3 +-
 .../components/icon-picker-dropdown.tsx       |   3 +-
 .../status/components/detailed-status.tsx     |   9 +-
 src/features/test-timeline/index.tsx          |  15 +-
 src/features/theme-editor/index.tsx           |   9 +-
 src/features/ui/components/action-button.tsx  |   6 +-
 src/features/ui/components/error-column.tsx   |   3 +-
 .../ui/components/floating-action-button.tsx  |   5 +-
 .../ui/components/instance-info-panel.tsx     |   4 +-
 .../components/instance-moderation-panel.tsx  |   6 +-
 .../account-moderation-modal.tsx              |   3 +-
 .../ui/components/modals/boost-modal.tsx      |   3 +-
 .../compose-event-modal.tsx                   |  11 +-
 .../compose-event-modal/upload-button.tsx     |   3 +-
 .../ui/components/modals/compose-modal.tsx    |   3 +-
 .../modals/edit-bookmark-folder-modal.tsx     |   3 +-
 .../ui/components/modals/event-map-modal.tsx  |  12 +-
 .../components/modals/landing-page-modal.tsx  |   3 +-
 .../steps/confirmation-step.tsx               |   6 +-
 .../ui/components/modals/media-modal.tsx      |  16 +-
 .../steps/extension-step.tsx                  |   3 +-
 .../nostr-signup-modal/steps/keygen-step.tsx  |   3 +-
 .../steps/avatar-step.tsx                     |   6 +-
 .../onboarding-flow-modal/steps/bio-step.tsx  |   3 +-
 .../steps/completed-step.tsx                  |   6 +-
 .../steps/cover-photo-selection-step.tsx      |   6 +-
 .../steps/display-name-step.tsx               |   3 +-
 .../steps/suggested-accounts-step.tsx         |   3 +-
 .../modals/reply-mentions-modal.tsx           |   3 +-
 .../modals/report-modal/report-modal.tsx      |   3 +-
 .../report-modal/steps/other-actions-step.tsx |   6 +-
 .../modals/select-bookmark-folder-modal.tsx   |   6 +-
 .../ui/components/modals/zap-invoice.tsx      |   6 +-
 .../components/modals/zap-split/zap-split.tsx |   3 +-
 src/features/ui/components/navbar.tsx         |   3 +-
 .../ui/components/new-account-zap-split.tsx   |   3 +-
 .../ui/components/panels/new-event-panel.tsx  |   3 +-
 .../ui/components/profile-dropdown.tsx        |   6 +-
 src/features/ui/components/profile-field.tsx  |   3 +-
 .../ui/components/profile-info-panel.tsx      |  15 +-
 .../ui/components/subscription-button.tsx     |   4 +-
 src/features/ui/components/theme-selector.tsx |  15 +-
 .../ui/components/who-to-follow-panel.tsx     |   3 +-
 src/features/video/index.tsx                  |  12 +-
 .../zap/components/zap-pay-request-form.tsx   |  11 +-
 src/jest/test-setup.ts                        |   2 +-
 src/normalizers/account.ts                    |  12 +-
 src/normalizers/group.ts                      |  12 +-
 src/pages/group-page.tsx                      |   9 +-
 src/schemas/account.ts                        |   5 +-
 src/schemas/group.ts                          |   5 +-
 src/schemas/instance.test.ts                  |  40 +-
 src/service-worker/sw.ts                      |  10 +-
 src/utils/accounts.ts                         |   7 +-
 vite.config.ts                                |   3 -
 yarn.lock                                     | 379 +-----------------
 196 files changed, 1079 insertions(+), 942 deletions(-)

diff --git a/package.json b/package.json
index 7be62bef9..4e39ed057 100644
--- a/package.json
+++ b/package.json
@@ -152,7 +152,6 @@
     "vite": "^5.4.8",
     "vite-plugin-compile-time": "^0.2.1",
     "vite-plugin-html": "^3.2.2",
-    "vite-plugin-require": "^1.2.14",
     "vite-plugin-static-copy": "^1.0.6",
     "zod": "^3.23.5",
     "zustand": "^5.0.0"
diff --git a/src/actions/moderation.tsx b/src/actions/moderation.tsx
index ddee5fe1d..a01d9f4fd 100644
--- a/src/actions/moderation.tsx
+++ b/src/actions/moderation.tsx
@@ -1,3 +1,7 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import userMinusIcon from '@tabler/icons/outline/user-minus.svg';
+import userOffIcon from '@tabler/icons/outline/user-off.svg';
 import React from 'react';
 import { defineMessages, IntlShape } from 'react-intl';
 
@@ -58,7 +62,7 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm =
     );
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/user-off.svg'),
+      icon: userOffIcon,
       heading: intl.formatMessage(messages.deactivateUserHeading, { acct }),
       message,
       confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }),
@@ -96,7 +100,7 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
     const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/user-minus.svg'),
+      icon: userMinusIcon,
       heading: intl.formatMessage(messages.deleteUserHeading, { acct }),
       message,
       confirm,
@@ -118,7 +122,7 @@ const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensiti
     const acct = state.statuses.get(statusId)!.account.acct;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/alert-triangle.svg'),
+      icon: alertTriangleIcon,
       heading: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveHeading : messages.markStatusNotSensitiveHeading),
       message: intl.formatMessage(sensitive === false ? messages.markStatusSensitivePrompt : messages.markStatusNotSensitivePrompt, { acct }),
       confirm: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveConfirm : messages.markStatusNotSensitiveConfirm),
@@ -138,7 +142,7 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
     const acct = state.statuses.get(statusId)!.account.acct;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       heading: intl.formatMessage(messages.deleteStatusHeading),
       message: intl.formatMessage(messages.deleteStatusPrompt, { acct: <strong className='break-words'>{acct}</strong> }),
       confirm: intl.formatMessage(messages.deleteStatusConfirm),
diff --git a/src/components/account-search.tsx b/src/components/account-search.tsx
index cec7fc8f8..9dbac4fbb 100644
--- a/src/components/account-search.tsx
+++ b/src/components/account-search.tsx
@@ -1,3 +1,5 @@
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -76,12 +78,12 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
           onClick={handleClear}
         >
           <SvgIcon
-            src={require('@tabler/icons/outline/search.svg')}
+            src={searchIcon}
             className={clsx('size-4 text-gray-400', { hidden: !isEmpty() })}
           />
 
           <SvgIcon
-            src={require('@tabler/icons/outline/x.svg')}
+            src={xIcon}
             className={clsx('size-4 text-gray-400', { hidden: isEmpty() })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
diff --git a/src/components/account.tsx b/src/components/account.tsx
index a9eb9a546..5f2244b43 100644
--- a/src/components/account.tsx
+++ b/src/components/account.tsx
@@ -1,3 +1,4 @@
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
 import React, { useRef, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
@@ -275,7 +276,7 @@ const Account = ({
                   <>
                     <Text tag='span' theme='muted' size='sm'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
-                    <Icon className='size-5 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/pencil.svg')} />
+                    <Icon className='size-5 text-gray-700 dark:text-gray-600' src={pencilIcon} />
                   </>
                 ) : null}
 
diff --git a/src/components/authorize-reject-buttons.tsx b/src/components/authorize-reject-buttons.tsx
index 358704682..fcf80d1ef 100644
--- a/src/components/authorize-reject-buttons.tsx
+++ b/src/components/authorize-reject-buttons.tsx
@@ -1,3 +1,6 @@
+import playerStopFilledIcon from '@tabler/icons/filled/player-stop.svg';
+import checkIcon from '@tabler/icons/outline/check.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -106,7 +109,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
         <HStack space={3} alignItems='center'>
           <AuthorizeRejectButton
             theme='danger'
-            icon={require('@tabler/icons/outline/x.svg')}
+            icon={xIcon}
             action={handleReject}
             isLoading={state === 'rejecting'}
             disabled={state === 'authorizing'}
@@ -114,7 +117,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
           />
           <AuthorizeRejectButton
             theme='primary'
-            icon={require('@tabler/icons/outline/check.svg')}
+            icon={checkIcon}
             action={handleAuthorize}
             isLoading={state === 'authorizing'}
             disabled={state === 'rejecting'}
@@ -162,7 +165,7 @@ const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon,
         }
       >
         <IconButton
-          src={isLoading ? require('@tabler/icons/filled/player-stop.svg') : icon}
+          src={isLoading ? playerStopFilledIcon : icon}
           onClick={action}
           theme='seamless'
           className='size-10 items-center justify-center bg-white focus:!ring-0 dark:!bg-gray-900'
diff --git a/src/components/autosuggest-location.tsx b/src/components/autosuggest-location.tsx
index ce6575dd6..c885e05a7 100644
--- a/src/components/autosuggest-location.tsx
+++ b/src/components/autosuggest-location.tsx
@@ -1,14 +1,13 @@
+import buildingCommunityIcon from '@tabler/icons/outline/building-community.svg';
+import homeIcon from '@tabler/icons/outline/home-2.svg';
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
+import roadIcon from '@tabler/icons/outline/road.svg';
 import React from 'react';
 
 import { useAppSelector } from 'soapbox/hooks';
 
 import { HStack, Icon, Stack, Text } from './ui';
 
-const buildingCommunityIcon = require('@tabler/icons/outline/building-community.svg');
-const homeIcon = require('@tabler/icons/outline/home-2.svg');
-const mapPinIcon = require('@tabler/icons/outline/map-pin.svg');
-const roadIcon = require('@tabler/icons/outline/road.svg');
-
 export const ADDRESS_ICONS: Record<string, string> = {
   house: homeIcon,
   street: roadIcon,
diff --git a/src/components/big-card.tsx b/src/components/big-card.tsx
index f6b7ce614..b816d047e 100644
--- a/src/components/big-card.tsx
+++ b/src/components/big-card.tsx
@@ -1,9 +1,10 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 
 import { Card, CardBody, Stack, Text } from 'soapbox/components/ui';
 import IconButton from 'soapbox/components/ui/icon-button/icon-button';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface IBigCard {
   title: React.ReactNode;
diff --git a/src/components/domain.tsx b/src/components/domain.tsx
index 2b2d25bea..77b71189d 100644
--- a/src/components/domain.tsx
+++ b/src/components/domain.tsx
@@ -1,3 +1,4 @@
+import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -21,7 +22,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
 
   // const onBlockDomain = () => {
   //   dispatch(openModal('CONFIRM', {
-  //     icon: require('@tabler/icons/outline/ban.svg'),
+  //     icon: banIcon,
   //     heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
   //     message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable.' values={{ domain: <strong>{domain}</strong> }} />,
   //     confirm: intl.formatMessage(messages.blockDomainConfirm),
@@ -38,7 +39,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
       <Text tag='span'>
         {domain}
       </Text>
-      <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
+      <IconButton iconClassName='h-5 w-5' src={lockOpenIcon} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
     </HStack>
   );
 };
diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index 735664fc9..92fecd6c9 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -1,4 +1,5 @@
 import { offset, Placement, useFloating, flip, arrow, shift } from '@floating-ui/react';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
 import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
@@ -43,7 +44,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
     onOpen,
     onShiftClick,
     placement: initialPlacement = 'top',
-    src = require('@tabler/icons/outline/dots.svg'),
+    src = dotsIcon,
     title = 'Menu',
     ...filteredProps
   } = props;
diff --git a/src/components/event-preview.tsx b/src/components/event-preview.tsx
index 1983b6e67..50f06d9ba 100644
--- a/src/components/event-preview.tsx
+++ b/src/components/event-preview.tsx
@@ -1,3 +1,5 @@
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
+import userIcon from '@tabler/icons/outline/user.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -67,7 +69,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
 
         <div className='flex flex-wrap gap-x-2 gap-y-1 text-gray-700 dark:text-gray-600'>
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/outline/user.svg')} />
+            <Icon src={userIcon} />
             <HStack space={1} alignItems='center' grow>
               <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
               {account.verified && <VerificationBadge />}
@@ -78,7 +80,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
 
           {event.location && (
             <HStack alignItems='center' space={2}>
-              <Icon src={require('@tabler/icons/outline/map-pin.svg')} />
+              <Icon src={mapPinIcon} />
               <span>
                 {event.location.get('name')}
               </span>
diff --git a/src/components/gameboy.tsx b/src/components/gameboy.tsx
index fd632db52..e7635c22d 100644
--- a/src/components/gameboy.tsx
+++ b/src/components/gameboy.tsx
@@ -1,6 +1,13 @@
+import { WasmBoy } from '@soapbox.pub/wasmboy';
+import arrowsMaximizeIcon from '@tabler/icons/outline/arrows-maximize.svg';
+import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
+import downloadIcon from '@tabler/icons/outline/download.svg';
+import playerPauseIcon from '@tabler/icons/outline/player-pause.svg';
+import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
+import volume3Icon from '@tabler/icons/outline/volume-3.svg';
+import volumeIcon from '@tabler/icons/outline/volume.svg';
 // @ts-ignore No types available
 // eslint-disable-next-line import/no-unresolved
-import { WasmBoy } from '@soapbox.pub/wasmboy';
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
@@ -139,13 +146,13 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
             theme='transparent'
             className='text-white'
             onClick={togglePaused}
-            src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')}
+            src={paused ? playerPlayIcon : playerPauseIcon}
           />
           <IconButton
             theme='transparent'
             className='text-white'
             onClick={toggleMuted}
-            src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')}
+            src={muted ? volume3Icon : volumeIcon}
           />
         </HStack>
 
@@ -153,14 +160,14 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
           <IconButton
             theme='transparent'
             className='text-white'
-            src={require('@tabler/icons/outline/download.svg')}
+            src={downloadIcon}
             onClick={handleDownload}
           />
           <IconButton
             theme='transparent'
             className='text-white'
             onClick={toggleFullscreen}
-            src={fullscreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')}
+            src={fullscreen ? arrowsMinimizeIcon : arrowsMaximizeIcon}
           />
         </HStack>
       </HStack>
diff --git a/src/components/list.tsx b/src/components/list.tsx
index 487e2d282..5de7b3efa 100644
--- a/src/components/list.tsx
+++ b/src/components/list.tsx
@@ -1,3 +1,5 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { Link } from 'react-router-dom';
@@ -72,7 +74,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
         <HStack space={1} alignItems='center' className='overflow-hidden text-gray-700 dark:text-gray-600'>
           {children}
 
-          <Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='ml-1 rtl:rotate-180' />
+          <Icon src={chevronRightIcon} className='ml-1 rtl:rotate-180' />
         </HStack>
       ) : null}
 
@@ -90,7 +92,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
             }
           >
             <Icon
-              src={require('@tabler/icons/outline/check.svg')}
+              src={checkIcon}
               className={
                 clsx({
                   'h-4 w-4 text-white dark:text-white transition-all duration-500': true,
diff --git a/src/components/load-gap.tsx b/src/components/load-gap.tsx
index 33ef63645..f6a42a341 100644
--- a/src/components/load-gap.tsx
+++ b/src/components/load-gap.tsx
@@ -1,3 +1,4 @@
+import dotsIcon from '@tabler/icons/outline/dots.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -20,7 +21,7 @@ const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {
 
   return (
     <button className='load-more load-gap' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
-      <Icon src={require('@tabler/icons/outline/dots.svg')} />
+      <Icon src={dotsIcon} />
     </button>
   );
 };
diff --git a/src/components/location-search.tsx b/src/components/location-search.tsx
index b3c9430b6..2eb1b2eb3 100644
--- a/src/components/location-search.tsx
+++ b/src/components/location-search.tsx
@@ -1,3 +1,5 @@
+import backspaceIcon from '@tabler/icons/outline/backspace.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
 import clsx from 'clsx';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import throttle from 'lodash/throttle';
@@ -100,8 +102,8 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
         renderSuggestion={AutosuggestLocation}
       />
       <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-        <Icon src={require('@tabler/icons/outline/search.svg')} className={clsx('svg-icon--search', { active: isEmpty() })} />
-        <Icon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
+        <Icon src={searchIcon} className={clsx('svg-icon--search', { active: isEmpty() })} />
+        <Icon src={backspaceIcon} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
       </div>
     </div>
   );
diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index 381cfdf89..7648850d9 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -1,3 +1,5 @@
+import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
+import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
 import React, { useState, useRef, useLayoutEffect, CSSProperties } from 'react';
 
@@ -156,7 +158,7 @@ const Item: React.FC<IItem> = ({
     const attachmentIcon = (
       <SvgIcon
         className={clsx('size-16 text-gray-800 dark:text-gray-200', { 'size-8': compact })}
-        src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type']) as string] || require('@tabler/icons/outline/paperclip.svg')}
+        src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type']) as string] || paperclipIcon}
       />
     );
 
@@ -233,7 +235,7 @@ const Item: React.FC<IItem> = ({
         target='_blank'
         title={attachment.description}
       >
-        <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon className='size-24' src={require('@tabler/icons/outline/volume.svg')} /></span>
+        <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon className='size-24' src={volumeIcon} /></span>
         <span className={clsx('pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 px-1.5 py-0.5 text-[11px] font-semibold uppercase leading-[18px] text-white opacity-90 transition-opacity duration-100 ease-linear', { 'hidden': compact })}>{ext}</span>
       </a>
     );
diff --git a/src/components/modal-root.tsx b/src/components/modal-root.tsx
index 0612b90ad..cd4daa142 100644
--- a/src/components/modal-root.tsx
+++ b/src/components/modal-root.tsx
@@ -1,3 +1,4 @@
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -74,7 +75,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
       if (hasComposeContent && type === 'COMPOSE') {
         const isEditing = compose!.id !== null;
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           heading: isEditing
             ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' />
             : <FormattedMessage id='confirmations.cancel.heading' defaultMessage='Discard post' />,
@@ -93,7 +94,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
       } else if (hasEventComposeContent && type === 'COMPOSE_EVENT') {
         const isEditing = getState().compose_event.id !== null;
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           heading: isEditing
             ? <FormattedMessage id='confirmations.cancel_event_editing.heading' defaultMessage='Cancel event editing' />
             : <FormattedMessage id='confirmations.delete_event.heading' defaultMessage='Delete event' />,
diff --git a/src/components/pending-items-row.tsx b/src/components/pending-items-row.tsx
index 4f8a250f8..5952a3b9a 100644
--- a/src/components/pending-items-row.tsx
+++ b/src/components/pending-items-row.tsx
@@ -1,3 +1,5 @@
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
+import exclamationCircleIcon from '@tabler/icons/outline/exclamation-circle.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -25,7 +27,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
           })}
           >
             <Icon
-              src={require('@tabler/icons/outline/exclamation-circle.svg')}
+              src={exclamationCircleIcon}
               className={clsx({
                 'h-5 w-5': size === 'md',
                 'h-7 w-7': size === 'lg',
@@ -43,7 +45,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
         </HStack>
 
         <Icon
-          src={require('@tabler/icons/outline/chevron-right.svg')}
+          src={chevronRightIcon}
           className='size-5 text-gray-600 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-500'
         />
       </HStack>
diff --git a/src/components/polls/poll-option.tsx b/src/components/polls/poll-option.tsx
index 1c0760188..df711263b 100644
--- a/src/components/polls/poll-option.tsx
+++ b/src/components/polls/poll-option.tsx
@@ -1,3 +1,5 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
+import circleCheckIcon from '@tabler/icons/outline/circle-check.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -86,7 +88,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
             aria-label={option.title}
           >
             {active && (
-              <Icon src={require('@tabler/icons/outline/check.svg')} className='size-4 text-white dark:text-primary-900' />
+              <Icon src={checkIcon} className='size-4 text-white dark:text-primary-900' />
             )}
           </span>
         </div>
@@ -143,7 +145,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
             <HStack space={2} alignItems='center' className='relative'>
               {voted ? (
                 <Icon
-                  src={require('@tabler/icons/outline/circle-check.svg')}
+                  src={circleCheckIcon}
                   alt={intl.formatMessage(messages.voted)}
                   className='size-4 text-primary-600 dark:fill-white dark:text-primary-800'
                 />
diff --git a/src/components/preview-card.tsx b/src/components/preview-card.tsx
index fe51863c1..2f9a2e436 100644
--- a/src/components/preview-card.tsx
+++ b/src/components/preview-card.tsx
@@ -1,3 +1,7 @@
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import linkIcon from '@tabler/icons/outline/link.svg';
+import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
+import zoomInIcon from '@tabler/icons/outline/zoom-in.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React, { useState, useEffect } from 'react';
@@ -135,7 +139,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
       )}
       <HStack space={1} alignItems='center'>
         <Text tag='span' theme='muted'>
-          <Icon src={require('@tabler/icons/outline/link.svg')} />
+          <Icon src={linkIcon} />
         </Text>
         <Text tag='span' theme='muted' size='sm' direction={direction}>
           {card.provider_name}
@@ -168,10 +172,10 @@ const PreviewCard: React.FC<IPreviewCard> = ({
     if (embedded) {
       embed = renderVideo();
     } else {
-      let iconVariant = require('@tabler/icons/outline/player-play.svg');
+      let iconVariant = playerPlayIcon;
 
       if (card.type === 'photo') {
-        iconVariant = require('@tabler/icons/outline/zoom-in.svg');
+        iconVariant = zoomInIcon;
       }
 
       embed = (
@@ -198,7 +202,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
                     className='text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100'
                   >
                     <Icon
-                      src={require('@tabler/icons/outline/external-link.svg')}
+                      src={externalLinkIcon}
                       className='size-6 text-inherit'
                     />
                   </a>
diff --git a/src/components/profile-hover-card.tsx b/src/components/profile-hover-card.tsx
index b204e3d45..91232dce6 100644
--- a/src/components/profile-hover-card.tsx
+++ b/src/components/profile-hover-card.tsx
@@ -1,4 +1,5 @@
 import { useFloating } from '@floating-ui/react';
+import calendarIcon from '@tabler/icons/outline/calendar.svg';
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
@@ -123,7 +124,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
             {account.local ? (
               <HStack alignItems='center' space={0.5}>
                 <Icon
-                  src={require('@tabler/icons/outline/calendar.svg')}
+                  src={calendarIcon}
                   className='size-4 text-gray-800 dark:text-gray-200'
                 />
 
diff --git a/src/components/quoted-status-indicator.tsx b/src/components/quoted-status-indicator.tsx
index c70e00f5f..b19693261 100644
--- a/src/components/quoted-status-indicator.tsx
+++ b/src/components/quoted-status-indicator.tsx
@@ -1,3 +1,4 @@
+import quoteIcon from '@tabler/icons/outline/quote.svg';
 import React, { useCallback } from 'react';
 
 import { HStack, Icon, Text } from 'soapbox/components/ui';
@@ -18,7 +19,7 @@ const QuotedStatusIndicator: React.FC<IQuotedStatusIndicator> = ({ statusId }) =
 
   return (
     <HStack alignItems='center' space={1}>
-      <Icon className='size-5' src={require('@tabler/icons/outline/quote.svg')} aria-hidden />
+      <Icon className='size-5' src={quoteIcon} aria-hidden />
       <Text truncate>{status.url}</Text>
     </HStack>
   );
diff --git a/src/components/quoted-status.tsx b/src/components/quoted-status.tsx
index b90e753e6..569d81503 100644
--- a/src/components/quoted-status.tsx
+++ b/src/components/quoted-status.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -85,7 +86,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   if (onCancel) {
     actions = {
       onActionClick: handleClose,
-      actionIcon: require('@tabler/icons/outline/x.svg'),
+      actionIcon: xIcon,
       actionAlignment: 'top',
       actionTitle: intl.formatMessage(messages.cancel),
     };
diff --git a/src/components/scroll-top-button.tsx b/src/components/scroll-top-button.tsx
index 489aa0503..31b32ceb6 100644
--- a/src/components/scroll-top-button.tsx
+++ b/src/components/scroll-top-button.tsx
@@ -1,3 +1,4 @@
+import arrowBarToUpIcon from '@tabler/icons/outline/arrow-bar-to-up.svg';
 import throttle from 'lodash/throttle';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useIntl, MessageDescriptor } from 'react-intl';
@@ -92,7 +93,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
       >
         <Icon
           className='size-4'
-          src={require('@tabler/icons/outline/arrow-bar-to-up.svg')}
+          src={arrowBarToUpIcon}
         />
 
         <Text theme='inherit' size='sm'>
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index f5ab9fcd3..2e4d5bd64 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -1,3 +1,21 @@
+import atIcon from '@tabler/icons/outline/at.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
+import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
+import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
+import circleXIcon from '@tabler/icons/outline/circle-x.svg';
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import codeIcon from '@tabler/icons/outline/code.svg';
+import filterIcon from '@tabler/icons/outline/filter.svg';
+import hashIcon from '@tabler/icons/outline/hash.svg';
+import listIcon from '@tabler/icons/outline/list.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import settingsIcon from '@tabler/icons/outline/settings.svg';
+import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
+import userIcon from '@tabler/icons/outline/user.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 /* eslint-disable jsx-a11y/interactive-supports-focus */
 import clsx from 'clsx';
 import React, { useCallback } from 'react';
@@ -163,7 +181,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
           <IconButton
             title={intl.formatMessage(messages.close)}
             onClick={handleClose}
-            src={require('@tabler/icons/outline/x.svg')}
+            src={xIcon}
             ref={closeButtonRef}
             iconClassName='h-6 w-6'
             className='absolute right-0 top-0 -mr-11 mt-2 text-gray-600 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300'
@@ -186,7 +204,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to={`/@${account.acct}`}
-                    icon={require('@tabler/icons/outline/user.svg')}
+                    icon={userIcon}
                     text={intl.formatMessage(messages.profile)}
                     onClick={onClose}
                   />
@@ -194,7 +212,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {(account.locked || followRequestsCount > 0) && (
                     <SidebarLink
                       to='/follow_requests'
-                      icon={require('@tabler/icons/outline/user-plus.svg')}
+                      icon={userPlusIcon}
                       text={intl.formatMessage(messages.followRequests)}
                       onClick={onClose}
                     />
@@ -203,7 +221,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.bookmarks && (
                     <SidebarLink
                       to='/bookmarks'
-                      icon={require('@tabler/icons/outline/bookmark.svg')}
+                      icon={bookmarkIcon}
                       text={intl.formatMessage(messages.bookmarks)}
                       onClick={onClose}
                     />
@@ -212,7 +230,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.groups && (
                     <SidebarLink
                       to='/groups'
-                      icon={require('@tabler/icons/outline/circles.svg')}
+                      icon={circlesIcon}
                       text={intl.formatMessage(messages.groups)}
                       onClick={onClose}
                     />
@@ -221,7 +239,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.lists && (
                     <SidebarLink
                       to='/lists'
-                      icon={require('@tabler/icons/outline/list.svg')}
+                      icon={listIcon}
                       text={intl.formatMessage(messages.lists)}
                       onClick={onClose}
                     />
@@ -230,7 +248,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.events && (
                     <SidebarLink
                       to='/events'
-                      icon={require('@tabler/icons/outline/calendar-event.svg')}
+                      icon={calendarEventIcon}
                       text={intl.formatMessage(messages.events)}
                       onClick={onClose}
                     />
@@ -239,7 +257,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {settings.get('isDeveloper') && (
                     <SidebarLink
                       to='/developers'
-                      icon={require('@tabler/icons/outline/code.svg')}
+                      icon={codeIcon}
                       text={intl.formatMessage(messages.developers)}
                       onClick={onClose}
                     />
@@ -250,7 +268,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                     <SidebarLink
                       to='/timeline/local'
-                      icon={features.federating ? require('@tabler/icons/outline/at.svg') : require('@tabler/icons/outline/world.svg')}
+                      icon={features.federating ? atIcon : worldIcon}
                       text={features.federating ? instance.domain : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
                       onClick={onClose}
                     />
@@ -258,7 +276,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                     {features.federating && (
                       <SidebarLink
                         to='/timeline/global'
-                        icon={require('@tabler/icons/outline/world.svg')}
+                        icon={worldIcon}
                         text={<FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
                         onClick={onClose}
                       />
@@ -270,7 +288,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.blocks && (
                     <SidebarLink
                       to='/blocks'
-                      icon={require('@tabler/icons/outline/ban.svg')}
+                      icon={banIcon}
                       text={intl.formatMessage(messages.blocks)}
                       onClick={onClose}
                     />
@@ -278,14 +296,14 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to='/mutes'
-                    icon={require('@tabler/icons/outline/circle-x.svg')}
+                    icon={circleXIcon}
                     text={intl.formatMessage(messages.mutes)}
                     onClick={onClose}
                   />
 
                   <SidebarLink
                     to='/settings/preferences'
-                    icon={require('@tabler/icons/outline/settings.svg')}
+                    icon={settingsIcon}
                     text={intl.formatMessage(messages.preferences)}
                     onClick={onClose}
                     count={settingsNotifications.size}
@@ -294,7 +312,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.federating && (
                     <SidebarLink
                       to='/domain_blocks'
-                      icon={require('@tabler/icons/outline/ban.svg')}
+                      icon={banIcon}
                       text={intl.formatMessage(messages.domainBlocks)}
                       onClick={onClose}
                     />
@@ -303,7 +321,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {(features.filters || features.filtersV2) && (
                     <SidebarLink
                       to='/filters'
-                      icon={require('@tabler/icons/outline/filter.svg')}
+                      icon={filterIcon}
                       text={intl.formatMessage(messages.filters)}
                       onClick={onClose}
                     />
@@ -312,7 +330,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.followedHashtagsList && (
                     <SidebarLink
                       to='/followed_tags'
-                      icon={require('@tabler/icons/outline/hash.svg')}
+                      icon={hashIcon}
                       text={intl.formatMessage(messages.followedTags)}
                       onClick={onClose}
                     />
@@ -321,7 +339,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {account.admin && (
                     <SidebarLink
                       to='/soapbox/config'
-                      icon={require('@tabler/icons/outline/settings.svg')}
+                      icon={settingsIcon}
                       text={intl.formatMessage(messages.soapboxConfig)}
                       onClick={onClose}
                     />
@@ -331,7 +349,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to='/logout'
-                    icon={require('@tabler/icons/outline/logout.svg')}
+                    icon={logoutIcon}
                     text={intl.formatMessage(messages.logout)}
                     onClick={onClickLogOut}
                   />
@@ -346,7 +364,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                         </Text>
 
                         <Icon
-                          src={require('@tabler/icons/outline/chevron-down.svg')}
+                          src={chevronDownIcon}
                           className={clsx('size-4 text-gray-900 transition-transform dark:text-gray-100', {
                             'rotate-180': switcher,
                           })}
@@ -359,7 +377,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                         {otherAccounts.map(account => renderAccount(account))}
 
                         <NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
-                          <Icon className='size-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
+                          <Icon className='size-4 text-primary-500' src={plusIcon} />
                           <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
                         </NavLink>
                       </div>
diff --git a/src/components/sidebar-navigation.tsx b/src/components/sidebar-navigation.tsx
index adab520b4..da887902d 100644
--- a/src/components/sidebar-navigation.tsx
+++ b/src/components/sidebar-navigation.tsx
@@ -1,3 +1,25 @@
+import bellFilledIcon from '@tabler/icons/filled/bell.svg';
+import circlesFilledIcon from '@tabler/icons/filled/circles.svg';
+import homeFilledIcon from '@tabler/icons/filled/home.svg';
+import settingsFilledIcon from '@tabler/icons/filled/settings.svg';
+import userFilledIcon from '@tabler/icons/filled/user.svg';
+import atIcon from '@tabler/icons/outline/at.svg';
+import bellIcon from '@tabler/icons/outline/bell.svg';
+import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
+import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import codeIcon from '@tabler/icons/outline/code.svg';
+import dashboardIcon from '@tabler/icons/outline/dashboard.svg';
+import dotsCircleHorizontalIcon from '@tabler/icons/outline/dots-circle-horizontal.svg';
+import homeIcon from '@tabler/icons/outline/home.svg';
+import listIcon from '@tabler/icons/outline/list.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
+import settingsIcon from '@tabler/icons/outline/settings.svg';
+import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
+import userIcon from '@tabler/icons/outline/user.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -43,7 +65,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/follow_requests',
           text: intl.formatMessage(messages.follow_requests),
-          icon: require('@tabler/icons/outline/user-plus.svg'),
+          icon: userPlusIcon,
           count: followRequestsCount,
         });
       }
@@ -52,7 +74,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/bookmarks',
           text: intl.formatMessage(messages.bookmarks),
-          icon: require('@tabler/icons/outline/bookmark.svg'),
+          icon: bookmarkIcon,
         });
       }
 
@@ -60,7 +82,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/lists',
           text: intl.formatMessage(messages.lists),
-          icon: require('@tabler/icons/outline/list.svg'),
+          icon: listIcon,
         });
       }
 
@@ -68,14 +90,14 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/events',
           text: intl.formatMessage(messages.events),
-          icon: require('@tabler/icons/outline/calendar-event.svg'),
+          icon: calendarEventIcon,
         });
       }
 
       if (isDeveloper) {
         menu.push({
           to: '/developers',
-          icon: require('@tabler/icons/outline/code.svg'),
+          icon: codeIcon,
           text: intl.formatMessage(messages.developers),
         });
       }
@@ -92,7 +114,7 @@ const SidebarNavigation = () => {
       return (
         <SidebarNavigationLink
           to='/chats'
-          icon={require('@tabler/icons/outline/messages.svg')}
+          icon={messagesIcon}
           count={unreadChatsCount}
           countMax={9}
           text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
@@ -104,7 +126,7 @@ const SidebarNavigation = () => {
       return (
         <SidebarNavigationLink
           to='/messages'
-          icon={require('@tabler/icons/outline/mail.svg')}
+          icon={mailIcon}
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
         />
       );
@@ -118,14 +140,14 @@ const SidebarNavigation = () => {
       <Stack space={2}>
         <SidebarNavigationLink
           to='/'
-          icon={require('@tabler/icons/outline/home.svg')}
-          activeIcon={require('@tabler/icons/filled/home.svg')}
+          icon={homeIcon}
+          activeIcon={homeFilledIcon}
           text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
         />
 
         <SidebarNavigationLink
           to='/search'
-          icon={require('@tabler/icons/outline/search.svg')}
+          icon={searchIcon}
           text={<FormattedMessage id='tabs_bar.search' defaultMessage='Discover' />}
         />
 
@@ -133,8 +155,8 @@ const SidebarNavigation = () => {
           <>
             <SidebarNavigationLink
               to='/notifications'
-              icon={require('@tabler/icons/outline/bell.svg')}
-              activeIcon={require('@tabler/icons/filled/bell.svg')}
+              icon={bellIcon}
+              activeIcon={bellFilledIcon}
               count={notificationCount}
               text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
             />
@@ -144,23 +166,23 @@ const SidebarNavigation = () => {
             {features.groups && (
               <SidebarNavigationLink
                 to='/groups'
-                icon={require('@tabler/icons/outline/circles.svg')}
-                activeIcon={require('@tabler/icons/filled/circles.svg')}
+                icon={circlesIcon}
+                activeIcon={circlesFilledIcon}
                 text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
               />
             )}
 
             <SidebarNavigationLink
               to={`/@${account.acct}`}
-              icon={require('@tabler/icons/outline/user.svg')}
-              activeIcon={require('@tabler/icons/filled/user.svg')}
+              icon={userIcon}
+              activeIcon={userFilledIcon}
               text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
             />
 
             <SidebarNavigationLink
               to='/settings'
-              icon={require('@tabler/icons/outline/settings.svg')}
-              activeIcon={require('@tabler/icons/filled/settings.svg')}
+              icon={settingsIcon}
+              activeIcon={settingsFilledIcon}
               text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
               count={settingsNotifications.size}
             />
@@ -168,7 +190,7 @@ const SidebarNavigation = () => {
             {account.staff && (
               <SidebarNavigationLink
                 to='/soapbox/admin'
-                icon={require('@tabler/icons/outline/dashboard.svg')}
+                icon={dashboardIcon}
                 count={dashboardCount}
                 text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />}
               />
@@ -181,7 +203,7 @@ const SidebarNavigation = () => {
             {(account || !restrictUnauth.timelines.local) && (
               <SidebarNavigationLink
                 to='/timeline/local'
-                icon={features.federating ? require('@tabler/icons/outline/at.svg') : require('@tabler/icons/outline/world.svg')}
+                icon={features.federating ? atIcon : worldIcon}
                 text={features.federating ? instance.domain : <FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
               />
             )}
@@ -189,7 +211,7 @@ const SidebarNavigation = () => {
             {(features.federating && (account || !restrictUnauth.timelines.federated)) && (
               <SidebarNavigationLink
                 to='/timeline/global'
-                icon={require('@tabler/icons/outline/world.svg')}
+                icon={worldIcon}
                 text={<FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
               />
             )}
@@ -199,7 +221,7 @@ const SidebarNavigation = () => {
         {menu.length > 0 && (
           <DropdownMenu items={menu} placement='top'>
             <SidebarNavigationLink
-              icon={require('@tabler/icons/outline/dots-circle-horizontal.svg')}
+              icon={dotsCircleHorizontalIcon}
               text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
             />
           </DropdownMenu>
diff --git a/src/components/site-logo.tsx b/src/components/site-logo.tsx
index e42d19e52..cc107b266 100644
--- a/src/components/site-logo.tsx
+++ b/src/components/site-logo.tsx
@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
 
+import soapboxLogoWhiteSrc from 'soapbox/assets/images/soapbox-logo-white.svg';
+import soapboxLogoSrc from 'soapbox/assets/images/soapbox-logo.svg';
 import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks';
 
 interface ISiteLogo extends React.ComponentProps<'img'> {
@@ -19,9 +21,7 @@ const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
   if (theme === 'dark') darkMode = true;
 
   /** Soapbox logo. */
-  const soapboxLogo = darkMode
-    ? require('soapbox/assets/images/soapbox-logo-white.svg')
-    : require('soapbox/assets/images/soapbox-logo.svg');
+  const soapboxLogo = darkMode ? soapboxLogoWhiteSrc : soapboxLogoSrc;
 
   // Use the right logo if provided, then use fallbacks.
   const getSrc = () => {
diff --git a/src/components/status-action-bar.tsx b/src/components/status-action-bar.tsx
index 93b03cd15..4c2add1be 100644
--- a/src/components/status-action-bar.tsx
+++ b/src/components/status-action-bar.tsx
@@ -1,3 +1,35 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
+import arrowsVerticalIcon from '@tabler/icons/outline/arrows-vertical.svg';
+import atIcon from '@tabler/icons/outline/at.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import bellOffIcon from '@tabler/icons/outline/bell-off.svg';
+import bellIcon from '@tabler/icons/outline/bell.svg';
+import boltIcon from '@tabler/icons/outline/bolt.svg';
+import bookmarkOffIcon from '@tabler/icons/outline/bookmark-off.svg';
+import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
+import clipboardCopyIcon from '@tabler/icons/outline/clipboard-copy.svg';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import editIcon from '@tabler/icons/outline/edit.svg';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import foldersIcon from '@tabler/icons/outline/folders.svg';
+import gavelIcon from '@tabler/icons/outline/gavel.svg';
+import heartIcon from '@tabler/icons/outline/heart.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import messageCircleIcon from '@tabler/icons/outline/message-circle.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import pinIcon from '@tabler/icons/outline/pin.svg';
+import pinnedOffIcon from '@tabler/icons/outline/pinned-off.svg';
+import quoteIcon from '@tabler/icons/outline/quote.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import shareIcon from '@tabler/icons/outline/share.svg';
+import thumbDownIcon from '@tabler/icons/outline/thumb-down.svg';
+import thumbUpIcon from '@tabler/icons/outline/thumb-up.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import uploadIcon from '@tabler/icons/outline/upload.svg';
+import volume3Icon from '@tabler/icons/outline/volume-3.svg';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory, useRouteMatch } from 'react-router-dom';
@@ -238,7 +270,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         dispatch(deleteStatus(status.id, withRedraft));
       } else {
         dispatch(openModal('CONFIRM', {
-          icon: withRedraft ? require('@tabler/icons/outline/edit.svg') : require('@tabler/icons/outline/trash.svg'),
+          icon: withRedraft ? editIcon : trashIcon,
           heading: intl.formatMessage(withRedraft ? messages.redraftHeading : messages.deleteHeading),
           message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
           confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
@@ -319,7 +351,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     const account = status.account;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/ban.svg'),
+      icon: banIcon,
       heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
       message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />, // eslint-disable-line formatjs/no-literal-string-in-jsx
       confirm: intl.formatMessage(messages.blockConfirm),
@@ -409,7 +441,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     if (expandable) {
       menu.push({
         text: intl.formatMessage(messages.open),
-        icon: require('@tabler/icons/outline/arrows-vertical.svg'),
+        icon: arrowsVerticalIcon,
         to: `/@${status.account.acct}/posts/${status.id}`,
       });
     }
@@ -418,14 +450,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.copy),
         action: handleCopy,
-        icon: require('@tabler/icons/outline/clipboard-copy.svg'),
+        icon: clipboardCopyIcon,
       });
 
       if (features.embeds && account.local) {
         menu.push({
           text: intl.formatMessage(messages.embed),
           action: handleEmbed,
-          icon: require('@tabler/icons/outline/share.svg'),
+          icon: shareIcon,
         });
       }
     }
@@ -436,7 +468,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
 
       menu.push({
         text: intl.formatMessage(messages.external, { domain }),
-        icon: require('@tabler/icons/outline/external-link.svg'),
+        icon: externalLinkIcon,
         href: externalNostrUrl || status.uri,
         target: '_blank',
       });
@@ -454,7 +486,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: intl.formatMessage(status.pinned ? messages.unpinFromGroup : messages.pinToGroup),
           action: handleGroupPinClick,
-          icon: status.pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
+          icon: status.pinned ? pinnedOffIcon : pinIcon,
         });
       }
     }
@@ -463,7 +495,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
         action: handleBookmarkClick,
-        icon: status.bookmarked ? require('@tabler/icons/outline/bookmark-off.svg') : require('@tabler/icons/outline/bookmark.svg'),
+        icon: status.bookmarked ? bookmarkOffIcon : bookmarkIcon,
       });
     }
 
@@ -471,7 +503,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(status.pleroma.get('bookmark_folder') ? messages.bookmarkChangeFolder : messages.bookmarkSetFolder),
         action: handleBookmarkFolderClick,
-        icon: require('@tabler/icons/outline/folders.svg'),
+        icon: foldersIcon,
       });
     }
 
@@ -480,7 +512,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     menu.push({
       text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
       action: handleConversationMuteClick,
-      icon: mutingConversation ? require('@tabler/icons/outline/bell.svg') : require('@tabler/icons/outline/bell-off.svg'),
+      icon: mutingConversation ? bellIcon : bellOffIcon,
     });
 
     menu.push(null);
@@ -490,14 +522,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
           action: handlePinClick,
-          icon: status.pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
+          icon: status.pinned ? pinnedOffIcon : pinIcon,
         });
       } else {
         if (status.visibility === 'private') {
           menu.push({
             text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
             action: handleReblogClick,
-            icon: require('@tabler/icons/outline/repeat.svg'),
+            icon: repeatIcon,
           });
         }
       }
@@ -505,20 +537,20 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.delete),
         action: handleDeleteClick,
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       });
       if (features.editStatuses) {
         menu.push({
           text: intl.formatMessage(messages.edit),
           action: handleEditClick,
-          icon: require('@tabler/icons/outline/edit.svg'),
+          icon: editIcon,
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.redraft),
           action: handleRedraftClick,
-          icon: require('@tabler/icons/outline/edit.svg'),
+          icon: editIcon,
           destructive: true,
         });
       }
@@ -526,20 +558,20 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.mention, { name: username }),
         action: handleMentionClick,
-        icon: require('@tabler/icons/outline/at.svg'),
+        icon: atIcon,
       });
 
       if (status.account.pleroma?.accepts_chat_messages === true) {
         menu.push({
           text: intl.formatMessage(messages.chat, { name: username }),
           action: handleChatClick,
-          icon: require('@tabler/icons/outline/messages.svg'),
+          icon: messagesIcon,
         });
       } else if (features.privacyScopes) {
         menu.push({
           text: intl.formatMessage(messages.direct, { name: username }),
           action: handleDirectClick,
-          icon: require('@tabler/icons/outline/mail.svg'),
+          icon: mailIcon,
         });
       }
 
@@ -547,7 +579,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       if (features.groupsMuting && status.group) {
         menu.push({
           text: isMutingGroup ? intl.formatMessage(messages.unmuteGroup) : intl.formatMessage(messages.muteGroup),
-          icon: require('@tabler/icons/outline/volume-3.svg'),
+          icon: volume3Icon,
           action: isMutingGroup ? handleUnmuteGroupClick : handleMuteGroupClick,
         });
         menu.push(null);
@@ -556,19 +588,19 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.mute, { name: username }),
         action: handleMuteClick,
-        icon: require('@tabler/icons/outline/volume-3.svg'),
+        icon: volume3Icon,
       });
       if (features.blocks) {
         menu.push({
           text: intl.formatMessage(messages.block, { name: username }),
           action: handleBlockClick,
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
         });
       }
       menu.push({
         text: intl.formatMessage(messages.report, { name: username }),
         action: handleReport,
-        icon: require('@tabler/icons/outline/flag.svg'),
+        icon: flagIcon,
       });
     }
 
@@ -590,7 +622,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: 'Ban from Group',
           action: handleBlockFromGroup,
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
           destructive: true,
         });
       }
@@ -599,7 +631,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: intl.formatMessage(messages.groupModDelete),
           action: handleDeleteFromGroup,
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           destructive: true,
         });
       }
@@ -611,28 +643,28 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.adminAccount, { name: username }),
         action: onModerate,
-        icon: require('@tabler/icons/outline/gavel.svg'),
+        icon: gavelIcon,
       });
 
       if (isAdmin) {
         menu.push({
           text: intl.formatMessage(messages.admin_status),
           href: `/pleroma/admin/#/statuses/${status.id}/`,
-          icon: require('@tabler/icons/outline/pencil.svg'),
+          icon: pencilIcon,
         });
       }
 
       menu.push({
         text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
         action: handleToggleStatusSensitivity,
-        icon: require('@tabler/icons/outline/alert-triangle.svg'),
+        icon: alertTriangleIcon,
       });
 
       if (!ownAccount) {
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: handleDeleteStatus,
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           destructive: true,
         });
       }
@@ -670,14 +702,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiName || ''] || messages.favourite);
 
   const menu = _makeMenu(publicStatus);
-  let reblogIcon = require('@tabler/icons/outline/repeat.svg');
+  let reblogIcon = repeatIcon;
   let replyTitle;
   let replyDisabled = false;
 
   if (status.visibility === 'direct') {
-    reblogIcon = require('@tabler/icons/outline/mail.svg');
+    reblogIcon = mailIcon;
   } else if (status.visibility === 'private') {
-    reblogIcon = require('@tabler/icons/outline/lock.svg');
+    reblogIcon = lockIcon;
   }
 
   if ((status.group as Group)?.membership_required && !groupRelationship?.member) {
@@ -688,11 +720,11 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const reblogMenu = [{
     text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
     action: handleReblogClick,
-    icon: require('@tabler/icons/outline/repeat.svg'),
+    icon: repeatIcon,
   }, {
     text: intl.formatMessage(messages.quotePost),
     action: handleQuoteClick,
-    icon: require('@tabler/icons/outline/quote.svg'),
+    icon: quoteIcon,
   }];
 
   const reblogButton = (
@@ -741,7 +773,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         >
           <StatusActionButton
             title={replyTitle}
-            icon={require('@tabler/icons/outline/message-circle.svg')}
+            icon={messageCircleIcon}
             onClick={handleReplyClick}
             count={replyCount}
             text={withLabels ? intl.formatMessage(messages.reply) : undefined}
@@ -766,7 +798,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
           <StatusReactionWrapper statusId={status.id}>
             <StatusActionButton
               title={meEmojiTitle}
-              icon={require('@tabler/icons/outline/heart.svg')}
+              icon={heartIcon}
               filled
               color='accent'
               active={Boolean(meEmojiName)}
@@ -779,7 +811,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         ) : (
           <StatusActionButton
             title={intl.formatMessage(messages.favourite)}
-            icon={features.dislikes ? require('@tabler/icons/outline/thumb-up.svg') : require('@tabler/icons/outline/heart.svg')}
+            icon={features.dislikes ? thumbUpIcon : heartIcon}
             color='accent'
             filled
             onClick={handleFavouriteClick}
@@ -793,7 +825,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         {features.dislikes && (
           <StatusActionButton
             title={intl.formatMessage(messages.disfavourite)}
-            icon={require('@tabler/icons/outline/thumb-down.svg')}
+            icon={thumbDownIcon}
             color='accent'
             filled
             onClick={handleDislikeClick}
@@ -807,7 +839,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         {(acceptsZaps) && (
           <StatusActionButton
             title={intl.formatMessage(messages.zap)}
-            icon={require('@tabler/icons/outline/bolt.svg')}
+            icon={boltIcon}
             color='accent'
             filled
             onClick={handleZapClick}
@@ -821,7 +853,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         {canShare && (
           <StatusActionButton
             title={intl.formatMessage(messages.share)}
-            icon={require('@tabler/icons/outline/upload.svg')}
+            icon={uploadIcon}
             onClick={handleShareClick}
             theme={statusActionButtonTheme}
           />
@@ -830,7 +862,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         <DropdownMenu items={menu} status={status}>
           <StatusActionButton
             title={intl.formatMessage(messages.more)}
-            icon={require('@tabler/icons/outline/dots.svg')}
+            icon={dotsIcon}
             theme={statusActionButtonTheme}
           />
         </DropdownMenu>
diff --git a/src/components/status-content.tsx b/src/components/status-content.tsx
index 8d537aa62..3f7c4011b 100644
--- a/src/components/status-content.tsx
+++ b/src/components/status-content.tsx
@@ -1,3 +1,4 @@
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import clsx from 'clsx';
 import parse, { Element, type HTMLReactParserOptions, domToReact, type DOMNode } from 'html-react-parser';
 import React, { useState, useRef, useLayoutEffect, useMemo } from 'react';
@@ -27,7 +28,7 @@ interface IReadMoreButton {
 const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
   <button className='flex items-center border-0 bg-transparent p-0 pt-2 text-gray-900 hover:underline active:underline dark:text-gray-300' onClick={onClick}>
     <FormattedMessage id='status.read_more' defaultMessage='Read more' />
-    <Icon className='inline-block size-5' src={require('@tabler/icons/outline/chevron-right.svg')} />
+    <Icon className='inline-block size-5' src={chevronRightIcon} />
   </button>
 );
 
diff --git a/src/components/status.tsx b/src/components/status.tsx
index 022eab385..016153563 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -1,3 +1,6 @@
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import pinnedIcon from '@tabler/icons/outline/pinned.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
@@ -212,7 +215,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='size-4 text-green-600' />}
+          icon={<Icon src={repeatIcon} className='size-4 text-green-600' />}
           text={
             <FormattedMessage
               id='status.reblogged_by_with_group'
@@ -252,7 +255,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='size-4 text-green-600' />}
+          icon={<Icon src={repeatIcon} className='size-4 text-green-600' />}
           text={
             <FormattedMessage
               id='status.reblogged_by'
@@ -279,7 +282,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/pinned.svg')} className='size-4 text-gray-600 dark:text-gray-400' />}
+          icon={<Icon src={pinnedIcon} className='size-4 text-gray-600 dark:text-gray-400' />}
           text={
             <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
           }
@@ -289,7 +292,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='size-4 text-primary-600 dark:text-accent-blue' />}
+          icon={<Icon src={circlesIcon} className='size-4 text-primary-600 dark:text-accent-blue' />}
           text={
             <FormattedMessage
               id='status.group'
diff --git a/src/components/statuses/sensitive-content-overlay.tsx b/src/components/statuses/sensitive-content-overlay.tsx
index cb50c722b..3c71a5cd2 100644
--- a/src/components/statuses/sensitive-content-overlay.tsx
+++ b/src/components/statuses/sensitive-content-overlay.tsx
@@ -1,3 +1,8 @@
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import eyeIcon from '@tabler/icons/outline/eye.svg';
+import headsetIcon from '@tabler/icons/outline/headset.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import clsx from 'clsx';
 import React, { useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -61,7 +66,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
       dispatch(deleteStatus(status.id, false));
     } else {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         heading: intl.formatMessage(messages.deleteHeading),
         message: intl.formatMessage(messages.deleteMessage),
         confirm: intl.formatMessage(messages.deleteConfirm),
@@ -75,7 +80,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
       {
         text: intl.formatMessage(messages.delete),
         action: handleDeleteStatus,
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       },
     ];
@@ -99,7 +104,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
       {visible ? (
         <Button
           text={intl.formatMessage(messages.hide)}
-          icon={require('@tabler/icons/outline/eye-off.svg')}
+          icon={eyeOffIcon}
           onClick={toggleVisibility}
           theme='primary'
           size='sm'
@@ -140,7 +145,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
                         type='button'
                         theme='outline'
                         size='sm'
-                        icon={require('@tabler/icons/outline/headset.svg')}
+                        icon={headsetIcon}
                       >
                         {intl.formatMessage(messages.contact)}
                       </Button>
@@ -153,7 +158,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
                 type='button'
                 theme='outline'
                 size='sm'
-                icon={require('@tabler/icons/outline/eye.svg')}
+                icon={eyeIcon}
                 onClick={toggleVisibility}
               >
                 {intl.formatMessage(messages.show)}
@@ -162,7 +167,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
               {(isUnderReview && isOwnStatus) ? (
                 <DropdownMenu
                   items={menu}
-                  src={require('@tabler/icons/outline/dots.svg')}
+                  src={dotsIcon}
                 />
               ) : null}
             </HStack>
diff --git a/src/components/thumb-navigation.tsx b/src/components/thumb-navigation.tsx
index 08d792e22..35008843c 100644
--- a/src/components/thumb-navigation.tsx
+++ b/src/components/thumb-navigation.tsx
@@ -1,3 +1,14 @@
+import bellFilledIcon from '@tabler/icons/filled/bell.svg';
+import circlesFilledIcon from '@tabler/icons/filled/circles.svg';
+import homeFilledIcon from '@tabler/icons/filled/home.svg';
+import mailFilledIcon from '@tabler/icons/filled/mail.svg';
+import bellIcon from '@tabler/icons/outline/bell.svg';
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import dashboardIcon from '@tabler/icons/outline/dashboard.svg';
+import homeIcon from '@tabler/icons/outline/home.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -19,7 +30,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     if (features.chats) {
       return (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/messages.svg')}
+          src={messagesIcon}
           text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
           to='/chats'
           exact
@@ -32,8 +43,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     if (features.directTimeline || features.conversations) {
       return (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/mail.svg')}
-          activeSrc={require('@tabler/icons/filled/mail.svg')}
+          src={mailIcon}
+          activeSrc={mailFilledIcon}
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
           to='/messages'
           paths={['/messages', '/conversations']}
@@ -47,8 +58,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
   return (
     <div className='thumb-navigation'>
       <ThumbNavigationLink
-        src={require('@tabler/icons/outline/home.svg')}
-        activeSrc={require('@tabler/icons/filled/home.svg')}
+        src={homeIcon}
+        activeSrc={homeFilledIcon}
         text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
         to='/'
         exact
@@ -56,8 +67,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {features.groups && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/circles.svg')}
-          activeSrc={require('@tabler/icons/filled/circles.svg')}
+          src={circlesIcon}
+          activeSrc={circlesFilledIcon}
           text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
           to='/groups'
           exact
@@ -65,7 +76,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
       )}
 
       <ThumbNavigationLink
-        src={require('@tabler/icons/outline/search.svg')}
+        src={searchIcon}
         text={<FormattedMessage id='navigation.search' defaultMessage='Discover' />}
         to='/search'
         exact
@@ -73,8 +84,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {account && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/bell.svg')}
-          activeSrc={require('@tabler/icons/filled/bell.svg')}
+          src={bellIcon}
+          activeSrc={bellFilledIcon}
           text={<FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />}
           to='/notifications'
           exact
@@ -86,7 +97,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {(account && account.staff) && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/dashboard.svg')}
+          src={dashboardIcon}
           text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
           to='/soapbox/admin'
           count={dashboardCount}
diff --git a/src/components/translate-button.tsx b/src/components/translate-button.tsx
index bfe0fe4e6..86a996807 100644
--- a/src/components/translate-button.tsx
+++ b/src/components/translate-button.tsx
@@ -1,3 +1,4 @@
+import languageIcon from '@tabler/icons/outline/language.svg';
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
@@ -53,7 +54,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
         <Button
           theme='muted'
           text={<FormattedMessage id='status.show_original' defaultMessage='Show original' />}
-          icon={require('@tabler/icons/outline/language.svg')}
+          icon={languageIcon}
           onClick={handleTranslate}
         />
         <Text theme='muted'>
@@ -68,7 +69,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
       <Button
         theme='muted'
         text={<FormattedMessage id='status.translate' defaultMessage='Translate' />}
-        icon={require('@tabler/icons/outline/language.svg')}
+        icon={languageIcon}
         onClick={handleTranslate}
       />
     </div>
diff --git a/src/components/ui/accordion/accordion.tsx b/src/components/ui/accordion/accordion.tsx
index ec9e1a4cf..577bf1234 100644
--- a/src/components/ui/accordion/accordion.tsx
+++ b/src/components/ui/accordion/accordion.tsx
@@ -1,3 +1,6 @@
+import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
+import chevronUpIcon from '@tabler/icons/outline/chevron-up.svg';
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -60,7 +63,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
           {menu && (
             <DropdownMenu
               items={menu}
-              src={require('@tabler/icons/outline/dots-vertical.svg')}
+              src={dotsVerticalIcon}
             />
           )}
           {action && actionIcon && (
@@ -72,7 +75,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
             </button>
           )}
           <Icon
-            src={expanded ? require('@tabler/icons/outline/chevron-up.svg') : require('@tabler/icons/outline/chevron-down.svg')}
+            src={expanded ? chevronUpIcon : chevronDownIcon}
             className='size-5 text-gray-700 dark:text-gray-600'
           />
         </HStack>
diff --git a/src/components/ui/avatar/avatar.tsx b/src/components/ui/avatar/avatar.tsx
index c6d1af6c8..99627b5b2 100644
--- a/src/components/ui/avatar/avatar.tsx
+++ b/src/components/ui/avatar/avatar.tsx
@@ -1,3 +1,4 @@
+import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
@@ -35,7 +36,7 @@ const Avatar = (props: IAvatar) => {
         className={clsx('flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-900', className)}
       >
         <Icon
-          src={require('@tabler/icons/outline/photo-off.svg')}
+          src={photoOffIcon}
           className='size-4 text-gray-500 dark:text-gray-700'
         />
       </div>
diff --git a/src/components/ui/card/card.tsx b/src/components/ui/card/card.tsx
index 242d50f34..31887948e 100644
--- a/src/components/ui/card/card.tsx
+++ b/src/components/ui/card/card.tsx
@@ -1,3 +1,4 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -72,7 +73,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
 
     return (
       <Comp {...backAttributes} className='rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
-        <SvgIcon src={require('@tabler/icons/outline/arrow-left.svg')} className='size-6 rtl:rotate-180' />
+        <SvgIcon src={arrowLeftIcon} className='size-6 rtl:rotate-180' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
     );
diff --git a/src/components/ui/carousel/carousel.tsx b/src/components/ui/carousel/carousel.tsx
index 1cd4f2e8a..1739587c4 100644
--- a/src/components/ui/carousel/carousel.tsx
+++ b/src/components/ui/carousel/carousel.tsx
@@ -1,3 +1,5 @@
+import chevronLeftIcon from '@tabler/icons/outline/chevron-left.svg';
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import React, { useEffect, useState } from 'react';
 
 import { useDimensions } from 'soapbox/hooks';
@@ -68,7 +70,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
           disabled={!hasPrevPage || isDisabled}
         >
           <Icon
-            src={require('@tabler/icons/outline/chevron-left.svg')}
+            src={chevronLeftIcon}
             className='size-5 text-black dark:text-white'
           />
         </button>
@@ -100,7 +102,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
           disabled={!hasNextPage || isDisabled}
         >
           <Icon
-            src={require('@tabler/icons/outline/chevron-right.svg')}
+            src={chevronRightIcon}
             className='size-5 text-black dark:text-white'
           />
         </button>
diff --git a/src/components/ui/emoji-selector/emoji-selector.tsx b/src/components/ui/emoji-selector/emoji-selector.tsx
index 9a28bffa1..1ba4ee14f 100644
--- a/src/components/ui/emoji-selector/emoji-selector.tsx
+++ b/src/components/ui/emoji-selector/emoji-selector.tsx
@@ -1,4 +1,5 @@
 import { shift, useFloating, Placement, offset, OffsetOptions } from '@floating-ui/react';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 
@@ -134,7 +135,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
           {all && (
             <IconButton
               className='text-gray-600 hover:text-gray-600 dark:hover:text-white'
-              src={require('@tabler/icons/outline/dots.svg')}
+              src={dotsIcon}
               onClick={handleExpand}
             />
           )}
diff --git a/src/components/ui/input/input.tsx b/src/components/ui/input/input.tsx
index 94daf1dcb..6bc634636 100644
--- a/src/components/ui/input/input.tsx
+++ b/src/components/ui/input/input.tsx
@@ -1,3 +1,5 @@
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import eyeIcon from '@tabler/icons/outline/eye.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -123,7 +125,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400'
               >
                 <SvgIcon
-                  src={revealed ? require('@tabler/icons/outline/eye-off.svg') : require('@tabler/icons/outline/eye.svg')}
+                  src={revealed ? eyeOffIcon : eyeIcon}
                   className='size-4'
                 />
               </button>
diff --git a/src/components/ui/language-dropdown/language-dropdown.tsx b/src/components/ui/language-dropdown/language-dropdown.tsx
index b6eac2f15..756ada8b6 100644
--- a/src/components/ui/language-dropdown/language-dropdown.tsx
+++ b/src/components/ui/language-dropdown/language-dropdown.tsx
@@ -1,3 +1,4 @@
+import worldIcon from '@tabler/icons/outline/world.svg';
 import React from 'react';
 
 import { openDropdownMenu } from 'soapbox/actions/dropdown-menu';
@@ -26,7 +27,7 @@ const LanguageDropdown: React.FC<ILanguageDropdown> = ({ language, setLanguage }
   const dispatch = useAppDispatch();
   const formattedLanguages = formatLanguages(languages);
 
-  const newMenu: MenuItem[] = [{ icon: require('@tabler/icons/outline/world.svg'), text: 'Default', action: () => {
+  const newMenu: MenuItem[] = [{ icon: worldIcon, text: 'Default', action: () => {
     setLanguage('');
   } }];
 
@@ -51,7 +52,7 @@ const LanguageDropdown: React.FC<ILanguageDropdown> = ({ language, setLanguage }
           {language.toUpperCase()}
         </button>
       ) : (
-        <SvgIcon src={require('@tabler/icons/outline/world.svg')} className='text-gray-700 hover:cursor-pointer hover:text-gray-500 black:absolute black:right-0 black:top-4 black:text-white black:hover:text-gray-600 dark:text-white sm:mr-4' />
+        <SvgIcon src={worldIcon} className='text-gray-700 hover:cursor-pointer hover:text-gray-500 black:absolute black:right-0 black:top-4 black:text-white black:hover:text-gray-600 dark:text-white sm:mr-4' />
       )}
     </DropdownMenu>
   );
diff --git a/src/components/ui/modal/modal.tsx b/src/components/ui/modal/modal.tsx
index 82b9e6482..6d516fc91 100644
--- a/src/components/ui/modal/modal.tsx
+++ b/src/components/ui/modal/modal.tsx
@@ -1,3 +1,5 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -72,7 +74,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
   cancelAction,
   cancelText,
   children,
-  closeIcon = require('@tabler/icons/outline/x.svg'),
+  closeIcon = xIcon,
   closePosition = 'right',
   confirmationAction,
   confirmationDisabled,
@@ -115,7 +117,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
             >
               {onBack && (
                 <IconButton
-                  src={require('@tabler/icons/outline/arrow-left.svg')}
+                  src={arrowLeftIcon}
                   title={intl.formatMessage(messages.back)}
                   onClick={onBack}
                   className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
diff --git a/src/components/ui/streamfield/streamfield.tsx b/src/components/ui/streamfield/streamfield.tsx
index 1dbb683d3..6ad51f9e2 100644
--- a/src/components/ui/streamfield/streamfield.tsx
+++ b/src/components/ui/streamfield/streamfield.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
@@ -83,7 +84,7 @@ const Streamfield: React.FC<IStreamfield> = ({
                 <IconButton
                   iconClassName='h-4 w-4'
                   className='bg-transparent text-gray-600 hover:text-gray-600'
-                  src={require('@tabler/icons/outline/x.svg')}
+                  src={xIcon}
                   onClick={() => onRemoveItem(i)}
                   title={intl.formatMessage(messages.remove)}
                 />
diff --git a/src/components/ui/tag-input/tag.tsx b/src/components/ui/tag-input/tag.tsx
index d6bf05c75..4ca668fef 100644
--- a/src/components/ui/tag-input/tag.tsx
+++ b/src/components/ui/tag-input/tag.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 
 import IconButton from '../icon-button/icon-button';
@@ -18,7 +19,7 @@ const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
 
       <IconButton
         iconClassName='h-4 w-4'
-        src={require('@tabler/icons/outline/x.svg')}
+        src={xIcon}
         onClick={() => onDelete(tag)}
       />
     </div>
diff --git a/src/components/ui/toast/toast.tsx b/src/components/ui/toast/toast.tsx
index f5a9cb2a9..11626f722 100644
--- a/src/components/ui/toast/toast.tsx
+++ b/src/components/ui/toast/toast.tsx
@@ -1,3 +1,7 @@
+import alertCircleIcon from '@tabler/icons/outline/alert-circle.svg';
+import circleCheckIcon from '@tabler/icons/outline/circle-check.svg';
+import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React from 'react';
 import toast, { Toast as RHToast } from 'react-hot-toast';
@@ -42,7 +46,7 @@ const Toast = (props: IToast) => {
       case 'success':
         return (
           <Icon
-            src={require('@tabler/icons/outline/circle-check.svg')}
+            src={circleCheckIcon}
             className='size-6 text-success-500 dark:text-success-400'
             aria-hidden
           />
@@ -50,7 +54,7 @@ const Toast = (props: IToast) => {
       case 'info':
         return (
           <Icon
-            src={require('@tabler/icons/outline/info-circle.svg')}
+            src={infoCircleIcon}
             className='size-6 text-primary-600 dark:text-accent-blue'
             aria-hidden
           />
@@ -58,7 +62,7 @@ const Toast = (props: IToast) => {
       case 'error':
         return (
           <Icon
-            src={require('@tabler/icons/outline/alert-circle.svg')}
+            src={alertCircleIcon}
             className='size-6 text-danger-600'
             aria-hidden
           />
@@ -143,7 +147,7 @@ const Toast = (props: IToast) => {
               data-testid='toast-dismiss'
             >
               <span className='sr-only'><FormattedMessage id='lightbox.close' defaultMessage='Close' /></span>
-              <Icon src={require('@tabler/icons/outline/x.svg')} className='size-5' />
+              <Icon src={xIcon} className='size-5' />
             </button>
           </div>
         </HStack>
diff --git a/src/components/ui/widget/widget.tsx b/src/components/ui/widget/widget.tsx
index 4d2f8482b..446312c16 100644
--- a/src/components/ui/widget/widget.tsx
+++ b/src/components/ui/widget/widget.tsx
@@ -1,3 +1,4 @@
+import arrowRightIcon from '@tabler/icons/outline/arrow-right.svg';
 import React from 'react';
 
 import HStack from 'soapbox/components/ui/hstack/hstack';
@@ -42,7 +43,7 @@ const Widget: React.FC<IWidget> = ({
   title,
   children,
   onActionClick,
-  actionIcon = require('@tabler/icons/outline/arrow-right.svg'),
+  actionIcon = arrowRightIcon,
   actionTitle,
   action,
 }): JSX.Element => {
diff --git a/src/components/upload-progress.tsx b/src/components/upload-progress.tsx
index 10b0490d2..e2f44fc64 100644
--- a/src/components/upload-progress.tsx
+++ b/src/components/upload-progress.tsx
@@ -1,3 +1,4 @@
+import cloudUploadIcon from '@tabler/icons/outline/cloud-upload.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -13,7 +14,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
   return (
     <HStack alignItems='center' space={2}>
       <Icon
-        src={require('@tabler/icons/outline/cloud-upload.svg')}
+        src={cloudUploadIcon}
         className='size-7 text-gray-500'
       />
 
diff --git a/src/components/upload.tsx b/src/components/upload.tsx
index 23393a54e..441ca66f9 100644
--- a/src/components/upload.tsx
+++ b/src/components/upload.tsx
@@ -1,3 +1,4 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import bookIcon from '@tabler/icons/outline/book.svg';
 import fileCodeIcon from '@tabler/icons/outline/file-code.svg';
 import fileSpreadsheetIcon from '@tabler/icons/outline/file-spreadsheet.svg';
@@ -240,7 +241,7 @@ const Upload: React.FC<IUpload> = ({
                   'opacity-100': !active,
                 })}
               >
-                <Icon className='size-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />
+                <Icon className='size-4' src={alertTriangleIcon} />
                 <FormattedMessage id='upload_form.description_missing.indicator' defaultMessage='Alt' />
               </span>
             )}
diff --git a/src/components/validation-checkmark.tsx b/src/components/validation-checkmark.tsx
index cb4e06816..2a4acd144 100644
--- a/src/components/validation-checkmark.tsx
+++ b/src/components/validation-checkmark.tsx
@@ -1,3 +1,5 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
+import pointIcon from '@tabler/icons/outline/point.svg';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -12,7 +14,7 @@ const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
   return (
     <HStack alignItems='center' space={2} data-testid='validation-checkmark'>
       <Icon
-        src={isValid ? require('@tabler/icons/outline/check.svg') : require('@tabler/icons/outline/point.svg')}
+        src={isValid ? checkIcon : pointIcon}
         className={clsx({
           'w-4 h-4': true,
           'text-gray-400 dark:text-gray-600 dark:fill-gray-600 fill-gray-400': !isValid,
diff --git a/src/components/verification-badge.tsx b/src/components/verification-badge.tsx
index d4b3bca3f..108f1e9c7 100644
--- a/src/components/verification-badge.tsx
+++ b/src/components/verification-badge.tsx
@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
+import verifiedIcon from 'soapbox/assets/icons/verified.svg';
 import { Icon } from 'soapbox/components/ui';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
@@ -18,7 +19,7 @@ const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
   const soapboxConfig = useSoapboxConfig();
 
   // Prefer a custom icon if found
-  const icon = soapboxConfig.verifiedIcon || require('soapbox/assets/icons/verified.svg');
+  const icon = soapboxConfig.verifiedIcon || verifiedIcon;
 
   // Render component based on file extension
   const Element = icon.endsWith('.svg') ? Icon : 'img';
diff --git a/src/features/account-gallery/components/media-item.tsx b/src/features/account-gallery/components/media-item.tsx
index b7c77a7d3..0dc5a7ea2 100644
--- a/src/features/account-gallery/components/media-item.tsx
+++ b/src/features/account-gallery/components/media-item.tsx
@@ -1,3 +1,5 @@
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
@@ -103,7 +105,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
     const fileExtension = remoteURL.slice(fileExtensionLastIndex + 1).toUpperCase();
     thumbnail = (
       <div className='relative z-[1] block size-full cursor-zoom-in leading-none text-gray-400 no-underline'>
-        <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon  className='size-24' src={require('@tabler/icons/outline/volume.svg')} /></span>
+        <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon  className='size-24' src={volumeIcon} /></span>
         <span className='pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 px-1.5 py-0.5 text-[11px] font-semibold leading-[18px] text-white opacity-90 transition-opacity duration-100 ease-linear'>{fileExtension}</span>
       </div>
     );
@@ -112,7 +114,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
   if (!visible) {
     icon = (
       <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
-        <SvgIcon className='size-24' src={require('@tabler/icons/outline/eye-off.svg')} />
+        <SvgIcon className='size-24' src={eyeOffIcon} />
       </span>
     );
   }
diff --git a/src/features/account-timeline/components/moved-note.tsx b/src/features/account-timeline/components/moved-note.tsx
index c8924cdbe..dbef926ed 100644
--- a/src/features/account-timeline/components/moved-note.tsx
+++ b/src/features/account-timeline/components/moved-note.tsx
@@ -1,3 +1,4 @@
+import briefcaseIcon from '@tabler/icons/outline/briefcase.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -16,7 +17,7 @@ const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
   <div className='p-4'>
     <HStack className='mb-2' alignItems='center' space={1.5}>
       <Icon
-        src={require('@tabler/icons/outline/briefcase.svg')}
+        src={briefcaseIcon}
         className='flex-none text-primary-600 dark:text-primary-400'
       />
 
diff --git a/src/features/account/components/header.tsx b/src/features/account/components/header.tsx
index a9bd79b1a..0b215ccc9 100644
--- a/src/features/account/components/header.tsx
+++ b/src/features/account/components/header.tsx
@@ -1,3 +1,23 @@
+import atIcon from '@tabler/icons/outline/at.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import boltIcon from '@tabler/icons/outline/bolt.svg';
+import circleXIcon from '@tabler/icons/outline/circle-x.svg';
+import clipboardCopyIcon from '@tabler/icons/outline/clipboard-copy.svg';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import gavelIcon from '@tabler/icons/outline/gavel.svg';
+import listIcon from '@tabler/icons/outline/list.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import rssIcon from '@tabler/icons/outline/rss.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
+import settingsIcon from '@tabler/icons/outline/settings.svg';
+import uploadIcon from '@tabler/icons/outline/upload.svg';
+import userCheckIcon from '@tabler/icons/outline/user-check.svg';
+import userXIcon from '@tabler/icons/outline/user-x.svg';
+import userIcon from '@tabler/icons/outline/user.svg';
 import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { List as ImmutableList } from 'immutable';
@@ -135,7 +155,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       dispatch(unblockAccount(account.id));
     } else {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/outline/ban.svg'),
+        icon: banIcon,
         heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
         message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />, // eslint-disable-line formatjs/no-literal-string-in-jsx
         confirm: intl.formatMessage(messages.blockConfirm),
@@ -191,7 +211,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
   const onBlockDomain = (domain: string) => {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/ban.svg'),
+      icon: banIcon,
       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),
@@ -298,7 +318,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
     if (features.rssFeeds && account.local) {
       menu.push({
         text: intl.formatMessage(messages.subscribeFeed),
-        icon: require('@tabler/icons/outline/rss.svg'),
+        icon: rssIcon,
         href: software === MASTODON ? `${account.url}.rss` : `${account.url}/feed.rss`,
         target: '_blank',
       });
@@ -308,7 +328,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.share, { name: account.username }),
         action: handleShare,
-        icon: require('@tabler/icons/outline/upload.svg'),
+        icon: uploadIcon,
       });
     }
 
@@ -321,7 +341,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.profileExternal, { domain }),
           action: () => onProfileExternal(url),
-          icon: require('@tabler/icons/outline/external-link.svg'),
+          icon: externalLinkIcon,
           href: url,
         });
       }
@@ -330,14 +350,14 @@ const Header: React.FC<IHeader> = ({ account }) => {
     menu.push({
       text: intl.formatMessage(messages.copy),
       action: handleCopy,
-      icon: require('@tabler/icons/outline/clipboard-copy.svg'),
+      icon: clipboardCopyIcon,
     });
 
     if (account.nostr.pubkey) {
       menu.push({
         text: intl.formatMessage(messages.npub),
         action: handleCopyNpub,
-        icon: require('@tabler/icons/outline/clipboard-copy.svg'),
+        icon: clipboardCopyIcon,
       });
     }
 
@@ -347,7 +367,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(account.id === ownAccount.id ? messages.searchSelf : messages.search, { name: account.username }),
         action: onSearch,
-        icon: require('@tabler/icons/outline/search.svg'),
+        icon: searchIcon,
       });
     }
 
@@ -359,38 +379,38 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.edit_profile),
         to: '/settings/profile',
-        icon: require('@tabler/icons/outline/user.svg'),
+        icon: userIcon,
       });
       menu.push({
         text: intl.formatMessage(messages.preferences),
         to: '/settings',
-        icon: require('@tabler/icons/outline/settings.svg'),
+        icon: settingsIcon,
       });
       menu.push(null);
       menu.push({
         text: intl.formatMessage(messages.mutes),
         to: '/mutes',
-        icon: require('@tabler/icons/outline/circle-x.svg'),
+        icon: circleXIcon,
       });
       if (features.blocks) {
         menu.push({
           text: intl.formatMessage(messages.blocks),
           to: '/blocks',
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
         });
       }
     } else {
       menu.push({
         text: intl.formatMessage(messages.mention, { name: account.username }),
         action: onMention,
-        icon: require('@tabler/icons/outline/at.svg'),
+        icon: atIcon,
       });
 
       if (features.privacyScopes) {
         menu.push({
           text: intl.formatMessage(messages.direct, { name: account.username }),
           action: onDirect,
-          icon: require('@tabler/icons/outline/mail.svg'),
+          icon: mailIcon,
         });
       }
 
@@ -399,13 +419,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(messages.hideReblogs, { name: account.username }),
             action: onReblogToggle,
-            icon: require('@tabler/icons/outline/repeat.svg'),
+            icon: repeatIcon,
           });
         } else {
           menu.push({
             text: intl.formatMessage(messages.showReblogs, { name: account.username }),
             action: onReblogToggle,
-            icon: require('@tabler/icons/outline/repeat.svg'),
+            icon: repeatIcon,
           });
         }
 
@@ -413,7 +433,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(messages.add_or_remove_from_list),
             action: onAddToList,
-            icon: require('@tabler/icons/outline/list.svg'),
+            icon: listIcon,
           });
         }
 
@@ -421,14 +441,14 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(account.relationship?.endorsed ? messages.unendorse : messages.endorse),
             action: onEndorseToggle,
-            icon: require('@tabler/icons/outline/user-check.svg'),
+            icon: userCheckIcon,
           });
         }
       } else if (features.lists && features.unrestrictedLists) {
         menu.push({
           text: intl.formatMessage(messages.add_or_remove_from_list),
           action: onAddToList,
-          icon: require('@tabler/icons/outline/list.svg'),
+          icon: listIcon,
         });
       }
 
@@ -438,7 +458,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.removeFromFollowers),
           action: onRemoveFromFollowers,
-          icon: require('@tabler/icons/outline/user-x.svg'),
+          icon: userXIcon,
         });
       }
 
@@ -446,13 +466,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.unmute, { name: account.username }),
           action: onMute,
-          icon: require('@tabler/icons/outline/circle-x.svg'),
+          icon: circleXIcon,
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.mute, { name: account.username }),
           action: onMute,
-          icon: require('@tabler/icons/outline/circle-x.svg'),
+          icon: circleXIcon,
         });
       }
 
@@ -461,13 +481,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(messages.unblock, { name: account.username }),
             action: onBlock,
-            icon: require('@tabler/icons/outline/ban.svg'),
+            icon: banIcon,
           });
         } else {
           menu.push({
             text: intl.formatMessage(messages.block, { name: account.username }),
             action: onBlock,
-            icon: require('@tabler/icons/outline/ban.svg'),
+            icon: banIcon,
           });
         }
       }
@@ -475,7 +495,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.report, { name: account.username }),
         action: onReport,
-        icon: require('@tabler/icons/outline/flag.svg'),
+        icon: flagIcon,
       });
     }
 
@@ -488,13 +508,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.unblockDomain, { domain }),
           action: () => onUnblockDomain(domain),
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.blockDomain, { domain }),
           action: () => onBlockDomain(domain),
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
         });
       }
     }
@@ -505,7 +525,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.adminAccount, { name: account.username }),
         action: onModerate,
-        icon: require('@tabler/icons/outline/gavel.svg'),
+        icon: gavelIcon,
       });
     }
 
@@ -592,7 +612,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
       return (
         <IconButton
-          src={require('@tabler/icons/outline/messages.svg')}
+          src={messagesIcon}
           onClick={() => createAndNavigateToChat.mutate(account.id)}
           title={intl.formatMessage(messages.chat, { name: account.username })}
           theme='outlined'
@@ -604,7 +624,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
     } else if (account.pleroma?.accepts_chat_messages) {
       return (
         <IconButton
-          src={require('@tabler/icons/outline/messages.svg')}
+          src={messagesIcon}
           onClick={() => createAndNavigateToChat.mutate(account.id)}
           title={intl.formatMessage(messages.chat, { name: account.username })}
           theme='outlined'
@@ -626,7 +646,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
     return (
       <IconButton
-        src={require('@tabler/icons/outline/upload.svg')}
+        src={uploadIcon}
         onClick={handleShare}
         title={intl.formatMessage(messages.share, { name: account.username })}
         theme='outlined'
@@ -639,7 +659,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
   const renderZapAccount = () => {
     return (
       <IconButton
-        src={require('@tabler/icons/outline/bolt.svg')}
+        src={boltIcon}
         onClick={handleZapAccount}
         title={intl.formatMessage(messages.zap, { target: account.display_name })}
         theme='outlined'
@@ -698,7 +718,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
               {menu.length > 0 && (
                 <DropdownMenu items={menu} placement='bottom-end'>
                   <IconButton
-                    src={require('@tabler/icons/outline/dots.svg')}
+                    src={dotsIcon}
                     theme='outlined'
                     className='px-2'
                     iconClassName='h-4 w-4'
diff --git a/src/features/admin/announcements.tsx b/src/features/admin/announcements.tsx
index fd22856f7..edffda136 100644
--- a/src/features/admin/announcements.tsx
+++ b/src/features/admin/announcements.tsx
@@ -1,3 +1,4 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import React from 'react';
 import { FormattedDate, FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -103,7 +104,7 @@ const Announcements: React.FC = () => {
       <Stack className='gap-4'>
         <Button
           className='sm:w-fit sm:self-end'
-          icon={require('@tabler/icons/outline/plus.svg')}
+          icon={plusIcon}
           onClick={handleCreateAnnouncement}
           theme='secondary'
           block
diff --git a/src/features/admin/components/report-status.tsx b/src/features/admin/components/report-status.tsx
index d5ca1719e..2a158f10e 100644
--- a/src/features/admin/components/report-status.tsx
+++ b/src/features/admin/components/report-status.tsx
@@ -1,3 +1,6 @@
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
@@ -34,11 +37,11 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
     return [{
       text: intl.formatMessage(messages.viewStatus, { acct: `@${acct}` }),
       to: `/@${acct}/posts/${status.id}`,
-      icon: require('@tabler/icons/outline/pencil.svg'),
+      icon: pencilIcon,
     }, {
       text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }),
       action: handleDeleteStatus,
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       destructive: true,
     }];
   };
@@ -55,7 +58,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
       <div className='flex-none'>
         <DropdownMenu
           items={menu}
-          src={require('@tabler/icons/outline/dots-vertical.svg')}
+          src={dotsVerticalIcon}
         />
       </div>
     </HStack>
diff --git a/src/features/admin/components/report.tsx b/src/features/admin/components/report.tsx
index 3f451dcb6..cf3eaa000 100644
--- a/src/features/admin/components/report.tsx
+++ b/src/features/admin/components/report.tsx
@@ -1,3 +1,6 @@
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
+import hourglassEmptyIcon from '@tabler/icons/outline/hourglass-empty.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import React, { useCallback, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -45,11 +48,11 @@ const Report: React.FC<IReport> = ({ id }) => {
     return [{
       text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username }),
       action: handleDeactivateUser,
-      icon: require('@tabler/icons/outline/hourglass-empty.svg'),
+      icon: hourglassEmptyIcon,
     }, {
       text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username }),
       action: handleDeleteUser,
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       destructive: true,
     }];
   };
@@ -149,7 +152,7 @@ const Report: React.FC<IReport> = ({ id }) => {
           <FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
         </Button>
 
-        <DropdownMenu items={menu} src={require('@tabler/icons/outline/dots-vertical.svg')} />
+        <DropdownMenu items={menu} src={dotsVerticalIcon} />
       </HStack>
     </HStack>
   );
diff --git a/src/features/admin/domains.tsx b/src/features/admin/domains.tsx
index 7ae4b19f3..32b4614be 100644
--- a/src/features/admin/domains.tsx
+++ b/src/features/admin/domains.tsx
@@ -1,3 +1,4 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import React, { useEffect } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -122,7 +123,7 @@ const Domains: React.FC = () => {
       <Stack className='gap-4'>
         <Button
           className='sm:w-fit sm:self-end'
-          icon={require('@tabler/icons/outline/plus.svg')}
+          icon={plusIcon}
           onClick={handleCreateDomain}
           theme='secondary'
           block
diff --git a/src/features/admin/manage-zap-split.tsx b/src/features/admin/manage-zap-split.tsx
index 95d350399..dcb78a968 100644
--- a/src/features/admin/manage-zap-split.tsx
+++ b/src/features/admin/manage-zap-split.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -9,7 +10,7 @@ import { useManageZapSplit } from '../../api/hooks/admin/useManageZapSplit';
 import AddNewAccount from '../ui/components/new-account-zap-split';
 import { ZapSplitSlider } from '../zap/components/zap-split-account-item';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   heading: { id: 'column.admin.zap_split', defaultMessage: 'Manage Zap Split' },
diff --git a/src/features/admin/rules.tsx b/src/features/admin/rules.tsx
index 10a840f58..cec214c65 100644
--- a/src/features/admin/rules.tsx
+++ b/src/features/admin/rules.tsx
@@ -1,3 +1,4 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -85,7 +86,7 @@ const Rules: React.FC = () => {
       <Stack className='gap-4'>
         <Button
           className='sm:w-fit sm:self-end'
-          icon={require('@tabler/icons/outline/plus.svg')}
+          icon={plusIcon}
           onClick={handleCreateRule}
           theme='secondary'
           block
diff --git a/src/features/admin/tabs/dashboard.tsx b/src/features/admin/tabs/dashboard.tsx
index 89c4903ec..4d68b589e 100644
--- a/src/features/admin/tabs/dashboard.tsx
+++ b/src/features/admin/tabs/dashboard.tsx
@@ -1,3 +1,5 @@
+import downloadIcon from '@tabler/icons/outline/download.svg';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -155,7 +157,7 @@ const Dashboard: React.FC = () => {
 
             <Icon
               className='size-4'
-              src={require('@tabler/icons/outline/external-link.svg')}
+              src={externalLinkIcon}
             />
           </a>
         </ListItem>
@@ -174,7 +176,7 @@ const Dashboard: React.FC = () => {
           <List>
             <ListItem label='subscribers.csv'>
               <IconButton
-                src={require('@tabler/icons/outline/download.svg')}
+                src={downloadIcon}
                 onClick={handleSubscribersClick}
                 iconClassName='h-5 w-5'
               />
@@ -182,7 +184,7 @@ const Dashboard: React.FC = () => {
 
             <ListItem label='unsubscribers.csv'>
               <IconButton
-                src={require('@tabler/icons/outline/download.svg')}
+                src={downloadIcon}
                 onClick={handleUnsubscribersClick}
                 iconClassName='h-5 w-5'
               />
@@ -190,7 +192,7 @@ const Dashboard: React.FC = () => {
 
             <ListItem label='combined.csv'>
               <IconButton
-                src={require('@tabler/icons/outline/download.svg')}
+                src={downloadIcon}
                 onClick={handleCombinedClick}
                 iconClassName='h-5 w-5'
               />
diff --git a/src/features/aliases/components/account.tsx b/src/features/aliases/components/account.tsx
index 036dde092..2e20bf0ac 100644
--- a/src/features/aliases/components/account.tsx
+++ b/src/features/aliases/components/account.tsx
@@ -1,3 +1,4 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -37,7 +38,7 @@ const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
 
   if (!added && accountId !== me) {
     button = (
-      <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
+      <IconButton src={plusIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
     );
   }
 
diff --git a/src/features/aliases/components/search.tsx b/src/features/aliases/components/search.tsx
index cef6a1fec..85a843abd 100644
--- a/src/features/aliases/components/search.tsx
+++ b/src/features/aliases/components/search.tsx
@@ -1,3 +1,4 @@
+import backspaceIcon from '@tabler/icons/outline/backspace.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -53,7 +54,7 @@ const Search: React.FC = () => {
         />
 
         <div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
-          <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
+          <Icon src={backspaceIcon} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
         </div>
       </label>
       <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
diff --git a/src/features/aliases/index.tsx b/src/features/aliases/index.tsx
index 36a3327de..01d3c0806 100644
--- a/src/features/aliases/index.tsx
+++ b/src/features/aliases/index.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -79,7 +80,7 @@ const Aliases = () => {
                 <Text tag='span'>{alias}</Text>
               </div>
               <div className='flex items-center' role='button' tabIndex={0} onClick={handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
-                <Icon className='mr-1.5' src={require('@tabler/icons/outline/x.svg')} />
+                <Icon className='mr-1.5' src={xIcon} />
                 <Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
               </div>
             </HStack>
diff --git a/src/features/audio/index.tsx b/src/features/audio/index.tsx
index 61a43d89b..39effef8d 100644
--- a/src/features/audio/index.tsx
+++ b/src/features/audio/index.tsx
@@ -1,3 +1,8 @@
+import downloadIcon from '@tabler/icons/outline/download.svg';
+import playerPauseIcon from '@tabler/icons/outline/player-pause.svg';
+import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
+import volume3Icon from '@tabler/icons/outline/volume-3.svg';
+import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
@@ -534,7 +539,7 @@ const Audio: React.FC<IAudio> = (props) => {
               className={clsx('inline-block flex-none border-0 bg-transparent px-[6px] py-[5px] text-[16px] text-white/75 opacity-75 outline-none hover:text-white hover:opacity-100 active:text-white active:opacity-100 ')}
               onClick={togglePlay}
             >
-              <SvgIcon className='w-5' src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')} />
+              <SvgIcon className='w-5' src={paused ? playerPlayIcon : playerPauseIcon} />
             </button>
 
             <button
@@ -546,7 +551,7 @@ const Audio: React.FC<IAudio> = (props) => {
               className={clsx('inline-block flex-none border-0 bg-transparent px-[6px] py-[5px] text-[16px] text-white/75 opacity-75 outline-none hover:text-white hover:opacity-100 active:text-white active:opacity-100')}
               onClick={toggleMute}
             >
-              <SvgIcon className='w-5' src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
+              <SvgIcon className='w-5' src={muted ? volume3Icon : volumeIcon} />
             </button>
 
             <div
@@ -594,7 +599,7 @@ const Audio: React.FC<IAudio> = (props) => {
               download
               target='_blank'
             >
-              <SvgIcon className='w-5' src={require('@tabler/icons/outline/download.svg')} />
+              <SvgIcon className='w-5' src={downloadIcon} />
             </a>
           </div>
         </div>
diff --git a/src/features/auth-login/components/consumer-button.tsx b/src/features/auth-login/components/consumer-button.tsx
index feac5f75b..3218d6434 100644
--- a/src/features/auth-login/components/consumer-button.tsx
+++ b/src/features/auth-login/components/consumer-button.tsx
@@ -1,3 +1,10 @@
+import brandFacebookIcon from '@tabler/icons/outline/brand-facebook.svg';
+import brandGithubIcon from '@tabler/icons/outline/brand-github.svg';
+import brandGoogleIcon from '@tabler/icons/outline/brand-google.svg';
+import brandSlackIcon from '@tabler/icons/outline/brand-slack.svg';
+import brandTwitterIcon from '@tabler/icons/outline/brand-twitter.svg';
+import brandWindowsIcon from '@tabler/icons/outline/brand-windows.svg';
+import keyIcon from '@tabler/icons/outline/key.svg';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
@@ -12,12 +19,12 @@ const messages = defineMessages({
 
 /** Map between OAuth providers and brand icons. */
 const BRAND_ICONS: Record<string, string> = {
-  twitter: require('@tabler/icons/outline/brand-twitter.svg'),
-  facebook: require('@tabler/icons/outline/brand-facebook.svg'),
-  google: require('@tabler/icons/outline/brand-google.svg'),
-  microsoft: require('@tabler/icons/outline/brand-windows.svg'),
-  slack: require('@tabler/icons/outline/brand-slack.svg'),
-  github: require('@tabler/icons/outline/brand-github.svg'),
+  twitter: brandTwitterIcon,
+  facebook: brandFacebookIcon,
+  google: brandGoogleIcon,
+  microsoft: brandWindowsIcon,
+  slack: brandSlackIcon,
+  github: brandGithubIcon,
 };
 
 interface IConsumerButton {
@@ -29,7 +36,7 @@ const ConsumerButton: React.FC<IConsumerButton> = ({ provider }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const icon = BRAND_ICONS[provider] || require('@tabler/icons/outline/key.svg');
+  const icon = BRAND_ICONS[provider] || keyIcon;
 
   const handleClick = () => {
     dispatch(prepareRequest(provider));
diff --git a/src/features/auth-login/components/registration-form.tsx b/src/features/auth-login/components/registration-form.tsx
index ea5c9c94b..43d5e895c 100644
--- a/src/features/auth-login/components/registration-form.tsx
+++ b/src/features/auth-login/components/registration-form.tsx
@@ -1,3 +1,5 @@
+import atIcon from '@tabler/icons/outline/at.svg';
+import checkIcon from '@tabler/icons/outline/check.svg';
 import axios from 'axios';
 import { Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
@@ -152,7 +154,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
     const heading = confirmationHeading || approvalHeading;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/check.svg'),
+      icon: checkIcon,
       heading: heading,
       message,
       confirm: intl.formatMessage(messages.close),
@@ -255,7 +257,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
               autoCorrect='off'
               autoCapitalize='off'
               pattern='^[a-zA-Z\d_-]+'
-              icon={require('@tabler/icons/outline/at.svg')}
+              icon={atIcon}
               onChange={onUsernameChange}
               value={params.get('username', '')}
               required
diff --git a/src/features/auth-token-list/index.tsx b/src/features/auth-token-list/index.tsx
index caaf6a66f..21cad4ccd 100644
--- a/src/features/auth-token-list/index.tsx
+++ b/src/features/auth-token-list/index.tsx
@@ -1,3 +1,4 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import React, { useEffect } from 'react';
 import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
@@ -27,7 +28,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
   const handleRevoke = () => {
     if (isCurrent)
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/outline/alert-triangle.svg'),
+        icon: alertTriangleIcon,
         heading: intl.formatMessage(messages.revokeSessionHeading),
         message: intl.formatMessage(messages.revokeSessionMessage),
         confirm: intl.formatMessage(messages.revokeSessionConfirm),
diff --git a/src/features/birthdays/account.tsx b/src/features/birthdays/account.tsx
index 33d14cf1b..1cfcd4e4d 100644
--- a/src/features/birthdays/account.tsx
+++ b/src/features/birthdays/account.tsx
@@ -1,3 +1,4 @@
+import balloonIcon from '@tabler/icons/outline/balloon.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -36,7 +37,7 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
           date: formattedBirthday,
         })}
       >
-        <Icon src={require('@tabler/icons/outline/balloon.svg')} />
+        <Icon src={balloonIcon} />
         {formattedBirthday}
       </div>
     </HStack>
diff --git a/src/features/bookmark-folders/index.tsx b/src/features/bookmark-folders/index.tsx
index 754e12cbb..e4f87046f 100644
--- a/src/features/bookmark-folders/index.tsx
+++ b/src/features/bookmark-folders/index.tsx
@@ -1,3 +1,5 @@
+import bookmarksIcon from '@tabler/icons/outline/bookmarks.svg';
+import folderIcon from '@tabler/icons/outline/folder.svg';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
@@ -40,7 +42,7 @@ const BookmarkFolders: React.FC = () => {
             to='/bookmarks/all'
             label={
               <HStack alignItems='center' space={2}>
-                <Icon src={require('@tabler/icons/outline/bookmarks.svg')} size={20} />
+                <Icon src={bookmarksIcon} size={20} />
                 <span><FormattedMessage id='bookmark_folders.all_bookmarks' defaultMessage='All bookmarks' /></span>
               </HStack>
             }
@@ -57,7 +59,7 @@ const BookmarkFolders: React.FC = () => {
                       src={folder.emoji_url || undefined}
                       className='size-5 flex-none'
                     />
-                  ) : <Icon src={require('@tabler/icons/outline/folder.svg')} size={20} />}
+                  ) : <Icon src={folderIcon} size={20} />}
                   <span>{folder.name}</span>
                 </HStack>
               }
diff --git a/src/features/bookmarks/index.tsx b/src/features/bookmarks/index.tsx
index f637a7a68..3921dad63 100644
--- a/src/features/bookmarks/index.tsx
+++ b/src/features/bookmarks/index.tsx
@@ -1,3 +1,6 @@
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
+import editIcon from '@tabler/icons/outline/edit.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
 import React from 'react';
@@ -93,12 +96,12 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
     {
       text: intl.formatMessage(messages.editFolder),
       action: handleEditFolder,
-      icon: require('@tabler/icons/outline/edit.svg'),
+      icon: editIcon,
     },
     {
       text: intl.formatMessage(messages.deleteFolder),
       action: handleDeleteFolder,
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
     },
   ] : [];
 
@@ -106,7 +109,7 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
     <Column
       label={folder ? folder.name : intl.formatMessage(messages.heading)}
       action={
-        <DropdownMenu items={items} src={require('@tabler/icons/outline/dots-vertical.svg')} />
+        <DropdownMenu items={items} src={dotsVerticalIcon} />
       }
       transparent={!isMobile}
     >
diff --git a/src/features/chats/components/chat-composer.tsx b/src/features/chats/components/chat-composer.tsx
index 785538f20..1228836c5 100644
--- a/src/features/chats/components/chat-composer.tsx
+++ b/src/features/chats/components/chat-composer.tsx
@@ -1,3 +1,4 @@
+import sendIcon from '@tabler/icons/outline/send.svg';
 import React, { useState } from 'react';
 import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
@@ -230,7 +231,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
           ) : null}
 
           <IconButton
-            src={require('@tabler/icons/outline/send.svg')}
+            src={sendIcon}
             iconClassName='h-5 w-5'
             className='text-primary-500'
             disabled={isSubmitDisabled}
diff --git a/src/features/chats/components/chat-list-item.tsx b/src/features/chats/components/chat-list-item.tsx
index 124ecb036..ff642e95e 100644
--- a/src/features/chats/components/chat-list-item.tsx
+++ b/src/features/chats/components/chat-list-item.tsx
@@ -1,3 +1,5 @@
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -59,7 +61,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
         },
       }));
     },
-    icon: require('@tabler/icons/outline/logout.svg'),
+    icon: logoutIcon,
   }], []);
 
   const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
@@ -124,7 +126,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
             <div className='hidden text-gray-600 hover:text-gray-100 group-hover:block'>
               <DropdownMenu items={menu}>
                 <IconButton
-                  src={require('@tabler/icons/outline/dots.svg')}
+                  src={dotsIcon}
                   title='Settings'
                   className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
                   iconClassName='h-4 w-4'
diff --git a/src/features/chats/components/chat-message-list-intro.tsx b/src/features/chats/components/chat-message-list-intro.tsx
index dcb0439fb..a4e84f37e 100644
--- a/src/features/chats/components/chat-message-list-intro.tsx
+++ b/src/features/chats/components/chat-message-list-intro.tsx
@@ -1,3 +1,4 @@
+import clockIcon from '@tabler/icons/outline/clock.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -107,7 +108,7 @@ const ChatMessageListIntro = () => {
         </HStack>
       ) : (
         <HStack justifyContent='center' alignItems='center' space={1} className='shrink-0'>
-          <Icon src={require('@tabler/icons/outline/clock.svg')} className='size-4 text-gray-600' />
+          <Icon src={clockIcon} className='size-4 text-gray-600' />
           {chat.message_expiration && (
             <Text size='sm' theme='muted'>
               {intl.formatMessage(messages.messageLifespan, { day: secondsToDays(chat.message_expiration) })}
diff --git a/src/features/chats/components/chat-message.tsx b/src/features/chats/components/chat-message.tsx
index 0f1537076..218e7bc42 100644
--- a/src/features/chats/components/chat-message.tsx
+++ b/src/features/chats/components/chat-message.tsx
@@ -1,3 +1,9 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
+import copyIcon from '@tabler/icons/outline/copy.svg';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import moodSmileIcon from '@tabler/icons/outline/mood-smile.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import { useMutation } from '@tanstack/react-query';
 import clsx from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
@@ -159,7 +165,7 @@ const ChatMessage = (props: IChatMessage) => {
       menu.push({
         text: intl.formatMessage(messages.copy),
         action: () => handleCopyText(chatMessage),
-        icon: require('@tabler/icons/outline/copy.svg'),
+        icon: copyIcon,
       });
     }
 
@@ -167,7 +173,7 @@ const ChatMessage = (props: IChatMessage) => {
       menu.push({
         text: intl.formatMessage(messages.delete),
         action: () => handleDeleteMessage.mutate(chatMessage.id),
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       });
     } else {
@@ -175,13 +181,13 @@ const ChatMessage = (props: IChatMessage) => {
         menu.push({
           text: intl.formatMessage(messages.report),
           action: () => dispatch(initReport(ReportableEntities.CHAT_MESSAGE, chat.account, { chatMessage })),
-          icon: require('@tabler/icons/outline/flag.svg'),
+          icon: flagIcon,
         });
       }
       menu.push({
         text: intl.formatMessage(messages.deleteForMe),
         action: () => handleDeleteMessage.mutate(chatMessage.id),
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       });
     }
@@ -222,7 +228,7 @@ const ChatMessage = (props: IChatMessage) => {
               })}
             >
               <Icon
-                src={require('@tabler/icons/outline/mood-smile.svg')}
+                src={moodSmileIcon}
                 className='size-4'
               />
             </button>
@@ -244,7 +250,7 @@ const ChatMessage = (props: IChatMessage) => {
               data-testid='chat-message-menu'
             >
               <Icon
-                src={require('@tabler/icons/outline/dots.svg')}
+                src={dotsIcon}
                 className='size-4'
               />
             </button>
@@ -362,7 +368,7 @@ const ChatMessage = (props: IChatMessage) => {
                   {isRead ? (
                     <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-primary-500 p-0.5 text-white dark:border-primary-400 dark:bg-primary-400 dark:text-primary-900'>
                       <Icon
-                        src={require('@tabler/icons/outline/check.svg')}
+                        src={checkIcon}
                         strokeWidth={3}
                         className='size-2.5'
                       />
@@ -370,7 +376,7 @@ const ChatMessage = (props: IChatMessage) => {
                   ) : (
                     <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-transparent p-0.5 text-primary-500 dark:border-primary-400 dark:text-primary-400'>
                       <Icon
-                        src={require('@tabler/icons/outline/check.svg')}
+                        src={checkIcon}
                         strokeWidth={3}
                         className='size-2.5'
                       />
diff --git a/src/features/chats/components/chat-page/components/chat-page-main.tsx b/src/features/chats/components/chat-page/components/chat-page-main.tsx
index 71934fa9b..530eec265 100644
--- a/src/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -1,3 +1,7 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
 import React, { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory, useParams } from 'react-router-dom';
@@ -120,7 +124,7 @@ const ChatPageMain = () => {
         <HStack alignItems='center' space={2} className='overflow-hidden'>
           <HStack alignItems='center'>
             <IconButton
-              src={require('@tabler/icons/outline/arrow-left.svg')}
+              src={arrowLeftIcon}
               className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
               onClick={() => history.push('/chats')}
             />
@@ -162,7 +166,7 @@ const ChatPageMain = () => {
         <Menu>
           <MenuButton
             as={IconButton}
-            src={require('@tabler/icons/outline/info-circle.svg')}
+            src={infoCircleIcon}
             iconClassName='h-5 w-5 text-gray-600'
             children={null}
           />
@@ -213,7 +217,7 @@ const ChatPageMain = () => {
                   className='!px-0 hover:!bg-transparent'
                 >
                   <div className='flex w-full items-center space-x-2 text-sm font-bold text-primary-500 dark:text-accent-blue'>
-                    <Icon src={require('@tabler/icons/outline/ban.svg')} className='size-5' />
+                    <Icon src={banIcon} className='size-5' />
                     <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
                   </div>
                 </MenuItem>
@@ -225,7 +229,7 @@ const ChatPageMain = () => {
                     className='!px-0 hover:!bg-transparent'
                   >
                     <div className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600 dark:text-danger-500'>
-                      <Icon src={require('@tabler/icons/outline/logout.svg')} className='size-5' />
+                      <Icon src={logoutIcon} className='size-5' />
                       <span>{intl.formatMessage(messages.leaveChat)}</span>
                     </div>
                   </MenuItem>
diff --git a/src/features/chats/components/chat-page/components/chat-page-new.tsx b/src/features/chats/components/chat-page/components/chat-page-new.tsx
index bb5fa407c..3b3e879ed 100644
--- a/src/features/chats/components/chat-page/components/chat-page-new.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-new.tsx
@@ -1,3 +1,4 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -23,7 +24,7 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
       <Stack className='grow px-4 pt-6 sm:px-6'>
         <HStack alignItems='center'>
           <IconButton
-            src={require('@tabler/icons/outline/arrow-left.svg')}
+            src={arrowLeftIcon}
             className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
             onClick={() => history.push('/chats')}
           />
diff --git a/src/features/chats/components/chat-page/components/chat-page-settings.tsx b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
index b04d0def3..099e8c8ce 100644
--- a/src/features/chats/components/chat-page/components/chat-page-settings.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
@@ -1,3 +1,4 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -50,7 +51,7 @@ const ChatPageSettings = () => {
     <Stack className='h-full space-y-8 px-4 py-6 sm:p-6'>
       <HStack alignItems='center'>
         <IconButton
-          src={require('@tabler/icons/outline/arrow-left.svg')}
+          src={arrowLeftIcon}
           className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
           onClick={() => history.push('/chats')}
         />
diff --git a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index 3f08e1a6b..65db6b536 100644
--- a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
@@ -1,3 +1,5 @@
+import editIcon from '@tabler/icons/outline/edit.svg';
+import settingsIcon from '@tabler/icons/outline/settings.svg';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -42,13 +44,13 @@ const ChatPageSidebar = () => {
 
           <HStack space={1}>
             <IconButton
-              src={require('@tabler/icons/outline/settings.svg')}
+              src={settingsIcon}
               iconClassName='h-5 w-5 text-gray-600'
               onClick={handleSettingsClick}
             />
 
             <IconButton
-              src={require('@tabler/icons/outline/edit.svg')}
+              src={editIcon}
               iconClassName='h-5 w-5 text-gray-600'
               onClick={handleChatCreate}
             />
diff --git a/src/features/chats/components/chat-pane/chat-pane.tsx b/src/features/chats/components/chat-pane/chat-pane.tsx
index 1f0dde8f8..031b0becd 100644
--- a/src/features/chats/components/chat-pane/chat-pane.tsx
+++ b/src/features/chats/components/chat-pane/chat-pane.tsx
@@ -1,3 +1,4 @@
+import editIcon from '@tabler/icons/outline/edit.svg';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -111,7 +112,7 @@ const ChatPane = () => {
             toggleChatPane();
           }
         }}
-        secondaryActionIcon={require('@tabler/icons/outline/edit.svg')}
+        secondaryActionIcon={editIcon}
       />
 
       {isOpen ? renderBody() : null}
diff --git a/src/features/chats/components/chat-search-input.tsx b/src/features/chats/components/chat-search-input.tsx
index 45728cd79..6737d9783 100644
--- a/src/features/chats/components/chat-search-input.tsx
+++ b/src/features/chats/components/chat-search-input.tsx
@@ -1,3 +1,5 @@
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -34,7 +36,7 @@ const ChatSearchInput: React.FC<IChatSearchInput> = ({ value, onChange, onClear
       append={
         <button onClick={onClear}>
           <Icon
-            src={value.length ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
+            src={value.length ? xIcon : searchIcon}
             className='size-4 text-gray-700 dark:text-gray-600'
             aria-hidden='true'
           />
diff --git a/src/features/chats/components/chat-search/chat-search.tsx b/src/features/chats/components/chat-search/chat-search.tsx
index 24a63fa2f..4b1af584c 100644
--- a/src/features/chats/components/chat-search/chat-search.tsx
+++ b/src/features/chats/components/chat-search/chat-search.tsx
@@ -1,3 +1,5 @@
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import React, { useState } from 'react';
@@ -101,7 +103,7 @@ const ChatSearch = (props: IChatSearch) => {
           append={
             <button onClick={clearValue}>
               <Icon
-                src={hasSearchValue ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
+                src={hasSearchValue ? xIcon : searchIcon}
                 className='size-4 text-gray-700 dark:text-gray-600'
                 aria-hidden='true'
               />
diff --git a/src/features/chats/components/chat-upload-preview.tsx b/src/features/chats/components/chat-upload-preview.tsx
index 5b8ed76ff..ce04f5861 100644
--- a/src/features/chats/components/chat-upload-preview.tsx
+++ b/src/features/chats/components/chat-upload-preview.tsx
@@ -1,3 +1,4 @@
+import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
 import React from 'react';
 
 import { Icon } from 'soapbox/components/ui';
@@ -5,7 +6,7 @@ import { MIMETYPE_ICONS } from 'soapbox/components/upload';
 
 import type { Attachment } from 'soapbox/types/entities';
 
-const defaultIcon = require('@tabler/icons/outline/paperclip.svg');
+const defaultIcon = paperclipIcon;
 
 interface IChatUploadPreview {
   className?: string;
diff --git a/src/features/chats/components/chat-upload.tsx b/src/features/chats/components/chat-upload.tsx
index 5ac30565f..1963cd800 100644
--- a/src/features/chats/components/chat-upload.tsx
+++ b/src/features/chats/components/chat-upload.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
@@ -57,7 +58,7 @@ const RemoveButton: React.FC<IRemoveButton> = ({ onClick }) => {
     >
       <Icon
         className='size-3 text-white'
-        src={require('@tabler/icons/outline/x.svg')}
+        src={xIcon}
       />
     </button>
   );
diff --git a/src/features/chats/components/chat-widget/chat-pane-header.tsx b/src/features/chats/components/chat-widget/chat-pane-header.tsx
index 5cff70014..76130c690 100644
--- a/src/features/chats/components/chat-widget/chat-pane-header.tsx
+++ b/src/features/chats/components/chat-widget/chat-pane-header.tsx
@@ -1,3 +1,5 @@
+import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
+import chevronUpIcon from '@tabler/icons/outline/chevron-up.svg';
 import React, { HTMLAttributes } from 'react';
 
 import { HStack, IconButton, Text } from 'soapbox/components/ui';
@@ -65,7 +67,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
 
         <IconButton
           onClick={onToggle}
-          src={isOpen ? require('@tabler/icons/outline/chevron-down.svg') : require('@tabler/icons/outline/chevron-up.svg')}
+          src={isOpen ? chevronDownIcon : chevronUpIcon}
           iconClassName='h-5 w-5 text-gray-600'
         />
       </HStack>
diff --git a/src/features/chats/components/chat-widget/chat-settings.tsx b/src/features/chats/components/chat-widget/chat-settings.tsx
index 6c337f60c..40a4d6f74 100644
--- a/src/features/chats/components/chat-widget/chat-settings.tsx
+++ b/src/features/chats/components/chat-widget/chat-settings.tsx
@@ -1,3 +1,6 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -95,7 +98,7 @@ const ChatSettings = () => {
           <HStack alignItems='center' space={2}>
             <button onClick={closeSettings}>
               <Icon
-                src={require('@tabler/icons/outline/arrow-left.svg')}
+                src={arrowLeftIcon}
                 className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
               />
             </button>
@@ -136,13 +139,13 @@ const ChatSettings = () => {
 
         <Stack space={5}>
           <button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-accent-blue'>
-            <Icon src={require('@tabler/icons/outline/ban.svg')} className='size-5' />
+            <Icon src={banIcon} className='size-5' />
             <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
           </button>
 
           {features.chatsDelete && (
             <button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
-              <Icon src={require('@tabler/icons/outline/logout.svg')} className='size-5' />
+              <Icon src={logoutIcon} className='size-5' />
               <span>{intl.formatMessage(messages.leaveChat)}</span>
             </button>
           )}
diff --git a/src/features/chats/components/chat-widget/chat-window.tsx b/src/features/chats/components/chat-widget/chat-window.tsx
index 1e9ca007f..cd3f6c931 100644
--- a/src/features/chats/components/chat-widget/chat-window.tsx
+++ b/src/features/chats/components/chat-widget/chat-window.tsx
@@ -1,3 +1,6 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import editIcon from '@tabler/icons/outline/edit.svg';
+import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
 import React, { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -72,7 +75,7 @@ const ChatWindow = () => {
             {isOpen && (
               <button onClick={closeChat}>
                 <Icon
-                  src={require('@tabler/icons/outline/arrow-left.svg')}
+                  src={arrowLeftIcon}
                   className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
                 />
               </button>
@@ -107,7 +110,7 @@ const ChatWindow = () => {
           </HStack>
         }
         secondaryAction={secondaryAction()}
-        secondaryActionIcon={isOpen ? require('@tabler/icons/outline/info-circle.svg') : require('@tabler/icons/outline/edit.svg')}
+        secondaryActionIcon={isOpen ? infoCircleIcon : editIcon}
         isToggleable={!isOpen}
         isOpen={isOpen}
         onToggle={toggleChatPane}
diff --git a/src/features/chats/components/chat-widget/headers/chat-search-header.tsx b/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
index 81828f51f..cf76a6442 100644
--- a/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
+++ b/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
@@ -1,3 +1,4 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -26,7 +27,7 @@ const ChatSearchHeader = () => {
             }}
           >
             <Icon
-              src={require('@tabler/icons/outline/arrow-left.svg')}
+              src={arrowLeftIcon}
               className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
             />
           </button>
diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index 8b0f7b19a..af8218509 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -1,3 +1,5 @@
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
 import clsx from 'clsx';
 import { CLEAR_EDITOR_COMMAND, TextNode, type LexicalEditor, $getRoot } from 'lexical';
 import React, { Suspense, useCallback, useEffect, useRef, useState } from 'react';
@@ -229,10 +231,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   if (isEditing) {
     publishText = intl.formatMessage(messages.saveChanges);
   } else if (privacy === 'direct') {
-    publishIcon = require('@tabler/icons/outline/mail.svg');
+    publishIcon = mailIcon;
     publishText = intl.formatMessage(messages.message);
   } else if (privacy === 'private') {
-    publishIcon = require('@tabler/icons/outline/lock.svg');
+    publishIcon = lockIcon;
     publishText = intl.formatMessage(messages.publish);
   } else {
     publishText = privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
diff --git a/src/features/compose/components/markdown-button.tsx b/src/features/compose/components/markdown-button.tsx
index daedd132b..62e3621b7 100644
--- a/src/features/compose/components/markdown-button.tsx
+++ b/src/features/compose/components/markdown-button.tsx
@@ -1,3 +1,4 @@
+import markdownIcon from '@tabler/icons/outline/markdown.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -25,7 +26,7 @@ const MarkdownButton: React.FC<IMarkdownButton> = ({ composeId }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/outline/markdown.svg')}
+      icon={markdownIcon}
       title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
       active={active}
       onClick={onClick}
diff --git a/src/features/compose/components/poll-button.tsx b/src/features/compose/components/poll-button.tsx
index c2a31c642..0ef868a10 100644
--- a/src/features/compose/components/poll-button.tsx
+++ b/src/features/compose/components/poll-button.tsx
@@ -1,3 +1,4 @@
+import chartBarIcon from '@tabler/icons/outline/chart-bar.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -39,7 +40,7 @@ const PollButton: React.FC<IPollButton> = ({ composeId, disabled }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/outline/chart-bar.svg')}
+      icon={chartBarIcon}
       title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
       active={active}
       disabled={disabled}
diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx
index 2571589b7..4ab3b370a 100644
--- a/src/features/compose/components/privacy-dropdown.tsx
+++ b/src/features/compose/components/privacy-dropdown.tsx
@@ -1,3 +1,7 @@
+import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
 import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import React, { useState, useRef, useEffect } from 'react';
@@ -160,10 +164,10 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
   const [placement, setPlacement] = useState('bottom');
 
   const options = [
-    { icon: require('@tabler/icons/outline/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
-    { icon: require('@tabler/icons/outline/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
-    { icon: require('@tabler/icons/outline/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
-    { icon: require('@tabler/icons/outline/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
+    { icon: worldIcon, value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
+    { icon: lockOpenIcon, value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
+    { icon: lockIcon, value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
+    { icon: mailIcon, value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
   ];
 
   const onChange = (value: string | null) => value && dispatch(changeComposeVisibility(composeId, value));
diff --git a/src/features/compose/components/reply-indicator.tsx b/src/features/compose/components/reply-indicator.tsx
index 4ed3db70e..694ace5cb 100644
--- a/src/features/compose/components/reply-indicator.tsx
+++ b/src/features/compose/components/reply-indicator.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -29,7 +30,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActi
   if (!hideActions && onCancel) {
     actions = {
       onActionClick: handleClick,
-      actionIcon: require('@tabler/icons/outline/x.svg'),
+      actionIcon: xIcon,
       actionAlignment: 'top',
       actionTitle: 'Dismiss',
     };
diff --git a/src/features/compose/components/schedule-button.tsx b/src/features/compose/components/schedule-button.tsx
index cf4e8bbbf..65ebce9a7 100644
--- a/src/features/compose/components/schedule-button.tsx
+++ b/src/features/compose/components/schedule-button.tsx
@@ -1,3 +1,4 @@
+import calendarStatsIcon from '@tabler/icons/outline/calendar-stats.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -39,7 +40,7 @@ const ScheduleButton: React.FC<IScheduleButton> = ({ composeId, disabled }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/outline/calendar-stats.svg')}
+      icon={calendarStatsIcon}
       title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
       active={active}
       disabled={disabled}
diff --git a/src/features/compose/components/schedule-form.tsx b/src/features/compose/components/schedule-form.tsx
index ab7a64f34..2c5acfeca 100644
--- a/src/features/compose/components/schedule-form.tsx
+++ b/src/features/compose/components/schedule-form.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -52,7 +53,7 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
         <IconButton
           iconClassName='h-4 w-4'
           className='bg-transparent text-gray-400 hover:text-gray-600'
-          src={require('@tabler/icons/outline/x.svg')}
+          src={xIcon}
           onClick={handleRemove}
           title={intl.formatMessage(messages.remove)}
         />
diff --git a/src/features/compose/components/search-results.tsx b/src/features/compose/components/search-results.tsx
index 87e85fd1f..a6cc2df1a 100644
--- a/src/features/compose/components/search-results.tsx
+++ b/src/features/compose/components/search-results.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -213,7 +214,7 @@ const SearchResults = () => {
     <>
       {filterByAccount ? (
         <HStack className='mb-4 border-b border-solid border-gray-200 px-2 pb-4 dark:border-gray-800' space={2}>
-          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} onClick={handleUnsetAccount} />
+          <IconButton iconClassName='h-5 w-5' src={xIcon} onClick={handleUnsetAccount} />
           <Text truncate>
             <FormattedMessage
               id='search_results.filter_message'
diff --git a/src/features/compose/components/search-zap-split.tsx b/src/features/compose/components/search-zap-split.tsx
index d2873f828..d1efcf706 100644
--- a/src/features/compose/components/search-zap-split.tsx
+++ b/src/features/compose/components/search-zap-split.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect } from 'react';
@@ -153,7 +154,7 @@ const SearchZapSplit = (props: ISearchZapSplit) => {
         >
 
           <SvgIcon
-            src={require('@tabler/icons/outline/x.svg')}
+            src={xIcon}
             className={clsx('size-4 text-gray-600', { hidden: !hasValue })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
diff --git a/src/features/compose/components/search.tsx b/src/features/compose/components/search.tsx
index b91438a2d..8c48c15b6 100644
--- a/src/features/compose/components/search.tsx
+++ b/src/features/compose/components/search.tsx
@@ -1,3 +1,5 @@
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect } from 'react';
@@ -111,7 +113,7 @@ const Search = (props: ISearch) => {
   const makeMenu = () => [
     {
       text: intl.formatMessage(messages.action, { query: value }),
-      icon: require('@tabler/icons/outline/search.svg'),
+      icon: searchIcon,
       action: handleSubmit,
     },
   ];
@@ -166,12 +168,12 @@ const Search = (props: ISearch) => {
           onClick={handleClear}
         >
           <SvgIcon
-            src={require('@tabler/icons/outline/search.svg')}
+            src={searchIcon}
             className={clsx('size-4 text-gray-600', { hidden: hasValue })}
           />
 
           <SvgIcon
-            src={require('@tabler/icons/outline/x.svg')}
+            src={xIcon}
             className={clsx('size-4 text-gray-600', { hidden: !hasValue })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
diff --git a/src/features/compose/components/spoiler-button.tsx b/src/features/compose/components/spoiler-button.tsx
index 235209a83..38eca8177 100644
--- a/src/features/compose/components/spoiler-button.tsx
+++ b/src/features/compose/components/spoiler-button.tsx
@@ -1,3 +1,4 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -26,7 +27,7 @@ const SpoilerButton: React.FC<ISpoilerButton> = ({ composeId }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/outline/alert-triangle.svg')}
+      icon={alertTriangleIcon}
       title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
       active={active}
       onClick={onClick}
diff --git a/src/features/compose/components/upload-button.tsx b/src/features/compose/components/upload-button.tsx
index 4779a6a44..a2fb80c67 100644
--- a/src/features/compose/components/upload-button.tsx
+++ b/src/features/compose/components/upload-button.tsx
@@ -1,3 +1,5 @@
+import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
+import photoIcon from '@tabler/icons/outline/photo.svg';
 import React, { useRef } from 'react';
 import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
@@ -54,8 +56,8 @@ const UploadButton: React.FC<IUploadButton> = ({
 
   const src = icon || (
     onlyImages(attachmentTypes)
-      ? require('@tabler/icons/outline/photo.svg')
-      : require('@tabler/icons/outline/paperclip.svg')
+      ? photoIcon
+      : paperclipIcon
   );
 
   return (
diff --git a/src/features/crypto-donate/components/crypto-address.tsx b/src/features/crypto-donate/components/crypto-address.tsx
index 0c07387eb..fa6f4c0ba 100644
--- a/src/features/crypto-donate/components/crypto-address.tsx
+++ b/src/features/crypto-donate/components/crypto-address.tsx
@@ -1,3 +1,5 @@
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import qrcodeIcon from '@tabler/icons/outline/qrcode.svg';
 import React from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
@@ -42,12 +44,12 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
 
         <HStack alignItems='center' className='ml-auto'>
           <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}>
-            <Icon src={require('@tabler/icons/outline/qrcode.svg')} size={20} />
+            <Icon src={qrcodeIcon} size={20} />
           </a>
 
           {explorerUrl && (
             <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
-              <Icon src={require('@tabler/icons/outline/external-link.svg')} size={20} />
+              <Icon src={externalLinkIcon} size={20} />
             </a>
           )}
         </HStack>
diff --git a/src/features/crypto-donate/components/detailed-crypto-address.tsx b/src/features/crypto-donate/components/detailed-crypto-address.tsx
index 554c05ade..29d70ae07 100644
--- a/src/features/crypto-donate/components/detailed-crypto-address.tsx
+++ b/src/features/crypto-donate/components/detailed-crypto-address.tsx
@@ -1,3 +1,4 @@
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import { QRCodeCanvas as QRCode } from 'qrcode.react';
 import React from 'react';
 
@@ -30,7 +31,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/outline/external-link.svg')} />
+            <Icon src={externalLinkIcon} />
           </a>}
         </div>
       </div>
diff --git a/src/features/developers/developers-menu.tsx b/src/features/developers/developers-menu.tsx
index 185f289b2..37b0718d9 100644
--- a/src/features/developers/developers-menu.tsx
+++ b/src/features/developers/developers-menu.tsx
@@ -1,3 +1,11 @@
+import appsIcon from '@tabler/icons/outline/apps.svg';
+import codePlusIcon from '@tabler/icons/outline/code-plus.svg';
+import homeIcon from '@tabler/icons/outline/home.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
+import moodSadIcon from '@tabler/icons/outline/mood-sad.svg';
+import refreshIcon from '@tabler/icons/outline/refresh.svg';
+import scriptIcon from '@tabler/icons/outline/script.svg';
+import urgentIcon from '@tabler/icons/outline/urgent.svg';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
@@ -57,7 +65,7 @@ const Developers: React.FC = () => {
       <Column label={intl.formatMessage(messages.heading)}>
         <div className='grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3'>
           <DashWidget to='/developers/apps/create'>
-            <SvgIcon src={require('@tabler/icons/outline/apps.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={appsIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@@ -65,7 +73,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/settings_store'>
-            <SvgIcon src={require('@tabler/icons/outline/code-plus.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={codePlusIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@@ -73,7 +81,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/timeline'>
-            <SvgIcon src={require('@tabler/icons/outline/home.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={homeIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
@@ -81,7 +89,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/error'>
-            <SvgIcon src={require('@tabler/icons/outline/mood-sad.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={moodSadIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@@ -89,7 +97,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/error/network'>
-            <SvgIcon src={require('@tabler/icons/outline/refresh.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={refreshIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
@@ -97,7 +105,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/sw'>
-            <SvgIcon src={require('@tabler/icons/outline/script.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={scriptIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.service_worker_label' defaultMessage='Service Worker' />
@@ -105,7 +113,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget onClick={leaveDevelopers}>
-            <SvgIcon src={require('@tabler/icons/outline/logout.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={logoutIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />
@@ -113,7 +121,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget onClick={showToast}>
-            <SvgIcon src={require('@tabler/icons/outline/urgent.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={urgentIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.show_toast' defaultMessage='Trigger Toast' />
diff --git a/src/features/developers/service-worker-info.tsx b/src/features/developers/service-worker-info.tsx
index 69f36bac6..7b786e95f 100644
--- a/src/features/developers/service-worker-info.tsx
+++ b/src/features/developers/service-worker-info.tsx
@@ -1,3 +1,4 @@
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -120,7 +121,7 @@ const ServiceWorkerInfo: React.FC<IServiceWorkerInfo> = () => {
                 <span className='truncate'>{url}</span>
                 <Icon
                   className='size-4'
-                  src={require('@tabler/icons/outline/external-link.svg')}
+                  src={externalLinkIcon}
                 />
               </a>
             </ListItem>
diff --git a/src/features/edit-identity/index.tsx b/src/features/edit-identity/index.tsx
index e124316b6..3e27f5c2f 100644
--- a/src/features/edit-identity/index.tsx
+++ b/src/features/edit-identity/index.tsx
@@ -1,3 +1,4 @@
+import atIcon from '@tabler/icons/outline/at.svg';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -169,7 +170,7 @@ const UsernameInput: React.FC<React.ComponentProps<typeof Input>> = (props) => {
       placeholder={intl.formatMessage(messages.username)}
       append={(
         <HStack alignItems='center' space={1} className='rounded p-1 text-sm backdrop-blur'>
-          <Icon className='size-4' src={require('@tabler/icons/outline/at.svg')} />
+          <Icon className='size-4' src={atIcon} />
           <span>{instance.domain}</span>
         </HStack>
       )}
diff --git a/src/features/edit-profile/components/avatar-picker.tsx b/src/features/edit-profile/components/avatar-picker.tsx
index 7e0a8e0fb..18d5d6ffa 100644
--- a/src/features/edit-profile/components/avatar-picker.tsx
+++ b/src/features/edit-profile/components/avatar-picker.tsx
@@ -1,3 +1,4 @@
+import cameraPlusIcon from '@tabler/icons/outline/camera-plus.svg';
 import clsx from 'clsx';
 import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -43,7 +44,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ classNam
         })}
       >
         <Icon
-          src={require('@tabler/icons/outline/camera-plus.svg')}
+          src={cameraPlusIcon}
           className='size-5 text-white'
         />
       </HStack>
diff --git a/src/features/edit-profile/components/header-picker.tsx b/src/features/edit-profile/components/header-picker.tsx
index bf27afc17..88a8b2069 100644
--- a/src/features/edit-profile/components/header-picker.tsx
+++ b/src/features/edit-profile/components/header-picker.tsx
@@ -1,3 +1,5 @@
+import photoPlusIcon from '@tabler/icons/outline/photo-plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React, { useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -55,7 +57,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
         justifyContent='center'
       >
         <Icon
-          src={require('@tabler/icons/outline/photo-plus.svg')}
+          src={photoPlusIcon}
           className='size-4.5'
         />
 
@@ -76,7 +78,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
       {onClear && src && (
         <IconButton
           onClick={handleClear}
-          src={require('@tabler/icons/outline/x.svg')}
+          src={xIcon}
           theme='dark'
           className='absolute right-2 top-2 z-10 hover:scale-105 hover:bg-gray-900'
           iconClassName='h-5 w-5'
diff --git a/src/features/emoji/components/emoji-picker.tsx b/src/features/emoji/components/emoji-picker.tsx
index 6dd2b8064..cb34ed2f1 100644
--- a/src/features/emoji/components/emoji-picker.tsx
+++ b/src/features/emoji/components/emoji-picker.tsx
@@ -1,3 +1,4 @@
+import spriteSheet from 'emoji-datasource/img/twitter/sheets/32.png';
 import { Picker as EmojiPicker } from 'emoji-mart';
 import React, { useRef, useEffect } from 'react';
 
@@ -5,9 +6,7 @@ import { joinPublicPath } from 'soapbox/utils/static';
 
 import data from '../data';
 
-const getSpritesheetURL = (set: string) => {
-  return require('emoji-datasource/img/twitter/sheets/32.png');
-};
+const getSpritesheetURL = () => spriteSheet;
 
 const getImageURL = (set: string, name: string) => {
   return joinPublicPath(`/packs/emoji/${name}.svg`);
diff --git a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
index 51ade8de2..b38f332f7 100644
--- a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
+++ b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
@@ -1,4 +1,5 @@
 import { useFloating, shift } from '@floating-ui/react';
+import moodHappyIcon from '@tabler/icons/outline/mood-happy.svg';
 import clsx from 'clsx';
 import React, { KeyboardEvent, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -40,7 +41,7 @@ const EmojiPickerDropdownContainer = (
           'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
         })}
         ref={refs.setReference}
-        src={require('@tabler/icons/outline/mood-happy.svg')}
+        src={moodHappyIcon}
         title={title}
         aria-label={title}
         aria-expanded={visible}
diff --git a/src/features/event/components/event-action-button.tsx b/src/features/event/components/event-action-button.tsx
index 413942eed..7dcb6a7b7 100644
--- a/src/features/event/components/event-action-button.tsx
+++ b/src/features/event/components/event-action-button.tsx
@@ -1,3 +1,5 @@
+import banIcon from '@tabler/icons/outline/ban.svg';
+import checkIcon from '@tabler/icons/outline/check.svg';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -70,14 +72,14 @@ const EventActionButton: React.FC<IEventAction> = ({ status, theme = 'secondary'
   switch (event.join_state) {
     case 'accept':
       buttonLabel = <FormattedMessage id='event.join_state.accept' defaultMessage='Going' />;
-      buttonIcon = require('@tabler/icons/outline/check.svg');
+      buttonIcon = checkIcon;
       break;
     case 'pending':
       buttonLabel = <FormattedMessage id='event.join_state.pending' defaultMessage='Pending' />;
       break;
     case 'reject':
       buttonLabel = <FormattedMessage id='event.join_state.rejected' defaultMessage='Going' />;
-      buttonIcon = require('@tabler/icons/outline/ban.svg');
+      buttonIcon = banIcon;
       buttonDisabled = true;
       break;
     default:
diff --git a/src/features/event/components/event-date.tsx b/src/features/event/components/event-date.tsx
index 978f49213..e657bf4de 100644
--- a/src/features/event/components/event-date.tsx
+++ b/src/features/event/components/event-date.tsx
@@ -1,3 +1,4 @@
+import calendarIcon from '@tabler/icons/outline/calendar.svg';
 import React from 'react';
 import { FormattedDate } from 'react-intl';
 
@@ -50,7 +51,7 @@ const EventDate: React.FC<IEventDate> = ({ status }) => {
 
   return (
     <HStack alignItems='center' space={2}>
-      <Icon src={require('@tabler/icons/outline/calendar.svg')} />
+      <Icon src={calendarIcon} />
       <span>{date}</span>
     </HStack>
   );
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index cd21a2565..624fe727d 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -1,3 +1,26 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
+import atIcon from '@tabler/icons/outline/at.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import bookmarkOffIcon from '@tabler/icons/outline/bookmark-off.svg';
+import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
+import calendarPlusIcon from '@tabler/icons/outline/calendar-plus.svg';
+import circleXIcon from '@tabler/icons/outline/circle-x.svg';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import flag3Icon from '@tabler/icons/outline/flag-3.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import gavelIcon from '@tabler/icons/outline/gavel.svg';
+import linkIcon from '@tabler/icons/outline/link.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import pinIcon from '@tabler/icons/outline/pin.svg';
+import pinnedOffIcon from '@tabler/icons/outline/pinned-off.svg';
+import quoteIcon from '@tabler/icons/outline/quote.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import usersIcon from '@tabler/icons/outline/users.svg';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -136,7 +159,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
   const handleDeleteClick = () => {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       heading: intl.formatMessage(messages.deleteHeading),
       message: intl.formatMessage(messages.deleteMessage),
       confirm: intl.formatMessage(messages.deleteConfirm),
@@ -162,7 +185,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
   const handleBlockClick = () => {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/ban.svg'),
+      icon: banIcon,
       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>{/* eslint-disable-line formatjs/no-literal-string-in-jsx */}@{account.acct}</strong> }} />,
       confirm: intl.formatMessage(messages.blockConfirm),
@@ -202,19 +225,19 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       {
         text: intl.formatMessage(messages.exportIcs),
         action: handleExportClick,
-        icon: require('@tabler/icons/outline/calendar-plus.svg'),
+        icon: calendarPlusIcon,
       },
       {
         text: intl.formatMessage(messages.copy),
         action: handleCopy,
-        icon: require('@tabler/icons/outline/link.svg'),
+        icon: linkIcon,
       },
     ];
 
     if (features.federating && !account.local) {
       menu.push({
         text: intl.formatMessage(messages.external, { domain }),
-        icon: require('@tabler/icons/outline/external-link.svg'),
+        icon: externalLinkIcon,
         href: status.uri,
         target: '_blank',
       });
@@ -226,7 +249,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
         action: handleBookmarkClick,
-        icon: status.bookmarked ? require('@tabler/icons/outline/bookmark-off.svg') : require('@tabler/icons/outline/bookmark.svg'),
+        icon: status.bookmarked ? bookmarkOffIcon : bookmarkIcon,
       });
     }
 
@@ -234,14 +257,14 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(status.reblogged ? messages.unreblog : messages.reblog),
         action: handleReblogClick,
-        icon: require('@tabler/icons/outline/repeat.svg'),
+        icon: repeatIcon,
       });
 
       if (features.quotePosts) {
         menu.push({
           text: intl.formatMessage(messages.quotePost),
           action: handleQuoteClick,
-          icon: require('@tabler/icons/outline/quote.svg'),
+          icon: quoteIcon,
         });
       }
     }
@@ -253,34 +276,34 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
         menu.push({
           text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
           action: handlePinClick,
-          icon: status.pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
+          icon: status.pinned ? pinnedOffIcon : pinIcon,
         });
       }
 
       menu.push({
         text: intl.formatMessage(messages.delete),
         action: handleDeleteClick,
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       });
     } else {
       menu.push({
         text: intl.formatMessage(messages.mention, { name: username }),
         action: handleMentionClick,
-        icon: require('@tabler/icons/outline/at.svg'),
+        icon: atIcon,
       });
 
       if (status.getIn(['account', 'pleroma', 'accepts_chat_messages']) === true) {
         menu.push({
           text: intl.formatMessage(messages.chat, { name: username }),
           action: handleChatClick,
-          icon: require('@tabler/icons/outline/messages.svg'),
+          icon: messagesIcon,
         });
       } else if (features.privacyScopes) {
         menu.push({
           text: intl.formatMessage(messages.direct, { name: username }),
           action: handleDirectClick,
-          icon: require('@tabler/icons/outline/mail.svg'),
+          icon: mailIcon,
         });
       }
 
@@ -288,17 +311,17 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(messages.mute, { name: username }),
         action: handleMuteClick,
-        icon: require('@tabler/icons/outline/circle-x.svg'),
+        icon: circleXIcon,
       });
       menu.push({
         text: intl.formatMessage(messages.block, { name: username }),
         action: handleBlockClick,
-        icon: require('@tabler/icons/outline/ban.svg'),
+        icon: banIcon,
       });
       menu.push({
         text: intl.formatMessage(messages.report, { name: username }),
         action: handleReport,
-        icon: require('@tabler/icons/outline/flag.svg'),
+        icon: flagIcon,
       });
     }
 
@@ -308,28 +331,28 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(messages.adminAccount, { name: account.username }),
         action: handleModerate,
-        icon: require('@tabler/icons/outline/gavel.svg'),
+        icon: gavelIcon,
       });
 
       if (isAdmin) {
         menu.push({
           text: intl.formatMessage(messages.adminStatus),
           action: handleModerateStatus,
-          icon: require('@tabler/icons/outline/pencil.svg'),
+          icon: pencilIcon,
         });
       }
 
       menu.push({
         text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
         action: handleToggleStatusSensitivity,
-        icon: require('@tabler/icons/outline/alert-triangle.svg'),
+        icon: alertTriangleIcon,
       });
 
       if (account.id !== ownAccount?.id) {
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: handleDeleteStatus,
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           destructive: true,
         });
       }
@@ -378,7 +401,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
           <Menu>
             <MenuButton
               as={IconButton}
-              src={require('@tabler/icons/outline/dots.svg')}
+              src={dotsIcon}
               theme='outlined'
               className='h-[30px] px-2'
               iconClassName='h-4 w-4'
@@ -421,7 +444,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
         <Stack space={1}>
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/outline/flag-3.svg')} />
+            <Icon src={flag3Icon} />
             <span>
               <FormattedMessage
                 id='event.organized_by'
@@ -441,7 +464,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
           </HStack>
 
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/outline/users.svg')} />
+            <Icon src={usersIcon} />
             <a href='#' className='hover:underline' onClick={handleParticipantsClick}>
               <span>
                 <FormattedMessage
@@ -460,7 +483,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
           {event.location && (
             <HStack alignItems='center' space={2}>
-              <Icon src={require('@tabler/icons/outline/map-pin.svg')} />
+              <Icon src={mapPinIcon} />
               <span>
                 {event.location.get('name')}
               </span>
diff --git a/src/features/event/event-information.tsx b/src/features/event/event-information.tsx
index d84d6096b..bcb13c9e4 100644
--- a/src/features/event/event-information.tsx
+++ b/src/features/event/event-information.tsx
@@ -1,3 +1,6 @@
+import calendarIcon from '@tabler/icons/outline/calendar.svg';
+import linkIcon from '@tabler/icons/outline/link.svg';
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import React, { useCallback, useEffect, useState } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
 
@@ -102,7 +105,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
           <FormattedMessage id='event.location' defaultMessage='Location' />
         </Text>
         <HStack space={2} alignItems='center'>
-          <Icon src={require('@tabler/icons/outline/map-pin.svg')} />
+          <Icon src={mapPinIcon} />
           <Text>{text}</Text>
         </HStack>
       </Stack>
@@ -125,7 +128,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
           <FormattedMessage id='event.date' defaultMessage='Date' />
         </Text>
         <HStack space={2} alignItems='center'>
-          <Icon src={require('@tabler/icons/outline/calendar.svg')} />
+          <Icon src={calendarIcon} />
           <Text>
             <FormattedDate
               value={startDate}
@@ -165,7 +168,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
 
         {status.event.links.map(link => (
           <HStack space={2} alignItems='center'>
-            <Icon src={require('@tabler/icons/outline/link.svg')} />
+            <Icon src={linkIcon} />
             <a href={link.remote_url || link.url} className='text-primary-600 hover:underline dark:text-accent-blue' target='_blank'>
               {(link.remote_url || link.url).replace(/^https?:\/\//, '')}
             </a>
diff --git a/src/features/events/components/event-carousel.tsx b/src/features/events/components/event-carousel.tsx
index 85768ff07..f22619651 100644
--- a/src/features/events/components/event-carousel.tsx
+++ b/src/features/events/components/event-carousel.tsx
@@ -1,3 +1,5 @@
+import chevronLeftIcon from '@tabler/icons/outline/chevron-left.svg';
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import React, { useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';
 import ReactSwipeableViews from 'react-swipeable-views';
@@ -59,7 +61,7 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
             onClick={() => handleChangeIndex(index - 1)}
             className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/outline/chevron-left.svg')} className='size-6 text-black dark:text-white' />
+            <Icon src={chevronLeftIcon} className='size-6 text-black dark:text-white' />
           </button>
         </div>
       )}
@@ -72,7 +74,7 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
             onClick={() => handleChangeIndex(index + 1)}
             className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='size-6 text-black dark:text-white' />
+            <Icon src={chevronRightIcon} className='size-6 text-black dark:text-white' />
           </button>
         </div>
       )}
diff --git a/src/features/federation-restrictions/components/instance-restrictions.tsx b/src/features/federation-restrictions/components/instance-restrictions.tsx
index 938502ae8..f0f38dc58 100644
--- a/src/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/src/features/federation-restrictions/components/instance-restrictions.tsx
@@ -1,3 +1,10 @@
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
+import shieldCheckIcon from '@tabler/icons/outline/shield-check.svg';
+import shieldLockIcon from '@tabler/icons/outline/shield-lock.svg';
+import shieldXIcon from '@tabler/icons/outline/shield-x.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -53,7 +60,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (followers_only) {
       items.push((
-        <Restriction key='followersOnly' icon={require('@tabler/icons/outline/lock.svg')}>
+        <Restriction key='followersOnly' icon={lockIcon}>
           <FormattedMessage
             id='federation_restriction.followers_only'
             defaultMessage='Hidden except to followers'
@@ -62,7 +69,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       ));
     } else if (federated_timeline_removal) {
       items.push((
-        <Restriction key='federatedTimelineRemoval' icon={require('@tabler/icons/outline/lock-open.svg')}>
+        <Restriction key='federatedTimelineRemoval' icon={lockOpenIcon}>
           <FormattedMessage
             id='federation_restriction.federated_timeline_removal'
             defaultMessage='Fediverse timeline removal'
@@ -73,7 +80,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (fullMediaRemoval) {
       items.push((
-        <Restriction key='fullMediaRemoval' icon={require('@tabler/icons/outline/photo-off.svg')}>
+        <Restriction key='fullMediaRemoval' icon={photoOffIcon}>
           <FormattedMessage
             id='federation_restriction.full_media_removal'
             defaultMessage='Full media removal'
@@ -82,7 +89,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       ));
     } else if (partialMediaRemoval) {
       items.push((
-        <Restriction key='partialMediaRemoval' icon={require('@tabler/icons/outline/photo-off.svg')}>
+        <Restriction key='partialMediaRemoval' icon={photoOffIcon}>
           <FormattedMessage
             id='federation_restriction.partial_media_removal'
             defaultMessage='Partial media removal'
@@ -93,7 +100,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (!fullMediaRemoval && media_nsfw) {
       items.push((
-        <Restriction key='mediaNsfw' icon={require('@tabler/icons/outline/eye-off.svg')}>
+        <Restriction key='mediaNsfw' icon={eyeOffIcon}>
           <FormattedMessage
             id='federation_restriction.media_nsfw'
             defaultMessage='Attachments marked NSFW'
@@ -113,7 +120,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (remoteInstance.federation.reject === true) {
       return (
-        <Restriction icon={require('@tabler/icons/outline/shield-x.svg')}>
+        <Restriction icon={shieldXIcon}>
           <FormattedMessage
             id='remote_instance.federation_panel.restricted_message'
             defaultMessage='{siteTitle} blocks all activities from {host}.'
@@ -124,7 +131,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
     } else if (hasRestrictions(remoteInstance)) {
       return (
         <>
-          <Restriction icon={require('@tabler/icons/outline/shield-lock.svg')}>
+          <Restriction icon={shieldLockIcon}>
             <FormattedMessage
               id='remote_instance.federation_panel.some_restrictions_message'
               defaultMessage='{siteTitle} has placed some restrictions on {host}.'
@@ -137,7 +144,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       );
     } else {
       return (
-        <Restriction icon={require('@tabler/icons/outline/shield-check.svg')}>
+        <Restriction icon={shieldCheckIcon}>
           <FormattedMessage
             id='remote_instance.federation_panel.no_restrictions_message'
             defaultMessage='{siteTitle} has placed no restrictions on {host}.'
diff --git a/src/features/federation-restrictions/components/restricted-instance.tsx b/src/features/federation-restrictions/components/restricted-instance.tsx
index 07e017521..4835371f0 100644
--- a/src/features/federation-restrictions/components/restricted-instance.tsx
+++ b/src/features/federation-restrictions/components/restricted-instance.tsx
@@ -1,3 +1,5 @@
+import caretDownIcon from '@tabler/icons/outline/caret-down.svg';
+import caretRightIcon from '@tabler/icons/outline/caret-right.svg';
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
@@ -26,7 +28,7 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
   return (
     <div>
       <a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
-        <Icon src={expanded ? require('@tabler/icons/outline/caret-down.svg') : require('@tabler/icons/outline/caret-right.svg')} />
+        <Icon src={expanded ? caretDownIcon : caretRightIcon} />
         <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
           {remoteInstance.host}
         </div>
diff --git a/src/features/group/components/group-header-image.tsx b/src/features/group/components/group-header-image.tsx
index 4c759b203..273c2ef8e 100644
--- a/src/features/group/components/group-header-image.tsx
+++ b/src/features/group/components/group-header-image.tsx
@@ -1,3 +1,4 @@
+import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
 import clsx from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -30,7 +31,7 @@ const GroupHeaderImage: React.FC<IGroupHeaderImage> = ({ className, group }) =>
         className={clsx(className, 'flex items-center justify-center bg-gray-200 dark:bg-gray-800/30')}
       >
         <Icon
-          src={require('@tabler/icons/outline/photo-off.svg')}
+          src={photoOffIcon}
           className='size-6 text-gray-500 dark:text-gray-700'
         />
       </div>
diff --git a/src/features/group/components/group-header.tsx b/src/features/group/components/group-header.tsx
index 3cb84d4b8..5d28a9939 100644
--- a/src/features/group/components/group-header.tsx
+++ b/src/features/group/components/group-header.tsx
@@ -1,3 +1,4 @@
+import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
 import { List as ImmutableList } from 'immutable';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -112,7 +113,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
         className='flex h-32 w-full items-center justify-center bg-gray-200 dark:bg-gray-800/30 md:rounded-t-xl lg:h-52'
       >
         {isHeaderMissing ? (
-          <Icon src={require('@tabler/icons/outline/photo-off.svg')} className='size-6 text-gray-500 dark:text-gray-700' />
+          <Icon src={photoOffIcon} className='size-6 text-gray-500 dark:text-gray-700' />
         ) : header}
       </div>
     );
diff --git a/src/features/group/components/group-member-list-item.tsx b/src/features/group/components/group-member-list-item.tsx
index f1102965c..5e3ec2637 100644
--- a/src/features/group/components/group-member-list-item.tsx
+++ b/src/features/group/components/group-member-list-item.tsx
@@ -1,3 +1,6 @@
+import banIcon from '@tabler/icons/outline/ban.svg';
+import briefcaseIcon from '@tabler/icons/outline/briefcase.svg';
+import userMinusIcon from '@tabler/icons/outline/user-minus.svg';
 import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -137,13 +140,13 @@ const GroupMemberListItem = (props: IGroupMemberListItem) => {
       if (isMemberUser) {
         items.push({
           text: intl.formatMessage(messages.groupModPromoteMod, { role: GroupRoles.ADMIN }),
-          icon: require('@tabler/icons/outline/briefcase.svg'),
+          icon: briefcaseIcon,
           action: handleAdminAssignment,
         });
       } else if (isMemberAdmin) {
         items.push({
           text: intl.formatMessage(messages.groupModDemote, { role: GroupRoles.ADMIN, name: account.username }),
-          icon: require('@tabler/icons/outline/briefcase.svg'),
+          icon: briefcaseIcon,
           action: handleUserAssignment,
           destructive: true,
         });
@@ -158,14 +161,14 @@ const GroupMemberListItem = (props: IGroupMemberListItem) => {
       if (features.groupsKick) {
         items.push({
           text: intl.formatMessage(messages.groupModKick, { name: account.username }),
-          icon: require('@tabler/icons/outline/user-minus.svg'),
+          icon: userMinusIcon,
           action: handleKickFromGroup,
         });
       }
 
       items.push({
         text: intl.formatMessage(messages.groupModBlock, { name: account.username }),
-        icon: require('@tabler/icons/outline/ban.svg'),
+        icon: banIcon,
         action: handleBlockFromGroup,
         destructive: true,
       });
diff --git a/src/features/group/components/group-options-button.tsx b/src/features/group/components/group-options-button.tsx
index c52bc1eaa..64b25ef21 100644
--- a/src/features/group/components/group-options-button.tsx
+++ b/src/features/group/components/group-options-button.tsx
@@ -1,3 +1,8 @@
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
+import shareIcon from '@tabler/icons/outline/share.svg';
+import volume3Icon from '@tabler/icons/outline/volume-3.svg';
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -98,7 +103,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
     if (canShare) {
       items.push({
         text: intl.formatMessage(messages.share),
-        icon: require('@tabler/icons/outline/share.svg'),
+        icon: shareIcon,
         action: handleShare,
       });
     }
@@ -106,7 +111,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
     if (isInGroup) {
       items.push({
         text: isMuting ? intl.formatMessage(messages.unmute) : intl.formatMessage(messages.mute),
-        icon: require('@tabler/icons/outline/volume-3.svg'),
+        icon: volume3Icon,
         action: isMuting ? handleUnmute : handleMute,
       });
     }
@@ -114,7 +119,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
     if (isMember || isAdmin) {
       items.push({
         text: intl.formatMessage(messages.report),
-        icon: require('@tabler/icons/outline/flag.svg'),
+        icon: flagIcon,
         action: () => dispatch(initReport(ReportableEntities.GROUP, account as Account, { group })),
       });
     }
@@ -123,7 +128,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
       items.push(null);
       items.push({
         text: intl.formatMessage(messages.leave),
-        icon: require('@tabler/icons/outline/logout.svg'),
+        icon: logoutIcon,
         action: handleLeave,
       });
     }
@@ -138,7 +143,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
   return (
     <DropdownMenu items={menu} placement='bottom'>
       <IconButton
-        src={require('@tabler/icons/outline/dots.svg')}
+        src={dotsIcon}
         theme='secondary'
         iconClassName='h-5 w-5'
         className='self-stretch px-2.5'
diff --git a/src/features/group/components/group-privacy.tsx b/src/features/group/components/group-privacy.tsx
index 20602bb41..c5ea61761 100644
--- a/src/features/group/components/group-privacy.tsx
+++ b/src/features/group/components/group-privacy.tsx
@@ -1,3 +1,5 @@
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -17,8 +19,8 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
           <Icon
             src={
               group.locked
-                ? require('@tabler/icons/outline/lock.svg')
-                : require('@tabler/icons/outline/world.svg')
+                ? lockIcon
+                : worldIcon
             }
             className='size-6 text-gray-600 dark:text-gray-600'
           />
@@ -49,8 +51,8 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
         className='size-4'
         src={
           group.locked
-            ? require('@tabler/icons/outline/lock.svg')
-            : require('@tabler/icons/outline/world.svg')
+            ? lockIcon
+            : worldIcon
         }
       />
 
diff --git a/src/features/group/components/group-relationship.tsx b/src/features/group/components/group-relationship.tsx
index ebcdc017d..69a6a957c 100644
--- a/src/features/group/components/group-relationship.tsx
+++ b/src/features/group/components/group-relationship.tsx
@@ -1,3 +1,5 @@
+import gavelIcon from '@tabler/icons/outline/gavel.svg';
+import usersIcon from '@tabler/icons/outline/users.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -28,8 +30,8 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
         className='size-4'
         src={
           isOwner
-            ? require('@tabler/icons/outline/users.svg')
-            : require('@tabler/icons/outline/gavel.svg')
+            ? usersIcon
+            : gavelIcon
         }
       />
 
diff --git a/src/features/group/components/group-tag-list-item.tsx b/src/features/group/components/group-tag-list-item.tsx
index 3680f5afd..572e995a5 100644
--- a/src/features/group/components/group-tag-list-item.tsx
+++ b/src/features/group/components/group-tag-list-item.tsx
@@ -1,3 +1,7 @@
+import pinFilledIcon from '@tabler/icons/filled/pin.svg';
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import eyeIcon from '@tabler/icons/outline/eye.svg';
+import pinIcon from '@tabler/icons/outline/pin.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -87,7 +91,7 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
     if (!isOwner && tag.pinned) {
       return (
         <Icon
-          src={require('@tabler/icons/filled/pin.svg')}
+          src={pinFilledIcon}
           className='size-5 text-gray-600'
           data-testid='pin-icon'
         />
@@ -112,8 +116,8 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
             theme='transparent'
             src={
               tag.pinned ?
-                require('@tabler/icons/filled/pin.svg') :
-                require('@tabler/icons/outline/pin.svg')
+                pinFilledIcon :
+                pinIcon
             }
             iconClassName='h-5 w-5 text-primary-500 dark:text-accent-blue'
             data-testid='pin-icon'
@@ -128,7 +132,7 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
           <IconButton
             onClick={togglePin}
             theme='transparent'
-            src={require('@tabler/icons/filled/pin.svg')}
+            src={pinFilledIcon}
             iconClassName='h-5 w-5 text-primary-500 dark:text-accent-blue'
           />
         </Tooltip>
@@ -185,8 +189,8 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
               theme='transparent'
               src={
                 tag.visible ?
-                  require('@tabler/icons/outline/eye.svg') :
-                  require('@tabler/icons/outline/eye-off.svg')
+                  eyeIcon :
+                  eyeOffIcon
               }
               iconClassName='h-5 w-5 text-primary-500 dark:text-accent-blue'
             />
diff --git a/src/features/group/edit-group.tsx b/src/features/group/edit-group.tsx
index a23cae445..4b5fa5062 100644
--- a/src/features/group/edit-group.tsx
+++ b/src/features/group/edit-group.tsx
@@ -1,3 +1,4 @@
+import lockIcon from '@tabler/icons/outline/lock.svg';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -115,7 +116,7 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { groupId } }) => {
             placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
             maxLength={maxName}
             {...displayName}
-            append={<Icon className='size-5 text-gray-600' src={require('@tabler/icons/outline/lock.svg')} />}
+            append={<Icon className='size-5 text-gray-600' src={lockIcon} />}
             disabled
           />
         </FormGroup>
diff --git a/src/features/group/group-tag-timeline.tsx b/src/features/group/group-tag-timeline.tsx
index 92b25bfaa..b5caee49d 100644
--- a/src/features/group/group-tag-timeline.tsx
+++ b/src/features/group/group-tag-timeline.tsx
@@ -1,3 +1,4 @@
+import message2Icon from '@tabler/icons/outline/message-2.svg';
 import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -50,7 +51,7 @@ const GroupTagTimeline: React.FC<IGroupTimeline> = (props) => {
           <Stack space={4} className='py-6' justifyContent='center' alignItems='center'>
             <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
               <Icon
-                src={require('@tabler/icons/outline/message-2.svg')}
+                src={message2Icon}
                 className='size-6 text-gray-600'
               />
             </div>
diff --git a/src/features/group/group-tags.tsx b/src/features/group/group-tags.tsx
index 6e1951886..f519fbecb 100644
--- a/src/features/group/group-tags.tsx
+++ b/src/features/group/group-tags.tsx
@@ -1,3 +1,4 @@
+import hashIcon from '@tabler/icons/outline/hash.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -41,7 +42,7 @@ const GroupTopics: React.FC<IGroupTopics> = (props) => {
         <Stack space={4} className='pt-6' justifyContent='center' alignItems='center'>
           <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
             <Icon
-              src={require('@tabler/icons/outline/hash.svg')}
+              src={hashIcon}
               className='size-6 text-gray-600'
             />
           </div>
diff --git a/src/features/group/group-timeline.tsx b/src/features/group/group-timeline.tsx
index 656a2f9ba..418f9db62 100644
--- a/src/features/group/group-timeline.tsx
+++ b/src/features/group/group-timeline.tsx
@@ -1,3 +1,4 @@
+import message2Icon from '@tabler/icons/outline/message-2.svg';
 import clsx from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -110,7 +111,7 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
           <Stack space={4} className='py-6' justifyContent='center' alignItems='center'>
             <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
               <Icon
-                src={require('@tabler/icons/outline/message-2.svg')}
+                src={message2Icon}
                 className='size-6 text-gray-600'
               />
             </div>
diff --git a/src/features/group/manage-group.tsx b/src/features/group/manage-group.tsx
index bf857996a..8dafe252e 100644
--- a/src/features/group/manage-group.tsx
+++ b/src/features/group/manage-group.tsx
@@ -1,3 +1,4 @@
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -61,7 +62,7 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
 
   const onDeleteGroup = () =>
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       heading: intl.formatMessage(messages.deleteHeading),
       message: intl.formatMessage(messages.deleteMessage),
       confirm: intl.formatMessage(messages.deleteConfirm),
diff --git a/src/features/groups/components/discover/group-list-item.tsx b/src/features/groups/components/discover/group-list-item.tsx
index 3294e6312..0b3c56057 100644
--- a/src/features/groups/components/discover/group-list-item.tsx
+++ b/src/features/groups/components/discover/group-list-item.tsx
@@ -1,3 +1,5 @@
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -39,7 +41,7 @@ const GroupListItem = (props: IGroupListItem) => {
             <HStack className='text-gray-700 dark:text-gray-600' space={1} alignItems='center'>
               <Icon
                 className='size-4.5'
-                src={group.locked ? require('@tabler/icons/outline/lock.svg') : require('@tabler/icons/outline/world.svg')}
+                src={group.locked ? lockIcon : worldIcon}
               />
 
               <Text theme='inherit' tag='span' size='sm' weight='medium'>
diff --git a/src/features/groups/components/discover/layout-buttons.tsx b/src/features/groups/components/discover/layout-buttons.tsx
index 3500f40a5..dd206975b 100644
--- a/src/features/groups/components/discover/layout-buttons.tsx
+++ b/src/features/groups/components/discover/layout-buttons.tsx
@@ -1,3 +1,5 @@
+import layoutGridIcon from '@tabler/icons/outline/layout-grid.svg';
+import layoutListIcon from '@tabler/icons/outline/layout-list.svg';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -20,7 +22,7 @@ const LayoutButtons = ({ layout, onSelect }: ILayoutButtons) => (
       onClick={() => onSelect(GroupLayout.LIST)}
     >
       <Icon
-        src={require('@tabler/icons/outline/layout-list.svg')}
+        src={layoutListIcon}
         className={
           clsx('size-5 text-gray-600', {
             'text-primary-600': layout === GroupLayout.LIST,
@@ -34,7 +36,7 @@ const LayoutButtons = ({ layout, onSelect }: ILayoutButtons) => (
       onClick={() => onSelect(GroupLayout.GRID)}
     >
       <Icon
-        src={require('@tabler/icons/outline/layout-grid.svg')}
+        src={layoutGridIcon}
         className={
           clsx('size-5 text-gray-600', {
             'text-primary-600': layout === GroupLayout.GRID,
diff --git a/src/features/groups/components/discover/search/recent-searches.tsx b/src/features/groups/components/discover/search/recent-searches.tsx
index 65012bbdf..eb5712baf 100644
--- a/src/features/groups/components/discover/search/recent-searches.tsx
+++ b/src/features/groups/components/discover/search/recent-searches.tsx
@@ -1,3 +1,4 @@
+import searchIcon from '@tabler/icons/outline/search.svg';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Virtuoso } from 'react-virtuoso';
@@ -62,7 +63,7 @@ export default (props: Props) => {
                   <HStack alignItems='center' space={2}>
                     <div className='flex size-10 items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-800 dark:group-hover:bg-gray-700/20'>
                       <Icon
-                        src={require('@tabler/icons/outline/search.svg')}
+                        src={searchIcon}
                         className='size-5 text-gray-600'
                       />
                     </div>
diff --git a/src/features/groups/discover.tsx b/src/features/groups/discover.tsx
index 6b42876c1..062dcdd12 100644
--- a/src/features/groups/discover.tsx
+++ b/src/features/groups/discover.tsx
@@ -1,3 +1,6 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -36,7 +39,7 @@ const Discover: React.FC = () => {
         <HStack alignItems='center'>
           {isSearching ? (
             <IconButton
-              src={require('@tabler/icons/outline/arrow-left.svg')}
+              src={arrowLeftIcon}
               iconClassName='mr-2 h-5 w-5 fill-current text-gray-600 rtl:rotate-180'
               onClick={cancelSearch}
               data-testid='group-search-icon'
@@ -55,7 +58,7 @@ const Discover: React.FC = () => {
             append={
               <button onClick={clearValue}>
                 <Icon
-                  src={hasSearchValue ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
+                  src={hasSearchValue ? xIcon : searchIcon}
                   className='size-4 text-gray-700 dark:text-gray-600'
                   aria-hidden='true'
                 />
diff --git a/src/features/groups/index.tsx b/src/features/groups/index.tsx
index f85b9d474..16eed2fc1 100644
--- a/src/features/groups/index.tsx
+++ b/src/features/groups/index.tsx
@@ -1,3 +1,4 @@
+import circlesIcon from '@tabler/icons/outline/circles.svg';
 import React, { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -79,7 +80,7 @@ const Groups: React.FC = () => {
       {canCreateGroup && (
         <Button
           className='xl:hidden'
-          icon={require('@tabler/icons/outline/circles.svg')}
+          icon={circlesIcon}
           onClick={createGroup}
           theme='secondary'
           block
diff --git a/src/features/groups/tag.tsx b/src/features/groups/tag.tsx
index 3eeab1794..181753d50 100644
--- a/src/features/groups/tag.tsx
+++ b/src/features/groups/tag.tsx
@@ -1,3 +1,5 @@
+import layoutGridIcon from '@tabler/icons/outline/layout-grid.svg';
+import layoutListIcon from '@tabler/icons/outline/layout-list.svg';
 import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
@@ -65,7 +67,7 @@ const Tag: React.FC<ITag> = (props) => {
         <HStack alignItems='center'>
           <button onClick={() => setLayout(Layout.LIST)}>
             <Icon
-              src={require('@tabler/icons/outline/layout-list.svg')}
+              src={layoutListIcon}
               className={
                 clsx('size-5 text-gray-600', {
                   'text-primary-600': layout === Layout.LIST,
@@ -76,7 +78,7 @@ const Tag: React.FC<ITag> = (props) => {
 
           <button onClick={() => setLayout(Layout.GRID)}>
             <Icon
-              src={require('@tabler/icons/outline/layout-grid.svg')}
+              src={layoutGridIcon}
               className={
                 clsx('size-5 text-gray-600', {
                   'text-primary-600': layout === Layout.GRID,
diff --git a/src/features/list-adder/components/list.tsx b/src/features/list-adder/components/list.tsx
index a6f12ce53..d638858b1 100644
--- a/src/features/list-adder/components/list.tsx
+++ b/src/features/list-adder/components/list.tsx
@@ -1,3 +1,6 @@
+import listIcon from '@tabler/icons/outline/list.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -30,14 +33,14 @@ const List: React.FC<IList> = ({ listId }) => {
   let button;
 
   if (added) {
-    button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton iconClassName='h-5 w-5' src={xIcon} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton iconClassName='h-5 w-5' src={plusIcon} 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/outline/list.svg')} />
+      <Icon src={listIcon} />
       <span className='grow'>
         {list.title}
       </span>
diff --git a/src/features/list-editor/components/account.tsx b/src/features/list-editor/components/account.tsx
index 4a28a3c41..9ee274f95 100644
--- a/src/features/list-editor/components/account.tsx
+++ b/src/features/list-editor/components/account.tsx
@@ -1,3 +1,5 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -28,9 +30,9 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
   let button;
 
   if (isAdded) {
-    button = <IconButton src={require('@tabler/icons/outline/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={xIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={plusIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
diff --git a/src/features/list-editor/components/search.tsx b/src/features/list-editor/components/search.tsx
index 71f136247..5b67a96de 100644
--- a/src/features/list-editor/components/search.tsx
+++ b/src/features/list-editor/components/search.tsx
@@ -1,3 +1,4 @@
+import backspaceIcon from '@tabler/icons/outline/backspace.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -45,7 +46,7 @@ const Search = () => {
             placeholder={intl.formatMessage(messages.search)}
           />
           <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-            <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
+            <Icon src={backspaceIcon} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
           </div>
         </label>
 
diff --git a/src/features/lists/index.tsx b/src/features/lists/index.tsx
index 498b6472c..00ea5022f 100644
--- a/src/features/lists/index.tsx
+++ b/src/features/lists/index.tsx
@@ -1,3 +1,6 @@
+import listIcon from '@tabler/icons/outline/list.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import React, { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -84,12 +87,12 @@ const Lists: React.FC = () => {
         >
           {lists.map((list: any) => (
             <Link key={list.id} to={`/list/${list.id}`} className='flex items-center gap-1.5 rounded-lg p-2 text-gray-900 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-gray-800'>
-              <Icon src={require('@tabler/icons/outline/list.svg')} />
+              <Icon src={listIcon} />
               <span className='grow'>
                 {list.title}
               </span>
-              <IconButton iconClassName='h-5 w-5 text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500' src={require('@tabler/icons/outline/pencil.svg')} onClick={handleEditClick(list.id)} title={intl.formatMessage(messages.editList)} />
-              <IconButton iconClassName='h-5 w-5 text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500' src={require('@tabler/icons/outline/trash.svg')} onClick={handleDeleteClick(list.id)} title={intl.formatMessage(messages.deleteList)} />
+              <IconButton iconClassName='h-5 w-5 text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500' src={pencilIcon} onClick={handleEditClick(list.id)} title={intl.formatMessage(messages.editList)} />
+              <IconButton iconClassName='h-5 w-5 text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500' src={trashIcon} onClick={handleDeleteClick(list.id)} title={intl.formatMessage(messages.deleteList)} />
             </Link>
           ))}
         </ScrollableList>
diff --git a/src/features/notifications/components/filter-bar.tsx b/src/features/notifications/components/filter-bar.tsx
index 45f67d884..8be2fe895 100644
--- a/src/features/notifications/components/filter-bar.tsx
+++ b/src/features/notifications/components/filter-bar.tsx
@@ -1,3 +1,10 @@
+import atIcon from '@tabler/icons/outline/at.svg';
+import bellRingingIcon from '@tabler/icons/outline/bell-ringing.svg';
+import chartBarIcon from '@tabler/icons/outline/chart-bar.svg';
+import heartIcon from '@tabler/icons/outline/heart.svg';
+import moodSmileIcon from '@tabler/icons/outline/mood-smile.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -46,43 +53,43 @@ const NotificationFilterBar = () => {
     });
   } else {
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/at.svg')} />,
+      text: <Icon src={atIcon} />,
       title: intl.formatMessage(messages.mentions),
       action: onClick('mention'),
       name: 'mention',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/heart.svg')} />,
+      text: <Icon src={heartIcon} />,
       title: intl.formatMessage(messages.favourites),
       action: onClick('favourite'),
       name: 'favourite',
     });
     if (features.emojiReacts) items.push({
-      text: <Icon src={require('@tabler/icons/outline/mood-smile.svg')} />,
+      text: <Icon src={moodSmileIcon} />,
       title: intl.formatMessage(messages.emoji_reacts),
       action: onClick('pleroma:emoji_reaction'),
       name: 'pleroma:emoji_reaction',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/repeat.svg')} />,
+      text: <Icon src={repeatIcon} />,
       title: intl.formatMessage(messages.boosts),
       action: onClick('reblog'),
       name: 'reblog',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/chart-bar.svg')} />,
+      text: <Icon src={chartBarIcon} />,
       title: intl.formatMessage(messages.polls),
       action: onClick('poll'),
       name: 'poll',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/bell-ringing.svg')} />,
+      text: <Icon src={bellRingingIcon} />,
       title: intl.formatMessage(messages.statuses),
       action: onClick('status'),
       name: 'status',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/user-plus.svg')} />,
+      text: <Icon src={userPlusIcon} />,
       title: intl.formatMessage(messages.follows),
       action: onClick('follow'),
       name: 'follow',
diff --git a/src/features/notifications/components/notification.tsx b/src/features/notifications/components/notification.tsx
index 64c4e3f4e..c6e9586fe 100644
--- a/src/features/notifications/components/notification.tsx
+++ b/src/features/notifications/components/notification.tsx
@@ -1,3 +1,17 @@
+import atIcon from '@tabler/icons/outline/at.svg';
+import bellRingingIcon from '@tabler/icons/outline/bell-ringing.svg';
+import boltIcon from '@tabler/icons/outline/bolt.svg';
+import briefcaseIcon from '@tabler/icons/outline/briefcase.svg';
+import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
+import calendarTimeIcon from '@tabler/icons/outline/calendar-time.svg';
+import chartBarIcon from '@tabler/icons/outline/chart-bar.svg';
+import heartIcon from '@tabler/icons/outline/heart.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import moodHappyIcon from '@tabler/icons/outline/mood-happy.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import userCheckIcon from '@tabler/icons/outline/user-check.svg';
+import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
 import React, { useCallback } from 'react';
 import { defineMessages, useIntl, IntlShape, MessageDescriptor, defineMessage, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
@@ -42,25 +56,25 @@ const buildLink = (account: AccountEntity): JSX.Element => (
 );
 
 const icons: Record<NotificationType, string> = {
-  follow: require('@tabler/icons/outline/user-plus.svg'),
-  follow_request: require('@tabler/icons/outline/user-plus.svg'),
-  mention: require('@tabler/icons/outline/at.svg'),
-  favourite: require('@tabler/icons/outline/heart.svg'),
-  group_favourite: require('@tabler/icons/outline/heart.svg'),
-  reblog: require('@tabler/icons/outline/repeat.svg'),
-  group_reblog: require('@tabler/icons/outline/repeat.svg'),
-  status: require('@tabler/icons/outline/bell-ringing.svg'),
-  poll: require('@tabler/icons/outline/chart-bar.svg'),
-  move: require('@tabler/icons/outline/briefcase.svg'),
-  'pleroma:chat_mention': require('@tabler/icons/outline/messages.svg'),
-  'pleroma:emoji_reaction': require('@tabler/icons/outline/mood-happy.svg'),
-  user_approved: require('@tabler/icons/outline/user-plus.svg'),
-  update: require('@tabler/icons/outline/pencil.svg'),
-  'pleroma:event_reminder': require('@tabler/icons/outline/calendar-time.svg'),
-  'pleroma:participation_request': require('@tabler/icons/outline/calendar-event.svg'),
-  'pleroma:participation_accepted': require('@tabler/icons/outline/calendar-event.svg'),
-  'ditto:name_grant': require('@tabler/icons/outline/user-check.svg'),
-  'ditto:zap': require('@tabler/icons/outline/bolt.svg'),
+  follow: userPlusIcon,
+  follow_request: userPlusIcon,
+  mention: atIcon,
+  favourite: heartIcon,
+  group_favourite: heartIcon,
+  reblog: repeatIcon,
+  group_reblog: repeatIcon,
+  status: bellRingingIcon,
+  poll: chartBarIcon,
+  move: briefcaseIcon,
+  'pleroma:chat_mention': messagesIcon,
+  'pleroma:emoji_reaction': moodHappyIcon,
+  user_approved: userPlusIcon,
+  update: pencilIcon,
+  'pleroma:event_reminder': calendarTimeIcon,
+  'pleroma:participation_request': calendarEventIcon,
+  'pleroma:participation_accepted': calendarEventIcon,
+  'ditto:name_grant': userCheckIcon,
+  'ditto:zap': boltIcon,
 };
 
 const nameMessage = defineMessage({
diff --git a/src/features/public-timeline/index.tsx b/src/features/public-timeline/index.tsx
index 0522d3dd5..67566b7be 100644
--- a/src/features/public-timeline/index.tsx
+++ b/src/features/public-timeline/index.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -79,7 +80,7 @@ const PublicTimeline = () => {
           <Accordion
             headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
             action={dismissExplanationBox}
-            actionIcon={require('@tabler/icons/outline/x.svg')}
+            actionIcon={xIcon}
             actionLabel={intl.formatMessage(messages.dismiss)}
             expanded={explanationBoxExpanded}
             onToggle={toggleExplanationBox}
diff --git a/src/features/remote-timeline/index.tsx b/src/features/remote-timeline/index.tsx
index 630fe80fd..ea50a7624 100644
--- a/src/features/remote-timeline/index.tsx
+++ b/src/features/remote-timeline/index.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -55,7 +56,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
 
       {!pinned && (
         <HStack className='mb-4 px-2' space={2}>
-          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} onClick={handleCloseClick} />
+          <IconButton iconClassName='h-5 w-5' src={xIcon} onClick={handleCloseClick} />
           <Text>
             <FormattedMessage
               id='remote_timeline.filter_message'
diff --git a/src/features/reply-mentions/account.tsx b/src/features/reply-mentions/account.tsx
index 007309aac..e8fa12983 100644
--- a/src/features/reply-mentions/account.tsx
+++ b/src/features/reply-mentions/account.tsx
@@ -1,3 +1,5 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -42,9 +44,9 @@ const Account: React.FC<IAccount> = ({ composeId, accountId, author }) => {
   let button;
 
   if (added) {
-    button = <IconButton src={require('@tabler/icons/outline/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={xIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={plusIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
diff --git a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
index 8462c45ff..32f2e7b83 100644
--- a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
@@ -1,3 +1,4 @@
+import calendarStatsIcon from '@tabler/icons/outline/calendar-stats.svg';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -33,7 +34,7 @@ const ScheduledStatusActionBar: React.FC<IScheduledStatusActionBar> = ({ status
         dispatch(cancelScheduledStatus(status.id));
       } else {
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/outline/calendar-stats.svg'),
+          icon: calendarStatsIcon,
           heading: intl.formatMessage(messages.deleteHeading),
           message: intl.formatMessage(messages.deleteMessage),
           confirm: intl.formatMessage(messages.deleteConfirm),
diff --git a/src/features/soapbox-config/components/icon-picker-dropdown.tsx b/src/features/soapbox-config/components/icon-picker-dropdown.tsx
index 5a72f0474..4e1cc9093 100644
--- a/src/features/soapbox-config/components/icon-picker-dropdown.tsx
+++ b/src/features/soapbox-config/components/icon-picker-dropdown.tsx
@@ -5,6 +5,8 @@ import Overlay from 'react-overlays/lib/Overlay';
 
 import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon';
 
+import forkAwesomeIcons from '../forkawesome.json';
+
 import IconPickerMenu from './icon-picker-menu';
 
 const messages = defineMessages({
@@ -53,7 +55,6 @@ const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickIcon }
   };
 
   const title = intl.formatMessage(messages.emoji);
-  const forkAwesomeIcons = require('../forkawesome.json');
 
   return (
     <div onKeyDown={handleKeyDown}>
diff --git a/src/features/status/components/detailed-status.tsx b/src/features/status/components/detailed-status.tsx
index 4df65eb22..33272eff7 100644
--- a/src/features/status/components/detailed-status.tsx
+++ b/src/features/status/components/detailed-status.tsx
@@ -1,3 +1,6 @@
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
 import React, { useEffect, useRef, useState } from 'react';
 import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -57,7 +60,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
             avatarSize={42}
             icon={
               <Icon
-                src={require('@tabler/icons/outline/circles.svg')}
+                src={circlesIcon}
                 className='size-4 text-primary-600 dark:text-accent-blue'
               />
             }
@@ -109,9 +112,9 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
   }
 
   if (actualStatus.visibility === 'direct') {
-    statusTypeIcon = <Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/mail.svg')} />;
+    statusTypeIcon = <Icon className='size-4 text-gray-700 dark:text-gray-600' src={mailIcon} />;
   } else if (actualStatus.visibility === 'private') {
-    statusTypeIcon = <Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/lock.svg')} />;
+    statusTypeIcon = <Icon className='size-4 text-gray-700 dark:text-gray-600' src={lockIcon} />;
   }
 
   return (
diff --git a/src/features/test-timeline/index.tsx b/src/features/test-timeline/index.tsx
index 4b99b550b..e81b59318 100644
--- a/src/features/test-timeline/index.tsx
+++ b/src/features/test-timeline/index.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
+import status5 from 'soapbox/__fixtures__/pleroma-quote-of-quote-post.json';
+import status3 from 'soapbox/__fixtures__/pleroma-status-vertical-video-without-metadata.json';
+import status4 from 'soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json';
+import status2 from 'soapbox/__fixtures__/pleroma-status-with-poll.json';
+import status1 from 'soapbox/__fixtures__/pleroma-status.json';
+import status6 from 'soapbox/__fixtures__/truthsocial-status-in-moderation.json';
 import { importFetchedStatuses } from 'soapbox/actions/importer';
 import { expandTimelineSuccess } from 'soapbox/actions/timelines';
 import { useAppDispatch, useTheme } from 'soapbox/hooks';
@@ -17,14 +23,7 @@ const messages = defineMessages({
  * List of mock statuses to display in the timeline.
  * These get embedded into the build, but only in this chunk, so it's okay.
  */
-const MOCK_STATUSES: any[] = [
-  require('soapbox/__fixtures__/pleroma-status.json'),
-  require('soapbox/__fixtures__/pleroma-status-with-poll.json'),
-  require('soapbox/__fixtures__/pleroma-status-vertical-video-without-metadata.json'),
-  require('soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json'),
-  require('soapbox/__fixtures__/pleroma-quote-of-quote-post.json'),
-  require('soapbox/__fixtures__/truthsocial-status-in-moderation.json'),
-];
+const MOCK_STATUSES = [status1, status2, status3, status4, status5, status6];
 
 const timelineId = 'test';
 const onlyMedia = false;
diff --git a/src/features/theme-editor/index.tsx b/src/features/theme-editor/index.tsx
index 10c9e6041..115159e9c 100644
--- a/src/features/theme-editor/index.tsx
+++ b/src/features/theme-editor/index.tsx
@@ -1,3 +1,6 @@
+import downloadIcon from '@tabler/icons/outline/download.svg';
+import refreshIcon from '@tabler/icons/outline/refresh.svg';
+import uploadIcon from '@tabler/icons/outline/upload.svg';
 import React, { useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -207,15 +210,15 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
             items={[{
               text: intl.formatMessage(messages.restore),
               action: restoreDefaultTheme,
-              icon: require('@tabler/icons/outline/refresh.svg'),
+              icon: refreshIcon,
             }, {
               text: intl.formatMessage(messages.import),
               action: importTheme,
-              icon: require('@tabler/icons/outline/upload.svg'),
+              icon: uploadIcon,
             }, {
               text: intl.formatMessage(messages.export),
               action: exportTheme,
-              icon: require('@tabler/icons/outline/download.svg'),
+              icon: downloadIcon,
             }]}
           />
           <Button theme='secondary' onClick={resetTheme}>
diff --git a/src/features/ui/components/action-button.tsx b/src/features/ui/components/action-button.tsx
index 6d9502d5b..ec1a5874d 100644
--- a/src/features/ui/components/action-button.tsx
+++ b/src/features/ui/components/action-button.tsx
@@ -1,3 +1,5 @@
+import banIcon from '@tabler/icons/outline/ban.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -154,7 +156,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
       return (
         <Button
           onClick={handleRemoteFollow}
-          icon={require('@tabler/icons/outline/plus.svg')}
+          icon={plusIcon}
           text={intl.formatMessage(messages.follow)}
           size='sm'
         />
@@ -224,7 +226,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
           size='sm'
           disabled={blockedBy}
           theme={isFollowing ? 'secondary' : 'primary'}
-          icon={blockedBy ? require('@tabler/icons/outline/ban.svg') : (!isFollowing && require('@tabler/icons/outline/plus.svg'))}
+          icon={blockedBy ? banIcon : (!isFollowing && plusIcon)}
           onClick={handleFollow}
         >
           {isFollowing ? (
diff --git a/src/features/ui/components/error-column.tsx b/src/features/ui/components/error-column.tsx
index 6c91fa144..585af0050 100644
--- a/src/features/ui/components/error-column.tsx
+++ b/src/features/ui/components/error-column.tsx
@@ -1,3 +1,4 @@
+import refreshIcon from '@tabler/icons/outline/refresh.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -32,7 +33,7 @@ const ErrorColumn: React.FC<IErrorColumn> = ({ error, onRetry = () => location.r
         <IconButton
           iconClassName='h-10 w-10'
           title={intl.formatMessage(messages.retry)}
-          src={require('@tabler/icons/outline/refresh.svg')}
+          src={refreshIcon}
           onClick={handleRetry}
         />
 
diff --git a/src/features/ui/components/floating-action-button.tsx b/src/features/ui/components/floating-action-button.tsx
index 5ee426f3f..ce5caef0d 100644
--- a/src/features/ui/components/floating-action-button.tsx
+++ b/src/features/ui/components/floating-action-button.tsx
@@ -1,3 +1,4 @@
+import pencilPlusIcon from '@tabler/icons/outline/pencil-plus.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -42,7 +43,7 @@ const HomeFAB: React.FC = () => {
       aria-label={intl.formatMessage(messages.publish)}
     >
       <Icon
-        src={require('@tabler/icons/outline/pencil-plus.svg')}
+        src={pencilPlusIcon}
         className='size-6'
       />
     </button>
@@ -74,7 +75,7 @@ const GroupFAB: React.FC = () => {
       <HStack space={3} alignItems='center'>
         <Avatar className='-my-3 -ml-2 border-white' size={42} src={group.avatar} />
         <Icon
-          src={require('@tabler/icons/outline/pencil-plus.svg')}
+          src={pencilPlusIcon}
           className='size-6'
         />
       </HStack>
diff --git a/src/features/ui/components/instance-info-panel.tsx b/src/features/ui/components/instance-info-panel.tsx
index 26a52df84..8f397ca18 100644
--- a/src/features/ui/components/instance-info-panel.tsx
+++ b/src/features/ui/components/instance-info-panel.tsx
@@ -1,3 +1,5 @@
+import pinIcon from '@tabler/icons/outline/pin.svg';
+import pinnedOffIcon from '@tabler/icons/outline/pinned-off.svg';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
@@ -41,7 +43,7 @@ const InstanceInfoPanel: React.FC<IInstanceInfoPanel> = ({ host }) => {
     <Widget
       title={remoteInstance.host}
       onActionClick={handlePinHost}
-      actionIcon={pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg')}
+      actionIcon={pinned ? pinnedOffIcon : pinIcon}
       actionTitle={intl.formatMessage(pinned ? messages.unpinHost : messages.pinHost, { host })}
     />
   );
diff --git a/src/features/ui/components/instance-moderation-panel.tsx b/src/features/ui/components/instance-moderation-panel.tsx
index 75cb34b05..f64725e69 100644
--- a/src/features/ui/components/instance-moderation-panel.tsx
+++ b/src/features/ui/components/instance-moderation-panel.tsx
@@ -1,3 +1,5 @@
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
+import editIcon from '@tabler/icons/outline/edit.svg';
 import React from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
@@ -35,7 +37,7 @@ const InstanceModerationPanel: React.FC<IInstanceModerationPanel> = ({ host }) =
     return [{
       text: intl.formatMessage(messages.editFederation),
       action: handleEditFederation,
-      icon: require('@tabler/icons/outline/edit.svg'),
+      icon: editIcon,
     }];
   };
 
@@ -45,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/outline/dots-vertical.svg')} />
+        <DropdownMenu items={menu} src={dotsVerticalIcon} />
       ) : undefined}
     >
       <InstanceRestrictions remoteInstance={remoteInstance} />
diff --git a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
index d8df08427..22e3ac915 100644
--- a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
@@ -1,3 +1,4 @@
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import React, { ChangeEventHandler, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -186,7 +187,7 @@ const AccountModerationModal: React.FC<IAccountModerationModal> = ({ onClose, ac
 
         {features.adminFE && (
           <HStack justifyContent='center'>
-            <Button icon={require('@tabler/icons/outline/external-link.svg')} size='sm' theme='secondary' onClick={handleAdminFE}>
+            <Button icon={externalLinkIcon} size='sm' theme='secondary' onClick={handleAdminFE}>
               <FormattedMessage id='account_moderation_modal.admin_fe' defaultMessage='Open in AdminFE' />
             </Button>
           </HStack>
diff --git a/src/features/ui/components/modals/boost-modal.tsx b/src/features/ui/components/modals/boost-modal.tsx
index 19acf46fe..badb827c2 100644
--- a/src/features/ui/components/modals/boost-modal.tsx
+++ b/src/features/ui/components/modals/boost-modal.tsx
@@ -1,3 +1,4 @@
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -39,7 +40,7 @@ const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
 
         <Text>
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon className='inline-block align-middle' src={require('@tabler/icons/outline/repeat.svg')} /></span> }} />
+          <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon className='inline-block align-middle' src={repeatIcon} /></span> }} />
         </Text>
       </Stack>
     </Modal>
diff --git a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index 67965c0e2..ac6a035a3 100644
--- a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -1,3 +1,6 @@
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -137,7 +140,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
     dispatch((dispatch, getState) => {
       if (checkEventComposeContent(getState().compose_event)) {
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           heading: id
             ? <FormattedMessage id='confirmations.cancel_event_editing.heading' defaultMessage='Cancel event editing' />
             : <FormattedMessage id='confirmations.delete_event.heading' defaultMessage='Delete event' />,
@@ -177,12 +180,12 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
 
   const renderLocation = () => location && (
     <HStack className='h-[38px] text-gray-700 dark:text-gray-500' alignItems='center' space={2}>
-      <Icon src={ADDRESS_ICONS[location.type] || require('@tabler/icons/outline/map-pin.svg')} />
+      <Icon src={ADDRESS_ICONS[location.type] || mapPinIcon} />
       <Stack className='grow'>
         <Text>{location.description}</Text>
         <Text theme='muted' size='xs'>{[location.street, location.locality, location.country].filter(val => val?.trim()).join(' · ')}</Text>
       </Stack>
-      <IconButton title={intl.formatMessage(messages.resetLocation)} src={require('@tabler/icons/outline/x.svg')} onClick={() => onChangeLocation(null)} />
+      <IconButton title={intl.formatMessage(messages.resetLocation)} src={xIcon} onClick={() => onChangeLocation(null)} />
     </HStack>
   );
 
@@ -213,7 +216,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
           {banner ? (
             <>
               <img className='size-full object-cover' src={banner.url} alt='' />
-              <IconButton className='absolute right-2 top-2' src={require('@tabler/icons/outline/x.svg')} onClick={handleClearBanner} />
+              <IconButton className='absolute right-2 top-2' src={xIcon} onClick={handleClearBanner} />
             </>
           ) : (
             <UploadButton disabled={isUploading} onSelectFile={handleFiles} />
diff --git a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
index c36861a6c..ea8a0bce1 100644
--- a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -1,3 +1,4 @@
+import photoPlusIcon from '@tabler/icons/outline/photo-plus.svg';
 import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -28,7 +29,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
   return (
     <HStack className='size-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
       <Icon
-        src={require('@tabler/icons/outline/photo-plus.svg')}
+        src={photoPlusIcon}
         className='size-7'
         onClick={handleClick}
       />
diff --git a/src/features/ui/components/modals/compose-modal.tsx b/src/features/ui/components/modals/compose-modal.tsx
index b5fc73c33..ee4965dcb 100644
--- a/src/features/ui/components/modals/compose-modal.tsx
+++ b/src/features/ui/components/modals/compose-modal.tsx
@@ -1,3 +1,4 @@
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import clsx from 'clsx';
 import React, { useRef } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -36,7 +37,7 @@ const ComposeModal: React.FC<IComposeModal> = ({ onClose, composeId = 'compose-m
   const onClickClose = () => {
     if (checkComposeContent(compose)) {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         heading: statusId
           ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' />
           : <FormattedMessage id='confirmations.cancel.heading' defaultMessage='Discard post' />,
diff --git a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
index 4ecf6b0e9..e68b98228 100644
--- a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
@@ -1,4 +1,5 @@
 import { useFloating, shift } from '@floating-ui/react';
+import moodHappyIcon from '@tabler/icons/outline/mood-happy.svg';
 import React, { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -58,7 +59,7 @@ const EmojiPicker: React.FC<IEmojiPicker> = ({ emoji, emojiUrl, ...props }) => {
       >
         {emoji
           ? <Emoji height={20} width={20} emoji={emoji} />
-          : <Icon className='size-5 text-gray-600 hover:text-gray-700 dark:hover:text-gray-500' src={require('@tabler/icons/outline/mood-happy.svg')} />}
+          : <Icon className='size-5 text-gray-600 hover:text-gray-700 dark:hover:text-gray-500' src={moodHappyIcon} />}
       </button>
 
       {createPortal(
diff --git a/src/features/ui/components/modals/event-map-modal.tsx b/src/features/ui/components/modals/event-map-modal.tsx
index 2a16a84f3..24bc56193 100644
--- a/src/features/ui/components/modals/event-map-modal.tsx
+++ b/src/features/ui/components/modals/event-map-modal.tsx
@@ -1,4 +1,8 @@
+import gpsIcon from '@tabler/icons/outline/gps.svg';
 import L from 'leaflet';
+import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
+import iconUrl from 'leaflet/dist/images/marker-icon.png';
+import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -11,9 +15,9 @@ import type { Status as StatusEntity } from 'soapbox/types/entities';
 import 'leaflet/dist/leaflet.css';
 
 L.Icon.Default.mergeOptions({
-  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-  iconUrl: require('leaflet/dist/images/marker-icon.png'),
-  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+  iconRetinaUrl,
+  iconUrl,
+  shadowUrl,
 });
 
 interface IEventMapModal {
@@ -64,7 +68,7 @@ const EventMapModal: React.FC<IEventMapModal> = ({ onClose, statusId }) => {
     >
       <Stack alignItems='center' space={6}>
         <div className='h-96 w-full' id='event-map' />
-        <Button onClick={onClickNavigate} icon={require('@tabler/icons/outline/gps.svg')}>
+        <Button onClick={onClickNavigate} icon={gpsIcon}>
           <FormattedMessage id='event_map.navigate' defaultMessage='Navigate' />
         </Button>
       </Stack>
diff --git a/src/features/ui/components/modals/landing-page-modal.tsx b/src/features/ui/components/modals/landing-page-modal.tsx
index 251bc5f9a..b2e1196b1 100644
--- a/src/features/ui/components/modals/landing-page-modal.tsx
+++ b/src/features/ui/components/modals/landing-page-modal.tsx
@@ -1,3 +1,4 @@
+import lifebuoyIcon from '@tabler/icons/outline/lifebuoy.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -38,7 +39,7 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
               target='_blank'
               className='flex items-center space-x-3 rounded-md p-3 hover:bg-gray-50 dark:hover:bg-gray-900/50'
             >
-              <Icon src={require('@tabler/icons/outline/lifebuoy.svg')} className='size-6 shrink-0 text-gray-600 dark:text-gray-700' />
+              <Icon src={lifebuoyIcon} className='size-6 shrink-0 text-gray-600 dark:text-gray-700' />
 
               <Text weight='medium'>
                 {intl.formatMessage(messages.helpCenter)}
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
index 6dbb4e667..1346a81f1 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -1,3 +1,5 @@
+import linkIcon from '@tabler/icons/outline/link.svg';
+import shareIcon from '@tabler/icons/outline/share.svg';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -101,12 +103,12 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
 
       <HStack space={2} justifyContent='center'>
         {('share' in navigator) && (
-          <Button onClick={handleShare} theme='transparent' icon={require('@tabler/icons/outline/share.svg')} className='text-primary-600'>
+          <Button onClick={handleShare} theme='transparent' icon={shareIcon} className='text-primary-600'>
             <FormattedMessage id='manage_group.confirmation.share' defaultMessage='Share this group' />
           </Button>
         )}
 
-        <Button onClick={handleCopyLink} theme='transparent' icon={require('@tabler/icons/outline/link.svg')} className='text-primary-600'>
+        <Button onClick={handleCopyLink} theme='transparent' icon={linkIcon} className='text-primary-600'>
           <FormattedMessage id='manage_group.confirmation.copy' defaultMessage='Copy link' />
         </Button>
       </HStack>
diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index 5d7ffaec4..6eca2c813 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/src/features/ui/components/modals/media-modal.tsx
@@ -1,3 +1,9 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import arrowRightIcon from '@tabler/icons/outline/arrow-right.svg';
+import arrowsMaximizeIcon from '@tabler/icons/outline/arrows-maximize.svg';
+import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
+import downloadIcon from '@tabler/icons/outline/download.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -255,7 +261,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
           >
             <IconButton
               title={intl.formatMessage(messages.close)}
-              src={require('@tabler/icons/outline/x.svg')}
+              src={xIcon}
               onClick={onClose}
               theme='dark'
               className='!p-1.5 hover:scale-105 hover:bg-gray-900'
@@ -264,7 +270,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
 
             <HStack alignItems='center' space={2}>
               <IconButton
-                src={require('@tabler/icons/outline/download.svg')}
+                src={downloadIcon}
                 theme='dark'
                 className='!p-1.5 hover:scale-105 hover:bg-gray-900'
                 iconClassName='h-5 w-5'
@@ -273,7 +279,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
 
               {status && (
                 <IconButton
-                  src={isFullScreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')}
+                  src={isFullScreen ? arrowsMinimizeIcon : arrowsMaximizeIcon}
                   title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)}
                   theme='dark'
                   className='hidden !p-1.5 hover:scale-105 hover:bg-gray-900 xl:block'
@@ -296,7 +302,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                   onClick={handlePrevClick}
                   aria-label={intl.formatMessage(messages.previous)}
                 >
-                  <Icon src={require('@tabler/icons/outline/arrow-left.svg')} className='size-5' />
+                  <Icon src={arrowLeftIcon} className='size-5' />
                 </button>
               </div>
             )}
@@ -318,7 +324,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                   onClick={handleNextClick}
                   aria-label={intl.formatMessage(messages.next)}
                 >
-                  <Icon src={require('@tabler/icons/outline/arrow-right.svg')} className='size-5' />
+                  <Icon src={arrowRightIcon} className='size-5' />
                 </button>
               </div>
             )}
diff --git a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
index 36688eb16..e65dac0ba 100644
--- a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
@@ -1,3 +1,4 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -62,7 +63,7 @@ const ExtensionStep: React.FC<IExtensionStep> = ({ isLogin, onClickAlt, onClose
 
           <Divider text='or' />
 
-          <Button theme={isLogin ? 'muted' : 'transparent'} onClick={onClickAlt} icon={require('@tabler/icons/outline/alert-triangle.svg')}>
+          <Button theme={isLogin ? 'muted' : 'transparent'} onClick={onClickAlt} icon={alertTriangleIcon}>
             {isLogin ? <FormattedMessage id='nostr_login.siwe.alt' defaultMessage='Log in with key' /> : <FormattedMessage id='nostr_signup.siwe.alt' defaultMessage={'Don\'t have an extension?'} /> }
           </Button>
 
diff --git a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
index 7ae2e6164..ebc448dac 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
@@ -1,3 +1,4 @@
+import downloadIcon from '@tabler/icons/outline/download.svg';
 import { generateSecretKey, getPublicKey, nip19 } from 'nostr-tools';
 import React, { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -93,7 +94,7 @@ const KeygenStep: React.FC<IKeygenStep> = ({ onClose }) => {
         </Stack>
 
         <HStack space={6} justifyContent='center' >
-          <Button theme='secondary' size='lg' icon={require('@tabler/icons/outline/download.svg')} onClick={handleDownload}>
+          <Button theme='secondary' size='lg' icon={downloadIcon} onClick={handleDownload}>
             <FormattedMessage id='nostr_signup.keygen.download_key_button' defaultMessage='Download key' />
           </Button>
 
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
index 21f0f5dcd..c7f8117e4 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
@@ -1,3 +1,5 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
@@ -12,7 +14,7 @@ import resizeImage from 'soapbox/utils/resize-image';
 
 import type { AxiosError } from 'axios';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
@@ -105,7 +107,7 @@ const AvatarSelectionModal: React.FC<IAvatarSelectionModal> = ({ onClose, onNext
           })}
           disabled={isSubmitting}
         >
-          <Icon src={require('@tabler/icons/outline/plus.svg')} className='size-5 text-white' />
+          <Icon src={plusIcon} className='size-5 text-white' />
         </button>
 
         <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
index ce5e7aac8..b043a73ac 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -14,7 +15,7 @@ const messages = defineMessages({
   error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
 });
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface IBioStep {
   onClose(): void;
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
index 5fee84b4a..321cd3a69 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
@@ -1,10 +1,12 @@
+import confettiIcon from '@tabler/icons/outline/confetti.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Button, Icon, Stack, Text } from 'soapbox/components/ui';
 import IconButton from 'soapbox/components/ui/icon-button/icon-button';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface ICompletedModal {
   onClose?(): void;
@@ -19,7 +21,7 @@ const CompletedModal: React.FC<ICompletedModal> = ({ onClose, onComplete }) => {
       <div className='relative w-full'>
         <IconButton src={closeIcon} className='absolute right-[2%] top-[-6%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' onClick={onClose} />
         <Stack space={2} justifyContent='center' alignItems='center' className=''>
-          <Icon strokeWidth={1} src={require('@tabler/icons/outline/confetti.svg')} className='mx-auto size-16 text-primary-600 dark:text-primary-400' />
+          <Icon strokeWidth={1} src={confettiIcon} className='mx-auto size-16 text-primary-600 dark:text-primary-400' />
           <Text size='2xl' align='center' weight='bold'>
             <FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
           </Text>
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
index 0dac39e3f..de40a1932 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
@@ -1,3 +1,5 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -13,7 +15,7 @@ import resizeImage from 'soapbox/utils/resize-image';
 
 import type { AxiosError } from 'axios';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   header: { id: 'account.header.alt', defaultMessage: 'Profile header' },
@@ -123,7 +125,7 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
               })}
               disabled={isSubmitting}
             >
-              <Icon src={require('@tabler/icons/outline/plus.svg')} className='size-5 text-white' />
+              <Icon src={plusIcon} className='size-5 text-white' />
             </button>
 
             <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
index b12e89d18..cf51decd0 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -9,7 +10,7 @@ import toast from 'soapbox/toast';
 
 import type { AxiosError } from 'axios';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   usernamePlaceholder: { id: 'onboarding.display_name.placeholder', defaultMessage: 'Eg. John Smith' },
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
index 1576a69c7..e186cd27a 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -8,7 +9,7 @@ import IconButton from 'soapbox/components/ui/icon-button/icon-button';
 import AccountContainer from 'soapbox/containers/account-container';
 import { useOnboardingSuggestions } from 'soapbox/queries/suggestions';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface ICoverPhotoSelectionModal {
   onClose?(): void;
diff --git a/src/features/ui/components/modals/reply-mentions-modal.tsx b/src/features/ui/components/modals/reply-mentions-modal.tsx
index 69ae41acd..9717694bd 100644
--- a/src/features/ui/components/modals/reply-mentions-modal.tsx
+++ b/src/features/ui/components/modals/reply-mentions-modal.tsx
@@ -1,3 +1,4 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -33,7 +34,7 @@ const ReplyMentionsModal: React.FC<IReplyMentionsModal> = ({ composeId, onClose
     <Modal
       title={<FormattedMessage id='navigation_bar.in_reply_to' defaultMessage='In reply to' />}
       onClose={onClickClose}
-      closeIcon={require('@tabler/icons/outline/arrow-left.svg')}
+      closeIcon={arrowLeftIcon}
       closePosition='left'
     >
       <div className='reply-mentions-modal__accounts'>
diff --git a/src/features/ui/components/modals/report-modal/report-modal.tsx b/src/features/ui/components/modals/report-modal/report-modal.tsx
index 42727fbe2..27d35832a 100644
--- a/src/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/src/features/ui/components/modals/report-modal/report-modal.tsx
@@ -1,3 +1,4 @@
+import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -226,7 +227,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
 
           <List>
             <ListItem
-              label={<Icon src={require('@tabler/icons/outline/info-circle.svg')} className='text-gray-600' />}
+              label={<Icon src={infoCircleIcon} className='text-gray-600' />}
             >
               <Text size='sm'>{intl.formatMessage(messages.reportContext)}</Text>
             </ListItem>
diff --git a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
index 67a56d66b..40b135c20 100644
--- a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
@@ -1,3 +1,5 @@
+import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import { OrderedSet } from 'immutable';
 import React, { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -60,7 +62,7 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
 
                 <div>
                   <Button
-                    icon={require('@tabler/icons/outline/arrows-minimize.svg')}
+                    icon={arrowsMinimizeIcon}
                     theme='tertiary'
                     size='sm'
                     onClick={() => setShowAdditionalStatuses(false)}
@@ -71,7 +73,7 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
               </Stack>
             ) : (
               <Button
-                icon={require('@tabler/icons/outline/plus.svg')}
+                icon={plusIcon}
                 theme='tertiary'
                 size='sm'
                 onClick={() => setShowAdditionalStatuses(true)}
diff --git a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
index aadd66139..227e9724c 100644
--- a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
@@ -1,3 +1,5 @@
+import bookmarksIcon from '@tabler/icons/outline/bookmarks.svg';
+import folderIcon from '@tabler/icons/outline/folder.svg';
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -42,7 +44,7 @@ const SelectBookmarkFolderModal: React.FC<ISelectBookmarkFolderModal> = ({ statu
     <RadioItem
       label={
         <HStack alignItems='center' space={2}>
-          <Icon src={require('@tabler/icons/outline/bookmarks.svg')} size={20} />
+          <Icon src={bookmarksIcon} size={20} />
           <span><FormattedMessage id='bookmark_folders.all_bookmarks' defaultMessage='All bookmarks' /></span>
         </HStack>
       }
@@ -63,7 +65,7 @@ const SelectBookmarkFolderModal: React.FC<ISelectBookmarkFolderModal> = ({ statu
                 src={folder.emoji_url || undefined}
                 className='size-5 flex-none'
               />
-            ) : <Icon src={require('@tabler/icons/outline/folder.svg')} size={20} />}
+            ) : <Icon src={folderIcon} size={20} />}
             <span>{folder.name}</span>
           </HStack>
         }
diff --git a/src/features/ui/components/modals/zap-invoice.tsx b/src/features/ui/components/modals/zap-invoice.tsx
index c7dc59920..947a7a869 100644
--- a/src/features/ui/components/modals/zap-invoice.tsx
+++ b/src/features/ui/components/modals/zap-invoice.tsx
@@ -1,3 +1,5 @@
+import folderOpenIcon from '@tabler/icons/outline/folder-open.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import { QRCodeCanvas } from 'qrcode.react';
 import React  from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -12,7 +14,7 @@ import { ZapSplitData } from 'soapbox/schemas/zap-split';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   zap_open_wallet: { id: 'zap.open_wallet', defaultMessage: 'Open Wallet' },
@@ -64,7 +66,7 @@ const ZapInvoiceModal: React.FC<IZapInvoice> = ({ account, invoice, splitData, o
         </div>
         <HStack space={2}>
           <a href={'lightning:' + invoice}>
-            <Button type='submit' theme='primary' icon={require('@tabler/icons/outline/folder-open.svg')} text={intl.formatMessage(messages.zap_open_wallet)} />
+            <Button type='submit' theme='primary' icon={folderOpenIcon} text={intl.formatMessage(messages.zap_open_wallet)} />
           </a>
           {hasZapSplit && <Button type='button' theme='muted' onClick={handleNext} text={intl.formatMessage(messages.zap_next)} />}
         </HStack>
diff --git a/src/features/ui/components/modals/zap-split/zap-split.tsx b/src/features/ui/components/modals/zap-split/zap-split.tsx
index 38a928faf..036e8169d 100644
--- a/src/features/ui/components/modals/zap-split/zap-split.tsx
+++ b/src/features/ui/components/modals/zap-split/zap-split.tsx
@@ -1,3 +1,4 @@
+import folderOpenIcon from '@tabler/icons/outline/folder-open.svg';
 import { QRCodeCanvas } from 'qrcode.react';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -90,7 +91,7 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }:
           </div>
           <HStack space={2}>
             <a href={'lightning:' + invoice}>
-              <Button type='submit' theme='primary' icon={require('@tabler/icons/outline/folder-open.svg')} text={intl.formatMessage(messages.zap_open_wallet)} />
+              <Button type='submit' theme='primary' icon={folderOpenIcon} text={intl.formatMessage(messages.zap_open_wallet)} />
             </a>
             {isLastStep ? (
               <Button
diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx
index 627236d6e..e11a7e10b 100644
--- a/src/features/ui/components/navbar.tsx
+++ b/src/features/ui/components/navbar.tsx
@@ -1,3 +1,4 @@
+import helpIcon from '@tabler/icons/outline/help.svg';
 import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -163,7 +164,7 @@ const Navbar = () => {
                       <Link to='/reset-password'>
                         <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
                           <IconButton
-                            src={require('@tabler/icons/outline/help.svg')}
+                            src={helpIcon}
                             className='cursor-pointer bg-transparent text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200'
                             iconClassName='h-5 w-5'
                           />
diff --git a/src/features/ui/components/new-account-zap-split.tsx b/src/features/ui/components/new-account-zap-split.tsx
index a5d9d6a20..3f3ae03a3 100644
--- a/src/features/ui/components/new-account-zap-split.tsx
+++ b/src/features/ui/components/new-account-zap-split.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -7,7 +8,7 @@ import { Button, HStack, Input, Slider } from 'soapbox/components/ui';
 import SearchZapSplit from 'soapbox/features/compose/components/search-zap-split';
 import { type Account as AccountEntity } from 'soapbox/schemas';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface INewAccount {
   acc: string;
diff --git a/src/features/ui/components/panels/new-event-panel.tsx b/src/features/ui/components/panels/new-event-panel.tsx
index bf444ffc6..df7eeeddc 100644
--- a/src/features/ui/components/panels/new-event-panel.tsx
+++ b/src/features/ui/components/panels/new-event-panel.tsx
@@ -1,3 +1,4 @@
+import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -25,7 +26,7 @@ const NewEventPanel = () => {
       </Stack>
 
       <Button
-        icon={require('@tabler/icons/outline/calendar-event.svg')}
+        icon={calendarEventIcon}
         onClick={createEvent}
         theme='secondary'
         block
diff --git a/src/features/ui/components/profile-dropdown.tsx b/src/features/ui/components/profile-dropdown.tsx
index 80961b5ac..2047ae65b 100644
--- a/src/features/ui/components/profile-dropdown.tsx
+++ b/src/features/ui/components/profile-dropdown.tsx
@@ -1,4 +1,6 @@
 import { useFloating } from '@floating-ui/react';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import clsx from 'clsx';
 import throttle from 'lodash/throttle';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -86,14 +88,14 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
     menu.push({
       text: intl.formatMessage(messages.add),
       to: '/login/add',
-      icon: require('@tabler/icons/outline/plus.svg'),
+      icon: plusIcon,
     });
 
     menu.push({
       text: intl.formatMessage(messages.logout, { acct: account.acct }),
       to: '/logout',
       action: handleLogOut,
-      icon: require('@tabler/icons/outline/logout.svg'),
+      icon: logoutIcon,
     });
 
     return menu;
diff --git a/src/features/ui/components/profile-field.tsx b/src/features/ui/components/profile-field.tsx
index 7f4e43728..151c3b2c9 100644
--- a/src/features/ui/components/profile-field.tsx
+++ b/src/features/ui/components/profile-field.tsx
@@ -1,3 +1,4 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl, FormatDateOptions } from 'react-intl';
@@ -57,7 +58,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/outline/check.svg')} />
+              <Icon src={checkIcon} />
             </span>
           )}
 
diff --git a/src/features/ui/components/profile-info-panel.tsx b/src/features/ui/components/profile-info-panel.tsx
index 312ecbc45..dcae6e4ce 100644
--- a/src/features/ui/components/profile-info-panel.tsx
+++ b/src/features/ui/components/profile-info-panel.tsx
@@ -1,3 +1,8 @@
+import balloonIcon from '@tabler/icons/outline/balloon.svg';
+import calendarIcon from '@tabler/icons/outline/calendar.svg';
+import linkIcon from '@tabler/icons/outline/link.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import React from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
@@ -101,7 +106,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
     return (
       <HStack alignItems='center' space={0.5}>
         <Icon
-          src={require('@tabler/icons/outline/balloon.svg')}
+          src={balloonIcon}
           className='size-4 text-gray-800 dark:text-gray-200'
         />
 
@@ -162,7 +167,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
 
             {account.locked && (
               <Icon
-                src={require('@tabler/icons/outline/lock.svg')}
+                src={lockIcon}
                 alt={intl.formatMessage(messages.account_locked)}
                 className='size-4 text-gray-600'
               />
@@ -180,7 +185,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {account.local ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/outline/calendar.svg')}
+                src={calendarIcon}
                 className='size-4 text-gray-800 dark:text-gray-200'
               />
 
@@ -197,7 +202,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {account.location ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/outline/map-pin.svg')}
+                src={mapPinIcon}
                 className='size-4 text-gray-800 dark:text-gray-200'
               />
 
@@ -210,7 +215,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {account.website ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/outline/link.svg')}
+                src={linkIcon}
                 className='size-4 text-gray-800 dark:text-gray-200'
               />
 
diff --git a/src/features/ui/components/subscription-button.tsx b/src/features/ui/components/subscription-button.tsx
index cdd2ec5bb..fb734ea06 100644
--- a/src/features/ui/components/subscription-button.tsx
+++ b/src/features/ui/components/subscription-button.tsx
@@ -1,3 +1,5 @@
+import bellRingingIcon from '@tabler/icons/outline/bell-ringing.svg';
+import bellIcon from '@tabler/icons/outline/bell.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -91,7 +93,7 @@ const SubscriptionButton = ({ account }: ISubscriptionButton) => {
   if (isRequested || isFollowing) {
     return (
       <IconButton
-        src={isSubscribed ? require('@tabler/icons/outline/bell-ringing.svg') : require('@tabler/icons/outline/bell.svg')}
+        src={isSubscribed ? bellRingingIcon : bellIcon}
         onClick={handleToggle}
         title={title}
         theme='outlined'
diff --git a/src/features/ui/components/theme-selector.tsx b/src/features/ui/components/theme-selector.tsx
index f4df7d0a2..90c294fe4 100644
--- a/src/features/ui/components/theme-selector.tsx
+++ b/src/features/ui/components/theme-selector.tsx
@@ -1,3 +1,8 @@
+import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
+import deviceDesktopIcon from '@tabler/icons/outline/device-desktop.svg';
+import moonIcon from '@tabler/icons/outline/moon.svg';
+import shadowIcon from '@tabler/icons/outline/shadow.svg';
+import sunIcon from '@tabler/icons/outline/sun.svg';
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -22,13 +27,13 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
   const themeIconSrc = useMemo(() => {
     switch (value) {
       case 'system':
-        return require('@tabler/icons/outline/device-desktop.svg');
+        return deviceDesktopIcon;
       case 'light':
-        return require('@tabler/icons/outline/sun.svg');
+        return sunIcon;
       case 'dark':
-        return require('@tabler/icons/outline/moon.svg');
+        return moonIcon;
       case 'black':
-        return require('@tabler/icons/outline/shadow.svg');
+        return shadowIcon;
       default:
         return null;
     }
@@ -57,7 +62,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
         </Select>
 
         <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
-          <Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='size-4 text-gray-600 dark:text-gray-700' />
+          <Icon src={chevronDownIcon} className='size-4 text-gray-600 dark:text-gray-700' />
         </div>
       </div>
     </label>
diff --git a/src/features/ui/components/who-to-follow-panel.tsx b/src/features/ui/components/who-to-follow-panel.tsx
index f2b8dbed0..8209fccb5 100644
--- a/src/features/ui/components/who-to-follow-panel.tsx
+++ b/src/features/ui/components/who-to-follow-panel.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -54,7 +55,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/outline/x.svg')}
+            actionIcon={xIcon}
             actionTitle={intl.formatMessage(messages.dismissSuggestion)}
             onActionClick={account ? handleDismiss : undefined}
           />
diff --git a/src/features/video/index.tsx b/src/features/video/index.tsx
index d3e7a574a..25836c515 100644
--- a/src/features/video/index.tsx
+++ b/src/features/video/index.tsx
@@ -1,3 +1,9 @@
+import arrowsMaximizeIcon from '@tabler/icons/outline/arrows-maximize.svg';
+import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
+import playerPauseIcon from '@tabler/icons/outline/player-pause.svg';
+import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
+import volume3Icon from '@tabler/icons/outline/volume-3.svg';
+import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
@@ -598,7 +604,7 @@ const Video: React.FC<IVideo> = ({
               onClick={togglePlay}
               autoFocus={autoFocus}
             >
-              <SvgIcon className='w-[20px]' src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')} />
+              <SvgIcon className='w-[20px]' src={paused ? playerPlayIcon : playerPauseIcon} />
             </button>
 
             <button
@@ -611,7 +617,7 @@ const Video: React.FC<IVideo> = ({
                 , { 'py-[10px]': fullscreen })}
               onClick={toggleMute}
             >
-              <SvgIcon className='w-[20px]' src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
+              <SvgIcon className='w-[20px]' src={muted ? volume3Icon : volumeIcon} />
             </button>
 
             <div
@@ -665,7 +671,7 @@ const Video: React.FC<IVideo> = ({
                 , { 'py-[10px]': fullscreen })}
               onClick={toggleFullscreen}
             >
-              <SvgIcon className='w-[20px]' src={fullscreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')} />
+              <SvgIcon className='w-[20px]' src={fullscreen ? arrowsMinimizeIcon : arrowsMaximizeIcon} />
             </button>
           </div>
         </div>
diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx
index b30c8cb1c..0528a3245 100644
--- a/src/features/zap/components/zap-pay-request-form.tsx
+++ b/src/features/zap/components/zap-pay-request-form.tsx
@@ -1,3 +1,6 @@
+import boltIcon from '@tabler/icons/outline/bolt.svg';
+import infoSquareRoundedIcon from '@tabler/icons/outline/info-square-rounded.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -34,7 +37,7 @@ interface IZapPayRequestForm {
   onClose?(): void;
 }
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   zap_button_rounded: { id: 'zap.button.text.rounded', defaultMessage: 'Zap {amount}K sats' },
@@ -149,7 +152,7 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
 
       {hasZapSplit ? <Stack space={2}>
 
-        <Button className='m-auto w-auto' type='submit' theme='primary' icon={require('@tabler/icons/outline/bolt.svg')} text={'Zap sats'} disabled={zapAmount < 1 ? true : false} />
+        <Button className='m-auto w-auto' type='submit' theme='primary' icon={boltIcon} text={'Zap sats'} disabled={zapAmount < 1 ? true : false} />
 
         <div className='flex items-center justify-center gap-2 sm:gap-4'>
           <span className='text-[10px] sm:text-xs'>
@@ -160,11 +163,11 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
           </span>
 
           <Link to={'/'} className='text-xs underline'>
-            <SvgIcon src={require('@tabler/icons/outline/info-square-rounded.svg')} className='w-4' alt='info-square-rounded' />
+            <SvgIcon src={infoSquareRoundedIcon} className='w-4' alt='info-square-rounded' />
           </Link>
 
         </div>
-      </Stack> : <Button className='m-auto w-auto' type='submit' theme='primary' icon={require('@tabler/icons/outline/bolt.svg')} text={renderZapButtonText()} disabled={zapAmount < 1 ? true : false} />}
+      </Stack> : <Button className='m-auto w-auto' type='submit' theme='primary' icon={boltIcon} text={renderZapButtonText()} disabled={zapAmount < 1 ? true : false} />}
 
     </Stack>
   );
diff --git a/src/jest/test-setup.ts b/src/jest/test-setup.ts
index 732a36ccf..e923323b5 100644
--- a/src/jest/test-setup.ts
+++ b/src/jest/test-setup.ts
@@ -16,7 +16,7 @@ vi.mock('soapbox/queries/client');
 
 // Mock IndexedDB
 // https://dev.to/andyhaskell/testing-your-indexeddb-code-with-jest-2o17
-require('fake-indexeddb/auto');
+import 'fake-indexeddb/auto';
 
 // Clear toasts after each test.
 afterEach(() => {
diff --git a/src/normalizers/account.ts b/src/normalizers/account.ts
index 74a84e46b..c974ccf1b 100644
--- a/src/normalizers/account.ts
+++ b/src/normalizers/account.ts
@@ -11,6 +11,8 @@ import {
   fromJS,
 } from 'immutable';
 
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
 import emojify from 'soapbox/features/emoji';
 import { normalizeEmoji } from 'soapbox/normalizers/emoji';
 import { unescapeHTML } from 'soapbox/utils/html';
@@ -100,11 +102,10 @@ const normalizePleromaLegacyFields = (account: ImmutableMap<string, any>) => {
 const normalizeAvatar = (account: ImmutableMap<string, any>) => {
   const avatar = account.get('avatar');
   const avatarStatic = account.get('avatar_static');
-  const missing = require('soapbox/assets/images/avatar-missing.png');
 
   return account.withMutations(account => {
-    account.set('avatar', avatar || avatarStatic || missing);
-    account.set('avatar_static', avatarStatic || avatar || missing);
+    account.set('avatar', avatar || avatarStatic || avatarMissing);
+    account.set('avatar_static', avatarStatic || avatar || avatarMissing);
   });
 };
 
@@ -112,11 +113,10 @@ const normalizeAvatar = (account: ImmutableMap<string, any>) => {
 const normalizeHeader = (account: ImmutableMap<string, any>) => {
   const header = account.get('header');
   const headerStatic = account.get('header_static');
-  const missing = require('soapbox/assets/images/header-missing.png');
 
   return account.withMutations(account => {
-    account.set('header', header || headerStatic || missing);
-    account.set('header_static', headerStatic || header || missing);
+    account.set('header', header || headerStatic || headerMissing);
+    account.set('header_static', headerStatic || header || headerMissing);
   });
 };
 
diff --git a/src/normalizers/group.ts b/src/normalizers/group.ts
index 1e1973172..6b4e5e21b 100644
--- a/src/normalizers/group.ts
+++ b/src/normalizers/group.ts
@@ -10,6 +10,8 @@ import {
   fromJS,
 } from 'immutable';
 
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
 import emojify from 'soapbox/features/emoji';
 import { normalizeEmoji } from 'soapbox/normalizers/emoji';
 import { unescapeHTML } from 'soapbox/utils/html';
@@ -53,11 +55,10 @@ export const GroupRecord = ImmutableRecord({
 const normalizeAvatar = (group: ImmutableMap<string, any>) => {
   const avatar = group.get('avatar');
   const avatarStatic = group.get('avatar_static');
-  const missing = require('soapbox/assets/images/avatar-missing.png');
 
   return group.withMutations(group => {
-    group.set('avatar', avatar || avatarStatic || missing);
-    group.set('avatar_static', avatarStatic || avatar || missing);
+    group.set('avatar', avatar || avatarStatic || avatarMissing);
+    group.set('avatar_static', avatarStatic || avatar || avatarMissing);
   });
 };
 
@@ -65,11 +66,10 @@ const normalizeAvatar = (group: ImmutableMap<string, any>) => {
 const normalizeHeader = (group: ImmutableMap<string, any>) => {
   const header = group.get('header');
   const headerStatic = group.get('header_static');
-  const missing = require('soapbox/assets/images/header-missing.png');
 
   return group.withMutations(group => {
-    group.set('header', header || headerStatic || missing);
-    group.set('header_static', headerStatic || header || missing);
+    group.set('header', header || headerStatic || headerMissing);
+    group.set('header_static', headerStatic || header || headerMissing);
   });
 };
 
diff --git a/src/pages/group-page.tsx b/src/pages/group-page.tsx
index d5c6637fa..3331d5b78 100644
--- a/src/pages/group-page.tsx
+++ b/src/pages/group-page.tsx
@@ -1,3 +1,6 @@
+import banIcon from '@tabler/icons/outline/ban.svg';
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import React, { useMemo } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
@@ -34,7 +37,7 @@ const DeletedBlankslate = () => (
   <Stack space={4} className='py-10' alignItems='center'>
     <div className='rounded-full bg-danger-200 p-3 dark:bg-danger-400/20'>
       <Icon
-        src={require('@tabler/icons/outline/trash.svg')}
+        src={trashIcon}
         className='size-6 text-danger-600 dark:text-danger-400'
       />
     </div>
@@ -52,7 +55,7 @@ const PrivacyBlankslate = () => (
   <Stack space={4} className='py-10' alignItems='center'>
     <div className='rounded-full bg-gray-200 p-3 dark:bg-gray-800'>
       <Icon
-        src={require('@tabler/icons/outline/eye-off.svg')}
+        src={eyeOffIcon}
         className='size-6 text-gray-600 dark:text-gray-600'
       />
     </div>
@@ -70,7 +73,7 @@ const BlockedBlankslate = ({ group }: { group: Group }) => (
   <Stack space={4} className='py-10' alignItems='center'>
     <div className='rounded-full bg-danger-200 p-3 dark:bg-danger-400/20'>
       <Icon
-        src={require('@tabler/icons/outline/ban.svg')}
+        src={banIcon}
         className='size-6 text-danger-600 dark:text-danger-400'
       />
     </div>
diff --git a/src/schemas/account.ts b/src/schemas/account.ts
index dc3605b17..5fa4b0f83 100644
--- a/src/schemas/account.ts
+++ b/src/schemas/account.ts
@@ -3,6 +3,8 @@ import escapeTextContentForBrowser from 'escape-html';
 import DOMPurify from 'isomorphic-dompurify';
 import z from 'zod';
 
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
 import emojify from 'soapbox/features/emoji';
 import { unescapeHTML } from 'soapbox/utils/html';
 
@@ -12,9 +14,6 @@ import { coerceObject, contentSchema, filteredArray, makeCustomEmojiMap } from '
 
 import type { Resolve } from 'soapbox/utils/types';
 
-const avatarMissing = require('soapbox/assets/images/avatar-missing.png');
-const headerMissing = require('soapbox/assets/images/header-missing.png');
-
 const birthdaySchema = z.string().regex(/^\d{4}-\d{2}-\d{2}$/);
 
 const hexSchema = z.string().regex(/^#[a-f0-9]{6}$/i);
diff --git a/src/schemas/group.ts b/src/schemas/group.ts
index 9d97a4047..afdbec9fd 100644
--- a/src/schemas/group.ts
+++ b/src/schemas/group.ts
@@ -1,6 +1,8 @@
 import escapeTextContentForBrowser from 'escape-html';
 import z from 'zod';
 
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
 import emojify from 'soapbox/features/emoji';
 import { unescapeHTML } from 'soapbox/utils/html';
 
@@ -9,9 +11,6 @@ import { groupRelationshipSchema } from './group-relationship';
 import { groupTagSchema } from './group-tag';
 import { filteredArray, makeCustomEmojiMap } from './utils';
 
-const avatarMissing = require('soapbox/assets/images/avatar-missing.png');
-const headerMissing = require('soapbox/assets/images/header-missing.png');
-
 const groupSchema = z.object({
   avatar: z.string().catch(avatarMissing),
   avatar_static: z.string().catch(''),
diff --git a/src/schemas/instance.test.ts b/src/schemas/instance.test.ts
index fd1b6a37d..8d2f0f9d2 100644
--- a/src/schemas/instance.test.ts
+++ b/src/schemas/instance.test.ts
@@ -71,8 +71,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result).toMatchObject(expected);
   });
 
-  it('normalizes Pleroma instance with Mastodon configuration format', () => {
-    const instance = require('soapbox/__fixtures__/pleroma-instance.json');
+  it('normalizes Pleroma instance with Mastodon configuration format', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/pleroma-instance.json');
 
     const expected = {
       configuration: {
@@ -93,8 +93,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result).toMatchObject(expected);
   });
 
-  it('normalizes Mastodon instance with retained configuration', () => {
-    const instance = require('soapbox/__fixtures__/mastodon-instance.json');
+  it('normalizes Mastodon instance with retained configuration', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/mastodon-instance.json');
 
     const expected = {
       configuration: {
@@ -123,8 +123,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result).toMatchObject(expected);
   });
 
-  it('normalizes Mastodon 3.0.0 instance with default configuration', () => {
-    const instance = require('soapbox/__fixtures__/mastodon-3.0.0-instance.json');
+  it('normalizes Mastodon 3.0.0 instance with default configuration', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/mastodon-3.0.0-instance.json');
 
     const expected = {
       configuration: {
@@ -145,8 +145,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result).toMatchObject(expected);
   });
 
-  it('normalizes Fedibird instance', () => {
-    const instance = require('soapbox/__fixtures__/fedibird-instance.json');
+  it('normalizes Fedibird instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/fedibird-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     // Sets description_limit
@@ -156,8 +156,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result.fedibird_capabilities).toEqual(instance.fedibird_capabilities);
   });
 
-  it('normalizes Mitra instance', () => {
-    const instance = require('soapbox/__fixtures__/mitra-instance.json');
+  it('normalizes Mitra instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/mitra-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     // Adds configuration and description_limit
@@ -165,8 +165,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result.pleroma.metadata.description_limit).toBe(1500);
   });
 
-  it('normalizes GoToSocial instance', () => {
-    const instance = require('soapbox/__fixtures__/gotosocial-instance.json');
+  it('normalizes GoToSocial instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/gotosocial-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     // Normalizes max_toot_chars
@@ -178,8 +178,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result.pleroma.metadata.description_limit).toBe(1500);
   });
 
-  it('normalizes Friendica instance', () => {
-    const instance = require('soapbox/__fixtures__/friendica-instance.json');
+  it('normalizes Friendica instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/friendica-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     // Normalizes max_toot_chars
@@ -191,21 +191,21 @@ describe('instanceV1Schema.parse()', () => {
     expect(result.pleroma.metadata.description_limit).toBe(1500);
   });
 
-  it('normalizes a Mastodon RC version', () => {
-    const instance = require('soapbox/__fixtures__/mastodon-instance-rc.json');
+  it('normalizes a Mastodon RC version', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/mastodon-instance-rc.json');
     const result = instanceV1Schema.parse(instance);
 
     expect(result.version).toEqual('3.5.0-rc1');
   });
 
-  it('normalizes Pixelfed instance', () => {
-    const instance = require('soapbox/__fixtures__/pixelfed-instance.json');
+  it('normalizes Pixelfed instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/pixelfed-instance.json');
     const result = instanceV1Schema.parse(instance);
     expect(result.title).toBe('pixelfed');
   });
 
-  it('renames Akkoma to Pleroma', () => {
-    const instance = require('soapbox/__fixtures__/akkoma-instance.json');
+  it('renames Akkoma to Pleroma', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/akkoma-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     expect(result.version).toEqual('2.7.2 (compatible; Pleroma 2.4.50+akkoma)');
diff --git a/src/service-worker/sw.ts b/src/service-worker/sw.ts
index c08744bcf..6323bd167 100644
--- a/src/service-worker/sw.ts
+++ b/src/service-worker/sw.ts
@@ -3,6 +3,10 @@ import IntlMessageFormat from 'intl-messageformat';
 import 'intl-pluralrules';
 import unescape from 'lodash/unescape';
 
+import expandIcon from '../assets/images/web-push/web-push-icon_expand.png';
+import favouriteIcon from '../assets/images/web-push/web-push-icon_favourite.png';
+import reblogIcon from '../assets/images/web-push/web-push-icon_reblog.png';
+
 import type {
   Account as AccountEntity,
   Notification as NotificationEntity,
@@ -195,21 +199,21 @@ const handlePush = (event: PushEvent) => {
 /** Native action to open a status on the device. */
 const actionExpand = (preferred_locale: string) => ({
   action: 'expand',
-  icon: `/${require('../../assets/images/web-push/web-push-icon_expand.png')}`,
+  icon: expandIcon,
   title: formatMessage('status.show_more', preferred_locale),
 });
 
 /** Native action to repost status. */
 const actionReblog = (preferred_locale: string) => ({
   action: 'reblog',
-  icon: `/${require('../../assets/images/web-push/web-push-icon_reblog.png')}`,
+  icon: reblogIcon,
   title: formatMessage('status.reblog', preferred_locale),
 });
 
 /** Native action to like status. */
 const actionFavourite = (preferred_locale: string) => ({
   action: 'favourite',
-  icon: `/${require('../../assets/images/web-push/web-push-icon_favourite.png')}`,
+  icon: favouriteIcon,
   title: formatMessage('status.favourite', preferred_locale),
 });
 
diff --git a/src/utils/accounts.ts b/src/utils/accounts.ts
index c23344e87..0d57a6494 100644
--- a/src/utils/accounts.ts
+++ b/src/utils/accounts.ts
@@ -1,3 +1,6 @@
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
+
 import type { Account } from 'soapbox/schemas';
 
 const getDomainFromURL = (account: Pick<Account, 'url'>): string => {
@@ -30,7 +33,7 @@ export const getAcct = (account: Pick<Account, 'fqn' | 'acct'>, displayFqn: bool
 const DEFAULT_HEADERS: string[] = [
   '/headers/original/missing.png', // Mastodon
   '/images/banner.png', // Pleroma
-  require('soapbox/assets/images/header-missing.png'), // header not provided by backend
+  headerMissing, // header not provided by backend
 ];
 
 /** Check if the avatar is a default avatar */
@@ -42,7 +45,7 @@ export const isDefaultHeader = (url: string) => {
 const DEFAULT_AVATARS = [
   '/avatars/original/missing.png', // Mastodon
   '/images/avi.png', // Pleroma
-  require('soapbox/assets/images/avatar-missing.png'), // avatar not provided by backend
+  avatarMissing, // avatar not provided by backend
 ];
 
 /** Check if the avatar is a default avatar */
diff --git a/vite.config.ts b/vite.config.ts
index 21836551e..282283aad 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,7 +10,6 @@ import checker from 'vite-plugin-checker';
 import compileTime from 'vite-plugin-compile-time';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import { VitePWA } from 'vite-plugin-pwa';
-import vitePluginRequire from 'vite-plugin-require';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 const { NODE_ENV } = process.env;
@@ -37,8 +36,6 @@ export default defineConfig(({ command }) => ({
   },
   plugins: [
     checker({ typescript: true }),
-    // @ts-ignore
-    vitePluginRequire.default(),
     compileTime(),
     createHtmlPlugin({
       template: 'index.html',
diff --git a/yarn.lock b/yarn.lock
index b6f1e70d8..7ed31ca3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -73,7 +73,7 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@^7.24.5", "@babel/generator@^7.25.0", "@babel/generator@^7.25.6":
+"@babel/generator@^7.25.0", "@babel/generator@^7.25.6":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.6.tgz#0df1ad8cb32fe4d2b01d8bf437f153d19342a87c"
   integrity sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==
@@ -282,7 +282,7 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.24.5", "@babel/parser@^7.25.0", "@babel/parser@^7.25.3", "@babel/parser@^7.25.6":
+"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.25.0", "@babel/parser@^7.25.6":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
   integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==
@@ -962,7 +962,7 @@
     "@babel/parser" "^7.25.0"
     "@babel/types" "^7.25.0"
 
-"@babel/traverse@^7.24.5", "@babel/traverse@^7.24.7", "@babel/traverse@^7.25.2":
+"@babel/traverse@^7.24.7", "@babel/traverse@^7.25.2":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.6.tgz#04fad980e444f182ecf1520504941940a90fea41"
   integrity sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==
@@ -975,7 +975,7 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.17", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.24.5", "@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.6", "@babel/types@^7.4.4":
+"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.17", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.6", "@babel/types@^7.4.4":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6"
   integrity sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==
@@ -1559,7 +1559,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
   integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
 
-"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25", "@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.25"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
   integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
@@ -2515,15 +2515,7 @@
   resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-1.0.1.tgz#b19b4646915f0ae2c306bf984dc0a59c5cfc97ba"
   integrity sha512-4mI1FuUUZiuT95fSVqvZxp/ssQK9zsa86S43h9x3zPOSU9BBJ+BfDkXwuaU7BfsD+e7U0/cUUfJFk3iW2M4okA==
 
-"@types/eslint-scope@^3.7.3":
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
-  integrity sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==
-  dependencies:
-    "@types/eslint" "*"
-    "@types/estree" "*"
-
-"@types/eslint@*", "@types/eslint@7 || 8":
+"@types/eslint@7 || 8":
   version "8.56.6"
   resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.6.tgz#d5dc16cac025d313ee101108ba5714ea10eb3ed0"
   integrity sha512-ymwc+qb1XkjT/gfoQwxIeHZ6ixH23A+tCT2ADSA/DPVKzAjwYkTXBMCQ/f6fe4wEa85Lhp26VPeUxI7wMhAi7A==
@@ -2571,7 +2563,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/json-schema@*", "@types/json-schema@^7.0.12", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
+"@types/json-schema@*", "@types/json-schema@^7.0.12", "@types/json-schema@^7.0.9":
   version "7.0.13"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.13.tgz#02c24f4363176d2d18fc8b70b9f3c54aba178a85"
   integrity sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==
@@ -2948,200 +2940,17 @@
     loupe "^3.1.1"
     tinyrainbow "^1.2.0"
 
-"@vue/compiler-core@3.5.8":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.8.tgz#03ee4a2fa022c9bc3e59f789a1e14593b1e95b10"
-  integrity sha512-Uzlxp91EPjfbpeO5KtC0KnXPkuTfGsNDeaKQJxQN718uz+RqDYarEf7UhQJGK+ZYloD2taUbHTI2J4WrUaZQNA==
-  dependencies:
-    "@babel/parser" "^7.25.3"
-    "@vue/shared" "3.5.8"
-    entities "^4.5.0"
-    estree-walker "^2.0.2"
-    source-map-js "^1.2.0"
-
-"@vue/compiler-dom@3.5.8":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.8.tgz#03e4a6bef00a1979613a1db2ab39e9b2dced3373"
-  integrity sha512-GUNHWvoDSbSa5ZSHT9SnV5WkStWfzJwwTd6NMGzilOE/HM5j+9EB9zGXdtu/fCNEmctBqMs6C9SvVPpVPuk1Eg==
-  dependencies:
-    "@vue/compiler-core" "3.5.8"
-    "@vue/shared" "3.5.8"
-
-"@vue/compiler-sfc@^3.4.27":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.8.tgz#b2091ec01c63ab02a1cd6783224322f245c6a308"
-  integrity sha512-taYpngQtSysrvO9GULaOSwcG5q821zCoIQBtQQSx7Uf7DxpR6CIHR90toPr9QfDD2mqHQPCSgoWBvJu0yV9zjg==
-  dependencies:
-    "@babel/parser" "^7.25.3"
-    "@vue/compiler-core" "3.5.8"
-    "@vue/compiler-dom" "3.5.8"
-    "@vue/compiler-ssr" "3.5.8"
-    "@vue/shared" "3.5.8"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.11"
-    postcss "^8.4.47"
-    source-map-js "^1.2.0"
-
-"@vue/compiler-ssr@3.5.8":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.8.tgz#fbad34f8bbed15aa6e7b9d78324d93af93403145"
-  integrity sha512-W96PtryNsNG9u0ZnN5Q5j27Z/feGrFV6zy9q5tzJVyJaLiwYxvC0ek4IXClZygyhjm+XKM7WD9pdKi/wIRVC/Q==
-  dependencies:
-    "@vue/compiler-dom" "3.5.8"
-    "@vue/shared" "3.5.8"
-
-"@vue/shared@3.5.8":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.8.tgz#6ef14933872dcc4f7b79fee3aaecf648ff807fed"
-  integrity sha512-mJleSWbAGySd2RJdX1RBtcrUBX6snyOc0qHpgk3lGi4l9/P/3ny3ELqFWqYdkXIwwNN/kdm8nD9ky8o6l/Lx2A==
-
-"@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
-  integrity sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==
-  dependencies:
-    "@webassemblyjs/helper-numbers" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-
-"@webassemblyjs/floating-point-hex-parser@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz#dacbcb95aff135c8260f77fa3b4c5fea600a6431"
-  integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==
-
-"@webassemblyjs/helper-api-error@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz#6132f68c4acd59dcd141c44b18cbebbd9f2fa768"
-  integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
-
-"@webassemblyjs/helper-buffer@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz#b66d73c43e296fd5e88006f18524feb0f2c7c093"
-  integrity sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==
-
-"@webassemblyjs/helper-numbers@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz#cbce5e7e0c1bd32cf4905ae444ef64cea919f1b5"
-  integrity sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==
-  dependencies:
-    "@webassemblyjs/floating-point-hex-parser" "1.11.6"
-    "@webassemblyjs/helper-api-error" "1.11.6"
-    "@xtuc/long" "4.2.2"
-
-"@webassemblyjs/helper-wasm-bytecode@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz#bb2ebdb3b83aa26d9baad4c46d4315283acd51e9"
-  integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
-
-"@webassemblyjs/helper-wasm-section@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz#ff97f3863c55ee7f580fd5c41a381e9def4aa577"
-  integrity sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
-
-"@webassemblyjs/ieee754@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz#bb665c91d0b14fffceb0e38298c329af043c6e3a"
-  integrity sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==
-  dependencies:
-    "@xtuc/ieee754" "^1.2.0"
-
-"@webassemblyjs/leb128@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.6.tgz#70e60e5e82f9ac81118bc25381a0b283893240d7"
-  integrity sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==
-  dependencies:
-    "@xtuc/long" "4.2.2"
-
-"@webassemblyjs/utf8@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.6.tgz#90f8bc34c561595fe156603be7253cdbcd0fab5a"
-  integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
-
-"@webassemblyjs/wasm-edit@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz#c72fa8220524c9b416249f3d94c2958dfe70ceab"
-  integrity sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/helper-wasm-section" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
-    "@webassemblyjs/wasm-opt" "1.11.6"
-    "@webassemblyjs/wasm-parser" "1.11.6"
-    "@webassemblyjs/wast-printer" "1.11.6"
-
-"@webassemblyjs/wasm-gen@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz#fb5283e0e8b4551cc4e9c3c0d7184a65faf7c268"
-  integrity sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/ieee754" "1.11.6"
-    "@webassemblyjs/leb128" "1.11.6"
-    "@webassemblyjs/utf8" "1.11.6"
-
-"@webassemblyjs/wasm-opt@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz#d9a22d651248422ca498b09aa3232a81041487c2"
-  integrity sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
-    "@webassemblyjs/wasm-parser" "1.11.6"
-
-"@webassemblyjs/wasm-parser@1.11.6", "@webassemblyjs/wasm-parser@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz#bb85378c527df824004812bbdb784eea539174a1"
-  integrity sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-api-error" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/ieee754" "1.11.6"
-    "@webassemblyjs/leb128" "1.11.6"
-    "@webassemblyjs/utf8" "1.11.6"
-
-"@webassemblyjs/wast-printer@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz#a7bf8dd7e362aeb1668ff43f35cb849f188eff20"
-  integrity sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@xtuc/long" "4.2.2"
-
 "@webbtc/webln-types@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@webbtc/webln-types/-/webln-types-3.0.0.tgz#448b2138423865087ba8859e9e6430fc2463b864"
   integrity sha512-aXfTHLKz5lysd+6xTeWl+qHNh/p3qVYbeLo+yDN5cUDmhie2ZoGvkppfWxzbGkcFBzb6dJyQ2/i2cbmDHas+zQ==
 
-"@xtuc/ieee754@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
-  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
-
-"@xtuc/long@4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
-  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
-
-acorn-import-assertions@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac"
-  integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==
-
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.7.1, acorn@^8.8.2, acorn@^8.9.0:
+acorn@^8.8.2, acorn@^8.9.0:
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
   integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
@@ -3168,11 +2977,6 @@ ajv-formats@^2.1.1:
   dependencies:
     ajv "^8.0.0"
 
-ajv-keywords@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
-  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
-
 ajv-keywords@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
@@ -3180,7 +2984,7 @@ ajv-keywords@^5.0.0:
   dependencies:
     fast-deep-equal "^3.1.3"
 
-ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -3521,7 +3325,7 @@ braces@^3.0.3, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
-browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4.21.10, browserslist@^4.21.4, browserslist@^4.23.1:
+browserslist@^4.0.0, browserslist@^4.16.6, browserslist@^4.21.10, browserslist@^4.21.4, browserslist@^4.23.1:
   version "4.24.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.0.tgz#a1325fe4bc80b64fda169629fc01b3d6cecd38d4"
   integrity sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==
@@ -3685,11 +3489,6 @@ chokidar@^4.0.0:
   dependencies:
     readdirp "^4.0.1"
 
-chrome-trace-event@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
-  integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
-
 classnames@^2.2.5:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
@@ -4325,7 +4124,7 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^5.12.0, enhanced-resolve@^5.15.0:
+enhanced-resolve@^5.12.0:
   version "5.15.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
   integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
@@ -4427,11 +4226,6 @@ es-iterator-helpers@^1.0.12:
     iterator.prototype "^1.1.2"
     safe-array-concat "^1.0.1"
 
-es-module-lexer@^1.2.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.3.1.tgz#c1b0dd5ada807a3b3155315911f364dc4e909db1"
-  integrity sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==
-
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
@@ -4694,14 +4488,6 @@ eslint-plugin-tailwindcss@^3.17.5:
     fast-glob "^3.2.5"
     postcss "^8.4.4"
 
-eslint-scope@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
-  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
-  dependencies:
-    esrecurse "^4.3.0"
-    estraverse "^4.1.1"
-
 eslint-scope@^7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
@@ -4781,11 +4567,6 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
-estraverse@^4.1.1:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
-  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
-
 estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
@@ -4813,11 +4594,6 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-events@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
-  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
-
 execa@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
@@ -5097,11 +4873,6 @@ glob-parent@^5.1.2, glob-parent@^6.0.1, glob-parent@^6.0.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.3"
 
-glob-to-regexp@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
-  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
-
 glob@7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -5207,7 +4978,7 @@ got@^11.8.3:
     p-cancelable "^2.0.0"
     responselike "^2.0.0"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
+graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
   version "4.2.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
@@ -5271,11 +5042,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hash-sum@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
-  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
-
 he@1.2.0, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -5801,15 +5567,6 @@ jake@^10.8.5:
     filelist "^1.0.4"
     minimatch "^3.1.2"
 
-jest-worker@^27.4.5:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
-  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
-  dependencies:
-    "@types/node" "*"
-    merge-stream "^2.0.0"
-    supports-color "^8.0.0"
-
 jiti@^1.21.0:
   version "1.21.6"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
@@ -5879,7 +5636,7 @@ json-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
-json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
+json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
@@ -6111,11 +5868,6 @@ load-tsconfig@^0.2.3:
   resolved "https://registry.yarnpkg.com/load-tsconfig/-/load-tsconfig-0.2.5.tgz#453b8cd8961bfb912dea77eb6c168fe8cca3d3a1"
   integrity sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==
 
-loader-runner@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
-  integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==
-
 loader-utils@^2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
@@ -6324,7 +6076,7 @@ mime-db@1.49.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.49.0.tgz#f3dfde60c99e9cf3bc9701d687778f537001cbed"
   integrity sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA==
 
-mime-types@^2.1.12, mime-types@^2.1.27:
+mime-types@^2.1.12:
   version "2.1.32"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.32.tgz#1d00e89e7de7fe02008db61001d9e02852670fd5"
   integrity sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==
@@ -6431,11 +6183,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-neo-async@^2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
-  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
-
 no-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
@@ -7783,15 +7530,6 @@ scheduler@^0.23.2:
   dependencies:
     loose-envify "^1.1.0"
 
-schema-utils@^3.1.1, schema-utils@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
-  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
-  dependencies:
-    "@types/json-schema" "^7.0.8"
-    ajv "^6.12.5"
-    ajv-keywords "^3.5.2"
-
 schema-utils@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.0.0.tgz#60331e9e3ae78ec5d16353c467c34b3a0a1d3df7"
@@ -7904,7 +7642,7 @@ smob@^1.0.0:
   resolved "https://registry.yarnpkg.com/smob/-/smob-1.5.0.tgz#85d79a1403abf128d24d3ebc1cdc5e1a9548d3ab"
   integrity sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.0, source-map-js@^1.2.1:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
@@ -8216,13 +7954,6 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^8.0.0:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
-  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
-  dependencies:
-    has-flag "^4.0.0"
-
 supports-hyperlinks@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-3.1.0.tgz#b56150ff0173baacc15f21956450b61f2b18d3ac"
@@ -8307,7 +8038,7 @@ tailwindcss@^3.4.13:
     resolve "^1.22.2"
     sucrase "^3.32.0"
 
-tapable@^2.1.1, tapable@^2.2.0:
+tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
@@ -8327,18 +8058,7 @@ tempy@^0.6.0:
     type-fest "^0.16.0"
     unique-string "^2.0.0"
 
-terser-webpack-plugin@^5.3.7:
-  version "5.3.9"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz#832536999c51b46d468067f9e37662a3b96adfe1"
-  integrity sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==
-  dependencies:
-    "@jridgewell/trace-mapping" "^0.3.17"
-    jest-worker "^27.4.5"
-    schema-utils "^3.1.1"
-    serialize-javascript "^6.0.1"
-    terser "^5.16.8"
-
-terser@^5.10.0, terser@^5.16.8, terser@^5.17.4:
+terser@^5.10.0, terser@^5.17.4:
   version "5.33.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.33.0.tgz#8f9149538c7468ffcb1246cfec603c16720d2db1"
   integrity sha512-JuPVaB7s1gdFKPKTelwUyRq5Sid2A3Gko2S0PncwdBq7kN9Ti9HPWDQ06MPsEDGsZeVESjKEnyGy68quBk1w6g==
@@ -8739,19 +8459,6 @@ vite-plugin-pwa@^0.20.5:
     workbox-build "^7.1.0"
     workbox-window "^7.1.0"
 
-vite-plugin-require@^1.2.14:
-  version "1.2.14"
-  resolved "https://registry.yarnpkg.com/vite-plugin-require/-/vite-plugin-require-1.2.14.tgz#6c2861cac74fcb23f20bd3c0d3a61d823f05f774"
-  integrity sha512-i52DfITgYKtOZyh9kOjyy4ENTQBVHG0ozTKHQdFkGAHYqZwM3Dn2c5gsA5rR7IrHQ/PQET3SMz6HkNzZ2fXCyA==
-  dependencies:
-    "@babel/generator" "^7.24.5"
-    "@babel/parser" "^7.24.5"
-    "@babel/traverse" "^7.24.5"
-    "@babel/types" "^7.24.5"
-    "@vue/compiler-sfc" "^3.4.27"
-    vue-loader "^17.4.2"
-    webpack "^4.46.0 || ^5.0.0"
-
 vite-plugin-static-copy@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/vite-plugin-static-copy/-/vite-plugin-static-copy-1.0.6.tgz#ff457c16e8cfa564472aafd1698790ac89d05508"
@@ -8842,15 +8549,6 @@ vscode-uri@^3.0.2:
   resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.7.tgz#6d19fef387ee6b46c479e5fb00870e15e58c1eb8"
   integrity sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==
 
-vue-loader@^17.4.2:
-  version "17.4.2"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-17.4.2.tgz#f87f0d8adfcbbe8623de9eba1979d41ba223c6da"
-  integrity sha512-yTKOA4R/VN4jqjw4y5HrynFL8AK0Z3/Jt7eOJXEitsm0GMRHDBjCfCiuTiLP7OESvsZYo2pATCWhDqxC5ZrM6w==
-  dependencies:
-    chalk "^4.1.0"
-    hash-sum "^2.0.0"
-    watchpack "^2.4.0"
-
 w3c-xmlserializer@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz#f925ba26855158594d907313cedd1476c5967f6c"
@@ -8872,14 +8570,6 @@ warning@^4.0.0, warning@^4.0.1:
   dependencies:
     loose-envify "^1.0.0"
 
-watchpack@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
-  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
-  dependencies:
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.1.2"
-
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@@ -8890,41 +8580,6 @@ webidl-conversions@^7.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
-webpack-sources@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
-  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
-
-"webpack@^4.46.0 || ^5.0.0":
-  version "5.88.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.88.2.tgz#f62b4b842f1c6ff580f3fcb2ed4f0b579f4c210e"
-  integrity sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==
-  dependencies:
-    "@types/eslint-scope" "^3.7.3"
-    "@types/estree" "^1.0.0"
-    "@webassemblyjs/ast" "^1.11.5"
-    "@webassemblyjs/wasm-edit" "^1.11.5"
-    "@webassemblyjs/wasm-parser" "^1.11.5"
-    acorn "^8.7.1"
-    acorn-import-assertions "^1.9.0"
-    browserslist "^4.14.5"
-    chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.15.0"
-    es-module-lexer "^1.2.1"
-    eslint-scope "5.1.1"
-    events "^3.2.0"
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.2.9"
-    json-parse-even-better-errors "^2.3.1"
-    loader-runner "^4.2.0"
-    mime-types "^2.1.27"
-    neo-async "^2.6.2"
-    schema-utils "^3.2.0"
-    tapable "^2.1.1"
-    terser-webpack-plugin "^5.3.7"
-    watchpack "^2.4.0"
-    webpack-sources "^3.2.3"
-
 websocket-ts@^2.1.5:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/websocket-ts/-/websocket-ts-2.1.5.tgz#b6b51f0afca89d6bc7ff71c9e74540f19ae0262c"

From 5667e02aa74cb25e52170ed2d46419b1a9573969 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Nov 2024 19:01:03 -0600
Subject: [PATCH 4/6] Remove gameboy.tsx (sad)

---
 src/components/gameboy.tsx | 200 -------------------------------------
 1 file changed, 200 deletions(-)
 delete mode 100644 src/components/gameboy.tsx

diff --git a/src/components/gameboy.tsx b/src/components/gameboy.tsx
deleted file mode 100644
index e7635c22d..000000000
--- a/src/components/gameboy.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import { WasmBoy } from '@soapbox.pub/wasmboy';
-import arrowsMaximizeIcon from '@tabler/icons/outline/arrows-maximize.svg';
-import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
-import downloadIcon from '@tabler/icons/outline/download.svg';
-import playerPauseIcon from '@tabler/icons/outline/player-pause.svg';
-import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
-import volume3Icon from '@tabler/icons/outline/volume-3.svg';
-import volumeIcon from '@tabler/icons/outline/volume.svg';
-// @ts-ignore No types available
-// eslint-disable-next-line import/no-unresolved
-import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-import { exitFullscreen, isFullscreen, requestFullscreen } from 'soapbox/features/ui/util/fullscreen';
-
-import { HStack, IconButton } from './ui';
-
-let gainNode: GainNode | undefined;
-
-interface IGameboy extends Pick<React.HTMLAttributes<HTMLDivElement>, 'onFocus' | 'onBlur'> {
-  /** Classname of the outer `<div>`. */
-  className?: string;
-  /** URL to the ROM. */
-  src: string;
-  /** Aspect ratio of the canvas. */
-  aspect?: 'normal' | 'stretched';
-}
-
-/** Component to display a playable Gameboy emulator. */
-const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocus, onBlur, ...rest }) => {
-  const node = useRef<HTMLDivElement>(null);
-  const canvas = useRef<HTMLCanvasElement>(null);
-
-  const [paused, setPaused] = useState(false);
-  const [muted, setMuted] = useState(true);
-  const [fullscreen, setFullscreen] = useState(false);
-  const [showControls, setShowControls] = useState(true);
-
-  async function init() {
-    await WasmBoy.config(WasmBoyOptions, canvas.current!);
-    await WasmBoy.loadROM(src);
-    await play();
-
-    if (document.activeElement === canvas.current) {
-      await WasmBoy.enableDefaultJoypad();
-    } else {
-      await WasmBoy.disableDefaultJoypad();
-    }
-  }
-
-  const handleFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(() => {
-    WasmBoy.enableDefaultJoypad();
-  }, []);
-
-  const handleBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(() => {
-    WasmBoy.disableDefaultJoypad();
-  }, []);
-
-  const handleFullscreenChange = useCallback(() => {
-    setFullscreen(isFullscreen());
-  }, []);
-
-  const handleCanvasClick = useCallback(() => {
-    setShowControls(!showControls);
-  }, [showControls]);
-
-  const pause = async () => {
-    await WasmBoy.pause();
-    setPaused(true);
-  };
-
-  const play = async () => {
-    await WasmBoy.play();
-    setPaused(false);
-  };
-
-  const togglePaused = () => paused ? play() : pause();
-  const toggleMuted = () => setMuted(!muted);
-
-  const toggleFullscreen = () => {
-    if (isFullscreen()) {
-      exitFullscreen();
-    } else if (node.current) {
-      requestFullscreen(node.current);
-    }
-  };
-
-  const handleDownload = () => {
-    window.open(src);
-  };
-
-  useEffect(() => {
-    init();
-
-    return () => {
-      WasmBoy.pause();
-      WasmBoy.disableDefaultJoypad();
-    };
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener('fullscreenchange', handleFullscreenChange, true);
-    return () => {
-      document.removeEventListener('fullscreenchange', handleFullscreenChange, true);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (fullscreen) {
-      node.current?.focus();
-    }
-  }, [fullscreen]);
-
-  useEffect(() => {
-    if (gainNode) {
-      gainNode.gain.value = muted ? 0 : 1;
-    }
-  }, [gainNode, muted]);
-
-  return (
-    <div
-      ref={node}
-      tabIndex={0}
-      className={clsx(className, 'relative outline-none')}
-      onFocus={onFocus ?? handleFocus}
-      onBlur={onBlur ?? handleBlur}
-    >
-      <canvas
-        ref={canvas}
-        onClick={handleCanvasClick}
-        className={clsx('size-full bg-black ', {
-          'object-contain': aspect === 'normal',
-          'object-cover': aspect === 'stretched',
-        })}
-        {...rest}
-      />
-
-      <HStack
-        justifyContent='between'
-        className={clsx('pointer-events-none absolute inset-x-0 bottom-0 w-full bg-gradient-to-t from-black/50 to-transparent p-2 opacity-0 transition-opacity', {
-          'pointer-events-auto opacity-100': showControls,
-        })}
-      >
-        <HStack space={2}>
-          <IconButton
-            theme='transparent'
-            className='text-white'
-            onClick={togglePaused}
-            src={paused ? playerPlayIcon : playerPauseIcon}
-          />
-          <IconButton
-            theme='transparent'
-            className='text-white'
-            onClick={toggleMuted}
-            src={muted ? volume3Icon : volumeIcon}
-          />
-        </HStack>
-
-        <HStack space={2}>
-          <IconButton
-            theme='transparent'
-            className='text-white'
-            src={downloadIcon}
-            onClick={handleDownload}
-          />
-          <IconButton
-            theme='transparent'
-            className='text-white'
-            onClick={toggleFullscreen}
-            src={fullscreen ? arrowsMinimizeIcon : arrowsMaximizeIcon}
-          />
-        </HStack>
-      </HStack>
-    </div>
-  );
-};
-
-const WasmBoyOptions = {
-  headless: false,
-  useGbcWhenOptional: true,
-  isAudioEnabled: true,
-  frameSkip: 1,
-  audioBatchProcessing: true,
-  timersBatchProcessing: false,
-  audioAccumulateSamples: true,
-  graphicsBatchProcessing: false,
-  graphicsDisableScanlineRendering: false,
-  tileRendering: true,
-  tileCaching: true,
-  gameboyFPSCap: 60,
-  updateGraphicsCallback: false,
-  updateAudioCallback: (audioContext: AudioContext, audioBufferSourceNode: AudioBufferSourceNode) => {
-    gainNode = gainNode ?? audioContext.createGain();
-    audioBufferSourceNode.connect(gainNode);
-    return gainNode;
-  },
-  saveStateCallback: false,
-};
-
-export default Gameboy;
\ No newline at end of file

From 848d1286034b3674be162230f19bdbe428f3f996 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Nov 2024 19:09:24 -0600
Subject: [PATCH 5/6] ts-ignore (sad)

---
 vite.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vite.config.ts b/vite.config.ts
index 282283aad..7ad188c2c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,6 +14,7 @@ import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 const { NODE_ENV } = process.env;
 
+// @ts-ignore
 export default defineConfig(({ command }) => ({
   build: {
     assetsDir: 'packs',

From 223533f4db01a2545a9e2f6fd764d4050509678f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Nov 2024 19:22:51 -0600
Subject: [PATCH 6/6] Fix random type errors now that imports are type safe

---
 src/features/compose/components/privacy-dropdown.tsx |  2 +-
 src/features/ui/components/action-button.tsx         | 11 ++++++++++-
 src/features/ui/components/theme-selector.tsx        |  2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx
index 4ab3b370a..0063ad65b 100644
--- a/src/features/compose/components/privacy-dropdown.tsx
+++ b/src/features/compose/components/privacy-dropdown.tsx
@@ -250,7 +250,7 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
             'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !open,
             'text-primary-500 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-400': open,
           })}
-          src={valueOption?.icon}
+          src={valueOption!.icon}
           title={intl.formatMessage(messages.change_privacy)}
           onClick={handleToggle}
           onMouseDown={handleMouseDown}
diff --git a/src/features/ui/components/action-button.tsx b/src/features/ui/components/action-button.tsx
index ec1a5874d..03257713a 100644
--- a/src/features/ui/components/action-button.tsx
+++ b/src/features/ui/components/action-button.tsx
@@ -221,12 +221,21 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
       );
     } else if (!account.relationship?.blocking && !account.relationship?.muting) {
       // Follow & Unfollow
+
+      let icon: string | undefined;
+
+      if (isFollowing) {
+        icon = plusIcon;
+      } else if (blockedBy) {
+        icon = banIcon;
+      }
+
       return (
         <Button
           size='sm'
           disabled={blockedBy}
           theme={isFollowing ? 'secondary' : 'primary'}
-          icon={blockedBy ? banIcon : (!isFollowing && plusIcon)}
+          icon={icon}
           onClick={handleFollow}
         >
           {isFollowing ? (
diff --git a/src/features/ui/components/theme-selector.tsx b/src/features/ui/components/theme-selector.tsx
index 90c294fe4..019a8d59b 100644
--- a/src/features/ui/components/theme-selector.tsx
+++ b/src/features/ui/components/theme-selector.tsx
@@ -35,7 +35,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
       case 'black':
         return shadowIcon;
       default:
-        return null;
+        return deviceDesktopIcon;
     }
   }, [value]);