From d616170afa771255c7515637feb0f8d63ae1e75d Mon Sep 17 00:00:00 2001
From: sedghi <ar.sedghi@gmail.com>
Date: Tue, 17 Dec 2024 12:37:35 -0500
Subject: [PATCH] final migration

---
 .../src/viewports/_getStatusComponent.tsx                 | 4 ++--
 .../src/viewports/_getStatusComponent.tsx                 | 4 ++--
 .../components/OHIFCornerstoneSRMeasurementViewport.tsx   | 6 +++---
 .../src/panels/DynamicVolumeControls.tsx                  | 4 ++--
 .../src/components/DicomUpload/DicomUploadProgress.tsx    | 4 ++--
 .../components/DicomUpload/DicomUploadProgressItem.tsx    | 8 ++++----
 .../WindowLevelActionMenu/VolumeRenderingPresets.tsx      | 2 +-
 .../VolumeRenderingPresetsContent.tsx                     | 2 +-
 .../src/Components/DataSourceConfigurationComponent.tsx   | 3 ++-
 .../Components/DataSourceConfigurationModalComponent.tsx  | 4 ++--
 extensions/default/src/Components/ItemListComponent.tsx   | 2 +-
 platform/app/src/routes/Debug.tsx                         | 2 +-
 platform/ui-next/src/components/Header/Header.tsx         | 2 +-
 platform/ui-next/src/components/Icons/Icons.tsx           | 2 +-
 .../ui/src/components/AdvancedToolbox/AdvancedToolbox.tsx | 2 +-
 platform/ui/src/components/AllInOneMenu/BackItem.tsx      | 2 +-
 platform/ui/src/components/AllInOneMenu/IconMenu.tsx      | 2 +-
 platform/ui/src/components/AllInOneMenu/SubMenu.tsx       | 6 +++---
 platform/ui/src/components/CheckBox/CheckBox.tsx          | 4 ++--
 platform/ui/src/components/CinePlayer/CinePlayer.tsx      | 2 +-
 platform/ui/src/components/ContextMenu/ContextMenu.tsx    | 2 +-
 .../DisplaySetMessageListTooltip.tsx                      | 2 +-
 platform/ui/src/components/Dropdown/Dropdown.tsx          | 4 ++--
 .../ExpandableToolbarButton/ExpandableToolbarButton.tsx   | 2 +-
 platform/ui/src/components/Header/Header.tsx              | 2 +-
 .../components/HeaderPatientInfo/HeaderPatientInfo.tsx    | 2 +-
 platform/ui/src/components/InputNumber/InputNumber.tsx    | 6 +++---
 platform/ui/src/components/LayoutPreset/LayoutPreset.tsx  | 2 +-
 platform/ui/src/components/Notification/Notification.tsx  | 2 +-
 platform/ui/src/components/PanelSection/PanelSection.tsx  | 2 +-
 platform/ui/src/components/PatientInfo/PatientInfo.tsx    | 2 +-
 .../components/ProgressDropdown/ProgressItemDetail.tsx    | 2 +-
 .../SegmentationGroupTable/SegmentationConfig.tsx         | 2 +-
 .../SegmentationGroupTable/SegmentationGroupSegment.tsx   | 2 +-
 platform/ui/src/components/Select/Select.tsx              | 4 ++--
 .../ui/src/components/SelectTree/SelectTreeBreadcrumb.tsx | 2 +-
 platform/ui/src/components/SidePanel/SidePanel.tsx        | 6 +++---
 platform/ui/src/components/Snackbar/SnackbarItem.tsx      | 4 ++--
 platform/ui/src/components/SplitButton/SplitButton.tsx    | 6 +++---
 .../src/components/ThumbnailTracked/ThumbnailTracked.tsx  | 2 +-
 .../ui/src/components/ToolbarButton/ToolbarButton.tsx     | 2 +-
 .../src/components/TooltipClipboard/TooltipClipboard.tsx  | 2 +-
 .../components/ViewportActionBar/ViewportActionBar.tsx    | 4 ++--
 .../ViewportDownloadForm/ViewportDownloadForm.tsx         | 5 ++---
 44 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/extensions/cornerstone-dicom-rt/src/viewports/_getStatusComponent.tsx b/extensions/cornerstone-dicom-rt/src/viewports/_getStatusComponent.tsx
index bd2498a2bd..fcf4de300a 100644
--- a/extensions/cornerstone-dicom-rt/src/viewports/_getStatusComponent.tsx
+++ b/extensions/cornerstone-dicom-rt/src/viewports/_getStatusComponent.tsx
@@ -9,13 +9,13 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
 
   switch (isHydrated) {
     case true:
-      StatusIcon = () => <Icons.Legacy name="status-alert" />;
+      StatusIcon = () => <Icons.ByName name="status-alert" />;
 
       ToolTipMessage = () => <div>This Segmentation is loaded in the segmentation panel</div>;
       break;
     case false:
       StatusIcon = () => (
-        <Icons.Legacy
+        <Icons.ByName
           className="text-aqua-pale"
           name="status-untracked"
         />
diff --git a/extensions/cornerstone-dicom-seg/src/viewports/_getStatusComponent.tsx b/extensions/cornerstone-dicom-seg/src/viewports/_getStatusComponent.tsx
index dabd366d47..1e2f5d7df6 100644
--- a/extensions/cornerstone-dicom-seg/src/viewports/_getStatusComponent.tsx
+++ b/extensions/cornerstone-dicom-seg/src/viewports/_getStatusComponent.tsx
@@ -9,13 +9,13 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
 
   switch (isHydrated) {
     case true:
-      StatusIcon = () => <Icons.Legacy name="status-alert" />;
+      StatusIcon = () => <Icons.ByName name="status-alert" />;
 
       ToolTipMessage = () => <div>This Segmentation is loaded in the segmentation panel</div>;
       break;
     case false:
       StatusIcon = () => (
-        <Icons.Legacy
+        <Icons.ByName
           className="text-aqua-pale"
           name="status-untracked"
         />
diff --git a/extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx b/extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx
index f792c763b9..c4c493d785 100644
--- a/extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx
+++ b/extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx
@@ -433,7 +433,7 @@ function _getStatusComponent({
 
   switch (state) {
     case 1:
-      StatusIcon = () => <Icons.Legacy name="status-alert" />;
+      StatusIcon = () => <Icons.ByName name="status-alert" />;
 
       ToolTipMessage = () => (
         <div>
@@ -444,7 +444,7 @@ function _getStatusComponent({
       );
       break;
     case 2:
-      StatusIcon = () => <Icons.Legacy name="status-locked" />;
+      StatusIcon = () => <Icons.ByName name="status-locked" />;
 
       ToolTipMessage = () => (
         <div>
@@ -458,7 +458,7 @@ function _getStatusComponent({
       break;
     case 3:
       StatusIcon = () => (
-        <Icons.Legacy
+        <Icons.ByName
           className="text-aqua-pale"
           name="status-untracked"
         />
diff --git a/extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx b/extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx
index 506ec019a0..b632dfce7c 100644
--- a/extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx
+++ b/extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx
@@ -19,7 +19,7 @@ const Header = ({ title, tooltip }) => (
       tight={true}
       tooltipBoxClassName="max-w-xs p-2"
     >
-      <Icons.Legacy
+      <Icons.ByName
         name="info-link"
         className="text-primary-active h-[14px] w-[14px]"
       />
@@ -201,7 +201,7 @@ function FrameControls({
           className="bg-customblue-30 h-[26px] w-[58px] rounded-[4px]"
           onClick={() => onPlayPauseChange(!isPlaying)}
         >
-          <Icons.Legacy
+          <Icons.ByName
             name={getPlayPauseIconName()}
             className="active:text-primary-light hover:bg-customblue-300 h-[24px] w-[24px] cursor-pointer text-white"
           />
diff --git a/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx b/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx
index 9c4bac2d10..2ab8b23024 100644
--- a/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx
+++ b/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx
@@ -314,10 +314,10 @@ function DicomUploadProgress({
       <div className="ml-auto flex w-6 justify-center">
         {numFails > 0 && (
           <div onClick={() => setShowFailedOnly(currentShowFailedOnly => !currentShowFailedOnly)}>
-            <Icons.Legacy
+            <Icons.ByName
               className="cursor-pointer"
               name="icon-status-alert"
-            ></Icons.Legacy>
+            ></Icons.ByName>
           </div>
         )}
       </div>
diff --git a/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx b/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx
index 8c0f7db312..d1673d4a0c 100644
--- a/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx
+++ b/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx
@@ -54,17 +54,17 @@ const DicomUploadProgressItem = memo(
       switch (dicomFileUploader.getStatus()) {
         case UploadStatus.Success:
           return (
-            <Icons.Legacy
+            <Icons.ByName
               name="status-tracked"
               className="text-primary-light"
             />
           );
         case UploadStatus.InProgress:
-          return <Icons.Legacy name="icon-transferring" />;
+          return <Icons.ByName name="icon-transferring" />;
         case UploadStatus.Failed:
-          return <Icons.Legacy name="icon-alert-small" />;
+          return <Icons.ByName name="icon-alert-small" />;
         case UploadStatus.Cancelled:
-          return <Icons.Legacy name="icon-alert-outline" />;
+          return <Icons.ByName name="icon-alert-outline" />;
         default:
           return <></>;
       }
diff --git a/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresets.tsx b/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresets.tsx
index b5574311c1..0949cac87c 100644
--- a/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresets.tsx
+++ b/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresets.tsx
@@ -32,7 +32,7 @@ export function VolumeRenderingPresets({
     <AllInOneMenu.Item
       label="Rendering Presets"
       icon={<Icons.VolumeRendering />}
-      rightIcon={<Icons.Legacy name="action-new-dialog" />}
+      rightIcon={<Icons.ByName name="action-new-dialog" />}
       onClick={onClickPresets}
     />
   );
diff --git a/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresetsContent.tsx b/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresetsContent.tsx
index 802e638d3c..77853b424e 100644
--- a/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresetsContent.tsx
+++ b/extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresetsContent.tsx
@@ -61,7 +61,7 @@ export function VolumeRenderingPresetsContent({
                   handleApply({ preset: preset.name, viewportId });
                 }}
               >
-                <Icons.Legacy
+                <Icons.ByName
                   name={preset.name}
                   className={
                     selectedPreset?.name === preset.name
diff --git a/extensions/default/src/Components/DataSourceConfigurationComponent.tsx b/extensions/default/src/Components/DataSourceConfigurationComponent.tsx
index 88d16cb6b6..20031ee1f2 100644
--- a/extensions/default/src/Components/DataSourceConfigurationComponent.tsx
+++ b/extensions/default/src/Components/DataSourceConfigurationComponent.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Icons, useModal } from '@ohif/ui';
+import { useModal } from '@ohif/ui';
+import { Icons } from '@ohif/ui-next';
 import { Types } from '@ohif/core';
 import DataSourceConfigurationModalComponent from './DataSourceConfigurationModalComponent';
 
diff --git a/extensions/default/src/Components/DataSourceConfigurationModalComponent.tsx b/extensions/default/src/Components/DataSourceConfigurationModalComponent.tsx
index 02a0205c7a..2517bac9ce 100644
--- a/extensions/default/src/Components/DataSourceConfigurationModalComponent.tsx
+++ b/extensions/default/src/Components/DataSourceConfigurationModalComponent.tsx
@@ -152,9 +152,9 @@ function DataSourceConfigurationModalComponent({
             >
               <div className="text- flex items-center gap-2">
                 {itemLabelIndex < selectedItems.length ? (
-                  <Icons.Legacy name="status-tracked" />
+                  <Icons.ByName name="status-tracked" />
                 ) : (
-                  <Icons.Legacy name="status-untracked" />
+                  <Icons.ByName name="status-untracked" />
                 )}
                 <div className={classNames(NO_WRAP_ELLIPSIS_CLASS_NAMES)}>{t(itemLabel)}</div>
               </div>
diff --git a/extensions/default/src/Components/ItemListComponent.tsx b/extensions/default/src/Components/ItemListComponent.tsx
index 4e0e266bbc..c353368454 100644
--- a/extensions/default/src/Components/ItemListComponent.tsx
+++ b/extensions/default/src/Components/ItemListComponent.tsx
@@ -66,7 +66,7 @@ function ItemListComponent({
                       <Button
                         onClick={() => onItemClicked(item)}
                         className="invisible group-hover:visible"
-                        endIcon={<Icons.Legacy name="arrow-left" />}
+                        endIcon={<Icons.ByName name="arrow-left" />}
                       >
                         {t('Select')}
                       </Button>
diff --git a/platform/app/src/routes/Debug.tsx b/platform/app/src/routes/Debug.tsx
index a0f6cde239..0933bd9362 100644
--- a/platform/app/src/routes/Debug.tsx
+++ b/platform/app/src/routes/Debug.tsx
@@ -18,7 +18,7 @@ function Debug() {
               <p className="text-primary-active mt-4 text-xl font-semibold">Debug Information</p>
               <div className="mt-4 flex items-center space-x-2">
                 <p className="text-md text-white">Cross Origin Isolated (COOP/COEP)</p>
-                <Icons.Legacy
+                <Icons.ByName
                   name={
                     window.crossOriginIsolated ? 'notifications-success' : 'notifications-error'
                   }
diff --git a/platform/ui-next/src/components/Header/Header.tsx b/platform/ui-next/src/components/Header/Header.tsx
index 57bb9d8e5e..02b7840991 100644
--- a/platform/ui-next/src/components/Header/Header.tsx
+++ b/platform/ui-next/src/components/Header/Header.tsx
@@ -102,7 +102,7 @@ function Header({
                     >
                       {IconComponent && (
                         <span className="flex h-4 w-4 items-center justify-center">
-                          <Icons.Legacy name={IconComponent.name} />
+                          <Icons.ByName name={IconComponent.name} />
                         </span>
                       )}
                       <span className="flex-1">{option.title}</span>
diff --git a/platform/ui-next/src/components/Icons/Icons.tsx b/platform/ui-next/src/components/Icons/Icons.tsx
index 6d6dec7190..9cac386e41 100644
--- a/platform/ui-next/src/components/Icons/Icons.tsx
+++ b/platform/ui-next/src/components/Icons/Icons.tsx
@@ -675,7 +675,7 @@ export const Icons = {
     Icons[name] = icon;
   },
 
-  Legacy: ({ name, className, ...props }: { name: string; className?: string }) => {
+  ByName: ({ name, className, ...props }: { name: string; className?: string }) => {
     const IconComponent = Icons[name];
 
     if (!IconComponent) {
diff --git a/platform/ui/src/components/AdvancedToolbox/AdvancedToolbox.tsx b/platform/ui/src/components/AdvancedToolbox/AdvancedToolbox.tsx
index 16fae92a34..aed13ed126 100644
--- a/platform/ui/src/components/AdvancedToolbox/AdvancedToolbox.tsx
+++ b/platform/ui/src/components/AdvancedToolbox/AdvancedToolbox.tsx
@@ -52,7 +52,7 @@ const AdvancedToolbox = ({ title, items }) => {
                         'hover:bg-primary-light cursor-pointer hover:cursor-pointer hover:text-black'
                     )}
                   >
-                    <Icons.Legacy name={item.icon} />
+                    <Icons.ByName name={item.icon} />
                   </div>
                 </div>
               </Tooltip>
diff --git a/platform/ui/src/components/AllInOneMenu/BackItem.tsx b/platform/ui/src/components/AllInOneMenu/BackItem.tsx
index 93e0600d23..e8c9f16491 100644
--- a/platform/ui/src/components/AllInOneMenu/BackItem.tsx
+++ b/platform/ui/src/components/AllInOneMenu/BackItem.tsx
@@ -15,7 +15,7 @@ const BackItem = ({ backLabel, onBackClick }: BackItemProps) => {
         className="all-in-one-menu-item all-in-one-menu-item-effects"
         onClick={onBackClick}
       >
-        <Icons.Legacy name="content-prev"></Icons.Legacy>
+        <Icons.ByName name="content-prev"></Icons.ByName>
 
         <div className="pl-2">{backLabel || 'Back to Display Options'}</div>
       </div>
diff --git a/platform/ui/src/components/AllInOneMenu/IconMenu.tsx b/platform/ui/src/components/AllInOneMenu/IconMenu.tsx
index 00a9313bc0..b1662394a8 100644
--- a/platform/ui/src/components/AllInOneMenu/IconMenu.tsx
+++ b/platform/ui/src/components/AllInOneMenu/IconMenu.tsx
@@ -52,7 +52,7 @@ export default function IconMenu({
           className={iconClassName}
           onClick={toggleMenuVisibility}
         >
-          <Icons.Legacy name={icon} />
+          <Icons.ByName name={icon} />
         </div>
         <AllInOneMenu.Menu
           key={menuKey}
diff --git a/platform/ui/src/components/AllInOneMenu/SubMenu.tsx b/platform/ui/src/components/AllInOneMenu/SubMenu.tsx
index 09461e4b47..b9628dbf0f 100644
--- a/platform/ui/src/components/AllInOneMenu/SubMenu.tsx
+++ b/platform/ui/src/components/AllInOneMenu/SubMenu.tsx
@@ -21,13 +21,13 @@ const SubMenu = (props: SubMenuProps) => {
       onClick={onClickHandler}
     >
       {props.itemIcon && (
-        <Icons.Legacy
+        <Icons.ByName
           name={props.itemIcon}
           className="mr-2"
-        ></Icons.Legacy>
+        ></Icons.ByName>
       )}
       <div className="mr-auto">{props.itemLabel}</div>
-      <Icons.Legacy name="content-next"></Icons.Legacy>
+      <Icons.ByName name="content-next"></Icons.ByName>
     </div>
   );
 };
diff --git a/platform/ui/src/components/CheckBox/CheckBox.tsx b/platform/ui/src/components/CheckBox/CheckBox.tsx
index 51bec1ec20..78ce843dd9 100644
--- a/platform/ui/src/components/CheckBox/CheckBox.tsx
+++ b/platform/ui/src/components/CheckBox/CheckBox.tsx
@@ -33,9 +33,9 @@ const CheckBox: React.FC<{
       onClick={handleClick}
     >
       {isChecked ? (
-        <Icons.Legacy name="checkbox-checked" />
+        <Icons.ByName name="checkbox-checked" />
       ) : (
-        <Icons.Legacy name="checkbox-unchecked" />
+        <Icons.ByName name="checkbox-unchecked" />
       )}
       <Typography
         variant={labelVariant ?? 'subtitle'}
diff --git a/platform/ui/src/components/CinePlayer/CinePlayer.tsx b/platform/ui/src/components/CinePlayer/CinePlayer.tsx
index dc52d8bd09..23c0c72c31 100644
--- a/platform/ui/src/components/CinePlayer/CinePlayer.tsx
+++ b/platform/ui/src/components/CinePlayer/CinePlayer.tsx
@@ -97,7 +97,7 @@ const CinePlayer: React.FC<CinePlayerProps> = ({
           'border-secondary-light/60 bg-primary-dark inline-flex select-none items-center gap-2 rounded border px-2 py-2'
         }
       >
-        <Icons.Legacy
+        <Icons.ByName
           name={getPlayPauseIconName()}
           className="active:text-primary-light hover:bg-customblue-300 cursor-pointer text-white hover:rounded"
           onClick={() => onPlayPauseChange(!isPlaying)}
diff --git a/platform/ui/src/components/ContextMenu/ContextMenu.tsx b/platform/ui/src/components/ContextMenu/ContextMenu.tsx
index 91d0533fd0..2d65d9ce64 100644
--- a/platform/ui/src/components/ContextMenu/ContextMenu.tsx
+++ b/platform/ui/src/components/ContextMenu/ContextMenu.tsx
@@ -23,7 +23,7 @@ const ContextMenu = ({ items, ...props }) => {
         >
           <Typography>{item.label}</Typography>
           {item.iconRight && (
-            <Icons.Legacy
+            <Icons.ByName
               name={item.iconRight}
               className="inline"
             />
diff --git a/platform/ui/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx b/platform/ui/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx
index dcb42c284c..3f1ed3c801 100644
--- a/platform/ui/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx
+++ b/platform/ui/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx
@@ -14,7 +14,7 @@ const DisplaySetMessageListTooltip = ({ messages, id }): React.ReactNode => {
   if (messages?.size()) {
     return (
       <>
-        <Icons.Legacy
+        <Icons.ByName
           id={id}
           onMouseOver={() => setIsOpen(true)}
           onFocus={() => setIsOpen(true)}
diff --git a/platform/ui/src/components/Dropdown/Dropdown.tsx b/platform/ui/src/components/Dropdown/Dropdown.tsx
index a2e9b8f377..46a958450b 100644
--- a/platform/ui/src/components/Dropdown/Dropdown.tsx
+++ b/platform/ui/src/components/Dropdown/Dropdown.tsx
@@ -59,7 +59,7 @@ const Dropdown = ({
           data-cy={id}
         >
           {!!icon && (
-            <Icons.Legacy
+            <Icons.ByName
               name={icon}
               className="mr-2 w-4 text-white"
             />
@@ -96,7 +96,7 @@ const Dropdown = ({
       <div className="flex items-center">
         {children}
         {showDropdownIcon && (
-          <Icons.Legacy
+          <Icons.ByName
             name="chevron-down"
             className="ml-1"
           />
diff --git a/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx b/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx
index faad3256d7..5488d353e6 100644
--- a/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx
+++ b/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx
@@ -54,7 +54,7 @@ const ExpandableToolbarButton = ({
         onClick={onClickHandler}
         key={id}
       >
-        <Icons.Legacy name={icon} />
+        <Icons.ByName name={icon} />
       </IconButton>
       <div className="absolute z-10 pt-4">
         <div className={classnames('ExpandableToolbarButton__content w-48', className)}>
diff --git a/platform/ui/src/components/Header/Header.tsx b/platform/ui/src/components/Header/Header.tsx
index 8c7e1ddf72..79a0319e89 100644
--- a/platform/ui/src/components/Header/Header.tsx
+++ b/platform/ui/src/components/Header/Header.tsx
@@ -79,7 +79,7 @@ function Header({
                 size="initial"
                 className="text-primary-active hover:bg-primary-dark h-full w-full"
               >
-                <Icons.Legacy name="icon-settings" />
+                <Icons.ByName name="icon-settings" />
               </IconButton>
             </Dropdown>
           </div>
diff --git a/platform/ui/src/components/HeaderPatientInfo/HeaderPatientInfo.tsx b/platform/ui/src/components/HeaderPatientInfo/HeaderPatientInfo.tsx
index ea6d9c712e..aa6bac784b 100644
--- a/platform/ui/src/components/HeaderPatientInfo/HeaderPatientInfo.tsx
+++ b/platform/ui/src/components/HeaderPatientInfo/HeaderPatientInfo.tsx
@@ -97,7 +97,7 @@ function HeaderPatientInfo({ servicesManager, appConfig }: withAppTypes) {
       className="hover:bg-primary-dark flex cursor-pointer items-center justify-center gap-1 rounded-lg"
       onClick={handleOnClick}
     >
-      <Icons.Legacy
+      <Icons.ByName
         name={isMixedPatients ? 'icon-multiple-patients' : 'icon-patient'}
         className="text-primary-active"
       />
diff --git a/platform/ui/src/components/InputNumber/InputNumber.tsx b/platform/ui/src/components/InputNumber/InputNumber.tsx
index 17f8a42add..3512f5c082 100644
--- a/platform/ui/src/components/InputNumber/InputNumber.tsx
+++ b/platform/ui/src/components/InputNumber/InputNumber.tsx
@@ -130,7 +130,7 @@ const InputNumber: React.FC<{
               className={arrowHorizontalClassName}
               onClick={() => decrement()}
             >
-              <Icons.Legacy name="arrow-left" />
+              <Icons.ByName name="arrow-left" />
             </div>
           )}
           <input
@@ -148,7 +148,7 @@ const InputNumber: React.FC<{
               className={arrowHorizontalClassName}
               onClick={() => increment()}
             >
-              <Icons.Legacy name="arrow-right" />
+              <Icons.ByName name="arrow-right" />
             </div>
           )}
           {showAdjustmentArrows && arrowsDirection === 'vertical' && (
@@ -177,7 +177,7 @@ const ArrowButton = ({ onClick, rotate = false }: { onClick: () => void; rotate?
     className={`text-[#726f7e] ${rotate ? 'rotate-180 transform' : ''}`}
     onClick={onClick}
   >
-    <Icons.Legacy name="arrow-down" />
+    <Icons.ByName name="arrow-down" />
   </IconButton>
 );
 
diff --git a/platform/ui/src/components/LayoutPreset/LayoutPreset.tsx b/platform/ui/src/components/LayoutPreset/LayoutPreset.tsx
index 18c9fca6be..40519d38c3 100644
--- a/platform/ui/src/components/LayoutPreset/LayoutPreset.tsx
+++ b/platform/ui/src/components/LayoutPreset/LayoutPreset.tsx
@@ -20,7 +20,7 @@ function LayoutPreset({
       }}
       data-cy={title}
     >
-      <Icons.Legacy
+      <Icons.ByName
         name={icon}
         className="group-hover:text-primary-light"
       />
diff --git a/platform/ui/src/components/Notification/Notification.tsx b/platform/ui/src/components/Notification/Notification.tsx
index ec193686c4..8ed7f0fab6 100644
--- a/platform/ui/src/components/Notification/Notification.tsx
+++ b/platform/ui/src/components/Notification/Notification.tsx
@@ -80,7 +80,7 @@ const Notification = ({
       tabIndex={0}
     >
       <div className="flex grow items-center">
-        <Icons.Legacy
+        <Icons.ByName
           name={icon}
           className={classnames('h-6 w-6', color)}
         />
diff --git a/platform/ui/src/components/PanelSection/PanelSection.tsx b/platform/ui/src/components/PanelSection/PanelSection.tsx
index 7f6c08cb52..59c8cd0bb9 100644
--- a/platform/ui/src/components/PanelSection/PanelSection.tsx
+++ b/platform/ui/src/components/PanelSection/PanelSection.tsx
@@ -17,7 +17,7 @@ const PanelSection = ({ title, children, actionIcons = [], childrenClassName })
         <div className="text-aqua-pale">{title}</div>
         <div className="flex items-center space-x-1">
           {actionIcons.map((icon, index) => (
-            <Icons.Legacy
+            <Icons.ByName
               key={index}
               name={icon.name}
               onClick={e => {
diff --git a/platform/ui/src/components/PatientInfo/PatientInfo.tsx b/platform/ui/src/components/PatientInfo/PatientInfo.tsx
index 49f750455b..c06c5947c8 100644
--- a/platform/ui/src/components/PatientInfo/PatientInfo.tsx
+++ b/platform/ui/src/components/PatientInfo/PatientInfo.tsx
@@ -40,7 +40,7 @@ function PatientInfo({
           isOpen && (
             <div className="flex py-2">
               <div className="flex pt-1">
-                <Icons.Legacy
+                <Icons.ByName
                   name="info-link"
                   className="text-primary-main w-4"
                 />
diff --git a/platform/ui/src/components/ProgressDropdown/ProgressItemDetail.tsx b/platform/ui/src/components/ProgressDropdown/ProgressItemDetail.tsx
index 482da57b41..f6c6710614 100644
--- a/platform/ui/src/components/ProgressDropdown/ProgressItemDetail.tsx
+++ b/platform/ui/src/components/ProgressDropdown/ProgressItemDetail.tsx
@@ -46,7 +46,7 @@ const ProgressItemDetail = ({ option }: { option: ProgressDropdownOption }): Rea
     <>
       {icon && (
         <div>
-          <Icons.Legacy
+          <Icons.ByName
             name={icon}
             className={iconClassNames}
           />
diff --git a/platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx b/platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx
index 0ee25777b5..01d7f48ded 100644
--- a/platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx
+++ b/platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx
@@ -143,7 +143,7 @@ const SegmentationConfig = ({
           onClick={() => setIsMinimized(!isMinimized)}
           className="flex cursor-pointer items-center pl-2 pb-[9px]"
         >
-          <Icons.Legacy
+          <Icons.ByName
             name="panel-group-open-close"
             className={classNames('h-5 w-5 cursor-pointer text-white transition duration-300', {
               'rotate-90 transform': !isMinimized,
diff --git a/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx b/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx
index 0e13a7d0c9..8fc6c12048 100644
--- a/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx
+++ b/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx
@@ -184,7 +184,7 @@ const HoveringIcons = ({
   };
 
   const createIcon = (name, action, color = null) => (
-    <Icons.Legacy
+    <Icons.ByName
       name={name}
       className={classnames(iconClass, color ?? 'text-white')}
       onClick={e => handleIconClick(e, action)}
diff --git a/platform/ui/src/components/Select/Select.tsx b/platform/ui/src/components/Select/Select.tsx
index 8bb5fad357..c219d7fe3a 100644
--- a/platform/ui/src/components/Select/Select.tsx
+++ b/platform/ui/src/components/Select/Select.tsx
@@ -23,9 +23,9 @@ const Option = props => {
       <div className="flex items-center">
         <div className="h-2 w-2">
           {props.isSelected ? (
-            <Icons.Legacy name={'checkbox-active'} />
+            <Icons.ByName name={'checkbox-active'} />
           ) : (
-            <Icons.Legacy name={'checkbox-default'} />
+            <Icons.ByName name={'checkbox-default'} />
           )}
         </div>
         <label
diff --git a/platform/ui/src/components/SelectTree/SelectTreeBreadcrumb.tsx b/platform/ui/src/components/SelectTree/SelectTreeBreadcrumb.tsx
index 847226aa78..3eb3861443 100644
--- a/platform/ui/src/components/SelectTree/SelectTreeBreadcrumb.tsx
+++ b/platform/ui/src/components/SelectTree/SelectTreeBreadcrumb.tsx
@@ -24,7 +24,7 @@ export default class SelectTreeBreadcrumb extends Component<PropType> {
           />
           <span className="cursor-pointer whitespace-nowrap">
             <span className="pr-2.5">
-              <Icons.Legacy name="fast-backward" />
+              <Icons.ByName name="fast-backward" />
             </span>
             {this.props.label}
           </span>
diff --git a/platform/ui/src/components/SidePanel/SidePanel.tsx b/platform/ui/src/components/SidePanel/SidePanel.tsx
index f04cebf46f..2027f6d949 100644
--- a/platform/ui/src/components/SidePanel/SidePanel.tsx
+++ b/platform/ui/src/components/SidePanel/SidePanel.tsx
@@ -246,7 +246,7 @@ const SidePanel = ({
                   return childComponent.disabled ? null : updateActiveTabIndex(index);
                 }}
               >
-                <Icons.Legacy
+                <Icons.ByName
                   name={childComponent.iconName}
                   className={classnames({
                     'text-primary-active': true,
@@ -278,7 +278,7 @@ const SidePanel = ({
         }}
         data-cy={`side-panel-header-${side}`}
       >
-        <Icons.Legacy
+        <Icons.ByName
           name={openStateIconName[side]}
           className="text-primary-active"
         />
@@ -329,7 +329,7 @@ const SidePanel = ({
                     data-cy={`${tab.name}-btn`}
                   >
                     <div className={getTabIconClassNames(tabs.length, tabIndex === activeTabIndex)}>
-                      <Icons.Legacy
+                      <Icons.ByName
                         name={tab.iconName}
                         className={`${tab.disabled && 'ohif-disabled'}`}
                         style={{
diff --git a/platform/ui/src/components/Snackbar/SnackbarItem.tsx b/platform/ui/src/components/Snackbar/SnackbarItem.tsx
index 1bdd3e163d..22c92f982d 100644
--- a/platform/ui/src/components/Snackbar/SnackbarItem.tsx
+++ b/platform/ui/src/components/Snackbar/SnackbarItem.tsx
@@ -33,7 +33,7 @@ const SnackbarItem = ({ options, onClose }) => {
       className={classNames(`${options.visible ? '' : hidden} sb-item`, typeClasses[options.type])}
     >
       <div className="flex">
-        <Icons.Legacy
+        <Icons.ByName
           name={iconClasses[options.type]}
           className="mt-[1px] h-5 w-5"
         />
@@ -50,7 +50,7 @@ const SnackbarItem = ({ options, onClose }) => {
           onClick={handleClose}
           className="relative left-[3px] top-[-3px] ml-auto flex h-5 w-5 items-center justify-center self-start rounded-full text-[#0944b3]"
         >
-          <Icons.Legacy
+          <Icons.ByName
             name="close"
             className="text-black"
           />
diff --git a/platform/ui/src/components/SplitButton/SplitButton.tsx b/platform/ui/src/components/SplitButton/SplitButton.tsx
index 15c1859238..7e246a334e 100644
--- a/platform/ui/src/components/SplitButton/SplitButton.tsx
+++ b/platform/ui/src/components/SplitButton/SplitButton.tsx
@@ -71,7 +71,7 @@ const DefaultListItemRenderer = props => {
     >
       {icon && (
         <span className="mr-4">
-          <Icons.Legacy
+          <Icons.ByName
             name={icon}
             className="h-[28px] w-[28px]"
           />
@@ -93,7 +93,7 @@ const SplitButton = ({
   items,
   renderer = null,
   onInteraction,
-  Component = Icons.Legacy,
+  Component = Icons.ByName,
 }) => {
   const { t } = useTranslation('Buttons');
   const [state, setState] = useState({ isHovering: false, isExpanded: false });
@@ -148,7 +148,7 @@ const SplitButton = ({
                 content={secondary.tooltip}
                 className="h-full"
               >
-                <Icons.Legacy
+                <Icons.ByName
                   name={secondary.icon}
                   className={classes.SecondaryIcon({ ...state })}
                 />
diff --git a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx
index ba5882ee34..23bef721c5 100644
--- a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx
+++ b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx
@@ -59,7 +59,7 @@ function ThumbnailTracked({
               </div>
             }
           >
-            <Icons.Legacy
+            <Icons.ByName
               name={trackedIcon}
               className="text-primary-light mb-2 w-4"
             />
diff --git a/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx b/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx
index e113329e26..ab41ac6362 100644
--- a/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx
+++ b/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx
@@ -25,7 +25,7 @@ const ToolbarButton = ({
 }) => {
   const shouldShowDropdown = !!dropdownContent;
   const iconEl = icon ? (
-    <Icons.Legacy name={icon} />
+    <Icons.ByName name={icon} />
   ) : (
     <div>{label || 'Missing icon and label'}</div>
   );
diff --git a/platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx b/platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx
index b703302075..24f16cf936 100644
--- a/platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx
+++ b/platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx
@@ -144,7 +144,7 @@ const TooltipClipboard = ({ children, text = '' }) => {
             <>
               {children}
               <div className="border-secondary-light ml-2 border-l pl-2">
-                <Icons.Legacy
+                <Icons.ByName
                   name="clipboard"
                   className="w-4 text-white"
                 />
diff --git a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx
index 99a20e0d0a..3042efc018 100644
--- a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx
+++ b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx
@@ -134,12 +134,12 @@ const ViewportActionBar = ({
       )}
       {showArrows && (
         <>
-          <Icons.Legacy
+          <Icons.ByName
             className={`ml-auto ${arrowClasses}`}
             name="chevron-prev"
             onClick={() => onArrowsClick('left')}
           />
-          <Icons.Legacy
+          <Icons.ByName
             className={arrowClasses}
             name="chevron-next"
             onClick={() => onArrowsClick('right')}
diff --git a/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx b/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx
index 0db77bdcef..bd55a782b0 100644
--- a/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx
+++ b/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx
@@ -5,11 +5,10 @@ import Typography from '../Typography';
 import Input from '../Input';
 import Tooltip from '../Tooltip';
 import IconButton from '../IconButton';
-import Icon from '../Icon';
 import Select from '../Select';
 import InputLabelWrapper from '../InputLabelWrapper';
 import Button, { ButtonEnums } from '../Button';
-
+import { Icons } from '@ohif/ui-next';
 const FILE_TYPE_OPTIONS = [
   {
     value: 'jpg',
@@ -315,7 +314,7 @@ const ViewportDownloadForm = ({
                   size="small"
                   rounded="full"
                 >
-                  <Icons.Legacy name={keepAspect ? 'link' : 'unlink'} />
+                  <Icons.ByName name={keepAspect ? 'link' : 'unlink'} />
                 </IconButton>
               </Tooltip>
             </div>