diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
index 57e8cf7ae..2fd9ead15 100644
--- a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
+++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
@@ -2,11 +2,10 @@ import {
     IconButton,
     Input,
     InputGroup,
-    InputRightElement,
-    ViewIcon,
-    ViewOffIcon,
+    InputRightElement
 } from '~/bundles/common/components/components.js';
 import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
+import { ViewIcon, ViewOffIcon } from '~/bundles/common/icons/icons.js';
 
 type Properties = {
     label: string;
diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index 505f6fddd..0d51b8619 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -7,8 +7,6 @@ export { Overlay } from './overlay/overlay.js';
 export { Player } from './player/player.js';
 export { RouterProvider } from './router-provider/router-provider.js';
 export { VideoModal } from './video-modal/video-modal.js';
-export { DownloadIcon } from '@chakra-ui/icons';
-export { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 export {
     Box,
     Center,
@@ -28,13 +26,6 @@ export {
     Text,
     VStack,
 } from '@chakra-ui/react';
-export {
-    faCircleUser,
-    faCloudArrowUp,
-    faFont,
-    faT,
-    faTableColumns,
-} from '@fortawesome/free-solid-svg-icons';
 export { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 export { FormikProvider as FormProvider } from 'formik';
 export { Provider as StoreProvider } from 'react-redux';
diff --git a/frontend/src/bundles/common/icons/chakra-icon/chakra-icon.ts b/frontend/src/bundles/common/icons/chakra-icon/chakra-icon.ts
new file mode 100644
index 000000000..e7db7d667
--- /dev/null
+++ b/frontend/src/bundles/common/icons/chakra-icon/chakra-icon.ts
@@ -0,0 +1 @@
+export { DownloadIcon, ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
diff --git a/frontend/src/bundles/common/icons/font-awesome-icon/font-awesome-icon.ts b/frontend/src/bundles/common/icons/font-awesome-icon/font-awesome-icon.ts
new file mode 100644
index 000000000..e549ce1d0
--- /dev/null
+++ b/frontend/src/bundles/common/icons/font-awesome-icon/font-awesome-icon.ts
@@ -0,0 +1,7 @@
+export {
+    faCircleUser,
+    faCloudArrowUp,
+    faFont,
+    faT,
+    faTableColumns,
+} from '@fortawesome/free-solid-svg-icons';
diff --git a/frontend/src/bundles/common/icons/icons.ts b/frontend/src/bundles/common/icons/icons.ts
new file mode 100644
index 000000000..216e49d57
--- /dev/null
+++ b/frontend/src/bundles/common/icons/icons.ts
@@ -0,0 +1,8 @@
+export { DownloadIcon, ViewIcon, ViewOffIcon } from './chakra-icon/chakra-icon.js';
+export {
+    faCircleUser,
+    faCloudArrowUp,
+    faFont,
+    faT,
+    faTableColumns,
+} from './font-awesome-icon/font-awesome-icon.js';
diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx
index fd0acd3d0..b04aa87c2 100644
--- a/frontend/src/bundles/studio/pages/studio.tsx
+++ b/frontend/src/bundles/studio/pages/studio.tsx
@@ -1,9 +1,9 @@
 import {
     Button,
-    DownloadIcon,
     Header,
     IconButton,
 } from '~/bundles/common/components/components.js';
+import { DownloadIcon } from '~/bundles/common/icons/icons.js';
 
 const Studio: React.FC = () => {
     return (
diff --git a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx
index 2572bd3d7..b1f28c4d3 100644
--- a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx
+++ b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx
@@ -1,9 +1,9 @@
 import {
-    faCloudArrowUp,
     Flex,
     FontAwesomeIcon,
     Icon,
 } from '~/bundles/common/components/components.js';
+import { faCloudArrowUp } from '~/bundles/common/icons/icons.js';
 
 const TemplatesContent: React.FC = () => (
     <div>This is the Templates content.</div>
diff --git a/frontend/src/bundles/video-editor/pages/video-editor.tsx b/frontend/src/bundles/video-editor/pages/video-editor.tsx
index 86987f99d..f5211e854 100644
--- a/frontend/src/bundles/video-editor/pages/video-editor.tsx
+++ b/frontend/src/bundles/video-editor/pages/video-editor.tsx
@@ -1,13 +1,12 @@
+import { FontAwesomeIcon, Icon } from '~/bundles/common/components/components.js';
+import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
 import {
     faCircleUser,
     faCloudArrowUp,
     faFont,
     faT,
     faTableColumns,
-    FontAwesomeIcon,
-    Icon,
-} from '~/bundles/common/components/components.js';
-import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
+} from '~/bundles/common/icons/icons.js';
 
 import { Menu, MenuBody } from '../components/components.js';
 import {