From 86c1b3118903a7b0397375daa0d3bd5be41edd08 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Tue, 13 May 2025 16:05:29 +0200
Subject: [PATCH 1/8] Memoized icons in refinery

---
 src/components/projects/ProjectCard.tsx       |  5 ++-
 .../projects/SampleProjectsDropdown.tsx       | 15 ++++----
 .../attributeId/AttributeCalculations.tsx     |  7 ++--
 .../attributeId/LLM/LLMPlaygroundModal.tsx    |  5 ++-
 .../attributeId/LLMResponseConfig.tsx         |  5 ++-
 .../data-browser/DataBrowserRecords.tsx       |  7 ++--
 .../data-browser/DataBrowserSidebar.tsx       |  9 +++--
 .../projectId/data-browser/RecordList.tsx     |  7 ++--
 .../projectId/data-browser/SearchGroups.tsx   | 11 +++---
 .../modals/SimilaritySeachModal.tsx           |  5 ++-
 .../projectId/edit-records/EditRecords.tsx    | 11 +++---
 .../projectId/edit-records/ExplainModal.tsx   |  5 ++-
 .../edit-records/SyncRecordsModal.tsx         |  7 ++--
 .../projectId/heuristics/HeuristicsHeader.tsx |  3 +-
 .../labeling-function/CalculationProgress.tsx |  7 ++--
 .../heuristicId/shared/HeuristicsLayout.tsx   |  3 +-
 .../main-component/LabelingSettingsModal.tsx  | 37 ++++++++++---------
 .../main-component/NavigationBarBottom.tsx    |  3 +-
 .../main-component/NavigationBarTop.tsx       |  5 ++-
 .../sub-components/LabelSelectionBox.tsx      |  3 +-
 .../sub-components/LabelSettingsBox.tsx       |  7 ++--
 .../sub-components/LabelingInfoTableModal.tsx |  3 +-
 .../sub-components/LabelingSuiteLabeling.tsx  | 13 ++++---
 .../LabelingSuiteOverviewTable.tsx            |  5 ++-
 .../LabelingSuiteTaskHeader.tsx               |  3 +-
 .../projectId/lookup-lists/LookupListCard.tsx |  3 +-
 .../lookupListId/LookupListsDetails.tsx       |  3 +-
 .../overview/ProjectOverviewCards.tsx         |  7 ++--
 .../projectId/playground/PlaygroundSearch.tsx |  3 +-
 .../PlaygroundSearchMetaFilterModal.tsx       |  5 ++-
 .../projectId/playground/QuestionHistory.tsx  |  3 +-
 .../playground/QuestionPlayground.tsx         |  5 ++-
 .../evaluationRunId/EvaluationRunDetails.tsx  | 13 ++++---
 .../projectId/settings/DataSchema.tsx         |  5 ++-
 .../projectId/settings/ProjectSettings.tsx    |  5 ++-
 .../settings/ProjectSnapshotExportModal.tsx   |  3 +-
 .../embeddings/AddNewEmbeddingModal.tsx       |  3 +-
 .../settings/embeddings/Embeddings.tsx        |  9 +++--
 .../labeling-tasks/ChangeColorModal.tsx       |  3 +-
 .../settings/labeling-tasks/LabelingTasks.tsx |  7 ++--
 .../labeling-tasks/RenameLabelModal.tsx       | 11 +++---
 src/components/shared/comments/Comments.tsx   |  3 +-
 .../shared/comments/CommentsMainSection.tsx   |  5 ++-
 .../shared/comments/DisplayComments.tsx       | 13 ++++---
 .../shared/crypted-field/CryptedField.tsx     |  5 ++-
 .../shared/grid-cards/GridCards.tsx           |  7 ++--
 src/components/shared/header/Header.tsx       |  7 ++--
 src/components/shared/layout/Layout.tsx       |  9 +++--
 .../NotificationCenter.tsx                    | 10 ++---
 .../shared/record-display/RecordDisplay.tsx   |  3 +-
 src/components/shared/sidebar/Sidebar.tsx     | 20 +++++-----
 .../shared/sidebar/VersionOverviewModal.tsx   |  3 +-
 src/components/shared/upload/ModalUpload.tsx  |  3 +-
 .../upload/helper-components/UploadField.tsx  |  3 +-
 .../helper-components/UploadWrapper.tsx       |  3 +-
 src/components/users/UsersList.tsx            |  5 ++-
 submodules/react-components                   |  2 +-
 57 files changed, 216 insertions(+), 164 deletions(-)

diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx
index 04e6232c..0f494e13 100644
--- a/src/components/projects/ProjectCard.tsx
+++ b/src/components/projects/ProjectCard.tsx
@@ -8,10 +8,11 @@ import { Tooltip } from "@nextui-org/react";
 import { useRouter } from "next/router";
 import { useDispatch, useSelector } from "react-redux";
 import { NOT_AVAILABLE, UNKNOWN_USER } from "@/src/util/constants";
-import { IconArrowRight, IconX } from "@tabler/icons-react";
+import { IconArrowRight } from "@tabler/icons-react";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { deleteProjectPost } from "@/src/services/base/project";
 import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
+import { MemoIconX } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function ProjectCard(props: ProjectCardProps) {
     const router = useRouter();
@@ -66,7 +67,7 @@ export default function ProjectCard(props: ProjectCardProps) {
                     {(isAdmin && props.project.status !== ProjectStatus.INIT_SAMPLE_PROJECT) &&
                         <div className="absolute top-0 left-0 cursor-pointer" onClick={() => adminOpenOrDeleteProject(props.project)}>
                             <Tooltip content={TOOLTIPS_DICT.PROJECTS.QUICK_DELETE} color="invert" offset={2} placement="right">
-                                <IconX className="h-6 w-6 text-gray-500" />
+                                <MemoIconX className="h-6 w-6 text-gray-500" />
                             </Tooltip>
                         </div>
                     }
diff --git a/src/components/projects/SampleProjectsDropdown.tsx b/src/components/projects/SampleProjectsDropdown.tsx
index eee185da..5ab29b10 100644
--- a/src/components/projects/SampleProjectsDropdown.tsx
+++ b/src/components/projects/SampleProjectsDropdown.tsx
@@ -6,12 +6,13 @@ import { selectAllProjects } from '@/src/reduxStore/states/project';
 import { ModalButton, ModalEnum } from '@/src/types/shared/modal';
 import { closeModal, openModal } from '@/src/reduxStore/states/modal';
 import Modal from '../shared/modal/Modal';
-import { IconAlertTriangle, IconArrowDown, IconFishHook, IconMessageCircle, IconNews, IconQuestionMark, IconScreenshot } from '@tabler/icons-react';
+import { IconAlertTriangle, IconMessageCircle, IconNews, IconQuestionMark, IconScreenshot } from '@tabler/icons-react';
 import { setSearchGroupsStore } from '@/src/reduxStore/states/pages/data-browser';
 import { selectProjectIdSampleProject, setProjectIdSampleProject } from '@/src/reduxStore/states/tmp';
 import { createSampleProject } from '@/src/services/base/project';
 import KernButton from '@/submodules/react-components/components/kern-button/KernButton';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { MemoIconAlertTriangle, MemoIconFishHook, MemoIconMessageCircle, MemoIconNews, MemoIconQuestionMark, MemoIconScreenshot } from '@/submodules/react-components/components/kern-icons/icons';
 
 const ACCEPT_BUTTON = { buttonCaption: "Create", closeAfterClick: false, useButton: true, disabled: true };
 
@@ -107,7 +108,7 @@ export default function SampleProjectsDropdown() {
                                         importSampleProject("Clickbait", "Clickbait");
                                     }}>
                                     <div className="flex flex-row items-center">
-                                        <IconFishHook className="h-5 w-5 inline-block" />
+                                        <MemoIconFishHook className="h-5 w-5 inline-block" />
                                         <span className="ml-2">Clickbait</span>
                                     </div>
                                     <div className="mt-2">Binary classification for detecting nudging articles.</div>
@@ -133,7 +134,7 @@ export default function SampleProjectsDropdown() {
                                         importSampleProject("Conversational AI", "Conversational AI");
                                     }}>
                                     <div className="flex flex-row items-center">
-                                        <IconMessageCircle className="h-5 w-5 inline-block" />
+                                        <MemoIconMessageCircle className="h-5 w-5 inline-block" />
                                         <span className="ml-2">Conversational AI</span>
                                     </div>
                                     <div className="mt-2">Detecting intent within conversational lines.</div>
@@ -159,7 +160,7 @@ export default function SampleProjectsDropdown() {
                                         importSampleProject("AG News", "AG News");
                                     }}>
                                     <div className="flex flex-row items-center">
-                                        <IconNews className="h-5 w-5 inline-block" />
+                                        <MemoIconNews className="h-5 w-5 inline-block" />
                                         <span className="ml-2">AG News</span>
                                     </div>
                                     <div className="mt-2">Modelling topics of headline news.</div>
@@ -185,7 +186,7 @@ export default function SampleProjectsDropdown() {
                                         importSampleProject("Global Guard [References]", "Global Guard [References]");
                                     }}>
                                     <div className="flex flex-row items-center">
-                                        <IconScreenshot className="h-5 w-5 inline-block" />
+                                        <MemoIconScreenshot className="h-5 w-5 inline-block" />
                                         <span className="ml-2">DEV Global Guard [References]</span>
                                     </div>
                                     <div className="mt-2">References right after the wizard went through.</div>
@@ -200,7 +201,7 @@ export default function SampleProjectsDropdown() {
                                         importSampleProject("Global Guard [Questions]", "Global Guard [Questions]");
                                     }}>
                                     <div className="flex flex-row items-center">
-                                        <IconQuestionMark className="h-5 w-5 inline-block" />
+                                        <MemoIconQuestionMark className="h-5 w-5 inline-block" />
                                         <span className="ml-2">DEV Global Guard [Questions]</span>
                                     </div>
                                     <div className="mt-2">Questions right after the wizard went through.</div>
@@ -235,7 +236,7 @@ export default function SampleProjectsDropdown() {
                     </div>
                     {projectNameExists && (<div className="text-red-700 text-xs mt-2 text-left">Project title exists</div>)}
                     <div className="flex flex-row mt-2">
-                        <IconAlertTriangle className="h-5 w-5 text-yellow-700" />
+                        <MemoIconAlertTriangle className="h-5 w-5 text-yellow-700" />
                         <label className="text-yellow-700 text-xs italic ml-2 text-left">The first sample project of a specific type can use the
                             default name, but after the name is taken, the user needs a custom name.</label>
                     </div>
diff --git a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
index 583f33cb..2394f8b3 100644
--- a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
+++ b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
@@ -40,6 +40,7 @@ import useRefFor from "@/submodules/react-components/hooks/useRefFor";
 import { simpleDictCompare } from "@/submodules/javascript-functions/validations";
 import { LLM_CODE_TEMPLATE_EXAMPLES, LLM_CODE_TEMPLATE_OPTIONS } from "./LLM/llmTemplates";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconAlertTriangleFilled, MemoIconArrowLeft, MemoIconCircleCheckFilled } from "@/submodules/react-components/components/kern-icons/icons";
 
 const EDITOR_OPTIONS = { theme: 'vs-light', language: 'python', readOnly: false };
 
@@ -324,7 +325,7 @@ export default function AttributeCalculation() {
                             e.preventDefault();
                             router.push(`/projects/${projectId}/settings`);
                         }} className="text-green-800 text-sm font-medium">
-                            <IconArrowLeft className="h-5 w-5 inline-block text-green-800" />
+                            <MemoIconArrowLeft className="h-5 w-5 inline-block text-green-800" />
                             <span className="leading-5">Go back</span>
                         </a>
                         {!isHeaderNormal && <div className="mx-4 text-sm leading-5 font-medium text-gray-500 inline-block">{currentAttribute.name}</div>}
@@ -493,10 +494,10 @@ export default function AttributeCalculation() {
                         </div>}
                     {currentAttribute.state !== AttributeState.RUNNING && currentAttribute.state !== AttributeState.INITIAL && <div className="flex flex-row items-center">
                         {currentAttribute.state == AttributeState.USABLE && <Tooltip content={TOOLTIPS_DICT.GENERAL.SUCCESSFULLY_CREATED} color="invert" className="cursor-auto">
-                            <IconCircleCheckFilled className="h-6 w-6 text-green-500" />
+                            <MemoIconCircleCheckFilled className="h-6 w-6 text-green-500" />
                         </Tooltip>}
                         {currentAttribute.state == AttributeState.FAILED && <Tooltip content={TOOLTIPS_DICT.GENERAL.ERROR} color="invert" className="cursor-auto">
-                            <IconAlertTriangleFilled className="h-6 w-6 text-red-500" />
+                            <MemoIconAlertTriangleFilled className="h-6 w-6 text-red-500" />
                         </Tooltip>}
                         <div className="py-6 text-sm leading-5 font-normal text-gray-500">
                             {currentAttribute.state === 'FAILED' ? 'Attribute calculation ran into errors.' : 'Attribute calculation finished successfully.'}
diff --git a/src/components/projects/projectId/attributes/attributeId/LLM/LLMPlaygroundModal.tsx b/src/components/projects/projectId/attributes/attributeId/LLM/LLMPlaygroundModal.tsx
index 33f4df72..aae0c0fe 100644
--- a/src/components/projects/projectId/attributes/attributeId/LLM/LLMPlaygroundModal.tsx
+++ b/src/components/projects/projectId/attributes/attributeId/LLM/LLMPlaygroundModal.tsx
@@ -19,6 +19,7 @@ import { runAttributeLlmPlayground } from "@/src/services/base/attribute";
 import { jsonCopy } from "@/submodules/javascript-functions/general";
 import { TEMPLATE_EXAMPLES, TEMPLATE_OPTIONS } from "./llmTemplates";
 import { LLM_PROVIDER_OPTIONS, postProcessLLMPlaygroundRecordData } from "@/src/util/components/projects/projectId/settings/attribute-calculation-helper";
+import { MemoIconPlayCardStar, MemoIconTerminal } from "@/submodules/react-components/components/kern-icons/icons";
 
 const ACCEPT_BUTTON = { buttonCaption: "Use current values for attribute", useButton: true };
 const DISPLAY_STATES = [AttributeState.AUTOMATICALLY_CREATED, AttributeState.UPLOADED, AttributeState.USABLE]
@@ -133,7 +134,7 @@ export default function LLMPlaygroundModal() {
         <div className="pl-2 pr-5 max-h-[calc(100vh-15rem)] overflow-y-auto">
             <div className="flex flex-row items-center justify-center">
                 <span className="text-lg flex flex-row gap-x-2 text-gray-900 font-medium items-center">
-                    LLM Playground <IconPlayCardStar className="h-6 w-6" />
+                    LLM Playground <MemoIconPlayCardStar className="h-6 w-6" />
                 </span>
             </div>
             <div className="text-left">
@@ -189,7 +190,7 @@ export default function LLMPlaygroundModal() {
                     <div className="flex gap-x-2">
                         <div className='py-2'>
                             <div className='flex items-center justify-center bg-white h-6 w-6 rounded-lg border border-gray-300'>
-                                <IconTerminal className='h-4 w-4 text-gray-500' />
+                                <MemoIconTerminal className='h-4 w-4 text-gray-500' />
                             </div>
                         </div>
                         <div className='text-sm font-mono text-gray-900 text-center leading-10'>LLM Answer</div>
diff --git a/src/components/projects/projectId/attributes/attributeId/LLMResponseConfig.tsx b/src/components/projects/projectId/attributes/attributeId/LLMResponseConfig.tsx
index 0f05ed35..efd36b32 100644
--- a/src/components/projects/projectId/attributes/attributeId/LLMResponseConfig.tsx
+++ b/src/components/projects/projectId/attributes/attributeId/LLMResponseConfig.tsx
@@ -4,6 +4,7 @@ import { IconAdjustmentsAlt, IconAdjustmentsOff, IconSettings, IconTerminal, Ico
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 import LLMResponsePlayground from "./LLMResponsePlayground";
 import { LLMResponseConfigProps } from "./LLM/types";
+import { MemoIconTerminal, MemoIconUser } from "@/submodules/react-components/components/kern-icons/icons";
 
 
 export default function LLMResponseConfig(props: LLMResponseConfigProps) {
@@ -65,8 +66,8 @@ function TemplatePrompt(props: TemplatePromptProps) {
             <div className="flex gap-x-2">
                 <div className='py-2'>
                     <div className='flex items-center justify-center bg-white h-6 w-6 rounded-lg border border-gray-300'>
-                        {props.type == "SYSTEM" ? <IconTerminal className='h-4 w-4 text-gray-500' />
-                            : <IconUser className='h-4 w-4 text-gray-500' />}
+                        {props.type == "SYSTEM" ? <MemoIconTerminal className='h-4 w-4 text-gray-500' />
+                            : <MemoIconUser className='h-4 w-4 text-gray-500' />}
                     </div>
                 </div>
                 <div className='text-sm font-mono text-gray-900 text-center leading-10'>
diff --git a/src/components/projects/projectId/data-browser/DataBrowserRecords.tsx b/src/components/projects/projectId/data-browser/DataBrowserRecords.tsx
index 2bec5c7a..ce371e11 100644
--- a/src/components/projects/projectId/data-browser/DataBrowserRecords.tsx
+++ b/src/components/projects/projectId/data-browser/DataBrowserRecords.tsx
@@ -19,6 +19,7 @@ import Export from '@/src/components/shared/export/Export';
 import { LabelingLinkType } from '@/src/types/components/projects/projectId/labeling/labeling-main-component';
 import { Fragment, useEffect } from 'react';
 import KernButton from '@/submodules/react-components/components/kern-button/KernButton';
+import { MemoIconAlertTriangleFilled, MemoIconChartCircles, MemoIconFilter } from '@/submodules/react-components/components/kern-icons/icons';
 
 export default function DataBrowserRecords(props: DataBrowserRecordsProps) {
     const dispatch = useDispatch();
@@ -105,7 +106,7 @@ export default function DataBrowserRecords(props: DataBrowserRecordsProps) {
                         <div className="rounded-md bg-yellow-50 p-2">
                             <div className="flex items-center">
                                 <div className="flex-shrink-0">
-                                    <IconAlertTriangleFilled className="h-5 w-5 text-yellow-400" />
+                                    <MemoIconAlertTriangleFilled className="h-5 w-5 text-yellow-400" />
                                 </div>
                                 {activeSlice?.static ? (<div className="ml-3">
                                     <p className="text-sm font-medium text-yellow-800">Static data slice active. Filter
@@ -143,12 +144,12 @@ export default function DataBrowserRecords(props: DataBrowserRecordsProps) {
                     <div className="whitespace-pre-line break-all rounded-full items-center py-0.5 px-2.5 text-sm font-medium border border-green-700 bg-green-100 text-green-700 grid grid-cols-2 mr-2"
                         style={{ gridTemplateColumns: 'auto max-content' }}>
                         <div className="flex items-center">
-                            <IconFilter className="h-4 w-4 mr-1" />
+                            <MemoIconFilter className="h-4 w-4 mr-1" />
                             <div className="whitespace-pre-line break-all m-auto">{searchText}</div>
                         </div>
                     </div>
                     {!(i == activeSearchParams.length - 1 && j == searchParam.splittedText.length - 1) && <Tooltip content={TOOLTIPS_DICT.DATA_BROWSER.INTERSECTION} color="invert" placement="top">
-                        <IconChartCircles className="h-4 w-4 mr-1" />
+                        <MemoIconChartCircles className="h-4 w-4 mr-1" />
                     </Tooltip>}
                 </div>))}
             </Fragment>))}
diff --git a/src/components/projects/projectId/data-browser/DataBrowserSidebar.tsx b/src/components/projects/projectId/data-browser/DataBrowserSidebar.tsx
index fd101988..63cb8f04 100644
--- a/src/components/projects/projectId/data-browser/DataBrowserSidebar.tsx
+++ b/src/components/projects/projectId/data-browser/DataBrowserSidebar.tsx
@@ -16,6 +16,7 @@ import SearchGroups from './SearchGroups';
 import DeleteSliceModal from './modals/DeleteSliceModal';
 import DataSliceInfoModal from './modals/DataSliceInfoModal';
 import MultilineTooltip from '@/src/components/shared/multilines-tooltip/MultilineTooltip';
+import { MemoIconAlertTriangle, MemoIconInfoCircle, MemoIconLayoutSidebar, MemoIconTrash } from '@/submodules/react-components/components/kern-icons/icons';
 
 export default function DataBrowserSidebar() {
     const dispatch = useDispatch();
@@ -82,7 +83,7 @@ export default function DataBrowserSidebar() {
         <div className={`flex flex-col select-none pt-4 px-4 pb-20 overflow-y-auto h-full ${style.sidebarWidthOpen} ${isSearchMenuVisible ? style.searchMenuWidth : null}`}>
             <div className="flex flex-row items-center">
                 {isSearchMenuOpen && <div className="bg-white text-lg font-medium text-gray-900 pr-3">Existing data slices</div>}
-                <IconLayoutSidebar onClick={openSearchMenu} className={`w-6 h-6 text-gray-900 cursor-pointer ${isSearchMenuOpen ? style.rotateTransform : null}`} />
+                <MemoIconLayoutSidebar onClick={openSearchMenu} className={`w-6 h-6 text-gray-900 cursor-pointer ${isSearchMenuOpen ? style.rotateTransform : null}`} />
             </div>
             {(isSearchMenuOpen || isSearchMenuVisible) && <div className={`transitionAll ${(isSearchMenuVisible && isSearchMenuOpen) ? 'opacity-100' : 'opacity-0'}`}>
                 {sliceNames.length > 6 && <div className="mt-2">
@@ -98,7 +99,7 @@ export default function DataBrowserSidebar() {
                             <button onClick={() => toggleSlice(slice)} style={{ width: '170px' }}
                                 className={`cursor-pointer inline-flex border items-center justify-between px-2.5 py-1.5 shadow-sm text-sm font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none ${activeSlice?.id == slice.id ? 'ring-blue-500 ring-2' : ' border-gray-200'}`}>
                                 <label className="cursor-pointer mr-2" onClick={(e) => { updateSliceInfo(slice); e.stopPropagation(); }}>
-                                    <IconInfoCircle className={`w-6 h-6 ${slice.color.textColor} ${slice.color.fillColor}`} />
+                                    <MemoIconInfoCircle className={`w-6 h-6 ${slice.color.textColor} ${slice.color.fillColor}`} />
                                 </label>
                                 <label className={`text-gray-700 truncate cursor-pointer ${slice.sliceType == Slice.STATIC_OUTLIER ? 'text-xs whitespace-pre' : 'text-sm'}`}>
                                     {slice.displayName}</label>
@@ -106,7 +107,7 @@ export default function DataBrowserSidebar() {
                                     dispatch(setModalStates(ModalEnum.DELETE_SLICE, { sliceId: slice.id, open: true }));
                                     e.stopPropagation();
                                 }}>
-                                    <IconTrash className="text-red-700 h-5 w-5 ml-2 cursor-pointer" />
+                                    <MemoIconTrash className="text-red-700 h-5 w-5 ml-2 cursor-pointer" />
                                 </label>
                             </button>
                         </Tooltip>))}
@@ -122,7 +123,7 @@ export default function DataBrowserSidebar() {
                         {(!(activeSlice?.sliceType == Slice.STATIC_OUTLIER || !(additionalData.displayOutdatedWarning || (activeSlice?.static && additionalData.staticDataSliceCurrentCount != null && activeSlice.count != additionalData.staticDataSliceCurrentCount)))) &&
                             <Tooltip content={<MultilineTooltip tooltipLines={['Outdated slice', 'Save to update']} />} color="invert" placement="right" className="cursor-auto">
                                 <div className="flex items-center tooltip-right text-gray-400">
-                                    <IconAlertTriangle className="w-5 h-5" />
+                                    <MemoIconAlertTriangle className="w-5 h-5" />
                                 </div>
                             </Tooltip>
                         }
diff --git a/src/components/projects/projectId/data-browser/RecordList.tsx b/src/components/projects/projectId/data-browser/RecordList.tsx
index 24742eb5..99416372 100644
--- a/src/components/projects/projectId/data-browser/RecordList.tsx
+++ b/src/components/projects/projectId/data-browser/RecordList.tsx
@@ -10,11 +10,12 @@ import { UserRole } from "@/src/types/shared/sidebar";
 import { DATA_BROWSER_TABLE_COLUMN_HEADERS } from "@/src/util/components/projects/projectId/data-browser/data-browser-helper";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { Tooltip } from "@nextui-org/react";
-import { IconAngle, IconArrowRight, IconEdit, IconNotes } from "@tabler/icons-react";
+import { IconAngle, IconArrowRight } from "@tabler/icons-react";
 import { useDispatch, useSelector } from "react-redux";
 import SimilaritySearchModal from "./modals/SimilaritySeachModal";
 import RecordCommentsModal from "./modals/RecordCommentsModal";
 import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
+import { MemoIconEdit, MemoIconNotes } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function RecordList(props: RecordListProps) {
     const dispatch = useDispatch();
@@ -32,7 +33,7 @@ export default function RecordList(props: RecordListProps) {
                 {recordComments[record.id] && <div className="cursor-pointer absolute top-10 right-4"
                     onClick={() => dispatch(setModalStates(ModalEnum.RECORD_COMMENTS, { commentsData: recordComments[record.id], open: true }))}>
                     <Tooltip content={TOOLTIPS_DICT.DATA_BROWSER.RECORD_COMMENTS} color="invert" placement="left">
-                        <IconNotes className="h-4 w-4" />
+                        <MemoIconNotes className="h-4 w-4" />
                     </Tooltip>
                 </div>}
 
@@ -73,7 +74,7 @@ export default function RecordList(props: RecordListProps) {
             </div>
             {user?.role == UserRole.ENGINEER && <div className="p-2 cursor-pointer absolute right-2 top-2">
                 <Tooltip content={TOOLTIPS_DICT.DATA_BROWSER.EDIT_RECORD} color="invert">
-                    <IconEdit className="h-4 w-4" onClick={() => props.editRecord(index)} />
+                    <MemoIconEdit className="h-4 w-4" onClick={() => props.editRecord(index)} />
                 </Tooltip></div>}
         </div >))
         }
diff --git a/src/components/projects/projectId/data-browser/SearchGroups.tsx b/src/components/projects/projectId/data-browser/SearchGroups.tsx
index 23757d84..121583d0 100644
--- a/src/components/projects/projectId/data-browser/SearchGroups.tsx
+++ b/src/components/projects/projectId/data-browser/SearchGroups.tsx
@@ -29,6 +29,7 @@ import { getWeakSupervisionRun } from "@/src/services/base/heuristic";
 import { getRecordsByStaticSlice, searchRecordsExtended } from "@/src/services/base/data-browser";
 import { staticDataSlicesCurrentCount } from "@/src/services/base/dataSlices";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconArrowDown, MemoIconArrowsRandom, MemoIconFilterOff, MemoIconPlus, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 
 const GROUP_SORT_ORDER = 0;
 let GLOBAL_SEARCH_GROUP_COUNT = 0;
@@ -605,7 +606,7 @@ export default function SearchGroups() {
                                     {fullSearchStore[group.key].groupElements.length > 1 &&
                                         <div onClick={() => removeSearchGroupItem(group.key, index)}
                                             className="mt-2 cursor-pointer flex justify-center hover:border-transparent hover:bg-transparent border-transparent bg-transparent px-0">
-                                            <IconTrash className="text-gray-900 cursor-pointer h-4 w-4" />
+                                            <MemoIconTrash className="text-gray-900 cursor-pointer h-4 w-4" />
                                         </div>}
                                 </div>
                                 <div className="flex-grow mr-2.5 flex flex-col  mt-2 ">
@@ -650,7 +651,7 @@ export default function SearchGroups() {
                                 {index == fullSearchStore[group.key].groupElements.length - 1 &&
                                     <span onClick={() => addSearchGroupItem(groupItem, group.key)}
                                         className="bg-gray-100 text-gray-800 cursor-pointer p-1 rounded-md hover:bg-gray-300">
-                                        <IconPlus className="cursor-pointer" />
+                                        <MemoIconPlus className="cursor-pointer" />
                                     </span>}
                             </div>
                         </div>))}
@@ -690,7 +691,7 @@ export default function SearchGroups() {
                                         className="h-8 w-11 text-sm border-gray-300 rounded-md placeholder-italic border text-gray-900 pl-2 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100 disabled:opacity-50 disabled:cursor-not-allowed" />
                                     <span className="text-sm mx-0.5 font-dmMono">%</span>
                                     {fullSearchStore[group.key].groupElements['weakSupervisionConfidence'] && fullSearchStore[group.key].groupElements['weakSupervisionConfidence']['active'] && <Tooltip content={TOOLTIPS_DICT.DATA_BROWSER.CLEAR_WS_CONFIDENCE} color="invert">
-                                        <IconFilterOff className="text-red-700 cursor-pointer" onClick={() => clearConfidence(group.key, 'weakSupervisionConfidence')} />
+                                        <MemoIconFilterOff className="text-red-700 cursor-pointer" onClick={() => clearConfidence(group.key, 'weakSupervisionConfidence')} />
                                     </Tooltip>}
                                 </div>
                             </div>
@@ -721,7 +722,7 @@ export default function SearchGroups() {
                                     <div className="flex items-center cursor-pointer" onClick={() => setSortFormControl(index, group)}>
                                         <div className={`p-0 cursor-pointer ${groupItem['direction'] == 1 ? style.rotateTransform : null}`}>
                                             <div className="ml-2 mr-2 h-4 w-4 border-gray-300 border rounded cursor-pointer flex justify-center items-center hover:bg-gray-200">
-                                                {groupItem['active'] != 0 && <IconArrowDown className="text-gray-500 h-3 w-3" />}
+                                                {groupItem['active'] != 0 && <MemoIconArrowDown className="text-gray-500 h-3 w-3" />}
                                             </div>
                                         </div>
                                         <span className="ml-2 text-sm truncate w-full">{groupItem['displayName']}</span>
@@ -738,7 +739,7 @@ export default function SearchGroups() {
                                         <span className="ml-2 inline-flex items-center px-2.5 text-sm rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                                             Seed
                                             <div className="ml-2 cursor-pointer" onClick={() => setRandomSeedGroup()}>
-                                                <IconArrowsRandom />
+                                                <MemoIconArrowsRandom />
                                             </div>
                                         </span>
                                         <input value={groupItem['seedString']}
diff --git a/src/components/projects/projectId/data-browser/modals/SimilaritySeachModal.tsx b/src/components/projects/projectId/data-browser/modals/SimilaritySeachModal.tsx
index 923c28f1..d589699f 100644
--- a/src/components/projects/projectId/data-browser/modals/SimilaritySeachModal.tsx
+++ b/src/components/projects/projectId/data-browser/modals/SimilaritySeachModal.tsx
@@ -13,6 +13,7 @@ import { filterAttributesSSGroup, getPlaceholderText, prepareAttFilter, prepareF
 import { checkDecimalPatterns, getAttributeType, getFilterIntegrationOperatorTooltip } from "@/src/util/components/projects/projectId/data-browser/search-operators-helper";
 import { getColorForDataType } from "@/src/util/components/projects/projectId/settings/data-schema-helper";
 import { extendArrayElementsByUniqueId } from "@/submodules/javascript-functions/id-prep";
+import { MemoIconPlus, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
 import { IconPlus, IconTrash } from "@tabler/icons-react";
 import { useCallback, useEffect, useState } from "react";
@@ -169,7 +170,7 @@ export default function SimilaritySearchModal() {
                         {filterAttributesForm.length > 1 &&
                             <div onClick={() => removeFilterAttributesSS(index)}
                                 className="mt-2 cursor-pointer flex justify-center hover:border-transparent hover:bg-transparent border-transparent bg-transparent px-0">
-                                <IconTrash className="text-gray-900 cursor-pointer h-4 w-4" />
+                                <MemoIconTrash className="text-gray-900 cursor-pointer h-4 w-4" />
                             </div>}
                     </div>
                     <div className="flex-grow mr-2.5 flex flex-col  mt-2 ">
@@ -206,7 +207,7 @@ export default function SimilaritySearchModal() {
                     {index == filterAttributesForm.length - 1 &&
                         <span onClick={() => addFilterAttributesSS()}
                             className="bg-gray-100 text-gray-800 cursor-pointer p-1 rounded-md hover:bg-gray-300">
-                            <IconPlus className="cursor-pointer" />
+                            <MemoIconPlus className="cursor-pointer" />
                         </span>}
                 </div>
             </div>))}
diff --git a/src/components/projects/projectId/edit-records/EditRecords.tsx b/src/components/projects/projectId/edit-records/EditRecords.tsx
index 50763ef9..62bf51be 100644
--- a/src/components/projects/projectId/edit-records/EditRecords.tsx
+++ b/src/components/projects/projectId/edit-records/EditRecords.tsx
@@ -17,6 +17,7 @@ import { useWebsocket } from "@/submodules/react-components/hooks/web-socket/use
 import { scrollElementIntoView } from "@/submodules/javascript-functions/scrollHelper";
 import { Application, CurrentPage } from "@/submodules/react-components/hooks/web-socket/constants";
 import { selectOrganizationId } from "@/src/reduxStore/states/general";
+import { MemoIconAlertCircle, MemoIconAlertTriangle, MemoIconAlertTriangleFilled, MemoIconBallpen, MemoIconBallpenOff } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function EditRecords() {
     const dispatch = useDispatch();
@@ -110,7 +111,7 @@ export default function EditRecords() {
                                                     <span>{`${record.data[attribute.name]}`}</span>
                                                     {erdData.cachedRecordChanges[buildAccessKey(record.id, attribute.name)] && <div className="absolute -left-5 top-0 text-yellow-500">
                                                         <Tooltip content={TOOLTIPS_DICT.EDIT_RECORDS.CACHED_VALUES} color="invert" placement="right" className="cursor-auto">
-                                                            <IconAlertTriangleFilled size={16} stroke={2} />
+                                                            <MemoIconAlertTriangleFilled size={16} stroke={2} />
                                                         </Tooltip>
                                                     </div>}
                                                 </span>) : <NotPresentInRecord />}
@@ -121,7 +122,7 @@ export default function EditRecords() {
                             </Fragment>))}
                             <div className="absolute top-2 right-2 flex flex-row flex-nowrap items-center gap-x-2">
                                 {record.rla_data && <Tooltip content={TOOLTIPS_DICT.EDIT_RECORDS.LABEL_ASSOCIATIONS} color="invert" placement="left" className="cursor-auto">
-                                    <IconAlertTriangle size={18} stroke={2} />
+                                    <MemoIconAlertTriangle size={18} stroke={2} />
                                 </Tooltip>}
                             </div>
                             <div className="absolute left-1 top-1 p-1 cursor-pointer" onClick={() => {
@@ -135,10 +136,10 @@ export default function EditRecords() {
                             }}>
                                 {record.id == erdData.editRecordId ?
                                     (<Tooltip content={TOOLTIPS_DICT.EDIT_RECORDS.STOP_EDIT} color="invert" placement="right">
-                                        <IconBallpenOff size={18} stroke={2} />
+                                        <MemoIconBallpenOff size={18} stroke={2} />
                                     </Tooltip>) :
                                     (<Tooltip content={TOOLTIPS_DICT.EDIT_RECORDS.EDIT_RECORD} color="invert" placement="right">
-                                        <IconBallpen size={18} />
+                                        <MemoIconBallpen size={18} />
                                     </Tooltip>)}
                             </div>
                         </div>
@@ -149,7 +150,7 @@ export default function EditRecords() {
 
 function NotPresentInRecord() {
     return (<div className="flex items-center">
-        <IconAlertCircle className="text-yellow-700" />
+        <MemoIconAlertCircle className="text-yellow-700" />
         <span className="text-gray-500 text-sm font-normal italic">Not present in the record</span>
     </div>
     )
diff --git a/src/components/projects/projectId/edit-records/ExplainModal.tsx b/src/components/projects/projectId/edit-records/ExplainModal.tsx
index 8a67e4ee..71fdfc33 100644
--- a/src/components/projects/projectId/edit-records/ExplainModal.tsx
+++ b/src/components/projects/projectId/edit-records/ExplainModal.tsx
@@ -3,6 +3,7 @@ import { closeModal } from "@/src/reduxStore/states/modal";
 import { ExplainModalProps } from "@/src/types/components/projects/projectId/edit-records";
 import { ModalEnum } from "@/src/types/shared/modal";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconAlertTriangleFilled, MemoIconInfoCircleFilled } from "@/submodules/react-components/components/kern-icons/icons";
 import { IconAlertTriangleFilled, IconInfoCircleFilled } from "@tabler/icons-react";
 import { useDispatch } from "react-redux";
 
@@ -19,14 +20,14 @@ export default function ExplainModal(props: ExplainModalProps) {
 
     return (<Modal modalName={ModalEnum.EXPLAIN_EDIT_RECORDS} hasOwnButtons={true}>
         <h1 className="text-lg text-gray-900 mb-2 text-center">Warning
-            <IconAlertTriangleFilled className="inline-block text-yellow-400" />
+            <MemoIconAlertTriangleFilled className="inline-block text-yellow-400" />
         </h1>
         <div className="text-sm text-gray-700 flex flex-col gap-y-2 my-2 font-medium">
             <div>Changing records directly should only be done in edge cases! </div>
             <div>This changes your data and cannot be undone.</div>
         </div>
         <h1 className="text-lg text-gray-900 text-center inline-flex items-center gap-x-1">Info
-            <IconInfoCircleFilled className="inline-block text-blue-400" />
+            <MemoIconInfoCircleFilled className="inline-block text-blue-400" />
         </h1>
         <div className="text-sm text-gray-700 flex flex-col gap-y-2 my-2 font-medium">
             <div>Currently your changes are only <b>cached</b>. This means they aren&apos;t persisted/updated yet.</div>
diff --git a/src/components/projects/projectId/edit-records/SyncRecordsModal.tsx b/src/components/projects/projectId/edit-records/SyncRecordsModal.tsx
index 33c7869f..cb870c17 100644
--- a/src/components/projects/projectId/edit-records/SyncRecordsModal.tsx
+++ b/src/components/projects/projectId/edit-records/SyncRecordsModal.tsx
@@ -9,6 +9,7 @@ import { jsonCopy } from "@/submodules/javascript-functions/general";
 import { IconAlertTriangleFilled, IconInfoCircle, IconTrash } from "@tabler/icons-react";
 import { Fragment, useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { MemoIconAlertTriangleFilled, MemoIconInfoCircle, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 
 const ACCEPT_BUTTON = { buttonCaption: 'Synchronize', useButton: true, disabled: false, closeAfterClick: false };
 
@@ -70,7 +71,7 @@ export default function SyncRecordsModal(props: SyncRecordsModalProps) {
     return (<Modal modalName={ModalEnum.SYNC_RECORDS} acceptButton={acceptButton}>
         {props.erdData && <>
             <h1 className="text-lg text-gray-900 mb-2 text-center inline-flex items-center gap-x-1">Info
-                {syncing ? (<LoadingIcon color="blue" />) : (<IconInfoCircle className="text-blue-400" />)}
+                {syncing ? (<LoadingIcon color="blue" />) : (<MemoIconInfoCircle className="text-blue-400" />)}
             </h1>
             <div className="text-sm text-gray-700 flex flex-col gap-y-2 mb-2 font-medium" style={{
                 maxHeight: 'calc(100vh - 250px)', overflowY: 'auto'
@@ -90,7 +91,7 @@ export default function SyncRecordsModal(props: SyncRecordsModalProps) {
                         <span className="h-full w-full p-1 inline-flex items-center justify-center bg-red-200">{`${value.display.oldValue}`}</span>
                         <span className="h-full w-full p-1 inline-flex items-center justify-center bg-green-200">{`${value.newValue}`}</span>
                         <div className="bg-white h-full w-full p-1 inline-flex items-center justify-center cursor-pointer" onClick={() => removeFromCache(key)}>
-                            <IconTrash className="text-red-700 h-6 w-6" stroke={2} />
+                            <MemoIconTrash className="text-red-700 h-6 w-6" stroke={2} />
                         </div>
                     </Fragment>))}
                 </div>
@@ -98,7 +99,7 @@ export default function SyncRecordsModal(props: SyncRecordsModalProps) {
             {props.erdData.errors && <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative flex flex-col">
                 <div className="self-center flex flex-row flex-nowrap items-center -mt-1 mb-1">
                     <strong className="font-semibold">Errors while syncing changes</strong>
-                    <IconAlertTriangleFilled className="h-5 w-5 text-red-400" />
+                    <MemoIconAlertTriangleFilled className="h-5 w-5 text-red-400" />
                 </div>
                 {props.erdData.errors.map((error, index) => <div key={error} className="text-sm overflow-x-auto m-auto" style={{ maxWidth: '600px' }}>
                     {error}
diff --git a/src/components/projects/projectId/heuristics/HeuristicsHeader.tsx b/src/components/projects/projectId/heuristics/HeuristicsHeader.tsx
index c5141c9d..c1fa9bdf 100644
--- a/src/components/projects/projectId/heuristics/HeuristicsHeader.tsx
+++ b/src/components/projects/projectId/heuristics/HeuristicsHeader.tsx
@@ -27,6 +27,7 @@ import { Application, CurrentPage } from "@/submodules/react-components/hooks/we
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 import IconButton from "@/submodules/react-components/components/kern-button/IconButton";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { MemoIconPlus } from "@/submodules/react-components/components/kern-icons/icons";
 
 
 export default function HeuristicsHeader(props: HeuristicsHeaderProps) {
@@ -153,7 +154,7 @@ export default function HeuristicsHeader(props: HeuristicsHeaderProps) {
                         localStorage.setItem('openModal', 'true');
                         router.push(`/projects/${projectId}/settings`);
                     }}>
-                        <IconPlus size={20} strokeWidth={1.5} className="text-gray-500 cursor-pointer" />
+                        <MemoIconPlus size={20} strokeWidth={1.5} className="text-gray-500 cursor-pointer" />
                     </button>
                 </Tooltip>
             </div>
diff --git a/src/components/projects/projectId/heuristics/heuristicId/labeling-function/CalculationProgress.tsx b/src/components/projects/projectId/heuristics/heuristicId/labeling-function/CalculationProgress.tsx
index 95d74c08..b539cc19 100644
--- a/src/components/projects/projectId/heuristics/heuristicId/labeling-function/CalculationProgress.tsx
+++ b/src/components/projects/projectId/heuristics/heuristicId/labeling-function/CalculationProgress.tsx
@@ -5,6 +5,7 @@ import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { Tooltip } from "@nextui-org/react";
 import { IconAlertTriangleFilled, IconArrowRight, IconCircleCheckFilled } from "@tabler/icons-react";
 import { useSelector } from "react-redux";
+import { MemoIconAlertTriangleFilled, MemoIconArrowRight, MemoIconCircleCheckFilled } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function CalculationProgress() {
     const currentHeuristic = useSelector(selectHeuristic);
@@ -20,10 +21,10 @@ export default function CalculationProgress() {
                                 <LoadingIcon />
                             </Tooltip>}
                             {currentHeuristic.lastTask.state == Status.FINISHED && <Tooltip content={TOOLTIPS_DICT.GENERAL.SUCCESSFULLY_CREATED} color="invert" className="cursor-auto mx-2">
-                                <IconCircleCheckFilled className="h-6 w-6 text-green-500" />
+                                <MemoIconCircleCheckFilled className="h-6 w-6 text-green-500" />
                             </Tooltip>}
                             {currentHeuristic.lastTask.state == Status.FAILED && <Tooltip content={TOOLTIPS_DICT.GENERAL.ERROR} color="invert" className="cursor-auto mx-2">
-                                <IconAlertTriangleFilled className="h-6 w-6 text-red-500" />
+                                <MemoIconAlertTriangleFilled className="h-6 w-6 text-red-500" />
                             </Tooltip>}
                             {currentHeuristic.lastTask.state === Status.CREATED ? (<>
                                 <div className="text-sm leading-5 font-normal text-gray-500">run#{currentHeuristic.lastTask.iteration}</div>
@@ -36,7 +37,7 @@ export default function CalculationProgress() {
                             </>) : (<><div className="text-sm leading-5 font-normal text-gray-500">run#{currentHeuristic.lastTask.iteration}</div>
                                 {currentHeuristic.lastTask.durationText && <Tooltip content={TOOLTIPS_DICT.LABELING_FUNCTION.EXECUTION_TIME} color="invert" placement="top" className="cursor-auto">
                                     <div className="text-sm leading-5 font-normal text-gray-500 ml-2 select-none flex items-center">
-                                        <IconArrowRight className="h-4 w-4 text-gray-500" />
+                                        <MemoIconArrowRight className="h-4 w-4 text-gray-500" />
                                         <span className="ml-2">{currentHeuristic.lastTask.durationText}</span>
                                     </div>
                                 </Tooltip>}
diff --git a/src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicsLayout.tsx b/src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicsLayout.tsx
index e43c4dc5..2e533687 100644
--- a/src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicsLayout.tsx
+++ b/src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicsLayout.tsx
@@ -19,6 +19,7 @@ import { updateHeuristicPost } from "@/src/services/base/heuristic";
 import { toPythonFunctionName } from "@/submodules/javascript-functions/python-functions-parser";
 import { capitalizeFirstForClassName } from "@/submodules/javascript-functions/case-types-parser";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconArrowLeft } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function HeuristicsLayout(props: any) {
     const router = useRouter();
@@ -117,7 +118,7 @@ export default function HeuristicsLayout(props: any) {
                             router.push(`/projects/${projectId}/heuristics`);
                             dispatch(setActiveHeuristics(null));
                         }} className="text-green-800 text-sm font-medium">
-                            <IconArrowLeft className="h-5 w-5 inline-block text-green-800" />
+                            <MemoIconArrowLeft className="h-5 w-5 inline-block text-green-800" />
                             <span className="leading-5">Go back</span>
                         </a>
                         {!isHeaderNormal && <div className="mx-4 text-sm leading-5 font-medium text-gray-500 inline-block">{currentHeuristic.name}</div>}
diff --git a/src/components/projects/projectId/labeling/sessionId/main-component/LabelingSettingsModal.tsx b/src/components/projects/projectId/labeling/sessionId/main-component/LabelingSettingsModal.tsx
index ab6131f6..c9b974f9 100644
--- a/src/components/projects/projectId/labeling/sessionId/main-component/LabelingSettingsModal.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/main-component/LabelingSettingsModal.tsx
@@ -7,6 +7,7 @@ import { ComponentType } from "@/src/types/components/projects/projectId/labelin
 import { ModalEnum } from "@/src/types/shared/modal";
 import { COLOR_OPTIONS } from "@/src/util/constants";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
+import { MemoIconInfoCircle } from "@/submodules/react-components/components/kern-icons/icons";
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
 import { Tooltip } from "@nextui-org/react";
 import { IconInfoCircle } from "@tabler/icons-react";
@@ -78,7 +79,7 @@ export default function LabelingSettingsModal() {
                 Settings
             </span>
             <Tooltip content={<MultilineTooltip tooltipLines={['Note that your browser stores these settings.', 'Not your user or your organization!']} />} color="invert" placement="top" className="cursor-auto">
-                <IconInfoCircle className="h-6 w-6" />
+                <MemoIconInfoCircle className="h-6 w-6" />
             </Tooltip>
         </div>
         <div className="flex justify-center">
@@ -103,28 +104,28 @@ export default function LabelingSettingsModal() {
                 <span>Auto next record</span>
                 <span className="cursor-pointer flex items-center">
                     <input className="h-5 w-5 cursor-pointer" type="checkbox" checked={settings?.main.autoNextRecord} onChange={() => changeSetting(ComponentType.MAIN, 'autoNextRecord')} /></span>
-                <Tooltip content={TOOLTIPS_DICT.LABELING.AUTO_NEXT_RECORD} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={TOOLTIPS_DICT.LABELING.AUTO_NEXT_RECORD} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
                 <span>Hover background</span>
                 <KernDropdown options={hoverColorOptions} buttonName={settings?.main.hoverGroupBackgroundColor} backgroundColors={hoverColorClassArray}
                     dropdownItemsClasses="max-h-80 overflow-y-auto" buttonCaptionBgColor={settings?.main.hoverGroupBackgroundColorClass}
                     selectedOption={(option: any) => changeSetting(ComponentType.MAIN, 'hoverGroupBackgroundColor', option)} dropdownWidth="w-32" />
-                <Tooltip content={TOOLTIPS_DICT.LABELING.HOVER_BACKGROUND} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={TOOLTIPS_DICT.LABELING.HOVER_BACKGROUND} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
                 <span>Visible line breaks</span>
                 <div className="flex items-center h-5">
                     <input id="comments" type="checkbox" onChange={toggleLineBreaks} checked={settings?.main.lineBreaks != LineBreaksType.NORMAL}
                         className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded cursor-pointer" />
                 </div>
-                <Tooltip content={TOOLTIPS_DICT.LABELING.LINE_BREAKS} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={TOOLTIPS_DICT.LABELING.LINE_BREAKS} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
                 {settings?.main.lineBreaks != LineBreaksType.NORMAL && <Fragment>
                     <label htmlFor="preWrap" className="ml-3 block text-sm font-medium text-gray-700 cursor-pointer italic">Pre-wrap</label>
                     <input type="radio" checked={settings?.main.lineBreaks == LineBreaksType.IS_PRE_WRAP} onChange={toggleLineBreaksPreWrap} name="lineBreaks" id="preWrap"
                         className="focus:ring-blue-500 h-6 w-4 text-blue-600 border-gray-200 cursor-pointer" />
-                    <Tooltip content={TOOLTIPS_DICT.LABELING.PRE_WRAP} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                    <Tooltip content={TOOLTIPS_DICT.LABELING.PRE_WRAP} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
 
                     <label htmlFor="preLine" className="ml-3 block text-sm font-medium text-gray-700 cursor-pointer italic">Pre-line</label>
                     <input type="radio" checked={settings?.main.lineBreaks == LineBreaksType.IS_PRE_LINE} onChange={toggleLineBreaksPreWrap} name="lineBreaks" id="preLine"
                         className="focus:ring-blue-500 h-6 w-4 text-blue-600 border-gray-200 cursor-pointer" />
-                    <Tooltip content={TOOLTIPS_DICT.LABELING.PRE_LINE} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                    <Tooltip content={TOOLTIPS_DICT.LABELING.PRE_LINE} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
                 </Fragment>}
             </div>
         </div>}
@@ -138,15 +139,15 @@ export default function LabelingSettingsModal() {
                         changeSetting(ComponentType.TASK_HEADER, 'show');
                         setShowTaskLegendTicked(!showTaskLegendTicked);
                     }} /></span>
-                <Tooltip content={<MultilineTooltip tooltipLines={['Completely hide/show the feature.', 'Active settings are preserved']} />} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={<MultilineTooltip tooltipLines={['Completely hide/show the feature.', 'Active settings are preserved']} />} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
                 <span>Collapse</span>
                 <span className="cursor-pointer flex items-center">
                     <input disabled={!showTaskLegendTicked} className="h-5 w-5 cursor-pointer" type="checkbox" checked={settings?.task.isCollapsed} onChange={() => changeSetting(ComponentType.TASK_HEADER, 'isCollapsed')} /></span>
-                <Tooltip content={TOOLTIPS_DICT.LABELING.IS_COLLAPSED} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={TOOLTIPS_DICT.LABELING.IS_COLLAPSED} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
                 <span>Always show quick buttons</span>
                 <span className="cursor-pointer flex items-center">
                     <input disabled={!showTaskLegendTicked} className="h-5 w-5 cursor-pointer" type="checkbox" checked={settings?.task.alwaysShowQuickButtons} onChange={() => changeSetting(ComponentType.TASK_HEADER, 'alwaysShowQuickButtons')} /></span>
-                <Tooltip content={TOOLTIPS_DICT.LABELING.QUICK_BUTTON} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={TOOLTIPS_DICT.LABELING.QUICK_BUTTON} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
             </div>
         </div>}
         {/* Labeling */}
@@ -155,27 +156,27 @@ export default function LabelingSettingsModal() {
                 <span>Label options</span>
                 <input value={settings?.labeling.showNLabelButton} type="number" min="0" step="1" onChange={(e) => changeSetting(ComponentType.LABELING, 'showNLabelButton', e.target.value)}
                     className="h-9 w-12 text-sm border-gray-300 rounded-md placeholder-italic border text-gray-900 pl-4 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100" />
-                <Tooltip content={<MultilineTooltip tooltipLines={['Amount of label buttons shown before hiding the rest under: \'other \<task\> options\'']} />} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={<MultilineTooltip tooltipLines={['Amount of label buttons shown before hiding the rest under: \'other \<task\> options\'']} />} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
                 <span>Close label box</span>
                 <span className="cursor-pointer flex items-center">
                     <input className="h-5 w-5 cursor-pointer" type="checkbox" checked={settings?.labeling.closeLabelBoxAfterLabel} onChange={() => changeSetting(ComponentType.LABELING, 'closeLabelBoxAfterLabel')} /></span>
-                <Tooltip content={TOOLTIPS_DICT.LABELING.CLOSE_LABEL_BOX} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={TOOLTIPS_DICT.LABELING.CLOSE_LABEL_BOX} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
                 <span>Show task names</span>
                 <span className="cursor-pointer flex items-center">
                     <input className="h-5 w-5 cursor-pointer" type="checkbox" checked={settings?.labeling.showTaskNames} onChange={() => changeSetting(ComponentType.LABELING, 'showTaskNames')} /></span>
-                <Tooltip content={TOOLTIPS_DICT.LABELING.SHOW_TASK_NAMES} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={TOOLTIPS_DICT.LABELING.SHOW_TASK_NAMES} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
                 <span>Show heuristic confidence</span>
                 <span className="cursor-pointer flex items-center">
                     <input className="h-5 w-5 cursor-pointer" type="checkbox" checked={settings?.labeling.showHeuristicConfidence} onChange={() => changeSetting(ComponentType.LABELING, 'showHeuristicConfidence')} /></span>
-                <Tooltip content={<MultilineTooltip tooltipLines={['Display the heuristic label confidence.', 'Please see in our docs for more information on confidence calculation.']} />} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={<MultilineTooltip tooltipLines={['Display the heuristic label confidence.', 'Please see in our docs for more information on confidence calculation.']} />} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
                 <span>Compact classification label display</span>
                 <span className="cursor-pointer flex items-center">
                     <input className="h-5 w-5 cursor-pointer" type="checkbox" checked={settings?.labeling.compactClassificationLabelDisplay} onChange={() => changeSetting(ComponentType.LABELING, 'compactClassificationLabelDisplay')} /></span>
-                <Tooltip content={TOOLTIPS_DICT.LABELING.LABEL_DISPLAY} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={TOOLTIPS_DICT.LABELING.LABEL_DISPLAY} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
                 <span>Swim lane extraction labels</span>
                 <span className="cursor-pointer flex items-center">
                     <input className="h-5 w-5 cursor-pointer" type="checkbox" checked={settings?.labeling.swimLaneExtractionDisplay} onChange={() => changeSetting(ComponentType.LABELING, 'swimLaneExtractionDisplay')} /></span>
-                <Tooltip content={<MultilineTooltip tooltipLines={['Groups display of labels in type, task, creator & label. Same group gets the same distance to the text.', 'Might use a lot of space.']} />} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={<MultilineTooltip tooltipLines={['Groups display of labels in type, task, creator & label. Same group gets the same distance to the text.', 'Might use a lot of space.']} />} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
             </div>
         </div>}
         {/* Overview table */}
@@ -184,15 +185,15 @@ export default function LabelingSettingsModal() {
                 <span>Show overview table</span>
                 <span className="cursor-pointer flex items-center">
                     <input className="h-5 w-5 cursor-pointer" type="checkbox" checked={settings?.overviewTable.show} onChange={() => changeSetting(ComponentType.OVERVIEW_TABLE, 'show')} /></span>
-                <Tooltip content={<MultilineTooltip tooltipLines={['Completely hide/show the feature.', 'Active settings are preserved']} />} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={<MultilineTooltip tooltipLines={['Completely hide/show the feature.', 'Active settings are preserved']} />} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
                 <span>Show heuristics</span>
                 <span className="cursor-pointer flex items-center">
                     <input className="h-5 w-5 cursor-pointer" type="checkbox" checked={settings?.overviewTable.showHeuristics} onChange={() => changeSetting(ComponentType.OVERVIEW_TABLE, 'showHeuristics')} /></span>
-                <Tooltip content={TOOLTIPS_DICT.LABELING.SHOW_HEURISTICS} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={TOOLTIPS_DICT.LABELING.SHOW_HEURISTICS} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
                 <span>Include task legend settings</span>
                 <span className="cursor-pointer flex items-center">
                     <input className="h-5 w-5 cursor-pointer" type="checkbox" checked={settings?.overviewTable.includeLabelDisplaySettings} onChange={() => changeSetting(ComponentType.OVERVIEW_TABLE, 'includeLabelDisplaySettings')} /></span>
-                <Tooltip content={<MultilineTooltip tooltipLines={['If active the table will filter entries depending on task legend settings.', 'Note that show heuristic disabled will overrule this']} />} color="invert" placement="top" className="cursor-auto"><IconInfoCircle className="h-5 w-5" /></Tooltip>
+                <Tooltip content={<MultilineTooltip tooltipLines={['If active the table will filter entries depending on task legend settings.', 'Note that show heuristic disabled will overrule this']} />} color="invert" placement="top" className="cursor-auto"><MemoIconInfoCircle className="h-5 w-5" /></Tooltip>
             </div>
         </div>}
     </Modal >)
diff --git a/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarBottom.tsx b/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarBottom.tsx
index b7992e18..668123af 100644
--- a/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarBottom.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarBottom.tsx
@@ -11,6 +11,7 @@ import { selectDisplayUserRole, selectRecordRequestsRecord, selectSettings, upda
 import { ComponentType } from "@/src/types/components/projects/projectId/labeling/settings";
 import LabelingSettingsModal from "./LabelingSettingsModal";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconSettings } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function NavigationBarBottom() {
     const dispatch = useDispatch();
@@ -84,7 +85,7 @@ export default function NavigationBarBottom() {
                 {user.role !== UserRole.ANNOTATOR && userDisplayRole != UserRole.ANNOTATOR && <Tooltip onClick={() => dispatch(openModal(ModalEnum.LABELING_SETTINGS))}
                     content={<div className="w-32">Open Labeling Suite settings</div>} color="invert" placement="left">
                     <div className="p-2 border border-gray-300 rounded-md">
-                        <IconSettings className="h-6 w-6" />
+                        <MemoIconSettings className="h-6 w-6" />
                     </div>
                 </Tooltip>}
             </div>
diff --git a/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarTop.tsx b/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarTop.tsx
index 450b9420..bb99522d 100644
--- a/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarTop.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarTop.tsx
@@ -15,6 +15,7 @@ import { useEffect } from "react";
 import { parseLinkFromText } from "@/src/util/shared/link-parser-helper";
 import { getAvailableLinks } from "@/src/services/base/labeling";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconCircle, MemoIconStar } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function NavigationBarTop(props: NavigationBarTopProps) {
     const router = useRouter();
@@ -76,10 +77,10 @@ export default function NavigationBarTop(props: NavigationBarTopProps) {
                                             <img src={`/refinery/avatars/${user.avatarUri}`} className="w-8 h-8" />
                                         </div>) : (<div className="w-8 h-8 cursor-pointer relative" onClick={() => dispatch(setUserDisplayId(user.id))}>
                                             {user.userType == UserType.GOLD && <div className="absolute -top-1 -bottom-1">
-                                                <IconStar className={`w-full h-full ${user.id == displayId ? style.specialUserActive : style.specialUserInActive}`} />
+                                                <MemoIconStar className={`w-full h-full ${user.id == displayId ? style.specialUserActive : style.specialUserInActive}`} />
                                             </div>}
                                             {user.userType == UserType.ALL && <div className="absolute top-0 left-0 right-0 bottom-0">
-                                                <IconCircle className={`w-full h-full ${user.id == displayId ? style.specialUserActive : style.specialUserInActive}`} />
+                                                <MemoIconCircle className={`w-full h-full ${user.id == displayId ? style.specialUserActive : style.specialUserInActive}`} />
                                             </div>}
                                         </div>)}
                                     </Tooltip>
diff --git a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSelectionBox.tsx b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSelectionBox.tsx
index 6bcfdd24..cec41169 100644
--- a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSelectionBox.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSelectionBox.tsx
@@ -4,6 +4,7 @@ import { LabelSelectionBoxProps } from "@/src/types/components/projects/projectI
 import { LabelingTaskTaskType } from "@/src/types/components/projects/projectId/settings/labeling-tasks";
 import { UserRole } from "@/src/types/shared/sidebar";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
+import { MemoIconCirclePlus } from "@/submodules/react-components/components/kern-icons/icons";
 import { Tooltip } from "@nextui-org/react";
 import { IconCirclePlus } from "@tabler/icons-react";
 import { Fragment, useEffect, useState, useCallback, useRef } from "react";
@@ -167,7 +168,7 @@ export default function LabelSelectionBox(props: LabelSelectionBoxProps) {
                                 updateNewLabelDict(task.task.id, '');
                             }}
                                 disabled={props.labelAddButtonDisabledDict[task.task.id] || newLabelDict[task.task.id] == ''} className="disabled:cursor-not-allowed disabled:opacity-50">
-                                <IconCirclePlus className={`${props.labelAddButtonDisabledDict[task.task.id] || newLabelDict[task.task.id] == '' ? 'text-gray-300' : 'text-gray-700'}`} />
+                                <MemoIconCirclePlus className={`${props.labelAddButtonDisabledDict[task.task.id] || newLabelDict[task.task.id] == '' ? 'text-gray-300' : 'text-gray-700'}`} />
                             </button>
                         </div>
                     </Tooltip>}
diff --git a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSettingsBox.tsx b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSettingsBox.tsx
index ba12b147..ae3622b0 100644
--- a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSettingsBox.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSettingsBox.tsx
@@ -9,6 +9,7 @@ import InfoLabelBoxModal from "./InfoLabelBoxModal";
 import { jsonCopy } from "@/submodules/javascript-functions/general";
 import { selectSettings, setSettings } from "@/src/reduxStore/states/pages/labeling";
 import { selectProjectId } from "@/src/reduxStore/states/project";
+import { MemoIconChecks, MemoIconInfoCircle, MemoIconX } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function LabelSettingsBox(props: LabelSettingsBoxProps) {
     const dispatch = useDispatch();
@@ -42,7 +43,7 @@ export default function LabelSettingsBox(props: LabelSettingsBoxProps) {
             </div>
             <div className="flex flex-row flex-no-wrap gap-x-2 p-2.5 borders-gray border-t">
                 <Tooltip content={TOOLTIPS_DICT.LABELING.INFO_LABEL_BOX} color="invert" placement="top" onClick={() => dispatch(setModalStates(ModalEnum.INFO_LABEL_BOX, { open: true, labelSettingsLabel: props.labelSettingsLabel }))}>
-                    <IconInfoCircle className="h-6 w-6 text-gray-700" />
+                    <MemoIconInfoCircle className="h-6 w-6 text-gray-700" />
                 </Tooltip>
                 <div className="flex flex-row flex-nowrap items-center gap-x-1 cursor-pointer">
                     <span className="font-semibold text-sm text-gray-500">M</span>
@@ -60,10 +61,10 @@ export default function LabelSettingsBox(props: LabelSettingsBoxProps) {
                         checked={settings.task[projectId][props.labelSettingsLabel.taskId][props.labelSettingsLabel.id].showHeuristics} />
                 </div>
                 <Tooltip content={TOOLTIPS_DICT.LABELING.ACTIVATE_ALL} color="invert" placement="top" onClick={() => props.setAllLabelDisplaySetting(true, props.labelSettingsLabel)}>
-                    <IconChecks className="h-6 w-6 text-gray-700" />
+                    <MemoIconChecks className="h-6 w-6 text-gray-700" />
                 </Tooltip>
                 <Tooltip content={TOOLTIPS_DICT.LABELING.CLEAR_ALL} color="invert" placement="top" onClick={() => props.setAllLabelDisplaySetting(false, props.labelSettingsLabel)}>
-                    <IconX className="h-6 w-6 text-gray-700" />
+                    <MemoIconX className="h-6 w-6 text-gray-700" />
                 </Tooltip>
             </div>
         </div>}
diff --git a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingInfoTableModal.tsx b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingInfoTableModal.tsx
index cc690a5f..83e02f3a 100644
--- a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingInfoTableModal.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingInfoTableModal.tsx
@@ -7,6 +7,7 @@ import { IconSearch } from "@tabler/icons-react";
 import { useDispatch, useSelector } from "react-redux";
 import style from '@/src/styles/components/projects/projectId/labeling.module.css';
 import { LabelSourceHover } from "@/src/types/components/projects/projectId/labeling/labeling";
+import { MemoIconSearch } from "@/submodules/react-components/components/kern-icons/icons";
 
 function shouldHighLight(tmpHighlightIds: string[], comparedIds: string[], additionalComparedIds?: string[]) {
     if (additionalComparedIds) {
@@ -81,7 +82,7 @@ export default function LabelingInfoTableModal(props: LabelingInfoTableModalProp
                         </td>
                         <td onMouseEnter={() => onMouseEnter([props.dataToDisplay[0].rla.id])} onMouseLeave={() => onMouseLeave()}
                             className={`${shouldHighLight(tmpHighlightIds, props.dataToDisplay[0].shouldHighlightOn) || hoverGroupsDict[props.dataToDisplay[0].label.id] && hoverGroupsDict[props.dataToDisplay[0].label.id][LabelingPageParts.TABLE_MODAL] ? settings.main.hoverGroupBackgroundColorClass : ''}`}>
-                            <IconSearch className="w-6 h-6 text-gray-700" />
+                            <MemoIconSearch className="w-6 h-6 text-gray-700" />
                         </td>
                     </tr>
                 </tbody>
diff --git a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteLabeling.tsx b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteLabeling.tsx
index e6e0058f..20f57809 100644
--- a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteLabeling.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteLabeling.tsx
@@ -28,6 +28,7 @@ import { getStoreSnapshotValue } from "@/src/reduxStore/store"
 import { createLabel } from "@/src/services/base/labeling-tasks";
 import { addClassificationLabels, addExtractionLabel, deleteRecordLabelAssociationByIds, removeGoldStar, setGoldStar } from "@/src/services/base/labeling"
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton"
+import { MemoIconAlertCircle, MemoIconAssembly, MemoIconBolt, MemoIconCode, MemoIconStar } from "@/submodules/react-components/components/kern-icons/icons"
 
 const L_VARS = getDefaultLabelingVars();
 
@@ -554,7 +555,7 @@ export default function LabelingSuiteLabeling() {
                     <div className={`col-start-3 h-full py-1.5 flex ${i % 2 == 0 ? 'bg-white' : 'bg-gray-50'}`}>
                         {task.goldInfo?.can && <Tooltip content={task.goldInfo.is ? TOOLTIPS_DICT.LABELING.REMOVE_LABELS_GOLD_STAR : TOOLTIPS_DICT.LABELING.SET_LABELS_GOLD_STAR} color="invert" placement="top">
                             <div className="mt-0.5" onClick={() => toggleGoldStar(task.task.id, task.goldInfo?.is)}>
-                                <IconStar className={`${task.goldInfo.is ? style.specialUserActive : style.specialUserInActive}`} />
+                                <MemoIconStar className={`${task.goldInfo.is ? style.specialUserActive : style.specialUserInActive}`} />
                             </div>
                         </Tooltip>}
                     </div>
@@ -571,7 +572,7 @@ export default function LabelingSuiteLabeling() {
                                             (<p className={`break-words text-sm leading-5 font-normal text-gray-500 ${settings.main.lineBreaks != LineBreaksType.NORMAL ? (settings.main.lineBreaks == LineBreaksType.IS_PRE_WRAP ? 'whitespace-pre-wrap' : 'whitespace-pre-line') : ''}`}>
                                                 {`${recordRequests.record.data[lVars.taskLookup[attribute.id].attribute.name]}`}
                                             </p>) : (<>
-                                                <IconAlertCircle className="text-yellow-700 inline-block h-5 w-5" />
+                                                <MemoIconAlertCircle className="text-yellow-700 inline-block h-5 w-5" />
                                                 <span className="text-gray-500 text-sm font-normal italic">Not present in the
                                                     record</span>
                                             </>)}
@@ -616,10 +617,10 @@ export default function LabelingSuiteLabeling() {
                                                     ${((shouldHighlightOn(tmpHighlightIds, [LabelSourceHover.INFORMATION_SOURCE, rlaLabel.rla.id, rlaLabel.createdByName, rlaLabel.rla.labelingTaskLabel.labelingTask.id]) && rlaLabel.sourceTypeKey == LabelingPageParts.INFORMATION_SOURCE) || (hoverGroupsDict[rlaLabel.labelId] && hoverGroupsDict[rlaLabel.labelId][LabelingPageParts.INFORMATION_SOURCE] && rlaLabel.sourceTypeKey == LabelingPageParts.INFORMATION_SOURCE)) && style.labelOverlayHeuristic}
                                                     `}></div>
                                                 {rlaLabel.icon && <div className="mr-1">
-                                                    {rlaLabel.icon == InformationSourceType.LABELING_FUNCTION && <IconCode size={20} strokeWidth={1.5} />}
-                                                    {rlaLabel.icon == InformationSourceType.ACTIVE_LEARNING && <IconBolt size={20} strokeWidth={1.5} />}
-                                                    {rlaLabel.icon == LabelSourceHover.MODEL_CALLBACK && <IconBolt size={20} strokeWidth={1.5} />}
-                                                    {rlaLabel.icon == LabelSourceHover.WEAK_SUPERVISION && <IconAssembly size={20} strokeWidth={1.5} />}
+                                                    {rlaLabel.icon == InformationSourceType.LABELING_FUNCTION && <MemoIconCode size={20} strokeWidth={1.5} />}
+                                                    {rlaLabel.icon == InformationSourceType.ACTIVE_LEARNING && <MemoIconBolt size={20} strokeWidth={1.5} />}
+                                                    {rlaLabel.icon == LabelSourceHover.MODEL_CALLBACK && <MemoIconBolt size={20} strokeWidth={1.5} />}
+                                                    {rlaLabel.icon == LabelSourceHover.WEAK_SUPERVISION && <MemoIconAssembly size={20} strokeWidth={1.5} />}
                                                 </div>}
                                                 <div className="truncate" style={{ maxWidth: '260px' }}>{rlaLabel.labelDisplay}</div>
                                                 {rlaLabel.canBeDeleted && <div className="pl-1 cursor-pointer" onClick={() => deleteRecordLabelAssociation(rlaLabel.rla.id)}>
diff --git a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteOverviewTable.tsx b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteOverviewTable.tsx
index 6efd369c..f6c1279b 100644
--- a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteOverviewTable.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteOverviewTable.tsx
@@ -16,6 +16,7 @@ import style from '@/src/styles/components/projects/projectId/labeling.module.cs
 import { LabelSourceHover } from "@/src/types/components/projects/projectId/labeling/labeling";
 import { UserRole } from "@/src/types/shared/sidebar";
 import { deleteRecordLabelAssociationByIds } from "@/src/services/base/labeling";
+import { MemoIconSearch, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 
 
 function shouldHighLight(tmpHighlightIds: string[], comparedIds: string[], additionalComparedIds?: string[]) {
@@ -180,12 +181,12 @@ export default function LabelingSuiteOverviewTable() {
                                         </td>
                                         <td onMouseEnter={() => onMouseEnter([ovItem.rla.id])} onMouseLeave={onMouseLeave}
                                             className={`${(shouldHighLight(tmpHighlightIds, ovItem.shouldHighlightOn) || hoverGroupsDict[ovItem.label.id] && hoverGroupsDict[ovItem.label.id][LabelingPageParts.OVERVIEW_TABLE] && hoverGroupsDict[ovItem.label.id][ovItem.sourceTypeKey]) ? settings.main.hoverGroupBackgroundColorClass : ''}`}>
-                                            <IconSearch className="w-6 h-6 text-gray-700" />
+                                            <MemoIconSearch className="w-6 h-6 text-gray-700" />
                                         </td>
                                         <td onMouseEnter={() => onMouseEnter([ovItem.rla.id])} onMouseLeave={onMouseLeave}
                                             className={`${(shouldHighLight(tmpHighlightIds, ovItem.shouldHighlightOn) || hoverGroupsDict[ovItem.label.id] && hoverGroupsDict[ovItem.label.id][LabelingPageParts.OVERVIEW_TABLE] && hoverGroupsDict[ovItem.label.id][ovItem.sourceTypeKey]) ? settings.main.hoverGroupBackgroundColorClass : ''}`}>
                                             {ovItem.canBeDeleted && <div onClick={() => deleteLabelFromRecord(ovItem.rla.id)}>
-                                                <IconTrash className="w-6 h-6 text-red-700 cursor-pointer" /></div>}
+                                                <MemoIconTrash className="w-6 h-6 text-red-700 cursor-pointer" /></div>}
                                         </td>
                                     </tr>))}
                                 </tbody>
diff --git a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteTaskHeader.tsx b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteTaskHeader.tsx
index 48371324..5d21586b 100644
--- a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteTaskHeader.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteTaskHeader.tsx
@@ -12,6 +12,7 @@ import { IconLayoutNavbarCollapse } from "@tabler/icons-react";
 import QuickButtons from "./QuickButtons";
 import HeaderDisplay from "./HeaderDisplay";
 import { selectSettings, setSettings, updateSettings } from "@/src/reduxStore/states/pages/labeling";
+import { MemoIconLayoutNavbarCollapse } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function LabelingSuiteTaskHeader() {
     const dispatch = useDispatch();
@@ -78,7 +79,7 @@ export default function LabelingSuiteTaskHeader() {
     return (<div id="base-dom-task-header" className="relative bg-white p-4">
         {displayData && displayData.length > 0 ? (<>
             <div className={`absolute top-4 right-4 p-2 cursor-pointer ${settings.task.isCollapsed ? style.rotateTransform : null}`} onClick={toggleIsCollapsed}>
-                <IconLayoutNavbarCollapse size={24} stroke={2} />
+                <MemoIconLayoutNavbarCollapse size={24} stroke={2} />
             </div>
             {settings.task.isCollapsed ? (<div className="flex flex-row flex-wrap gap-x-2">
                 <QuickButtons />
diff --git a/src/components/projects/projectId/lookup-lists/LookupListCard.tsx b/src/components/projects/projectId/lookup-lists/LookupListCard.tsx
index 6e5713f1..2102d7cd 100644
--- a/src/components/projects/projectId/lookup-lists/LookupListCard.tsx
+++ b/src/components/projects/projectId/lookup-lists/LookupListCard.tsx
@@ -1,6 +1,7 @@
 import { selectAllLookupLists, selectCheckedLookupLists, setCheckedLookupLists } from "@/src/reduxStore/states/pages/lookup-lists";
 import { selectProjectId } from "@/src/reduxStore/states/project";
 import { LookupListCardProps } from "@/src/types/components/projects/projectId/lookup-lists";
+import { MemoIconArrowRight } from "@/submodules/react-components/components/kern-icons/icons";
 import { IconArrowRight } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
@@ -40,7 +41,7 @@ export function LookupListCard(props: LookupListCardProps) {
                     router.push(`/projects/${projectId}/lookup-lists/${props.lookupList.id}`);
                 }} className="text-green-800 float-right cursor-pointer">
                     Details
-                    <IconArrowRight className="h-5 w-5 inline-block text-green-800" />
+                    <MemoIconArrowRight className="h-5 w-5 inline-block text-green-800" />
                 </a>
             </div>
             <div className={`flex-row gap-16 font-normal text-gray-500 ${props.lookupList.description ? 'flex' : 'block'}`}>
diff --git a/src/components/projects/projectId/lookup-lists/lookupListId/LookupListsDetails.tsx b/src/components/projects/projectId/lookup-lists/lookupListId/LookupListsDetails.tsx
index 61e91e9a..a92c3c07 100644
--- a/src/components/projects/projectId/lookup-lists/lookupListId/LookupListsDetails.tsx
+++ b/src/components/projects/projectId/lookup-lists/lookupListId/LookupListsDetails.tsx
@@ -21,6 +21,7 @@ import { getLookupListsByLookupListId, getTermsByLookupListId, updateKnowledgeBa
 import { getAllComments } from "@/src/services/base/comment";
 import { Application, CurrentPage } from "@/submodules/react-components/hooks/web-socket/constants";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconArrowLeft } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function LookupListsDetails() {
     const router = useRouter();
@@ -153,7 +154,7 @@ export default function LookupListsDetails() {
                                 e.preventDefault();
                                 router.push(`/projects/${projectId}/lookup-lists`)
                             }} className="text-green-800 text-sm font-medium">
-                            <IconArrowLeft className="h-5 w-5 inline-block text-green-800" />
+                            <MemoIconArrowLeft className="h-5 w-5 inline-block text-green-800" />
                             <span className="leading-5">Go back</span>
                         </a>
                         {!isHeaderNormal && <div className="mx-4 text-sm leading-5 font-medium text-gray-500 inline-block">{lookupList.name}</div>}
diff --git a/src/components/projects/projectId/overview/ProjectOverviewCards.tsx b/src/components/projects/projectId/overview/ProjectOverviewCards.tsx
index f86d3aa0..619013c6 100644
--- a/src/components/projects/projectId/overview/ProjectOverviewCards.tsx
+++ b/src/components/projects/projectId/overview/ProjectOverviewCards.tsx
@@ -7,6 +7,7 @@ import { IconBottle, IconBulb, IconClick } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { useSelector } from "react-redux";
 import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
+import { MemoIconBottle, MemoIconBulb, MemoIconClick } from "@/submodules/react-components/components/kern-icons/icons";
 
 const CARDS_DATA = [
     { color: 'yellow', stats: CardStatsEnum.MANUAL, label: 'Manually labeled', linkLabel: 'Continue labeling', link: 'labeling' },
@@ -23,9 +24,9 @@ export default function ProjectOverviewCards(props: ProjectOverviewCardsProps) {
                 <div key={card.color} className="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg">
                     <dt>
                         <div className={`absolute bg-${card.color}-500 rounded-md p-3`}>
-                            {card.stats == CardStatsEnum.MANUAL && <IconClick className="h-6 w-6 text-white" />}
-                            {card.stats == CardStatsEnum.WEAK_SUPERVISION && <IconBottle className="h-6 w-6 text-white" />}
-                            {card.stats == CardStatsEnum.INFORMATION_SOURCE && <IconBulb className="h-6 w-6 text-white" />}
+                            {card.stats == CardStatsEnum.MANUAL && <MemoIconClick className="h-6 w-6 text-white" />}
+                            {card.stats == CardStatsEnum.WEAK_SUPERVISION && <MemoIconBottle className="h-6 w-6 text-white" />}
+                            {card.stats == CardStatsEnum.INFORMATION_SOURCE && <MemoIconBulb className="h-6 w-6 text-white" />}
                         </div>
                         <p className="ml-16 text-sm font-medium text-gray-500 truncate">{card.label}</p>
                     </dt>
diff --git a/src/components/projects/projectId/playground/PlaygroundSearch.tsx b/src/components/projects/projectId/playground/PlaygroundSearch.tsx
index 48e39294..c2134e29 100644
--- a/src/components/projects/projectId/playground/PlaygroundSearch.tsx
+++ b/src/components/projects/projectId/playground/PlaygroundSearch.tsx
@@ -17,6 +17,7 @@ import { Tooltip } from "@nextui-org/react";
 import QuestionHistory from "./QuestionHistory";
 import IconButton from "@/submodules/react-components/components/kern-button/IconButton";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconLoader2 } from "@/submodules/react-components/components/kern-icons/icons";
 
 const PLAYGROUND_LIMIT_DEFAULT = 10;
 const PLAYGROUND_THRESHOLD_DEFAULT = -9999;
@@ -97,7 +98,7 @@ export function PlaygroundSearch() {
                     onChange={(event: any) => setQuestion(event.target.value)}
                     value={question}
                 ></textarea>
-                {reformulationLoading && <span className="absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2"><IconLoader2 className="absolute h-6 w-6 animate-spin" /></span>}
+                {reformulationLoading && <span className="absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2"><MemoIconLoader2 className="absolute h-6 w-6 animate-spin" /></span>}
                 <div className="absolute top-2 right-2 flex gap-x-2">
                     <IconButton
                         icon={IconWand}
diff --git a/src/components/projects/projectId/playground/PlaygroundSearchMetaFilterModal.tsx b/src/components/projects/projectId/playground/PlaygroundSearchMetaFilterModal.tsx
index bcfab581..f788c502 100644
--- a/src/components/projects/projectId/playground/PlaygroundSearchMetaFilterModal.tsx
+++ b/src/components/projects/projectId/playground/PlaygroundSearchMetaFilterModal.tsx
@@ -16,6 +16,7 @@ import { IconPlus, IconTrash } from "@tabler/icons-react";
 import { getUniqueValuesByAttributes } from "@/src/services/base/dataSlices";
 import { postProcessUniqueValues } from "@/src/util/components/projects/projectId/data-browser/data-browser-helper";
 import { selectProjectId } from "@/src/reduxStore/states/project";
+import { MemoIconPlus, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 
 const ACCEPT_BUTTON = { buttonCaption: 'Save', useButton: true };
 const ABORT_BUTTON = { buttonCaption: 'Reset', useButton: true };
@@ -148,7 +149,7 @@ export default function PlaygroundSearchMetaFilterModal(props: { selectedEmbeddi
                             {filterAttributesForm.length > 1 &&
                                 <div onClick={() => removeFilterAttributesSS(index)}
                                     className="mt-2 cursor-pointer flex justify-center hover:border-transparent hover:bg-transparent border-transparent bg-transparent px-0">
-                                    <IconTrash className="text-gray-900 cursor-pointer h-4 w-4" />
+                                    <MemoIconTrash className="text-gray-900 cursor-pointer h-4 w-4" />
                                 </div>}
                         </div>
                         <div className="flex-grow mr-2.5 flex flex-col  mt-2 ">
@@ -185,7 +186,7 @@ export default function PlaygroundSearchMetaFilterModal(props: { selectedEmbeddi
                         {index == filterAttributesForm.length - 1 &&
                             <span onClick={() => addFilterAttributesSS()}
                                 className="bg-gray-100 text-gray-800 cursor-pointer p-1 rounded-md hover:bg-gray-300">
-                                <IconPlus className="cursor-pointer" />
+                                <MemoIconPlus className="cursor-pointer" />
                             </span>}
                     </div>
                 </div>))}
diff --git a/src/components/projects/projectId/playground/QuestionHistory.tsx b/src/components/projects/projectId/playground/QuestionHistory.tsx
index 4903e037..06d56399 100644
--- a/src/components/projects/projectId/playground/QuestionHistory.tsx
+++ b/src/components/projects/projectId/playground/QuestionHistory.tsx
@@ -2,6 +2,7 @@ import { selectProjectId } from "@/src/reduxStore/states/project";
 import { deleteQuestionFromHistory, getPlaygroundQuestions } from "@/src/services/base/playground";
 import { PlaygroundQuestion } from "@/src/types/components/projects/projectId/settings/playground";
 import IconButton from "@/submodules/react-components/components/kern-button/IconButton";
+import { MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 import useOnClickOutside from "@/submodules/react-components/hooks/useHooks/useOnClickOutside";
 import { IconHistory, IconTrash } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
@@ -66,7 +67,7 @@ export default function QuestionHistory(props: QuestionHistoryProps) {
                                 <li className=" text-gray-700">
                                     {questionEntry.question}
                                 </li>
-                                <IconTrash onClick={() => deleteQuestionFromHistoryFunc(questionEntry.id)}
+                                <MemoIconTrash onClick={() => deleteQuestionFromHistoryFunc(questionEntry.id)}
                                     className="h-6 w-6 text-red-700 cursor-pointer ml-auto" />
                             </div>
                         ))}
diff --git a/src/components/projects/projectId/playground/QuestionPlayground.tsx b/src/components/projects/projectId/playground/QuestionPlayground.tsx
index 78864736..32dd6753 100644
--- a/src/components/projects/projectId/playground/QuestionPlayground.tsx
+++ b/src/components/projects/projectId/playground/QuestionPlayground.tsx
@@ -10,6 +10,7 @@ import { setAllAttributes, setAllEmbeddings } from "@/src/reduxStore/states/page
 import { getEmbeddings } from "@/src/services/base/embedding";
 import { postProcessingEmbeddings } from "@/src/util/components/projects/projectId/settings/embeddings-helper";
 import { IconCategoryPlus } from "@tabler/icons-react";
+import { MemoIconCategoryPlus } from "@/submodules/react-components/components/kern-icons/icons";
 
 const STEPS = [
     { id: 0, name: 'Playground' },
@@ -59,7 +60,7 @@ export default function QuestionPlayground() {
                                     <div className="flex items-center pr-6 pl-5 py-2 text-sm font-medium" aria-current="step">
                                         <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 border-purple-600">
                                             {step.id === 0 ? (<span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 border-purple-600">
-                                                <IconCategoryPlus className="text-purple-600 h-5 w-5" />
+                                                <MemoIconCategoryPlus className="text-purple-600 h-5 w-5" />
                                             </span>) : (<span className="text-purple-600">{step.id}</span>)}
                                         </span>
                                         <span className="ml-3 mr-2 text-sm font-medium text-purple-600">{step.name}</span>
@@ -69,7 +70,7 @@ export default function QuestionPlayground() {
                                         <span className="flex items-center pr-6 pl-5 py-2 text-sm font-medium">
                                             <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 border-gray-300">
                                                 {step.id === 0 ? (<span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 border-gray-300">
-                                                    <IconCategoryPlus className="text-gray-500 h-5 w-5" />
+                                                    <MemoIconCategoryPlus className="text-gray-500 h-5 w-5" />
                                                 </span>) : (<span className="text-gray-500">{step.id}</span>)}
                                             </span>
                                             <span className="ml-3 mr-2 text-sm font-medium text-gray-500">{step.name}</span>
diff --git a/src/components/projects/projectId/playground/evaluationRunId/EvaluationRunDetails.tsx b/src/components/projects/projectId/playground/evaluationRunId/EvaluationRunDetails.tsx
index 999dae95..37433232 100644
--- a/src/components/projects/projectId/playground/evaluationRunId/EvaluationRunDetails.tsx
+++ b/src/components/projects/projectId/playground/evaluationRunId/EvaluationRunDetails.tsx
@@ -5,6 +5,7 @@ import { getAttributes } from "@/src/services/base/attribute"
 import { getEvaluationRunById, getEvaluationSets } from "@/src/services/base/playground"
 import { arrayToDict, percentRoundString } from "@/submodules/javascript-functions/general"
 import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText"
+import { MemoIconCheck, MemoIconX } from "@/submodules/react-components/components/kern-icons/icons"
 import { IconArrowLeft, IconCheck, IconX } from "@tabler/icons-react"
 import { useRouter } from "next/router"
 import { Fragment, useEffect, useState } from "react"
@@ -106,13 +107,13 @@ function RecordDisplaySearches({ attributes, records, text, howMany, fromHowMany
         <dt>
             <div className="flex items-center gap-2">
                 {text === "Matched records" && <div className="bg-green-200 p-2 rounded-full flex justify-center items-center">
-                    <IconCheck className="text-green-800" size={20} stroke={2.5} />
+                    <MemoIconCheck className="text-green-800" size={20} stroke={2.5} />
                 </div>}
                 {text === "Unrelated records" && <div className="bg-green-200 p-2 rounded-full flex justify-center items-center">
-                    <IconX className="text-red-800" size={20} stroke={2.5} />
+                    <MemoIconX className="text-red-800" size={20} stroke={2.5} />
                 </div>}
                 {text === "Missed records" && <div className="bg-red-300 p-2 rounded-full flex justify-center items-center">
-                    <IconX className="text-red-800" size={20} stroke={2.5} />
+                    <MemoIconX className="text-red-800" size={20} stroke={2.5} />
                 </div>}
 
                 <div>
@@ -165,13 +166,13 @@ function RecordDisplaySearchesAggregated({ text, howMany, fromHowMany }) {
         <dt>
             <div className="flex items-center gap-2">
                 {text === "Matched records" && <div className="bg-green-200 p-2 rounded-full flex justify-center items-center">
-                    <IconCheck className="text-green-800" size={20} stroke={2.5} />
+                    <MemoIconCheck className="text-green-800" size={20} stroke={2.5} />
                 </div>}
                 {text === "Unrelated records" && <div className="bg-green-200 p-2 rounded-full flex justify-center items-center">
-                    <IconX className="text-red-800" size={20} stroke={2.5} />
+                    <MemoIconX className="text-red-800" size={20} stroke={2.5} />
                 </div>}
                 {text === "Missed records" && <div className="bg-red-300 p-2 rounded-full flex justify-center items-center">
-                    <IconX className="text-red-800" size={20} stroke={2.5} />
+                    <MemoIconX className="text-red-800" size={20} stroke={2.5} />
                 </div>}
 
                 <div>
diff --git a/src/components/projects/projectId/settings/DataSchema.tsx b/src/components/projects/projectId/settings/DataSchema.tsx
index dbe76cf5..d3fab0ff 100644
--- a/src/components/projects/projectId/settings/DataSchema.tsx
+++ b/src/components/projects/projectId/settings/DataSchema.tsx
@@ -15,6 +15,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
+import { MemoIconCheck, MemoIconX } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function DataSchema(props: DataSchemaProps) {
     const router = useRouter();
@@ -82,10 +83,10 @@ export default function DataSchema(props: DataSchemaProps) {
                                         <div className="inline-block w-4 h-3.5">
                                             {props.pKeyValid != null && <>
                                                 {props.pKeyValid ? <Tooltip content={TOOLTIPS_DICT.PROJECT_SETTINGS.DATA_SCHEMA.UNIQUE_COMBINATION} color="invert" placement="bottom" className="cursor-auto">
-                                                    <IconCheck className="h-5 w-5 -mt-1" />
+                                                    <MemoIconCheck className="h-5 w-5 -mt-1" />
                                                 </Tooltip> :
                                                     <Tooltip content={TOOLTIPS_DICT.PROJECT_SETTINGS.DATA_SCHEMA.NOT_UNIQUE_COMBINATION} color="invert" placement="bottom" className="cursor-auto">
-                                                        <IconX className="h-5 w-5 -mt-1" />
+                                                        <MemoIconX className="h-5 w-5 -mt-1" />
                                                     </Tooltip>}
                                             </>}
                                         </div>
diff --git a/src/components/projects/projectId/settings/ProjectSettings.tsx b/src/components/projects/projectId/settings/ProjectSettings.tsx
index 25be4e05..3d114883 100644
--- a/src/components/projects/projectId/settings/ProjectSettings.tsx
+++ b/src/components/projects/projectId/settings/ProjectSettings.tsx
@@ -33,6 +33,7 @@ import { getEmbeddings, getRecommendedEncoders } from "@/src/services/base/embed
 import { getQueuedTasks } from "@/src/services/base/project-setting";
 import { Application, CurrentPage } from "@/submodules/react-components/hooks/web-socket/constants";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconCheck, MemoIconDots } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function ProjectSettings() {
     const dispatch = useDispatch();
@@ -284,11 +285,11 @@ export default function ProjectSettings() {
                             </div>
                         </div>}
                         {tokenizationProgress == 1 && <div className="absolute md:rounded-lg top-0 left-0 right-0 bottom-0 flex flex-row items-center justify-center" style={{ backgroundColor: '#f4f4f5bf' }}>
-                            <IconCheck className="h-4 w-4 text-green-700" />
+                            <MemoIconCheck className="h-4 w-4 text-green-700" />
                             <span className="text-sm font-medium text-green-700">Completed</span>
                         </div>}
                         {tokenizationProgress == -1 && <div className="absolute md:rounded-lg top-0 left-0 right-0 bottom-0 flex flex-row items-center justify-center" style={{ backgroundColor: '#f4f4f5bf' }}>
-                            <IconDots className="h-4 w-4 text-gray-700" />
+                            <MemoIconDots className="h-4 w-4 text-gray-700" />
                             <span className="text-sm font-medium text-gray-700">Queued</span>
                         </div>}
                         {!tokenizationProgress && <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
diff --git a/src/components/projects/projectId/settings/ProjectSnapshotExportModal.tsx b/src/components/projects/projectId/settings/ProjectSnapshotExportModal.tsx
index 1a9dc48a..ed5341f8 100644
--- a/src/components/projects/projectId/settings/ProjectSnapshotExportModal.tsx
+++ b/src/components/projects/projectId/settings/ProjectSnapshotExportModal.tsx
@@ -22,6 +22,7 @@ import { timer } from "rxjs";
 import { Application, CurrentPage, CurrentPageSubKey } from "@/submodules/react-components/hooks/web-socket/constants";
 import { selectOrganizationId } from "@/src/reduxStore/states/general";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconInfoCircle } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function ProjectSnapshotExportModal() {
     const dispatch = useDispatch();
@@ -142,7 +143,7 @@ export default function ProjectSnapshotExportModal() {
                             </div>
                             <div className="flex items-center justify-items-center">
                                 {item.desc && <Tooltip content={item.desc} color="invert" placement="top" className="cursor-auto">
-                                    <IconInfoCircle className="h-6 w-6 text-gray-900" />
+                                    <MemoIconInfoCircle className="h-6 w-6 text-gray-900" />
                                 </Tooltip>}
                             </div>
                             <div className="flex">{item.sizeReadable}</div>
diff --git a/src/components/projects/projectId/settings/embeddings/AddNewEmbeddingModal.tsx b/src/components/projects/projectId/settings/embeddings/AddNewEmbeddingModal.tsx
index 4e7e89ba..8f967c00 100644
--- a/src/components/projects/projectId/settings/embeddings/AddNewEmbeddingModal.tsx
+++ b/src/components/projects/projectId/settings/embeddings/AddNewEmbeddingModal.tsx
@@ -14,6 +14,7 @@ import { ModalButton, ModalEnum } from "@/src/types/shared/modal";
 import { postProcessingModelsDownload } from "@/src/util/components/models-downloaded/models-downloaded-helper";
 import { DEFAULT_AZURE_TYPE, GRANULARITY_TYPES_ARRAY, checkIfCreateEmbeddingIsDisabled, platformNamesDict } from "@/src/util/components/projects/projectId/settings/embeddings-helper";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
+import { MemoIconExternalLink } from "@/submodules/react-components/components/kern-icons/icons";
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
 import { Tooltip } from "@nextui-org/react";
 import { IconExternalLink } from "@tabler/icons-react";
@@ -292,7 +293,7 @@ export default function AddNewEmbeddingModal() {
                                 <span className="card-title mb-0 label-text flex"><span className="cursor-help underline filtersUnderline">Version</span></span>
                                 <Tooltip content={TOOLTIPS_DICT.PROJECT_SETTINGS.EMBEDDINGS.VERSION} placement="right" color="invert">
                                     <a href="https://learn.microsoft.com/en-us/rest/api/azureopenai/models/list" target="_blank">
-                                        <IconExternalLink className="cursor-help ml-1 h-5 w-5" /></a>
+                                        <MemoIconExternalLink className="cursor-help ml-1 h-5 w-5" /></a>
                                 </Tooltip>
                             </div>
                             <input placeholder="Enter Azure version" onChange={(e) => setVersion(e.target.value)} value={version}
diff --git a/src/components/projects/projectId/settings/embeddings/Embeddings.tsx b/src/components/projects/projectId/settings/embeddings/Embeddings.tsx
index 7d61bce8..0e87e8be 100644
--- a/src/components/projects/projectId/settings/embeddings/Embeddings.tsx
+++ b/src/components/projects/projectId/settings/embeddings/Embeddings.tsx
@@ -18,6 +18,7 @@ import DeleteEmbeddingModal from "./DeleteEmbeddingModal";
 import { useWebsocket } from "@/submodules/react-components/hooks/web-socket/useWebsocket";
 import { Application, CurrentPage, CurrentPageSubKey } from "@/submodules/react-components/hooks/web-socket/constants";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconAlertTriangleFilled, MemoIconCircleCheckFilled, MemoIconNotes, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 
 
 export default function Embeddings(props: { refetchEmbeddings: () => void }) {
@@ -119,7 +120,7 @@ export default function Embeddings(props: { refetchEmbeddings: () => void }) {
                                                         TOOLTIPS_DICT.PROJECT_SETTINGS.EMBEDDINGS.HAS_FILTER_ATTRIBUTES :
                                                         TOOLTIPS_DICT.PROJECT_SETTINGS.EMBEDDINGS.NO_FILTER_ATTRIBUTES)
                                                 } color="invert" >
-                                                    <IconNotes onClick={() => embedding.onQdrant ? dispatch(setModalStates(ModalEnum.FILTERED_ATTRIBUTES, { embeddingId: embedding.id, open: true, attributeNames: prepareAttributeDataByNames(embedding.filterAttributes), showEditOption: showEditOption })) : null}
+                                                    <MemoIconNotes onClick={() => embedding.onQdrant ? dispatch(setModalStates(ModalEnum.FILTERED_ATTRIBUTES, { embeddingId: embedding.id, open: true, attributeNames: prepareAttributeDataByNames(embedding.filterAttributes), showEditOption: showEditOption })) : null}
                                                         className={`h-6 w-6 ${embedding.filterAttributes && embedding.filterAttributes.length > 0 ? 'text-gray-700' : 'text-gray-300'} ${embedding.onQdrant ? "" : "cursor-not-allowed opacity-50"}`} />
                                                 </Tooltip>
                                             </td> : <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500 flex justify-center"><LoadingIcon /></td>}
@@ -139,10 +140,10 @@ export default function Embeddings(props: { refetchEmbeddings: () => void }) {
                                                 <p className="text-xs italic">{embedding.state}</p>
                                             </div>}
                                             {embedding.state == EmbeddingState.FINISHED && <Tooltip content={TOOLTIPS_DICT.GENERAL.SUCCESSFULLY_CREATED} color="invert" className="cursor-auto">
-                                                <IconCircleCheckFilled className="h-6 w-6 text-green-500" />
+                                                <MemoIconCircleCheckFilled className="h-6 w-6 text-green-500" />
                                             </Tooltip>}
                                             {embedding.state == EmbeddingState.FAILED && <Tooltip content={TOOLTIPS_DICT.GENERAL.ERROR} color="invert" className="cursor-auto">
-                                                <IconAlertTriangleFilled className="h-6 w-6 text-red-500" />
+                                                <MemoIconAlertTriangleFilled className="h-6 w-6 text-red-500" />
                                             </Tooltip>}
                                         </td>
                                         <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
@@ -152,7 +153,7 @@ export default function Embeddings(props: { refetchEmbeddings: () => void }) {
                                             {embedding.count}
                                         </td>
                                         <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
-                                            <IconTrash onClick={() => dispatch(setModalStates(ModalEnum.DELETE_EMBEDDING, { embeddingId: embedding.id, open: true, isQueuedElement: embedding.state == EmbeddingState.QUEUED }))}
+                                            <MemoIconTrash onClick={() => dispatch(setModalStates(ModalEnum.DELETE_EMBEDDING, { embeddingId: embedding.id, open: true, isQueuedElement: embedding.state == EmbeddingState.QUEUED }))}
                                                 className="h-6 w-6 text-red-700 cursor-pointer" />
                                         </td>
                                     </tr>
diff --git a/src/components/projects/projectId/settings/labeling-tasks/ChangeColorModal.tsx b/src/components/projects/projectId/settings/labeling-tasks/ChangeColorModal.tsx
index 04be6c66..3afd10d6 100644
--- a/src/components/projects/projectId/settings/labeling-tasks/ChangeColorModal.tsx
+++ b/src/components/projects/projectId/settings/labeling-tasks/ChangeColorModal.tsx
@@ -8,6 +8,7 @@ import { ModalEnum } from "@/src/types/shared/modal";
 import { LabelHelper } from "@/src/util/classes/label-helper";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { jsonCopy } from "@/submodules/javascript-functions/general";
+import { MemoIconPencil } from "@/submodules/react-components/components/kern-icons/icons";
 import { Tooltip } from "@nextui-org/react";
 import { IconPencil } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
@@ -92,7 +93,7 @@ export default function ChangeColorModal() {
                     }}
                         className={`inline-flex items-center border rounded-md py-1 px-2 text-sm font-medium shadow-sm text-center cursor-pointer ${modalChangeColor.label.color?.backgroundColor} ${modalChangeColor.label.color?.textColor} ${modalChangeColor.label.color?.borderColor} ${modalChangeColor.label.color?.hoverColor}`}>
                         {modalChangeColor.label.name}
-                        <IconPencil className="h-5 w-5 ml-2" />
+                        <MemoIconPencil className="h-5 w-5 ml-2" />
                     </span>
                 </Tooltip>
             </div>
diff --git a/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx b/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx
index 502d1c82..5557128a 100644
--- a/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx
+++ b/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx
@@ -21,6 +21,7 @@ import KernDropdown from "@/submodules/react-components/components/KernDropdown"
 import { updateLabelingTask } from "@/src/services/base/labeling-tasks";
 import IconButton from "@/submodules/react-components/components/kern-button/IconButton";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconColorPicker, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function LabelingTasks() {
     const dispatch = useDispatch();
@@ -139,10 +140,10 @@ export default function LabelingTasks() {
                                     <td className="flex flex-wrap justify-center items-center px-3 py-2 text-sm text-gray-500">
                                         {task.labels.map((label: LabelType) => (
                                             <div key={label.id} className={`inline-flex border items-center m-1 px-1.5 py-0.5 rounded-md text-sm font-medium ${label.color.backgroundColor} ${label.color.textColor} ${label.color.borderColor} ${label.color.hoverColor}`}>
-                                                <IconColorPicker className="h-4 w-4 mr-1 cursor-pointer" onClick={() => dispatch(setModalStates(ModalEnum.CHANGE_COLOR, { taskId: task.id, label: label, open: true }))} />
+                                                <MemoIconColorPicker className="h-4 w-4 mr-1 cursor-pointer" onClick={() => dispatch(setModalStates(ModalEnum.CHANGE_COLOR, { taskId: task.id, label: label, open: true }))} />
                                                 <span>{label.name}</span>
                                                 {label.hotkey && <kbd className="ml-2 uppercase inline-flex items-center border bg-white border-gray-200 rounded px-2 text-sm font-sans font-medium text-gray-400">{label.hotkey}</kbd>}
-                                                <IconTrash className="h-4 w-4 ml-1 cursor-pointer" onClick={() => dispatch(setModalStates(ModalEnum.DELETE_LABEL, { taskId: task.id, label: label, open: true }))} />
+                                                <MemoIconTrash className="h-4 w-4 ml-1 cursor-pointer" onClick={() => dispatch(setModalStates(ModalEnum.DELETE_LABEL, { taskId: task.id, label: label, open: true }))} />
                                             </div>
                                         ))}
                                         <IconButton
@@ -152,7 +153,7 @@ export default function LabelingTasks() {
                                         />
                                     </td>
                                     <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
-                                        <IconTrash onClick={() => dispatch(setModalStates(ModalEnum.DELETE_LABELING_TASK, { taskId: task.id, open: true }))}
+                                        <MemoIconTrash onClick={() => dispatch(setModalStates(ModalEnum.DELETE_LABELING_TASK, { taskId: task.id, open: true }))}
                                             className="h-6 w-6 text-red-700 cursor-pointer" />
                                     </td>
                                 </tr>
diff --git a/src/components/projects/projectId/settings/labeling-tasks/RenameLabelModal.tsx b/src/components/projects/projectId/settings/labeling-tasks/RenameLabelModal.tsx
index 76751733..33caee7a 100644
--- a/src/components/projects/projectId/settings/labeling-tasks/RenameLabelModal.tsx
+++ b/src/components/projects/projectId/settings/labeling-tasks/RenameLabelModal.tsx
@@ -11,6 +11,7 @@ import { LabelHelper } from "@/src/util/classes/label-helper";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { jsonCopy } from "@/submodules/javascript-functions/general";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconAlertTriangleFilled, MemoIconInfoCircleFilled, MemoIconTriangleInverted } from "@/submodules/react-components/components/kern-icons/icons";
 import { Tooltip } from "@nextui-org/react";
 import { IconAlertTriangleFilled, IconInfoCircleFilled, IconTriangleInverted } from "@tabler/icons-react";
 import { useCallback, useEffect, useState } from "react";
@@ -99,7 +100,7 @@ export default function RenameLabelModal() {
                     <p className="mr-2 font-medium">Change label name:</p><span
                         className={`border rounded-md py-1 px-2 text-sm font-medium shadow-sm  text-center ${modalRenameLabel.label.color?.backgroundColor} ${modalRenameLabel.label.color?.textColor} ${modalRenameLabel.label.color?.borderColor} ${modalRenameLabel.label.color?.hoverColor}`}>{modalRenameLabel.label.name}</span>
                     <Tooltip content={TOOLTIPS_DICT.PROJECT_SETTINGS.LABELING_TASK.INFO_RENAME_LABEL} color="invert" placement="top" className="ml-2">
-                        <IconInfoCircleFilled className="h-6 w-6 text-blue-500" />
+                        <MemoIconInfoCircleFilled className="h-6 w-6 text-blue-500" />
                     </Tooltip>
                 </div>
                 <div className="flex flex-col gap-y-2" style={{ maxHeight: 'calc(100vh - 200px)', overflow: 'auto' }}>
@@ -118,7 +119,7 @@ export default function RenameLabelModal() {
                     {renameLabelData?.checkResults?.errors?.length > 0 && <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative flex flex-col">
                         <div className="self-center flex flex-row flex-nowrap items-center -mt-1 mb-1">
                             <strong className="font-medium">Errors detected</strong>
-                            <IconAlertTriangleFilled className="h-5 w-5 text-red-400" />
+                            <MemoIconAlertTriangleFilled className="h-5 w-5 text-red-400" />
                         </div>
                         {renameLabelData?.checkResults?.errors.map((error: any) => (
                             <pre key={error.msg} className="text-sm overflow-x-auto">{error.msg}</pre>
@@ -127,7 +128,7 @@ export default function RenameLabelModal() {
                     {renameLabelData?.checkResults?.infos.length > 0 && <div className="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded relative flex flex-col">
                         <div className="self-center flex flex-row flex-nowrap items-center -mt-1 mb-1">
                             <strong className="font-medium">Information</strong>
-                            <IconInfoCircleFilled className="h-5 w-5 text-blue-400" />
+                            <MemoIconInfoCircleFilled className="h-5 w-5 text-blue-400" />
                         </div>
                         {renameLabelData?.checkResults?.infos.map((info: any) => (
                             <pre key={info.msg} className="text-sm overflow-x-auto">{info.msg}</pre>
@@ -136,7 +137,7 @@ export default function RenameLabelModal() {
                     {renameLabelData?.checkResults?.warnings?.length > 0 && <div className="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded relative flex flex-col">
                         <div className="self-center flex flex-row flex-nowrap items-center -mt-1 mb-1">
                             <strong className="font-medium">Warning</strong>
-                            <IconAlertTriangleFilled className="h-5 w-5 text-yellow-400" />
+                            <MemoIconAlertTriangleFilled className="h-5 w-5 text-yellow-400" />
                         </div>
                         <div className="self-center">
                             <span className="text-sm mb-2">
@@ -157,7 +158,7 @@ export default function RenameLabelModal() {
                                     setRenameLabelData({ ...renameLabelData, checkResults: checkResults });
                                 }}>
                                     <div className="mr-1">
-                                        <IconTriangleInverted className={`h-3 w-3 ${warning.open ? 'transform rotate-180' : ''}`} />
+                                        <MemoIconTriangleInverted className={`h-3 w-3 ${warning.open ? 'transform rotate-180' : ''}`} />
                                     </div>
                                     <span className="text-sm overflow-x-auto">{warning.msg}</span>
                                 </div>
diff --git a/src/components/shared/comments/Comments.tsx b/src/components/shared/comments/Comments.tsx
index 7ff202cc..ec4a06b4 100644
--- a/src/components/shared/comments/Comments.tsx
+++ b/src/components/shared/comments/Comments.tsx
@@ -13,6 +13,7 @@ import { useWebsocket } from "@/submodules/react-components/hooks/web-socket/use
 import { getAllComments } from "@/src/services/base/comment";
 import { getOrganizationUsers } from "@/src/services/base/organization";
 import { Application, CurrentPage, CurrentPageSubKey } from "@/submodules/react-components/hooks/web-socket/constants";
+import { MemoIconNotes } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function Comments() {
     const dispatch = useDispatch();
@@ -101,7 +102,7 @@ export default function Comments() {
     return (<>
         <button className="cursor-pointer inline-block mr-6" onClick={toggleModal}>
             <Tooltip content={TOOLTIPS_DICT.GENERAL.COMMENTS} color="invert" placement="bottom">
-                <IconNotes className="w-6 h-6" />
+                <MemoIconNotes className="w-6 h-6" />
             </Tooltip>
         </button>
         <CommentsMainSection open={sidebarOpen} toggleOpen={(toggleModal)} />
diff --git a/src/components/shared/comments/CommentsMainSection.tsx b/src/components/shared/comments/CommentsMainSection.tsx
index 1377481e..613cf934 100644
--- a/src/components/shared/comments/CommentsMainSection.tsx
+++ b/src/components/shared/comments/CommentsMainSection.tsx
@@ -13,6 +13,7 @@ import { convertTypeToKey } from "@/src/util/shared/comments-helper";
 import { CommentDataManager } from "@/src/util/classes/comments";
 import { createComment, deleteCommentPost, updateCommentPost } from "@/src/services/base/comment";
 import IconButton from "@/submodules/react-components/components/kern-button/IconButton";
+import { MemoIconArrowLeft, MemoIconArrowRight } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function CommentsMainSection(props: CommentMainSectionProps) {
     const comments = useSelector(selectComments);
@@ -136,13 +137,13 @@ export default function CommentsMainSection(props: CommentMainSectionProps) {
                         <div className="flex flex-row items-center px-4 pt-4">
                             {positionComment == CommentPosition.RIGHT ? <Tooltip content={TOOLTIPS_DICT.GENERAL.MOVE_COMMENT_LEFT} color="invert">
                                 <div className='cursor-pointer' onClick={flipCommentPosition}>
-                                    <IconArrowLeft size={24}
+                                    <MemoIconArrowLeft size={24}
                                         strokeWidth={2}
                                         className='text-gray-700 font-semibold cursor-pointer' />
                                 </div>
                             </Tooltip> : <Tooltip content={TOOLTIPS_DICT.GENERAL.MOVE_COMMENT_RIGHT} color="invert">
                                 <div className='cursor-pointer' onClick={flipCommentPosition}>
-                                    <IconArrowRight size={24}
+                                    <MemoIconArrowRight size={24}
                                         strokeWidth={2}
                                         className='text-gray-700 font-semibold cursor-pointer' />
                                 </div>
diff --git a/src/components/shared/comments/DisplayComments.tsx b/src/components/shared/comments/DisplayComments.tsx
index 1e2d6dd1..7e9f9004 100644
--- a/src/components/shared/comments/DisplayComments.tsx
+++ b/src/components/shared/comments/DisplayComments.tsx
@@ -1,6 +1,7 @@
 import { selectComments, selectUser } from "@/src/reduxStore/states/general";
 import { CommentData, CommentPosition, DisplayCommentsProps } from "@/src/types/shared/comments";
 import { combineClassNames } from "@/submodules/javascript-functions/general";
+import { MemoIconDotsVertical, MemoIconEdit, MemoIconEye, MemoIconEyeOff, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 import { Menu, Transition } from "@headlessui/react";
 import { Tooltip } from "@nextui-org/react";
 import { IconDotsVertical, IconEdit, IconEye, IconEyeOff, IconTrash } from "@tabler/icons-react";
@@ -34,7 +35,7 @@ export default function DisplayComments(props: DisplayCommentsProps) {
                                         <Tooltip content={comment.creationUser} contentColor="invert" hideArrow={true} placement={positionComment == CommentPosition.RIGHT ? 'bottom' : 'right'}
                                             css={{ color: '#6B7280', border: '1px solid #6B7280', backgroundColor: '#F3F4F6', textAlign: 'center' }}>
                                             {!comment.is_private ? (<img className={`h-10 w-10 p-1 ${user?.id == comment.created_by ? 'border border-blue-400 rounded-full' : null}`} src={`/refinery/avatars/${comment.avatarUri}`} alt="" />) : (
-                                                <IconEyeOff className={`h-10 w-10 p-1 ${user?.id == comment.created_by ? 'border border-blue-400 rounded-full' : null}`} />
+                                                <MemoIconEyeOff className={`h-10 w-10 p-1 ${user?.id == comment.created_by ? 'border border-blue-400 rounded-full' : null}`} />
                                             )}
                                         </Tooltip>
                                     </span>
@@ -48,7 +49,7 @@ export default function DisplayComments(props: DisplayCommentsProps) {
                             <Menu as="div" className="absolute right-0 inline-block flex-shrink-0 text-left">
                                 <Menu.Button className="group relative inline-flex h-8 w-8 items-center justify-center rounded-full disabled:cursor-not-allowed disabled:opacity-50" disabled={comment.created_by != user.id}>
                                     <span className="flex h-full w-full items-center justify-center rounded-full">
-                                        <IconDotsVertical
+                                        <MemoIconDotsVertical
                                             size={24}
                                             strokeWidth={2}
                                             className='text-gray-700 font-semibold' />
@@ -79,7 +80,7 @@ export default function DisplayComments(props: DisplayCommentsProps) {
                                                     )}
                                                     >
                                                         <div className="flex flex-row items-center">
-                                                            <IconEdit
+                                                            <MemoIconEdit
                                                                 className={`font-semibold h-5 w-5 ${active ? 'text-gray-900' : 'text-gray-700'}`} />
                                                             <span className="ml-2">Edit</span>
                                                         </div>
@@ -97,10 +98,10 @@ export default function DisplayComments(props: DisplayCommentsProps) {
                                                     )}
                                                     >
                                                         <div className="flex flex-row items-center">
-                                                            {!comment.is_private && <><IconEyeOff
+                                                            {!comment.is_private && <><MemoIconEyeOff
                                                                 className={`font-semibold h-5 w-5 ${active ? 'text-gray-900' : 'text-gray-700'}`} />
                                                                 <span className="ml-2">Private</span></>}
-                                                            {comment.is_private && <><IconEye
+                                                            {comment.is_private && <><MemoIconEye
                                                                 className={`font-semibold h-5 w-5 ${active ? 'text-gray-900' : 'text-gray-700'}`} />
                                                                 <span className="ml-2">Public</span></>}
                                                         </div>
@@ -115,7 +116,7 @@ export default function DisplayComments(props: DisplayCommentsProps) {
                                                     )}
                                                     >
                                                         <div className="flex flex-row items-center">
-                                                            <IconTrash
+                                                            <MemoIconTrash
                                                                 className={`font-semibold h-5 w-5 ${active ? 'text-gray-900' : 'text-gray-700'}`} />
                                                             <span className="ml-2">Delete</span>
                                                         </div>
diff --git a/src/components/shared/crypted-field/CryptedField.tsx b/src/components/shared/crypted-field/CryptedField.tsx
index 091754e1..2957cca4 100644
--- a/src/components/shared/crypted-field/CryptedField.tsx
+++ b/src/components/shared/crypted-field/CryptedField.tsx
@@ -1,5 +1,6 @@
 import { CryptoFieldProps } from "@/src/types/shared/crypted-field";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
+import { MemoIconEye, MemoIconEyeOff } from "@/submodules/react-components/components/kern-icons/icons";
 import { useDefaults } from "@/submodules/react-components/hooks/useDefaults";
 import { Tooltip } from "@nextui-org/react";
 import { IconEye, IconEyeOff } from "@tabler/icons-react";
@@ -38,11 +39,11 @@ export default function CryptedField(_props: CryptoFieldProps) {
                 <button onClick={toggleKey} disabled={!key} className="disabled:cursor-not-allowed disabled:opacity-50">
                     {!show ? (
                         <Tooltip content={TOOLTIPS_DICT.GENERAL.SHOW_PASSWORD} color="invert" placement="right">
-                            <IconEye className={`text-gray-500 absolute top-1 right-3 ${!key ? 'cursor-not-allowed opacity-50' : 'cursor-pointer opacity-100'}`} />
+                            <MemoIconEye className={`text-gray-500 absolute top-1 right-3 ${!key ? 'cursor-not-allowed opacity-50' : 'cursor-pointer opacity-100'}`} />
                         </Tooltip>
                     ) : (
                         <Tooltip content={TOOLTIPS_DICT.GENERAL.HIDE_PASSWORD} color="invert" placement="right">
-                            <IconEyeOff className={`text-gray-500 absolute top-1 right-3 ${!key ? 'cursor-not-allowed opacity-50' : 'cursor-pointer opacity-100'}`} />
+                            <MemoIconEyeOff className={`text-gray-500 absolute top-1 right-3 ${!key ? 'cursor-not-allowed opacity-50' : 'cursor-pointer opacity-100'}`} />
                         </Tooltip>
                     )}
                 </button>
diff --git a/src/components/shared/grid-cards/GridCards.tsx b/src/components/shared/grid-cards/GridCards.tsx
index ccf39802..d28c7ae4 100644
--- a/src/components/shared/grid-cards/GridCards.tsx
+++ b/src/components/shared/grid-cards/GridCards.tsx
@@ -10,6 +10,7 @@ import style from '@/src/styles/components/projects/projectId/heuristics/heurist
 import { useRouter } from "next/router";
 import Statuses from "../statuses/Statuses";
 import { toggleHeuristicById } from "@/src/services/base/heuristic";
+import { MemoIconArrowRight, MemoIconBolt, MemoIconCode } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function GridCards(props: GridCardsProps) {
     const router = useRouter();
@@ -34,10 +35,10 @@ export default function GridCards(props: GridCardsProps) {
                         <input type="checkbox" className="cursor-pointer" name="heuristic-name" checked={heuristic.selected} onChange={() => toggleHeuristic(projectId, heuristic.id)} />
                     </label>
                     {heuristic.informationSourceType === InformationSourceType.LABELING_FUNCTION && <Tooltip content={TOOLTIPS_DICT.HEURISTICS.LABELING_FUNCTION} color="invert" placement="right" className="cursor-auto">
-                        <IconCode size={20} strokeWidth={1.5} />
+                        <MemoIconCode size={20} strokeWidth={1.5} />
                     </Tooltip>}
                     {heuristic.informationSourceType === InformationSourceType.ACTIVE_LEARNING && <Tooltip content={TOOLTIPS_DICT.HEURISTICS.ACTIVE_LEARNING} color="invert" placement="right" className="cursor-auto">
-                        <IconBolt size={20} strokeWidth={1.5} className="fill-gray-800" />
+                        <MemoIconBolt size={20} strokeWidth={1.5} className="fill-gray-800" />
                     </Tooltip>}
                 </div>
 
@@ -48,7 +49,7 @@ export default function GridCards(props: GridCardsProps) {
                             e.preventDefault();
                             router.push(`${heuristic.routerLink}`);
                         }}> Details
-                            <IconArrowRight className="h-5 w-5 inline-block text-green-800" />
+                            <MemoIconArrowRight className="h-5 w-5 inline-block text-green-800" />
                         </a>}
                     </div>
                     <div className="flow-root font-normal">
diff --git a/src/components/shared/header/Header.tsx b/src/components/shared/header/Header.tsx
index e3400d27..a83d57d1 100644
--- a/src/components/shared/header/Header.tsx
+++ b/src/components/shared/header/Header.tsx
@@ -18,6 +18,7 @@ import Comments from "../comments/Comments";
 import { getAllProjects } from "@/src/services/base/project";
 import { getNotifications } from "@/src/services/base/notification";
 import { CurrentPage } from "@/submodules/react-components/hooks/web-socket/constants";
+import { MemoIconBell, MemoIconHexagons, MemoIconHome } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function Header() {
     const router = useRouter();
@@ -88,7 +89,7 @@ export default function Header() {
                     <div className="flex items-center justify-center">
                         <a href="/refinery/projects" className="flex mr-6">
                             <Tooltip placement="bottom" trigger="hover" color="invert" content={TOOLTIPS_DICT.GENERAL.PROJECTS}>
-                                <IconHome className="w-6 h-6" />
+                                <MemoIconHome className="w-6 h-6" />
                             </Tooltip>
                         </a>
                     </div>
@@ -97,7 +98,7 @@ export default function Header() {
                             <a href="/refinery/users" onClick={(e: any) => { e.preventDefault(); dispatch(setProjectIdSampleProject(null)); router.push(`/users`) }}
                                 className="flex mr-6">
                                 <Tooltip placement="bottom" trigger="hover" color="invert" content={TOOLTIPS_DICT.GENERAL.USERS}>
-                                    <IconHexagons className="w-6 h-6" />
+                                    <MemoIconHexagons className="w-6 h-6" />
                                 </Tooltip>
                             </a>
                         </div>
@@ -108,7 +109,7 @@ export default function Header() {
                     {user?.role == UserRole.ENGINEER && <div className="flex items-center justify-center">
                         <button className="flex mr-6 cursor-pointer" onClick={openModalAndRefetchNotifications}>
                             <Tooltip content={TOOLTIPS_DICT.GENERAL.NOTIFICATION_CENTER} placement="bottom" color="invert">
-                                <IconBell className="w-6 h-6" />
+                                <MemoIconBell className="w-6 h-6" />
                             </Tooltip>
                         </button>
                     </div>}
diff --git a/src/components/shared/layout/Layout.tsx b/src/components/shared/layout/Layout.tsx
index ad811b3c..f65b9e82 100644
--- a/src/components/shared/layout/Layout.tsx
+++ b/src/components/shared/layout/Layout.tsx
@@ -20,6 +20,7 @@ import { getNotificationsByUser } from "@/src/services/base/notification";
 import { getAllActiveAdminMessages } from "@/src/services/base/organization";
 import { Application, CurrentPage } from "@/submodules/react-components/hooks/web-socket/constants";
 import AdminMessages from "@/submodules/react-components/components/AdminMessages";
+import { MemoIconAlertTriangleFilled, MemoIconCircleCheckFilled, MemoIconInfoCircleFilled } from "@/submodules/react-components/components/kern-icons/icons";
 
 const MIN_WIDTH = 1250;
 
@@ -130,7 +131,7 @@ export default function Layout({ children }) {
                         <div className="bg-blue-50 border-l-4 border-blue-400 p-4">
                             <div className="flex">
                                 <div className="flex-shrink-0">
-                                    <IconInfoCircleFilled className="h-5 w-5 text-blue-400" />
+                                    <MemoIconInfoCircleFilled className="h-5 w-5 text-blue-400" />
                                 </div>
                                 <div className="ml-3">
                                     <p className="text-sm text-blue-700">{notification.message}</p>
@@ -142,7 +143,7 @@ export default function Layout({ children }) {
                         <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                             <div className="flex">
                                 <div className="flex-shrink-0">
-                                    <IconAlertTriangleFilled className="h-5 w-5 text-yellow-400" />
+                                    <MemoIconAlertTriangleFilled className="h-5 w-5 text-yellow-400" />
                                 </div>
                                 <div className="ml-3">
                                     <p className="text-sm text-yellow-700">{notification.message}</p>
@@ -154,7 +155,7 @@ export default function Layout({ children }) {
                         <div className="bg-red-50 border-l-4 border-red-400 p-4">
                             <div className="flex">
                                 <div className="flex-shrink-0">
-                                    <IconAlertTriangleFilled className="h-5 w-5 text-red-400" />
+                                    <MemoIconAlertTriangleFilled className="h-5 w-5 text-red-400" />
                                 </div>
                                 <div className="ml-3">
                                     <p className="text-sm text-red-700">{notification.message}</p>
@@ -166,7 +167,7 @@ export default function Layout({ children }) {
                         <div className="bg-green-50 border-l-4 border-green-400 p-4">
                             <div className="flex">
                                 <div className="flex-shrink-0">
-                                    <IconCircleCheckFilled className="h-5 w-5 text-green-400" />
+                                    <MemoIconCircleCheckFilled className="h-5 w-5 text-green-400" />
                                 </div>
                                 <div className="ml-3">
                                     <p className="text-sm text-green-700">{notification.message}</p>
diff --git a/src/components/shared/notification-center/NotificationCenter.tsx b/src/components/shared/notification-center/NotificationCenter.tsx
index 98fda6b3..38b54718 100644
--- a/src/components/shared/notification-center/NotificationCenter.tsx
+++ b/src/components/shared/notification-center/NotificationCenter.tsx
@@ -2,8 +2,8 @@ import { selectNotifications } from "@/src/reduxStore/states/general";
 import { NotificationLevel } from "@/src/types/shared/notification-center";
 import { useSelector } from "react-redux";
 import style from "@/src/styles/shared/notification-center.module.css";
-import { IconAlertTriangleFilled, IconCircleCheckFilled, IconInfoCircleFilled } from "@tabler/icons-react";
 import NotificationData from "./NotificationData";
+import { MemoIconAlertTriangleFilled, MemoIconCircleCheckFilled, MemoIconInfoCircleFilled } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function NotificationCenter() {
     const notifications = useSelector(selectNotifications);
@@ -16,7 +16,7 @@ export default function NotificationCenter() {
                 {notification.array[0].level === NotificationLevel.WARNING && <div className={`mb-2 rounded-md border border-yellow-300 bg-yellow-50 p-3 ${notification.highlightMe ? style.outlineKern : ''}`}>
                     <div className="flex">
                         <div className="flex-shrink-0">
-                            <IconAlertTriangleFilled className="h-5 w-5 text-yellow-400" />
+                            <MemoIconAlertTriangleFilled className="h-5 w-5 text-yellow-400" />
                         </div>
                         <NotificationData notification={notification.array} textColor="yellow" />
                     </div>
@@ -24,7 +24,7 @@ export default function NotificationCenter() {
                 {notification.array[0].level === NotificationLevel.SUCCESS && <div className={`mb-2 rounded-md border border-green-300 bg-green-50 p-3 ${notification.highlightMe ? style.outlineKern : ''}`}>
                     <div className="flex">
                         <div className="flex-shrink-0">
-                            <IconCircleCheckFilled className="h-5 w-5 text-green-400" />
+                            <MemoIconCircleCheckFilled className="h-5 w-5 text-green-400" />
                         </div>
                         <NotificationData notification={notification.array} textColor="green" />
                     </div>
@@ -32,7 +32,7 @@ export default function NotificationCenter() {
                 {notification.array[0].level === NotificationLevel.INFO && <div className={`mb-2 rounded-md border border-blue-300 bg-blue-50 p-3 ${notification.highlightMe ? style.outlineKern : ''}`}>
                     <div className="flex">
                         <div className="flex-shrink-0">
-                            <IconInfoCircleFilled className="h-5 w-5 text-blue-400" />
+                            <MemoIconInfoCircleFilled className="h-5 w-5 text-blue-400" />
                         </div>
                         <NotificationData notification={notification.array} textColor="blue" />
                     </div>
@@ -40,7 +40,7 @@ export default function NotificationCenter() {
                 {notification.array[0].level === NotificationLevel.ERROR && <div className={`mb-2 rounded-md border border-red-300 bg-red-50 p-3 ${notification.highlightMe ? style.outlineKern : ''}`}>
                     <div className="flex">
                         <div className="flex-shrink-0">
-                            <IconAlertTriangleFilled className="h-6 w-6 text-red-400" />
+                            <MemoIconAlertTriangleFilled className="h-6 w-6 text-red-400" />
                         </div>
                         <NotificationData notification={notification.array} textColor="red" />
                     </div>
diff --git a/src/components/shared/record-display/RecordDisplay.tsx b/src/components/shared/record-display/RecordDisplay.tsx
index 8278b7e4..1d62cb93 100644
--- a/src/components/shared/record-display/RecordDisplay.tsx
+++ b/src/components/shared/record-display/RecordDisplay.tsx
@@ -8,6 +8,7 @@ import { IconAlertCircle } from "@tabler/icons-react";
 import { use, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import Highlight from "../highlight/Highlight";
+import { MemoIconAlertCircle } from "@/submodules/react-components/components/kern-icons/icons";
 
 export function RecordDisplay(props: any) {
     const attributesDict = useSelector(selectAttributesDict);
@@ -59,7 +60,7 @@ export function RecordDisplay(props: any) {
 
 function NotPresentInRecord() {
     return (<div className="flex items-center">
-        <IconAlertCircle className="text-yellow-700" />
+        <MemoIconAlertCircle className="text-yellow-700" />
         <span className="text-gray-500 text-sm font-normal italic">Not present in the record</span>
     </div>
     )
diff --git a/src/components/shared/sidebar/Sidebar.tsx b/src/components/shared/sidebar/Sidebar.tsx
index efdaa7e1..9dae75e2 100644
--- a/src/components/shared/sidebar/Sidebar.tsx
+++ b/src/components/shared/sidebar/Sidebar.tsx
@@ -8,15 +8,13 @@ import { useState } from 'react';
 import AppSelectionDropdown from '@/submodules/react-components/components/AppSelectionDropdown';
 import { ModalEnum } from '@/src/types/shared/modal';
 import { openModal } from '@/src/reduxStore/states/modal';
-import { IconAlertCircle, IconBulb, IconChartPie, IconMaximize, IconMinimize, IconTag, IconTriangleSquareCircle } from '@tabler/icons-react';
-import { IconSettings } from '@tabler/icons-react';
 import { useRouter } from 'next/router';
 import { TOOLTIPS_DICT } from '@/src/util/tooltip-constants';
 import { CacheEnum, selectCachedValue } from '@/src/reduxStore/states/cachedValues';
 import VersionOverviewModal from './VersionOverviewModal';
 import { setProjectIdSampleProject } from '@/src/reduxStore/states/tmp';
 import { getHasUpdates } from '@/src/services/base/misc';
-import IconButton from '@/submodules/react-components/components/kern-button/IconButton';
+import { MemoIconAlertCircle, MemoIconBulb, MemoIconChartPie, MemoIconMaximize, MemoIconMinimize, MemoIconSettings, MemoIconTag, MemoIconTriangleSquareCircle } from '@/submodules/react-components/components/kern-icons/icons';
 
 export default function Sidebar() {
     const router = useRouter();
@@ -98,7 +96,7 @@ export default function Sidebar() {
                                                 <div className={`relative z-50`}>
                                                     <a href={`/refinery/projects/${project.id}/overview`} onClick={(e: any) => { e.preventDefault(); router.push(`/projects/${project.id}/overview`) }}
                                                         className={`${project.numDataScaleUploaded == 0 ? 'opacity-50 cursor-not-allowed' : 'opacity-100 cursor-pointer'} circle ${routeColor.overview.active ? 'text-kernpurple' : 'text-white'}`}>
-                                                        <IconChartPie className="w-6 h-6" />
+                                                        <MemoIconChartPie className="w-6 h-6" />
                                                     </a>
                                                 </div>
                                             </Tooltip>
@@ -109,7 +107,7 @@ export default function Sidebar() {
                                                 <div className={`relative z-50`}>
                                                     <a href={`/refinery/projects/${project.id}/data-browser`} onClick={(e: any) => { e.preventDefault(); router.push(`/projects/${project.id}/data-browser`) }}
                                                         className={`${project.numDataScaleUploaded == 0 ? 'opacity-50 cursor-not-allowed' : 'opacity-100 cursor-pointer'} circle ${routeColor.data.active ? 'text-kernpurple' : 'text-white'}`}>
-                                                        <IconTriangleSquareCircle className="w-6 h-6" />
+                                                        <MemoIconTriangleSquareCircle className="w-6 h-6" />
                                                     </a>
                                                 </div>
                                             </Tooltip>
@@ -119,7 +117,7 @@ export default function Sidebar() {
                                                 <div className={`relative z-50`}>
                                                     <a href={`/refinery/projects/${project.id}/labeling`} onClick={(e: any) => { e.preventDefault(); router.push(`/projects/${project.id}/labeling`) }}
                                                         className={`${project.numDataScaleUploaded == 0 ? 'opacity-50 cursor-not-allowed' : 'opacity-100 cursor-pointer'} circle ${routeColor.labeling.active ? 'text-kernpurple' : 'text-white'}`}>
-                                                        <IconTag className="w-6 h-6" />
+                                                        <MemoIconTag className="w-6 h-6" />
                                                     </a>
                                                 </div>
                                             </Tooltip>
@@ -130,7 +128,7 @@ export default function Sidebar() {
                                                 <div className={`relative z-50`}>
                                                     <a href={`/refinery/projects/${project.id}/heuristics`} onClick={(e: any) => { e.preventDefault(); router.push(`/projects/${project.id}/heuristics`) }}
                                                         className={`${project.numDataScaleUploaded == 0 ? 'opacity-50 cursor-not-allowed' : 'opacity-100 cursor-pointer'} circle ${routeColor.heuristics.active ? 'text-kernpurple' : 'text-white'}`}>
-                                                        <IconBulb className="w-6 h-6" />
+                                                        <MemoIconBulb className="w-6 h-6" />
                                                     </a>
                                                 </div>
                                             </Tooltip>
@@ -141,7 +139,7 @@ export default function Sidebar() {
                                                 <div className={`relative z-50`}>
                                                     <a href={`/refinery/projects/${project.id}/settings`} onClick={(e: any) => { e.preventDefault(); router.push(`/projects/${project.id}/settings`) }}
                                                         className={`circle ${routeColor.settings.active ? 'text-kernpurple' : 'text-white'}`}>
-                                                        <IconSettings className="w-6 h-6" />
+                                                        <MemoIconSettings className="w-6 h-6" />
                                                     </a>
                                                 </div>
                                             </Tooltip>
@@ -161,7 +159,7 @@ export default function Sidebar() {
                                 <Tooltip placement="right" trigger="hover" color="invert" content={TOOLTIPS_DICT.SIDEBAR.MAXIMIZE_SCREEN}>
                                     <button onClick={openFullScreen}
                                         className="z-50 cursor-pointer">
-                                        <IconMaximize className="text-white" />
+                                        <MemoIconMaximize className="text-white" />
                                     </button>
                                 </Tooltip>
                             </div>}
@@ -170,7 +168,7 @@ export default function Sidebar() {
                                 <Tooltip placement="right" trigger="hover" color="invert" content={TOOLTIPS_DICT.SIDEBAR.MINIMIZE_SCREEN}>
                                     <button onClick={closeFullScreen}
                                         className="z-50 cursor-pointer">
-                                        <IconMinimize className="text-white" />
+                                        <MemoIconMinimize className="text-white" />
                                     </button>
                                 </Tooltip>
                             </div>}
@@ -185,7 +183,7 @@ export default function Sidebar() {
                                         className="z-50 tooltip tooltip-right cursor-pointer select-none text-white flex items-center mr-1">
                                         v1.19.0
                                         {hasUpdates && <Tooltip placement="right" trigger="hover" color="invert" content={TOOLTIPS_DICT.SIDEBAR.NEWER_VERSION_AVAILABLE} >
-                                            <IconAlertCircle className="h-5 w-5 text-yellow-700" />
+                                            <MemoIconAlertCircle className="h-5 w-5 text-yellow-700" />
                                         </Tooltip>}
                                     </div>
                                 </Tooltip>
diff --git a/src/components/shared/sidebar/VersionOverviewModal.tsx b/src/components/shared/sidebar/VersionOverviewModal.tsx
index acf5a62a..119595af 100644
--- a/src/components/shared/sidebar/VersionOverviewModal.tsx
+++ b/src/components/shared/sidebar/VersionOverviewModal.tsx
@@ -8,6 +8,7 @@ import LoadingIcon from "../../../../submodules/react-components/components/Load
 import { useEffect, useState } from "react";
 import KernTable from "@/submodules/react-components/components/kern-table/KernTable";
 import { prepareTableBodyVersionOverview, VERSION_OVERVIEW_TABLE_COLUMNS } from "@/src/util/table-preparations/version-overview";
+import { MemoIconArrowRight } from "@/submodules/react-components/components/kern-icons/icons";
 
 
 export default function VersionOverviewModal() {
@@ -26,7 +27,7 @@ export default function VersionOverviewModal() {
 
             <a className="text-green-800 text-base font-medium ml-3" href="https://changelog.kern.ai/" target="_blank">
                 <span className="leading-5">Changelog</span>
-                <IconArrowRight className="h-4 w-4 inline-block text-green-800" />
+                <MemoIconArrowRight className="h-4 w-4 inline-block text-green-800" />
             </a>
         </div>
         {versionOverviewData ? (<div className="inline-block min-w-full align-middle mt-3">
diff --git a/src/components/shared/upload/ModalUpload.tsx b/src/components/shared/upload/ModalUpload.tsx
index 0b289c5d..0d11d513 100644
--- a/src/components/shared/upload/ModalUpload.tsx
+++ b/src/components/shared/upload/ModalUpload.tsx
@@ -10,6 +10,7 @@ import { selectUploadData } from "@/src/reduxStore/states/upload";
 import { IconAlertTriangle } from "@tabler/icons-react";
 import { timer } from "rxjs";
 import { selectModal } from "@/src/reduxStore/states/modal";
+import { MemoIconAlertTriangle } from "@/submodules/react-components/components/kern-icons/icons";
 
 const ACCEPT_BUTTON = { buttonCaption: "Upload", closeAfterClick: false, useButton: true, disabled: true };
 
@@ -89,7 +90,7 @@ export default function ModalUpload(props: UploadProps) {
                         className="h-8 w-full text-sm border-gray-300 rounded-md placeholder-italic border text-gray-900 pl-4 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100" placeholder="Enter some title here..." />
                     {isProjectTitleDuplicate && (<div className="text-red-700 text-xs mt-2">Project title exists</div>)}
                     <div className="flex flex-row mt-2">
-                        <IconAlertTriangle className="h-5 w-5 text-yellow-700" />
+                        <MemoIconAlertTriangle className="h-5 w-5 text-yellow-700" />
                         <label className="text-yellow-700 text-xs italic ml-2">If no project title is specified, the title mentioned in
                             the uploaded data will be used, potentially leading to a duplication of project titles.</label>
                     </div>
diff --git a/src/components/shared/upload/helper-components/UploadField.tsx b/src/components/shared/upload/helper-components/UploadField.tsx
index 4bdd313d..61d51aa4 100644
--- a/src/components/shared/upload/helper-components/UploadField.tsx
+++ b/src/components/shared/upload/helper-components/UploadField.tsx
@@ -6,6 +6,7 @@ import { IconDatabase } from "@tabler/icons-react";
 import { UploadHelper } from "@/src/util/classes/upload-helper";
 import { useDropzone } from 'react-dropzone';
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconDatabase } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function UploadField(props: UploadFieldProps) {
     const fileUpload = useRef<HTMLInputElement>(null);
@@ -58,7 +59,7 @@ export default function UploadField(props: UploadFieldProps) {
                     <div className="flex flex-grow items-center overflow-x-hidden">
                         <div  {...getRootProps()} onClick={() => fileUpload.current?.click()}
                             className={`w-full border border-dashed rounded-lg h-36 my-6 cursor-pointer ${file || props.uploadStarted ? 'bg-white' : 'border-slate-400'}`} style={{ 'pointerEvents': props.uploadStarted ? 'none' : 'auto' }}>
-                            <IconDatabase className="h-9 w-8 m-auto block text-gray-500 mt-6" />
+                            <MemoIconDatabase className="h-9 w-8 m-auto block text-gray-500 mt-6" />
                             {file == null && !props.uploadStarted ? (<div className="text-gray-600 text-sm font-medium text-center mb-6">
                                 <div className="text-indigo-700 mt-1">Click to select a file</div>
                                 <div className="text-xs font-normal text-gray-500 mt-1">or drag and drop</div>
diff --git a/src/components/shared/upload/helper-components/UploadWrapper.tsx b/src/components/shared/upload/helper-components/UploadWrapper.tsx
index 4d275606..0b4e5e65 100644
--- a/src/components/shared/upload/helper-components/UploadWrapper.tsx
+++ b/src/components/shared/upload/helper-components/UploadWrapper.tsx
@@ -10,6 +10,7 @@ import { Embedding, PlatformType } from "@/src/types/components/projects/project
 import CryptedField from "../../crypted-field/CryptedField";
 import { ZIP_TYPE } from "@/src/util/classes/upload-helper";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconAlertTriangle } from "@/submodules/react-components/components/kern-icons/icons";
 
 
 export default function UploadWrapper(props: UploadWrapperProps) {
@@ -43,7 +44,7 @@ export default function UploadWrapper(props: UploadWrapperProps) {
         {props.submitted && !selectedFile && props.uploadTask?.state !== UploadStates.IN_PROGRESS && <div className="rounded-md bg-yellow-50 p-4">
             <div className="flex">
                 <div className="flex-shrink-0">
-                    <IconAlertTriangle className="h-5 w-5 text-yellow-800" />
+                    <MemoIconAlertTriangle className="h-5 w-5 text-yellow-800" />
                 </div>
                 <div className="ml-3">
                     <h3 className="text-sm font-medium text-yellow-800">File required</h3>
diff --git a/src/components/users/UsersList.tsx b/src/components/users/UsersList.tsx
index 461ee4ec..60e9d80e 100644
--- a/src/components/users/UsersList.tsx
+++ b/src/components/users/UsersList.tsx
@@ -4,6 +4,7 @@ import YoutubeIntroduction from "../projects/YoutubeIntroduction";
 import { User } from "@/src/types/shared/general";
 import { IconUsersGroup } from "@tabler/icons-react";
 import { UNKNOWN_USER } from "@/src/util/constants";
+import { MemoIconUsersGroup } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function UsersList() {
     const organizationInactive = useSelector(selectInactiveOrganization);
@@ -66,7 +67,7 @@ export default function UsersList() {
                         ))}
                     </div>
                     {experts?.length == 0 && <div className="text-center">
-                        <IconUsersGroup className="mx-auto h-12 w-12 text-gray-400" />
+                        <MemoIconUsersGroup className="mx-auto h-12 w-12 text-gray-400" />
                         <h2 className="mt-2 text-lg font-medium text-gray-900">Add experts</h2>
                         <p className="mt-1 text-sm text-gray-500">Let us know if you want to add experts.
                         </p>
@@ -102,7 +103,7 @@ export default function UsersList() {
                         ))}
                     </div>
                     {annotators?.length == 0 && <div className="text-center">
-                        <IconUsersGroup className="mx-auto h-12 w-12 text-gray-400" />
+                        <MemoIconUsersGroup className="mx-auto h-12 w-12 text-gray-400" />
                         <h2 className="mt-2 text-lg font-medium text-gray-900">Add annotators</h2>
                         <p className="mt-1 text-sm text-gray-500">Let us know if you want to add annotators.
                         </p>
diff --git a/submodules/react-components b/submodules/react-components
index b7583037..b8e6f4de 160000
--- a/submodules/react-components
+++ b/submodules/react-components
@@ -1 +1 @@
-Subproject commit b7583037d9b1a6dfaacf28afe9ab6cd89ecc3c2d
+Subproject commit b8e6f4de8ffef0c166668a0f371526707195f417

From f6995d84bd0a7f5761d4e7cad1250b8e56f3369f Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Wed, 14 May 2025 12:04:11 +0200
Subject: [PATCH 2/8] Avoid additional rerendering using callbacks and refs

---
 .../models-download/ModelsDownload.tsx        |  6 ++-
 src/components/projects/ButtonsContainer.tsx  | 20 +++++---
 src/components/projects/ProjectCard.tsx       | 33 +++++++------
 .../projects/SampleProjectsDropdown.tsx       |  6 ++-
 .../attributeId/AttributeCalculations.tsx     | 49 ++++++++++---------
 .../data-browser/DataSliceOperations.tsx      | 17 ++++++-
 6 files changed, 82 insertions(+), 49 deletions(-)

diff --git a/src/components/models-download/ModelsDownload.tsx b/src/components/models-download/ModelsDownload.tsx
index 9c3bee5b..86b27bd6 100644
--- a/src/components/models-download/ModelsDownload.tsx
+++ b/src/components/models-download/ModelsDownload.tsx
@@ -59,6 +59,10 @@ export default function ModelsDownload() {
     const orgId = useSelector(selectOrganizationId);
     useWebsocket(orgId, Application.REFINERY, CurrentPage.MODELS_DOWNLOAD, handleWebsocketNotification);
 
+    const openCreateModal = useCallback(() => {
+        dispatch(openModal(ModalEnum.ADD_MODEL_DOWNLOAD));
+    }, []);
+
     return (<div className="p-4 bg-gray-100 flex-1 flex flex-col h-[calc(100vh-4rem)] overflow-y-auto">
         <div className="flex flex-row items-center">
             <ButtonAsText
@@ -87,7 +91,7 @@ export default function ModelsDownload() {
                 <KernButton
                     text="Add new model"
                     icon={IconPlus}
-                    onClick={() => dispatch(openModal(ModalEnum.ADD_MODEL_DOWNLOAD))}
+                    onClick={openCreateModal}
                 />
             </div>
         </div>
diff --git a/src/components/projects/ButtonsContainer.tsx b/src/components/projects/ButtonsContainer.tsx
index 155a2bda..315cfccd 100644
--- a/src/components/projects/ButtonsContainer.tsx
+++ b/src/components/projects/ButtonsContainer.tsx
@@ -37,6 +37,16 @@ export default function ButtonsContainer() {
     const orgId = useSelector(selectOrganizationId);
     useWebsocket(orgId, Application.REFINERY, CurrentPage.PROJECTS, handleWebsocketNotification, null, CurrentPageSubKey.BUTTONS_CONTAINER);
 
+    const createNewProject = useCallback(() => {
+        dispatch(setUploadFileType(UploadFileType.RECORDS_NEW));
+        router.push("/projects/new");
+    }, []);
+
+    const importSnapshot = useCallback(() => {
+        dispatch(openModal(ModalEnum.MODAL_UPLOAD));
+        dispatch(setUploadFileType(UploadFileType.PROJECT));
+    }, []);
+
     return (
         user && user.role === UserRole.ENGINEER ? (<div className="flex flex-row items-start gap-x-4 mt-4">
             <KernButton
@@ -44,20 +54,14 @@ export default function ButtonsContainer() {
                 buttonColor="blue"
                 solidTheme={true}
                 textColor="white"
-                onClick={() => {
-                    dispatch(setUploadFileType(UploadFileType.RECORDS_NEW));
-                    router.push("/projects/new");
-                }}
+                onClick={createNewProject}
             />
             <KernButton
                 text="Import snapshot"
                 buttonColor="blue"
                 solidTheme={true}
                 textColor="white"
-                onClick={() => {
-                    dispatch(openModal(ModalEnum.MODAL_UPLOAD));
-                    dispatch(setUploadFileType(UploadFileType.PROJECT));
-                }}
+                onClick={importSnapshot}
             />
             <SampleProjectsDropdown />
             <ModalUpload uploadOptions={uploadOptions} />
diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx
index 0f494e13..7046be4f 100644
--- a/src/components/projects/ProjectCard.tsx
+++ b/src/components/projects/ProjectCard.tsx
@@ -13,6 +13,8 @@ import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { deleteProjectPost } from "@/src/services/base/project";
 import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
 import { MemoIconX } from "@/submodules/react-components/components/kern-icons/icons";
+import { useCallback } from "react";
+import useRefFor from "@/submodules/react-components/hooks/useRefFor";
 
 export default function ProjectCard(props: ProjectCardProps) {
     const router = useRouter();
@@ -21,20 +23,6 @@ export default function ProjectCard(props: ProjectCardProps) {
     const isAdmin = useSelector(selectIsAdmin);
     const user = useSelector(selectUser);
 
-    function adminOpenOrDeleteProject(project: Project) {
-        if (!isAdmin) return;
-        const deleteInstant = isStringTrue(localStorage.getItem("adminInstantDelete"));
-        if (deleteInstant) {
-            deleteProjectPost(project.id, (res) => {
-                dispatch(closeModal(ModalEnum.ADMIN_DELETE_PROJECT));
-                dispatch(removeFromAllProjectsById(project.id));
-            })
-        }
-        else {
-            dispatch(setModalStates(ModalEnum.ADMIN_DELETE_PROJECT, { projectId: project.id, open: true }));
-        }
-    }
-
     function manageProject(): void {
         const projectId = props.project.id;
         if (user?.role == 'ENGINEER') {
@@ -48,6 +36,21 @@ export default function ProjectCard(props: ProjectCardProps) {
         }
     }
 
+    const projectId = useRefFor(props.project.id);
+    const adminOpenOrDeleteProjectFunc = useCallback(() => {
+        if (!isAdmin) return;
+        const deleteInstant = isStringTrue(localStorage.getItem("adminInstantDelete"));
+        if (deleteInstant) {
+            deleteProjectPost(projectId.current, (res) => {
+                dispatch(closeModal(ModalEnum.ADMIN_DELETE_PROJECT));
+                dispatch(removeFromAllProjectsById(projectId.current));
+            })
+        }
+        else {
+            dispatch(setModalStates(ModalEnum.ADMIN_DELETE_PROJECT, { projectId: projectId.current, open: true }));
+        }
+    }, []);
+
     return (
         <div key={props.project.id} className="relative card shadow bg-white m-4 rounded-2xl">
             {(props.project.status != ProjectStatus.IN_DELETION && props.project.status != ProjectStatus.HIDDEN) && (
@@ -65,7 +68,7 @@ export default function ProjectCard(props: ProjectCardProps) {
                         </>}
                     </div>}
                     {(isAdmin && props.project.status !== ProjectStatus.INIT_SAMPLE_PROJECT) &&
-                        <div className="absolute top-0 left-0 cursor-pointer" onClick={() => adminOpenOrDeleteProject(props.project)}>
+                        <div className="absolute top-0 left-0 cursor-pointer" onClick={adminOpenOrDeleteProjectFunc}>
                             <Tooltip content={TOOLTIPS_DICT.PROJECTS.QUICK_DELETE} color="invert" offset={2} placement="right">
                                 <MemoIconX className="h-6 w-6 text-gray-500" />
                             </Tooltip>
diff --git a/src/components/projects/SampleProjectsDropdown.tsx b/src/components/projects/SampleProjectsDropdown.tsx
index 5ab29b10..cbaf2016 100644
--- a/src/components/projects/SampleProjectsDropdown.tsx
+++ b/src/components/projects/SampleProjectsDropdown.tsx
@@ -73,6 +73,10 @@ export default function SampleProjectsDropdown() {
         }
     }, []);
 
+    const furtherSampleProjects = useCallback(() => {
+        window.open("https://github.com/code-kern-ai/refinery-sample-projects", "_blank")
+    }, []);
+
     return (
         <Menu as="div" className="relative inline-block text-left">
             <div>
@@ -212,7 +216,7 @@ export default function SampleProjectsDropdown() {
                             {({ active }) => (
                                 <a key="sample-project-6"
                                     className={`opacity-100 cursor-pointer text-gray-900 block px-3 py-2 text-sm ${active ? "bg-kernindigo text-white" : ""}`}
-                                    onClick={() => window.open("https://github.com/code-kern-ai/refinery-sample-projects", "_blank")}>
+                                    onClick={furtherSampleProjects}>
                                     <span>Further sample projects</span>
                                 </a>
                             )}
diff --git a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
index 2394f8b3..4b163d0c 100644
--- a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
+++ b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
@@ -198,49 +198,48 @@ export default function AttributeCalculation() {
 
     }
 
-    function changeAttributeName(name: string) {
-        if (name == currentAttribute.name) return;
+    const changeAttributeName = useCallback((name: string) => {
+        if (name == currentAttributeRef.current.name) return;
         if (name == '') return;
         const duplicateNameExists = attributes.find((attribute) => attribute.name == name);
         if (duplicateNameExists) {
             setDuplicateNameExists(true);
-            setAttributeName(currentAttribute.name);
+            setAttributeName(currentAttributeRef.current.name);
             return;
         }
-        const attributeNew = { ...currentAttribute };
+        const attributeNew = { ...currentAttributeRef.current };
         attributeNew.name = name;
         attributeNew.saveSourceCode = false;
-        updateAttribute(projectId, currentAttribute.id, (res) => {
+        updateAttribute(projectId, currentAttributeRef.current.id, (res) => {
             setCurrentAttribute(postProcessCurrentAttribute(attributeNew));
             setEditorValue(attributeNew.sourceCode.replace('def ac(record)', 'def ' + attributeNew.name + '(record)'));
             dispatch(updateAttributeById(attributeNew));
             setDuplicateNameExists(false);
         }, null, null, attributeNew.name);
-    }
+    }, []);
 
-    function updateVisibility(option: any) {
-        const attributeNew = { ...currentAttribute };
+    const updateVisibility = useCallback((option: any) => {
+        const attributeNew = { ...currentAttributeRef.current };
         attributeNew.visibility = option.value;
         attributeNew.visibilityIndex = ATTRIBUTES_VISIBILITY_STATES.findIndex((state) => state.name === option);
         attributeNew.visibilityName = option.name;
         attributeNew.saveSourceCode = false;
-        updateAttribute(projectId, currentAttribute.id, (res) => {
+        updateAttribute(projectId, currentAttributeRef.current.id, (res) => {
             setCurrentAttribute(postProcessCurrentAttribute(attributeNew));
             dispatch(updateAttributeById(attributeNew));
         }, null, null, null, null, attributeNew.visibility);
-    }
+    }, []);
 
-    function updateDataType(option: any) {
-        const attributeNew = { ...currentAttribute };
+    const updateDataType = useCallback((option: any) => {
+        const attributeNew = { ...currentAttributeRef.current };
         attributeNew.dataType = option.value;
         attributeNew.dataTypeName = option.name;
         attributeNew.saveSourceCode = false;
-        updateAttribute(projectId, currentAttribute.id, (res) => {
+        updateAttribute(projectId, currentAttributeRef.current.id, (res) => {
             setCurrentAttribute(postProcessCurrentAttribute(attributeNew));
             dispatch(updateAttributeById(attributeNew));
         }, attributeNew.dataType);
-    }
-
+    }, []);
 
     function onScrollEvent(event: any) {
         if (!(event.target instanceof HTMLElement)) return;
@@ -251,7 +250,6 @@ export default function AttributeCalculation() {
         }
     }
 
-
     function checkProjectTokenization() {
         getProjectTokenization(projectId, (res) => {
             setTokenizationProgress(res?.progress);
@@ -311,6 +309,16 @@ export default function AttributeCalculation() {
     const orgId = useSelector(selectOrganizationId);
     useWebsocket(orgId, Application.REFINERY, CurrentPage.ATTRIBUTE_CALCULATION, handleWebsocketNotification, projectId);
 
+    const goBack = useCallback((e: React.MouseEvent) => {
+        e.preventDefault();
+        router.push(`/projects/${projectId}/settings`);
+    }, []);
+
+    const copyToClipboardFunc = useCallback(
+        (name: string) => () => copyToClipboard(name),
+        []
+    );
+
     const disabledOptions = useMemo(() => {
         if (!currentAttribute || currentAttribute.dataType == DataTypeEnum.LLM_RESPONSE) return undefined;
         return DATA_TYPES.map((e) => e.value == DataTypeEnum.LLM_RESPONSE);
@@ -321,10 +329,7 @@ export default function AttributeCalculation() {
             <div className={`sticky z-50 h-12 ${isHeaderNormal ? 'top-1' : '-top-5'}`}>
                 <div className={`bg-white flex-grow ${isHeaderNormal ? '' : 'shadow'}`}>
                     <div className={`flex-row justify-start items-center inline-block ${isHeaderNormal ? 'p-0' : 'flex py-2'}`} style={{ transition: 'all .25s ease-in-out' }}>
-                        <a href={`/refinery/projects/${projectId}/settings`} onClick={(e) => {
-                            e.preventDefault();
-                            router.push(`/projects/${projectId}/settings`);
-                        }} className="text-green-800 text-sm font-medium">
+                        <a href={`/refinery/projects/${projectId}/settings`} onClick={goBack} className="text-green-800 text-sm font-medium">
                             <MemoIconArrowLeft className="h-5 w-5 inline-block text-green-800" />
                             <span className="leading-5">Go back</span>
                         </a>
@@ -386,7 +391,7 @@ export default function AttributeCalculation() {
                         {usableAttributes.length == 0 && <div className="text-sm font-normal text-gray-500">No usable attributes.</div>}
                         {usableAttributes.map((attribute: Attribute) => (
                             <Tooltip key={attribute.id} content={attribute.dataTypeName + ' - ' + TOOLTIPS_DICT.GENERAL.CLICK_TO_COPY} color="invert" placement="top">
-                                <span onClick={() => copyToClipboard(attribute.name)}>
+                                <span onClick={copyToClipboardFunc(attribute.name)}>
                                     <div className={`cursor-pointer border items-center px-2 py-0.5 rounded text-xs font-medium text-center mr-2 ${'bg-' + attribute.color + '-100'} ${'text-' + attribute.color + '-700'} ${'border-' + attribute.color + '-400'} ${'hover:bg-' + attribute.color + '-200'}`}>
                                         {attribute.name}
                                     </div>
@@ -400,7 +405,7 @@ export default function AttributeCalculation() {
                     <div className="flex flex-row items-center">
                         {lookupLists.map((lookupList) => (
                             <Tooltip key={lookupList.id} content={TOOLTIPS_DICT.GENERAL.IMPORT_STATEMENT} color="invert" placement="top">
-                                <span onClick={() => copyToClipboard("from knowledge import " + lookupList.pythonVariable)}>
+                                <span onClick={copyToClipboardFunc("from knowledge import " + lookupList.pythonVariable)}>
                                     <div className="cursor-pointer border items-center px-2 py-0.5 rounded text-xs font-medium text-center mr-2">
                                         {lookupList.pythonVariable} - {lookupList.termCount}
                                     </div>
diff --git a/src/components/projects/projectId/data-browser/DataSliceOperations.tsx b/src/components/projects/projectId/data-browser/DataSliceOperations.tsx
index 446a3c30..824f674b 100644
--- a/src/components/projects/projectId/data-browser/DataSliceOperations.tsx
+++ b/src/components/projects/projectId/data-browser/DataSliceOperations.tsx
@@ -14,6 +14,7 @@ import CreateOutlierSliceModal from "./modals/CreateOutlierSliceModal";
 import SaveDataSliceModal from "./modals/SaveDataSliceModal";
 import { createOutlierSlice, updateDataSlice } from "@/src/services/base/data-browser";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { useCallback } from "react";
 
 export function DataSliceOperations(props: { fullSearch: {} }) {
     const dispatch = useDispatch();
@@ -29,7 +30,19 @@ export function DataSliceOperations(props: { fullSearch: {} }) {
     const additionalData = useSelector(selectAdditionalData);
     const embeddings = useSelector(selectEmbeddings);
 
-    function updateSlice() {
+    // function updateSlice() {
+    //     updateDataSlice(projectId, {
+    //         static: activeSlice.static,
+    //         dataSliceId: activeSlice.id,
+    //         filterRaw: getRawFilterForSave(props.fullSearch),
+    //         filterData: parseFilterToExtended(activeSearchParams, attributes, configuration, labelingTasks, user, props.fullSearch[SearchGroup.DRILL_DOWN].value)
+    //     }, (res) => {
+    //         dispatch(setActiveDataSlice(activeSlice));
+    //     });
+    //     dispatch(updateAdditionalDataState('displayOutdatedWarning', false));
+    // }
+
+    const updateSlice = useCallback(() => {
         updateDataSlice(projectId, {
             static: activeSlice.static,
             dataSliceId: activeSlice.id,
@@ -39,7 +52,7 @@ export function DataSliceOperations(props: { fullSearch: {} }) {
             dispatch(setActiveDataSlice(activeSlice));
         });
         dispatch(updateAdditionalDataState('displayOutdatedWarning', false));
-    }
+    }, [activeSlice, projectId, props.fullSearch, dispatch, activeSearchParams, attributes, configuration, labelingTasks, user]);
 
     function requestOutlierSlice() {
         if (embeddings.length == 0) return;

From 18b5695b565ba2eb0c746e3bdcfac970e680ca55 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Wed, 14 May 2025 13:26:36 +0200
Subject: [PATCH 3/8] More memoized icons replaced

---
 .../models-download/ModelsDownload.tsx        |  9 ++----
 src/components/projects/ProjectCard.tsx       |  5 ++--
 .../projects/SampleProjectsDropdown.tsx       |  1 -
 .../attributeId/AttributeCalculations.tsx     |  1 -
 .../attributeId/ExecutionContainer.tsx        | 30 ++++++++++++-------
 .../attributeId/LLM/LLMPlaygroundModal.tsx    |  9 +++---
 .../attributeId/LLMResponseConfig.tsx         |  7 ++---
 .../attributeId/LLMResponsePlayground.tsx     | 10 +++++--
 .../data-browser/DataBrowserRecords.tsx       |  7 ++---
 .../data-browser/DataBrowserSidebar.tsx       |  1 -
 .../data-browser/DataSliceOperations.tsx      | 26 ++++------------
 .../projectId/data-browser/RecordList.tsx     |  7 ++---
 .../projectId/data-browser/SearchGroups.tsx   |  5 ++--
 .../modals/SimilaritySeachModal.tsx           |  1 -
 .../projectId/edit-records/EditRecords.tsx    |  1 -
 .../projectId/edit-records/ExplainModal.tsx   |  1 -
 .../edit-records/NavBarTopEditRecords.tsx     |  6 ++--
 .../edit-records/SyncRecordsModal.tsx         |  1 -
 .../projectId/heuristics/HeuristicsHeader.tsx |  8 ++---
 .../labeling-function/CalculationProgress.tsx |  1 -
 .../heuristicId/shared/HeuristicsLayout.tsx   |  1 -
 .../main-component/LabelingSettingsModal.tsx  |  1 -
 .../main-component/NavigationBarBottom.tsx    |  5 ++--
 .../main-component/NavigationBarTop.tsx       |  7 ++---
 .../sub-components/LabelSelectionBox.tsx      |  1 -
 .../sub-components/LabelSettingsBox.tsx       |  1 -
 .../sub-components/LabelingInfoTableModal.tsx |  1 -
 .../sub-components/LabelingSuiteLabeling.tsx  |  1 -
 .../LabelingSuiteOverviewTable.tsx            |  1 -
 .../LabelingSuiteTaskHeader.tsx               |  1 -
 .../projectId/lookup-lists/LookupListCard.tsx |  1 -
 .../lookupListId/LookupListOperations.tsx     | 11 ++++---
 .../lookupListId/LookupListsDetails.tsx       |  1 -
 .../lookup-lists/lookupListId/Terms.tsx       |  7 ++---
 .../overview/ProjectOverviewCards.tsx         |  1 -
 .../playground/CreateEvaluationSetModal.tsx   |  6 ++--
 .../projectId/playground/EvaluationSets.tsx   |  1 -
 .../projectId/playground/PlaygroundSearch.tsx | 10 +++----
 .../PlaygroundSearchMetaFilterModal.tsx       |  1 -
 .../projectId/playground/QuestionHistory.tsx  |  5 ++--
 .../playground/QuestionPlayground.tsx         |  1 -
 .../evaluationRunId/EvaluationRunDetails.tsx  |  5 ++--
 .../projectId/settings/DataSchema.tsx         |  5 ++--
 .../projectId/settings/ProjectMetaData.tsx    |  4 +--
 .../projectId/settings/ProjectSettings.tsx    |  9 +++---
 .../settings/ProjectSnapshotExportModal.tsx   |  5 ++--
 .../embeddings/AddNewEmbeddingModal.tsx       |  1 -
 .../settings/embeddings/Embeddings.tsx        |  9 +++---
 .../labeling-tasks/ChangeColorModal.tsx       |  1 -
 .../settings/labeling-tasks/LabelingTasks.tsx |  8 ++---
 .../labeling-tasks/RenameLabelModal.tsx       |  1 -
 src/components/shared/comments/Comments.tsx   |  1 -
 .../shared/comments/CommentsMainSection.tsx   |  5 ++--
 .../shared/comments/DisplayComments.tsx       |  1 -
 .../shared/crypted-field/CryptedField.tsx     |  1 -
 src/components/shared/export/Export.tsx       |  5 ++--
 .../shared/export/ExportRecordsModal.tsx      |  5 ++--
 .../shared/grid-cards/GridCards.tsx           |  1 -
 src/components/shared/header/Header.tsx       |  1 -
 src/components/shared/layout/Layout.tsx       |  1 -
 src/components/shared/logs/ContainerLogs.tsx  |  6 ++--
 .../shared/record-display/RecordDisplay.tsx   |  5 ++--
 .../shared/sidebar/VersionOverviewModal.tsx   |  1 -
 src/components/shared/upload/ModalUpload.tsx  |  1 -
 .../upload/helper-components/UploadField.tsx  |  1 -
 .../helper-components/UploadWrapper.tsx       |  1 -
 src/components/users/UsersList.tsx            |  1 -
 submodules/react-components                   |  2 +-
 68 files changed, 113 insertions(+), 176 deletions(-)

diff --git a/src/components/models-download/ModelsDownload.tsx b/src/components/models-download/ModelsDownload.tsx
index 86b27bd6..19785b89 100644
--- a/src/components/models-download/ModelsDownload.tsx
+++ b/src/components/models-download/ModelsDownload.tsx
@@ -1,15 +1,11 @@
 import { selectModelsDownloaded, setModelsDownloaded } from "@/src/reduxStore/states/pages/models-downloaded";
-import { Tooltip } from "@nextui-org/react";
-import { IconAlertTriangleFilled, IconArrowLeft, IconCircleCheckFilled, IconExternalLink, IconLoader, IconPlus, IconTrash } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import LoadingIcon from "../../../submodules/react-components/components/LoadingIcon";
 import { openModal, setModalStates } from "@/src/reduxStore/states/modal";
 import { ModalEnum } from "@/src/types/shared/modal";
 import { selectIsAdmin, selectOrganizationId } from "@/src/reduxStore/states/general";
 import { timer } from "rxjs";
-import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import AddModelDownloadModal from "./AddModelDownloadModal";
 import DeleteModelDownloadModal from "./DeleteModelDownloadModal";
 import { useWebsocket } from "@/submodules/react-components/hooks/web-socket/useWebsocket";
@@ -19,6 +15,7 @@ import { MODELS_DOWNLOAD_TABLE_COLUMNS, prepareTableBodyModelsDownload } from "@
 import KernTable from "@/submodules/react-components/components/kern-table/KernTable";
 import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconArrowLeft, MemoIconPlus } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function ModelsDownload() {
     const router = useRouter();
@@ -69,7 +66,7 @@ export default function ModelsDownload() {
                 text="Go back"
                 onClick={() => router.back()}
                 color="green"
-                iconLeft={IconArrowLeft}
+                iconLeft={MemoIconArrowLeft}
                 iconColor="green"
             />
         </div>
@@ -90,7 +87,7 @@ export default function ModelsDownload() {
             <div>
                 <KernButton
                     text="Add new model"
-                    icon={IconPlus}
+                    icon={MemoIconPlus}
                     onClick={openCreateModal}
                 />
             </div>
diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx
index 7046be4f..c5fd063a 100644
--- a/src/components/projects/ProjectCard.tsx
+++ b/src/components/projects/ProjectCard.tsx
@@ -8,11 +8,10 @@ import { Tooltip } from "@nextui-org/react";
 import { useRouter } from "next/router";
 import { useDispatch, useSelector } from "react-redux";
 import { NOT_AVAILABLE, UNKNOWN_USER } from "@/src/util/constants";
-import { IconArrowRight } from "@tabler/icons-react";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { deleteProjectPost } from "@/src/services/base/project";
 import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
-import { MemoIconX } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconArrowRight, MemoIconX } from "@/submodules/react-components/components/kern-icons/icons";
 import { useCallback } from "react";
 import useRefFor from "@/submodules/react-components/hooks/useRefFor";
 
@@ -112,7 +111,7 @@ export default function ProjectCard(props: ProjectCardProps) {
                                     text="Continue project"
                                     onClick={manageProject}
                                     color="green"
-                                    iconRight={IconArrowRight}
+                                    iconRight={MemoIconArrowRight}
                                     iconColor="green"
                                 />
                             }
diff --git a/src/components/projects/SampleProjectsDropdown.tsx b/src/components/projects/SampleProjectsDropdown.tsx
index cbaf2016..fb5c1830 100644
--- a/src/components/projects/SampleProjectsDropdown.tsx
+++ b/src/components/projects/SampleProjectsDropdown.tsx
@@ -6,7 +6,6 @@ import { selectAllProjects } from '@/src/reduxStore/states/project';
 import { ModalButton, ModalEnum } from '@/src/types/shared/modal';
 import { closeModal, openModal } from '@/src/reduxStore/states/modal';
 import Modal from '../shared/modal/Modal';
-import { IconAlertTriangle, IconMessageCircle, IconNews, IconQuestionMark, IconScreenshot } from '@tabler/icons-react';
 import { setSearchGroupsStore } from '@/src/reduxStore/states/pages/data-browser';
 import { selectProjectIdSampleProject, setProjectIdSampleProject } from '@/src/reduxStore/states/tmp';
 import { createSampleProject } from '@/src/services/base/project';
diff --git a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
index 4b163d0c..f9216345 100644
--- a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
+++ b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
@@ -9,7 +9,6 @@ import { ATTRIBUTES_VISIBILITY_STATES, DATA_TYPES, getTooltipVisibilityState } f
 import { copyToClipboard } from "@/submodules/javascript-functions/general";
 import { Editor } from "@monaco-editor/react";
 import { Tooltip } from "@nextui-org/react";
-import { IconAlertTriangleFilled, IconArrowLeft, IconCircleCheckFilled } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux"
diff --git a/src/components/projects/projectId/attributes/attributeId/ExecutionContainer.tsx b/src/components/projects/projectId/attributes/attributeId/ExecutionContainer.tsx
index 80e10934..97587c5d 100644
--- a/src/components/projects/projectId/attributes/attributeId/ExecutionContainer.tsx
+++ b/src/components/projects/projectId/attributes/attributeId/ExecutionContainer.tsx
@@ -6,7 +6,7 @@ import { AttributeState } from "@/src/types/components/projects/projectId/settin
 import { ModalEnum } from "@/src/types/shared/modal";
 import { postProcessRecordByRecordId } from "@/src/util/components/projects/projectId/settings/attribute-calculation-helper";
 import { Tooltip } from "@nextui-org/react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import ConfirmExecutionModal from "./ConfirmExecutionModal";
@@ -16,6 +16,7 @@ import { getRecordByRecordId } from "@/src/services/base/project-setting";
 import { getSampleRecords } from "@/src/services/base/attribute";
 import { DataTypeEnum } from "@/src/types/shared/general";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import useRefFor from "@/submodules/react-components/hooks/useRefFor";
 
 export default function ExecutionContainer(props: ExecutionContainerProps) {
     const projectId = useSelector(selectProjectId);
@@ -35,15 +36,16 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
         }
     }, [props.enableRunButton]);
 
-    function calculateUserAttributeSampleRecords() {
+    const currentAttributesRef = useRefFor(props.currentAttribute);
+    const calculateUserAttributeSampleRecords = useCallback(() => {
         if (requestedSomething) return;
         setRequestedSomething(true);
-        getSampleRecords(projectId, props.currentAttribute.id, (res) => {
+        getSampleRecords(projectId, currentAttributesRef.current.id, (res) => {
             const sampleRecordsFinal = { ...res };
             setRequestedSomething(false);
             props.setEnabledButton(false);
             setRunOn10HasError(sampleRecordsFinal.calculatedAttributes.length > 0 ? false : true);
-            if (props.currentAttribute.dataType == 'EMBEDDING_LIST') {
+            if (currentAttributesRef.current.dataType == DataTypeEnum.EMBEDDING_LIST) {
                 sampleRecordsFinal.calculatedAttributesList = sampleRecordsFinal.calculatedAttributes.map((record: string) => JSON.parse(record));
                 sampleRecordsFinal.calculatedAttributesListDisplay = extendArrayElementsByUniqueId(sampleRecordsFinal.calculatedAttributesList);
             }
@@ -51,13 +53,24 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
             setSampleRecords(sampleRecordsFinal);
             props.refetchCurrentAttribute();
         });
-    }
+    }, [projectId]);
 
     function recordByRecordId(recordId: string) {
         getRecordByRecordId(projectId, recordId, (res) => {
             dispatch(setModalStates(ModalEnum.VIEW_RECORD_DETAILS, { record: postProcessRecordByRecordId(res) }));
         });
     }
+
+    const executeAttribute = useCallback(() => {
+        dispatch(setModalStates(ModalEnum.EXECUTE_ATTRIBUTE_CALCULATION, { open: true, requestedSomething: requestedSomething }));
+    }, []);
+
+    const sampleRecordsRef = useRefFor(sampleRecords);
+    const viewRecordDetails = useCallback((index: number) => () => {
+        dispatch(setModalStates(ModalEnum.VIEW_RECORD_DETAILS, { open: true, recordIdx: index }));
+        recordByRecordId(sampleRecordsRef.current.recordIds[index]);
+    }, []);
+
     return (<div>
         <div className="mt-8 text-sm leading-5">
             <div className="text-gray-700 font-medium mr-2">
@@ -92,7 +105,7 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
                     solidTheme={true}
                     textColor="white"
                     disabled={props.currentAttribute.state == AttributeState.USABLE || props.currentAttribute.state == AttributeState.RUNNING || requestedSomething || checkIfAtLeastRunning || checkIfAtLeastQueued || props.tokenizationProgress < 1 || runOn10HasError || props.checkUnsavedChanges}
-                    onClick={() => dispatch(setModalStates(ModalEnum.EXECUTE_ATTRIBUTE_CALCULATION, { open: true, requestedSomething: requestedSomething }))}
+                    onClick={executeAttribute}
                     tooltip={props.currentAttribute.state == AttributeState.USABLE ? 'Attribute is already in use' : requestedSomething ? 'Test is running' : checkIfAtLeastRunning ? 'Another attribute is running' : checkIfAtLeastQueued ? 'Another attribute is queued for execution' : props.tokenizationProgress < 1 ? 'Tokenization is in progress' : runOn10HasError ? 'Run on 10 records has an error' : 'Execute the attribute on all records'}
                     className="ml-3"
                 />
@@ -113,10 +126,7 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
                                         <div className="flex items-center justify-center mr-5 ml-auto">
                                             <KernButton
                                                 text="View"
-                                                onClick={() => {
-                                                    dispatch(setModalStates(ModalEnum.VIEW_RECORD_DETAILS, { open: true, recordIdx: index }));
-                                                    recordByRecordId(sampleRecords.recordIds[index]);
-                                                }}
+                                                onClick={viewRecordDetails(index)}
                                             />
                                         </div>
                                     </div>
diff --git a/src/components/projects/projectId/attributes/attributeId/LLM/LLMPlaygroundModal.tsx b/src/components/projects/projectId/attributes/attributeId/LLM/LLMPlaygroundModal.tsx
index aae0c0fe..13314807 100644
--- a/src/components/projects/projectId/attributes/attributeId/LLM/LLMPlaygroundModal.tsx
+++ b/src/components/projects/projectId/attributes/attributeId/LLM/LLMPlaygroundModal.tsx
@@ -4,7 +4,6 @@ import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { selectModal } from "@/src/reduxStore/states/modal";
 import { selectAttributes, selectAttributesDict } from "@/src/reduxStore/states/pages/settings";
-import { IconHandClick, IconPlayCardStar, IconPlayerPlay, IconRefresh, IconTerminal } from "@tabler/icons-react";
 import LLMResponseConfig from "../LLMResponseConfig";
 import { AttributeState, LLMConfig } from "@/src/types/components/projects/projectId/settings/data-schema";
 import useRefFor from "@/submodules/react-components/hooks/useRefFor";
@@ -19,7 +18,7 @@ import { runAttributeLlmPlayground } from "@/src/services/base/attribute";
 import { jsonCopy } from "@/submodules/javascript-functions/general";
 import { TEMPLATE_EXAMPLES, TEMPLATE_OPTIONS } from "./llmTemplates";
 import { LLM_PROVIDER_OPTIONS, postProcessLLMPlaygroundRecordData } from "@/src/util/components/projects/projectId/settings/attribute-calculation-helper";
-import { MemoIconPlayCardStar, MemoIconTerminal } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconHandClick, MemoIconPlayCardStar, MemoIconPlayerPlay, MemoIconRefresh, MemoIconTerminal } from "@/submodules/react-components/components/kern-icons/icons";
 
 const ACCEPT_BUTTON = { buttonCaption: "Use current values for attribute", useButton: true };
 const DISPLAY_STATES = [AttributeState.AUTOMATICALLY_CREATED, AttributeState.UPLOADED, AttributeState.USABLE]
@@ -141,7 +140,7 @@ export default function LLMPlaygroundModal() {
                 {recordData && <div className="">
                     <div className="flex flex-row gap-x-2 items-center">
                         <label className="block font-bold text-gray-900">Sample Record</label>
-                        <KernButton icon={IconRefresh} text="Get Random" size="small" onClick={get1RandomRecords} />
+                        <KernButton icon={MemoIconRefresh} text="Get Random" size="small" onClick={get1RandomRecords} />
 
                         <input
                             type="number"
@@ -151,7 +150,7 @@ export default function LLMPlaygroundModal() {
                             onKeyDown={(e) => e.key === 'Enter' && getByRunningId()}
                             className="w-16 h-full text-right text-sm text-gray-900 border border-gray-200 rounded-lg align-top"
                         />
-                        <KernButton disabled={!inputRunningId} icon={IconHandClick} text="Get by running_id" size="small" onClick={getByRunningId} />
+                        <KernButton disabled={!inputRunningId} icon={MemoIconHandClick} text="Get by running_id" size="small" onClick={getByRunningId} />
                     </div>
                     <div className="grid grid-cols-2 gap-2 text-sm max-h-52 overflow-y-auto" style={{ gridTemplateColumns: `max-content auto` }}>
                         {recordKeys.map((rk) => <Fragment key={rk.name}>
@@ -185,7 +184,7 @@ export default function LLMPlaygroundModal() {
                 </div>}
                 <LLMResponseConfig attributeId={modal.attributeId} fullLlmConfig={fullLlmConfig} setFullLlmConfig={setFullLlmConfig} noPlayground keepConfigOpen />
                 <div className="h-2"></div>
-                <KernButton text="Test configuration" icon={IconPlayerPlay} size="small" onClick={testConfigurationForRecordId} loading={playgroundTestRunning} />
+                <KernButton text="Test configuration" icon={MemoIconPlayerPlay} size="small" onClick={testConfigurationForRecordId} loading={playgroundTestRunning} />
                 {llmAnswer && <div className="border-b mb-10 border-gray-200 w-full align-top">
                     <div className="flex gap-x-2">
                         <div className='py-2'>
diff --git a/src/components/projects/projectId/attributes/attributeId/LLMResponseConfig.tsx b/src/components/projects/projectId/attributes/attributeId/LLMResponseConfig.tsx
index efd36b32..c3f13163 100644
--- a/src/components/projects/projectId/attributes/attributeId/LLMResponseConfig.tsx
+++ b/src/components/projects/projectId/attributes/attributeId/LLMResponseConfig.tsx
@@ -1,10 +1,9 @@
 import { useState } from "react";
 import { LLMConfig } from "./LLM/LLMConfig";
-import { IconAdjustmentsAlt, IconAdjustmentsOff, IconSettings, IconTerminal, IconUser } from "@tabler/icons-react";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 import LLMResponsePlayground from "./LLMResponsePlayground";
 import { LLMResponseConfigProps } from "./LLM/types";
-import { MemoIconTerminal, MemoIconUser } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconAdjustmentsAlt, MemoIconAdjustmentsOff, MemoIconSettings, MemoIconTerminal, MemoIconUser } from "@/submodules/react-components/components/kern-icons/icons";
 
 
 export default function LLMResponseConfig(props: LLMResponseConfigProps) {
@@ -16,8 +15,8 @@ export default function LLMResponseConfig(props: LLMResponseConfigProps) {
         <div className="mt-3 flex flex-col gap-y-2">
             <div className="flex flex-row flex-nowrap items-center gap-x-2">
                 <label className="block font-bold text-gray-900">LLM Config</label>
-                {!props.keepConfigOpen && <KernButton icon={IconSettings} onClick={() => setConfigOpen((p) => !p)} size="small" />}
-                {configOpen && <KernButton icon={fullConfigOpen ? IconAdjustmentsAlt : IconAdjustmentsOff} onClick={() => setFullConfigOpen((p) => !p)} size="small" />}
+                {!props.keepConfigOpen && <KernButton icon={MemoIconSettings} onClick={() => setConfigOpen((p) => !p)} size="small" />}
+                {configOpen && <KernButton icon={fullConfigOpen ? MemoIconAdjustmentsAlt : MemoIconAdjustmentsOff} onClick={() => setFullConfigOpen((p) => !p)} size="small" />}
 
                 {props.noPlayground ? null : <LLMResponsePlayground attributeId={props.attributeId} apiKey={props.apiKey} />}
 
diff --git a/src/components/projects/projectId/attributes/attributeId/LLMResponsePlayground.tsx b/src/components/projects/projectId/attributes/attributeId/LLMResponsePlayground.tsx
index d05cd9a6..a88bc914 100644
--- a/src/components/projects/projectId/attributes/attributeId/LLMResponsePlayground.tsx
+++ b/src/components/projects/projectId/attributes/attributeId/LLMResponsePlayground.tsx
@@ -1,9 +1,10 @@
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
-import { IconPlayCardStar } from "@tabler/icons-react";
 import { useDispatch } from "react-redux";
 import LLMPlaygroundModal from "./LLM/LLMPlaygroundModal";
 import { setModalStates } from "@/src/reduxStore/states/modal";
 import { ModalEnum } from "@/src/types/shared/modal";
+import { useCallback } from "react";
+import { MemoIconPlayCardStar } from "@/submodules/react-components/components/kern-icons/icons";
 
 
 type LLMResponsePlaygroundProps = {
@@ -13,9 +14,14 @@ type LLMResponsePlaygroundProps = {
 
 export default function LLMResponsePlayground(props: LLMResponsePlaygroundProps) {
     const dispatch = useDispatch();
+
+    const openLLMPlayground = useCallback(() => {
+        dispatch(setModalStates(ModalEnum.LLM_PLAYGROUND, { open: true, attributeId: props.attributeId, apiKey: props.apiKey }));
+    }, []);
+
     return (
         <>
-            <KernButton text="Open LLM Playground" icon={IconPlayCardStar} onClick={() => dispatch(setModalStates(ModalEnum.LLM_PLAYGROUND, { open: true, attributeId: props.attributeId, apiKey: props.apiKey }))} size="small" />
+            <KernButton text="Open LLM Playground" icon={MemoIconPlayCardStar} onClick={openLLMPlayground} size="small" />
             <LLMPlaygroundModal />
         </>
     )
diff --git a/src/components/projects/projectId/data-browser/DataBrowserRecords.tsx b/src/components/projects/projectId/data-browser/DataBrowserRecords.tsx
index ce371e11..674de9db 100644
--- a/src/components/projects/projectId/data-browser/DataBrowserRecords.tsx
+++ b/src/components/projects/projectId/data-browser/DataBrowserRecords.tsx
@@ -5,7 +5,6 @@ import { ModalEnum } from '@/src/types/shared/modal';
 import { TOOLTIPS_DICT } from '@/src/util/tooltip-constants';
 import { Slice } from '@/submodules/javascript-functions/enums/enums';
 import { Tooltip } from '@nextui-org/react';
-import { IconAdjustments, IconAlertTriangleFilled, IconChartCircles, IconFilter, IconFilterOff, IconTriangleFilled } from '@tabler/icons-react';
 import { useDispatch, useSelector } from 'react-redux';
 import LoadingIcon from '@/submodules/react-components/components/LoadingIcon';
 import { selectVisibleAttributesHeuristics } from '@/src/reduxStore/states/pages/settings';
@@ -19,7 +18,7 @@ import Export from '@/src/components/shared/export/Export';
 import { LabelingLinkType } from '@/src/types/components/projects/projectId/labeling/labeling-main-component';
 import { Fragment, useEffect } from 'react';
 import KernButton from '@/submodules/react-components/components/kern-button/KernButton';
-import { MemoIconAlertTriangleFilled, MemoIconChartCircles, MemoIconFilter } from '@/submodules/react-components/components/kern-icons/icons';
+import { MemoIconAdjustments, MemoIconAlertTriangleFilled, MemoIconChartCircles, MemoIconFilter, MemoIconFilterOff } from '@/submodules/react-components/components/kern-icons/icons';
 
 export default function DataBrowserRecords(props: DataBrowserRecordsProps) {
     const dispatch = useDispatch();
@@ -123,13 +122,13 @@ export default function DataBrowserRecords(props: DataBrowserRecordsProps) {
                 </div>}
                 {(activeSlice != null || activeSearchParams.length > 0 || similaritySearch.recordsInDisplay) && <KernButton
                     text="Clear filters"
-                    icon={IconFilterOff}
+                    icon={MemoIconFilterOff}
                     onClick={clearFilters}
                     className="mr-1"
                 />}
                 <KernButton
                     text="Configuration"
-                    icon={IconAdjustments}
+                    icon={MemoIconAdjustments}
                     onClick={() => dispatch(openModal(ModalEnum.CONFIGURATION))}
                     className="mr-1"
                     tooltip={TOOLTIPS_DICT.DATA_BROWSER.CONFIGURATION}
diff --git a/src/components/projects/projectId/data-browser/DataBrowserSidebar.tsx b/src/components/projects/projectId/data-browser/DataBrowserSidebar.tsx
index 63cb8f04..183c8bac 100644
--- a/src/components/projects/projectId/data-browser/DataBrowserSidebar.tsx
+++ b/src/components/projects/projectId/data-browser/DataBrowserSidebar.tsx
@@ -8,7 +8,6 @@ import { ModalEnum } from '@/src/types/shared/modal';
 import { updateSliceInfoHelper } from '@/src/util/components/projects/projectId/data-browser/data-browser-helper';
 import { Slice } from '@/submodules/javascript-functions/enums/enums';
 import { Tooltip } from '@nextui-org/react';
-import { IconAlertTriangle, IconInfoCircle, IconLayoutSidebar, IconTrash } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { timer } from 'rxjs';
diff --git a/src/components/projects/projectId/data-browser/DataSliceOperations.tsx b/src/components/projects/projectId/data-browser/DataSliceOperations.tsx
index 824f674b..3f945e92 100644
--- a/src/components/projects/projectId/data-browser/DataSliceOperations.tsx
+++ b/src/components/projects/projectId/data-browser/DataSliceOperations.tsx
@@ -7,14 +7,12 @@ import { ModalEnum } from "@/src/types/shared/modal";
 import { getRawFilterForSave, parseFilterToExtended } from "@/src/util/components/projects/projectId/data-browser/filter-parser-helper";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { SearchGroup, Slice } from "@/submodules/javascript-functions/enums/enums";
-import { Tooltip } from "@nextui-org/react";
-import { IconChartBubble, IconFilter, IconRotate } from "@tabler/icons-react";
 import { useDispatch, useSelector } from "react-redux";
 import CreateOutlierSliceModal from "./modals/CreateOutlierSliceModal";
 import SaveDataSliceModal from "./modals/SaveDataSliceModal";
 import { createOutlierSlice, updateDataSlice } from "@/src/services/base/data-browser";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
-import { useCallback } from "react";
+import { MemoIconChartBubble, MemoIconFilter, MemoIconRotate } from "@/submodules/react-components/components/kern-icons/icons";
 
 export function DataSliceOperations(props: { fullSearch: {} }) {
     const dispatch = useDispatch();
@@ -30,19 +28,7 @@ export function DataSliceOperations(props: { fullSearch: {} }) {
     const additionalData = useSelector(selectAdditionalData);
     const embeddings = useSelector(selectEmbeddings);
 
-    // function updateSlice() {
-    //     updateDataSlice(projectId, {
-    //         static: activeSlice.static,
-    //         dataSliceId: activeSlice.id,
-    //         filterRaw: getRawFilterForSave(props.fullSearch),
-    //         filterData: parseFilterToExtended(activeSearchParams, attributes, configuration, labelingTasks, user, props.fullSearch[SearchGroup.DRILL_DOWN].value)
-    //     }, (res) => {
-    //         dispatch(setActiveDataSlice(activeSlice));
-    //     });
-    //     dispatch(updateAdditionalDataState('displayOutdatedWarning', false));
-    // }
-
-    const updateSlice = useCallback(() => {
+    function updateSlice() {
         updateDataSlice(projectId, {
             static: activeSlice.static,
             dataSliceId: activeSlice.id,
@@ -52,7 +38,7 @@ export function DataSliceOperations(props: { fullSearch: {} }) {
             dispatch(setActiveDataSlice(activeSlice));
         });
         dispatch(updateAdditionalDataState('displayOutdatedWarning', false));
-    }, [activeSlice, projectId, props.fullSearch, dispatch, activeSearchParams, attributes, configuration, labelingTasks, user]);
+    }
 
     function requestOutlierSlice() {
         if (embeddings.length == 0) return;
@@ -64,7 +50,7 @@ export function DataSliceOperations(props: { fullSearch: {} }) {
         <div className="flex items-center mt-4">
             <KernButton
                 text="Save data slice"
-                icon={IconFilter}
+                icon={MemoIconFilter}
                 onClick={() => dispatch(openModal(ModalEnum.SAVE_DATA_SLICE))}
                 className="mr-1"
                 tooltip={TOOLTIPS_DICT.DATA_BROWSER.SAVE_SLICE}
@@ -73,7 +59,7 @@ export function DataSliceOperations(props: { fullSearch: {} }) {
 
             <KernButton
                 text="Update data slice"
-                icon={IconRotate}
+                icon={MemoIconRotate}
                 onClick={updateSlice}
                 disabled={!activeSlice || activeSlice?.sliceType == Slice.STATIC_OUTLIER || (activeSlice?.static && activeSlice.count == additionalData.staticDataSliceCurrentCount && !additionalData.displayOutdatedWarning)}
                 className="mr-1"
@@ -84,7 +70,7 @@ export function DataSliceOperations(props: { fullSearch: {} }) {
         <div className="mt-1">
             <KernButton
                 text="Find outliers"
-                icon={IconChartBubble}
+                icon={MemoIconChartBubble}
                 iconColor="green"
                 onClick={() => embeddings.length == 1 ? requestOutlierSlice() : dispatch(openModal(ModalEnum.CREATE_OUTLIER_SLICE))}
                 disabled={embeddings.length == 0}
diff --git a/src/components/projects/projectId/data-browser/RecordList.tsx b/src/components/projects/projectId/data-browser/RecordList.tsx
index 99416372..ffe0204e 100644
--- a/src/components/projects/projectId/data-browser/RecordList.tsx
+++ b/src/components/projects/projectId/data-browser/RecordList.tsx
@@ -10,12 +10,11 @@ import { UserRole } from "@/src/types/shared/sidebar";
 import { DATA_BROWSER_TABLE_COLUMN_HEADERS } from "@/src/util/components/projects/projectId/data-browser/data-browser-helper";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { Tooltip } from "@nextui-org/react";
-import { IconAngle, IconArrowRight } from "@tabler/icons-react";
 import { useDispatch, useSelector } from "react-redux";
 import SimilaritySearchModal from "./modals/SimilaritySeachModal";
 import RecordCommentsModal from "./modals/RecordCommentsModal";
 import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
-import { MemoIconEdit, MemoIconNotes } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconAngle, MemoIconArrowRight, MemoIconEdit, MemoIconNotes } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function RecordList(props: RecordListProps) {
     const dispatch = useDispatch();
@@ -56,7 +55,7 @@ export default function RecordList(props: RecordListProps) {
                                 text="Find similar records"
                                 color="green"
                                 onClick={() => dispatch(setModalStates(ModalEnum.SIMILARITY_SEARCH, { recordId: record.id, open: true }))}
-                                iconRight={IconAngle}
+                                iconRight={MemoIconAngle}
                                 iconColor="green"
                             />
                         )}
@@ -66,7 +65,7 @@ export default function RecordList(props: RecordListProps) {
                             text="Continue with this record"
                             color="green"
                             onClick={() => props.recordClicked(index)}
-                            iconRight={IconArrowRight}
+                            iconRight={MemoIconArrowRight}
                             iconColor="green"
                         />
                     </div>
diff --git a/src/components/projects/projectId/data-browser/SearchGroups.tsx b/src/components/projects/projectId/data-browser/SearchGroups.tsx
index 121583d0..42b94e38 100644
--- a/src/components/projects/projectId/data-browser/SearchGroups.tsx
+++ b/src/components/projects/projectId/data-browser/SearchGroups.tsx
@@ -2,7 +2,6 @@ import { selectAttributesDict, selectLabelingTasksAll, selectVisibleAttributesHe
 import { selectProjectId } from "@/src/reduxStore/states/project";
 import { attributeCreateSearchGroup, commentsCreateSearchGroup, generateRandomSeed, getBasicGroupItems, getBasicSearchGroup, getBasicSearchItem, labelingTasksCreateSearchGroup, orderByCreateSearchGroup, userCreateSearchGroup } from "@/src/util/components/projects/projectId/data-browser/search-groups-helper";
 import { SearchGroup, Slice, StaticOrderByKeys } from "@/submodules/javascript-functions/enums/enums";
-import { IconArrowDown, IconArrowsRandom, IconFilterOff, IconPlus, IconPointerOff, IconTrash } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import style from '@/src/styles/components/projects/projectId/data-browser.module.css';
@@ -29,7 +28,7 @@ import { getWeakSupervisionRun } from "@/src/services/base/heuristic";
 import { getRecordsByStaticSlice, searchRecordsExtended } from "@/src/services/base/data-browser";
 import { staticDataSlicesCurrentCount } from "@/src/services/base/dataSlices";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
-import { MemoIconArrowDown, MemoIconArrowsRandom, MemoIconFilterOff, MemoIconPlus, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconArrowDown, MemoIconArrowsRandom, MemoIconFilterOff, MemoIconPlus, MemoIconPointerOff, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 
 const GROUP_SORT_ORDER = 0;
 let GLOBAL_SEARCH_GROUP_COUNT = 0;
@@ -805,6 +804,6 @@ function ButtonLabelsDisabled() {
     return (<KernButton
         text="No labels associated with this task"
         disabled={true}
-        icon={IconPointerOff}
+        icon={MemoIconPointerOff}
     />)
 }
\ No newline at end of file
diff --git a/src/components/projects/projectId/data-browser/modals/SimilaritySeachModal.tsx b/src/components/projects/projectId/data-browser/modals/SimilaritySeachModal.tsx
index d589699f..16d1cae1 100644
--- a/src/components/projects/projectId/data-browser/modals/SimilaritySeachModal.tsx
+++ b/src/components/projects/projectId/data-browser/modals/SimilaritySeachModal.tsx
@@ -15,7 +15,6 @@ import { getColorForDataType } from "@/src/util/components/projects/projectId/se
 import { extendArrayElementsByUniqueId } from "@/submodules/javascript-functions/id-prep";
 import { MemoIconPlus, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
-import { IconPlus, IconTrash } from "@tabler/icons-react";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
diff --git a/src/components/projects/projectId/edit-records/EditRecords.tsx b/src/components/projects/projectId/edit-records/EditRecords.tsx
index 62bf51be..3b1c7516 100644
--- a/src/components/projects/projectId/edit-records/EditRecords.tsx
+++ b/src/components/projects/projectId/edit-records/EditRecords.tsx
@@ -6,7 +6,6 @@ import { Fragment, useCallback, useEffect, useState } from "react";
 import { buildAccessKey, createDefaultEditRecordComponentData } from "@/src/util/components/projects/projectId/edit-records-helper";
 import style from '@/src/styles/components/projects/projectId/edit-records.module.css';
 import { DataTypeEnum } from "@/src/types/shared/general";
-import { IconAlertCircle, IconAlertTriangle, IconAlertTriangleFilled, IconBallpen, IconBallpenOff } from "@tabler/icons-react";
 import { Tooltip } from "@nextui-org/react";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import EditField from "./EditField";
diff --git a/src/components/projects/projectId/edit-records/ExplainModal.tsx b/src/components/projects/projectId/edit-records/ExplainModal.tsx
index 71fdfc33..22a80216 100644
--- a/src/components/projects/projectId/edit-records/ExplainModal.tsx
+++ b/src/components/projects/projectId/edit-records/ExplainModal.tsx
@@ -4,7 +4,6 @@ import { ExplainModalProps } from "@/src/types/components/projects/projectId/edi
 import { ModalEnum } from "@/src/types/shared/modal";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 import { MemoIconAlertTriangleFilled, MemoIconInfoCircleFilled } from "@/submodules/react-components/components/kern-icons/icons";
-import { IconAlertTriangleFilled, IconInfoCircleFilled } from "@tabler/icons-react";
 import { useDispatch } from "react-redux";
 
 export default function ExplainModal(props: ExplainModalProps) {
diff --git a/src/components/projects/projectId/edit-records/NavBarTopEditRecords.tsx b/src/components/projects/projectId/edit-records/NavBarTopEditRecords.tsx
index 9bb65874..0491cf6b 100644
--- a/src/components/projects/projectId/edit-records/NavBarTopEditRecords.tsx
+++ b/src/components/projects/projectId/edit-records/NavBarTopEditRecords.tsx
@@ -4,7 +4,6 @@ import { NavBarTopEditRecordsProps } from "@/src/types/components/projects/proje
 import { ModalEnum } from "@/src/types/shared/modal";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { Tooltip } from "@nextui-org/react";
-import { IconColumns1, IconColumns2, IconColumns3, IconDatabase } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { useDispatch, useSelector } from "react-redux";
 import SyncRecordsModal from "./SyncRecordsModal";
@@ -13,6 +12,7 @@ import { scrollElementIntoView } from "@/submodules/javascript-functions/scrollH
 import { jsonCopy } from "@/submodules/javascript-functions/general";
 import ExplainModal from "./ExplainModal";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconColumns1, MemoIconColumns2, MemoIconColumns3, MemoIconDatabase } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function NavBarTopEditRecords(props: NavBarTopEditRecordsProps) {
     const router = useRouter();
@@ -64,14 +64,14 @@ export default function NavBarTopEditRecords(props: NavBarTopEditRecordsProps) {
                         onClick={() => dispatch(setModalStates(ModalEnum.SYNC_RECORDS, { open: true, syncModalAmount: Object.keys(props.erdData.cachedRecordChanges).length }))}
                         tooltip={TOOLTIPS_DICT.EDIT_RECORDS.PERSIST_CHANGES}
                         tooltipPlacement="left"
-                        icon={IconDatabase}
+                        icon={MemoIconDatabase}
                     />
                     <KernButton
                         text="Switch view"
                         onClick={nextColumnClass}
                         tooltip={TOOLTIPS_DICT.EDIT_RECORDS.SWITCH_COLUMN}
                         tooltipPlacement="bottom"
-                        icon={props.erdData.columnClass == 'grid-cols-3' ? IconColumns1 : props.erdData.columnClass == 'grid-cols-1' ? IconColumns2 : IconColumns3}
+                        icon={props.erdData.columnClass == 'grid-cols-3' ? MemoIconColumns1 : props.erdData.columnClass == 'grid-cols-1' ? MemoIconColumns2 : MemoIconColumns3}
                     />
                 </div>
             </div >
diff --git a/src/components/projects/projectId/edit-records/SyncRecordsModal.tsx b/src/components/projects/projectId/edit-records/SyncRecordsModal.tsx
index cb870c17..cfcf4fd8 100644
--- a/src/components/projects/projectId/edit-records/SyncRecordsModal.tsx
+++ b/src/components/projects/projectId/edit-records/SyncRecordsModal.tsx
@@ -6,7 +6,6 @@ import { syncEditedRecords } from "@/src/services/base/record";
 import { SyncRecordsModalProps } from "@/src/types/components/projects/projectId/edit-records";
 import { ModalButton, ModalEnum } from "@/src/types/shared/modal";
 import { jsonCopy } from "@/submodules/javascript-functions/general";
-import { IconAlertTriangleFilled, IconInfoCircle, IconTrash } from "@tabler/icons-react";
 import { Fragment, useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { MemoIconAlertTriangleFilled, MemoIconInfoCircle, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
diff --git a/src/components/projects/projectId/heuristics/HeuristicsHeader.tsx b/src/components/projects/projectId/heuristics/HeuristicsHeader.tsx
index c1fa9bdf..5eb9afd6 100644
--- a/src/components/projects/projectId/heuristics/HeuristicsHeader.tsx
+++ b/src/components/projects/projectId/heuristics/HeuristicsHeader.tsx
@@ -1,4 +1,3 @@
-import { Loading } from "@nextui-org/react";
 import { selectOrganizationId } from '@/src/reduxStore/states/general';
 import { openModal, selectModal } from '@/src/reduxStore/states/modal';
 import { selectHeuristicsAll, setHeuristicType } from '@/src/reduxStore/states/pages/heuristics';
@@ -13,7 +12,6 @@ import { ACTIONS_DROPDOWN_OPTIONS, NEW_HEURISTICS, checkSelectedHeuristics, post
 import { TOOLTIPS_DICT } from '@/src/util/tooltip-constants';
 import { InformationSourceType } from '@/submodules/javascript-functions/enums/enums';
 import { Tooltip } from '@nextui-org/react';
-import { IconLoader, IconPlus, IconWaveSine } from '@tabler/icons-react';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -27,7 +25,7 @@ import { Application, CurrentPage } from "@/submodules/react-components/hooks/we
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 import IconButton from "@/submodules/react-components/components/kern-button/IconButton";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { MemoIconPlus } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconLoader, MemoIconPlus, MemoIconWaveSine } from "@/submodules/react-components/components/kern-icons/icons";
 
 
 export default function HeuristicsHeader(props: HeuristicsHeaderProps) {
@@ -206,14 +204,14 @@ export default function HeuristicsHeader(props: HeuristicsHeaderProps) {
                 <div className="flex justify-center overflow-visible mr-3">
                     {currentWeakSupervisionRun ? (
                         <IconButton
-                            icon={loadingIconWS ? IconLoader : IconWaveSine}
+                            icon={loadingIconWS ? MemoIconLoader : MemoIconWaveSine}
                             tooltip={TOOLTIPS_DICT.HEURISTICS.LAST_WEAK_SUPERVISION_INFO}
                             tooltipPlacement="top"
                             onClick={() => dispatch(openModal(ModalEnum.LAST_WEAK_SUPERVISION_RUN))}
                         />
                     ) : (
                         <IconButton
-                            icon={IconWaveSine}
+                            icon={MemoIconWaveSine}
                             tooltip={TOOLTIPS_DICT.HEURISTICS.LAST_WEAK_SUPERVISION_INFO}
                             tooltipPlacement="top"
                             disabled={true}
diff --git a/src/components/projects/projectId/heuristics/heuristicId/labeling-function/CalculationProgress.tsx b/src/components/projects/projectId/heuristics/heuristicId/labeling-function/CalculationProgress.tsx
index b539cc19..a9bdc710 100644
--- a/src/components/projects/projectId/heuristics/heuristicId/labeling-function/CalculationProgress.tsx
+++ b/src/components/projects/projectId/heuristics/heuristicId/labeling-function/CalculationProgress.tsx
@@ -3,7 +3,6 @@ import { selectHeuristic } from "@/src/reduxStore/states/pages/heuristics";
 import { Status } from "@/src/types/shared/statuses";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { Tooltip } from "@nextui-org/react";
-import { IconAlertTriangleFilled, IconArrowRight, IconCircleCheckFilled } from "@tabler/icons-react";
 import { useSelector } from "react-redux";
 import { MemoIconAlertTriangleFilled, MemoIconArrowRight, MemoIconCircleCheckFilled } from "@/submodules/react-components/components/kern-icons/icons";
 
diff --git a/src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicsLayout.tsx b/src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicsLayout.tsx
index 2e533687..ac8d2c89 100644
--- a/src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicsLayout.tsx
+++ b/src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicsLayout.tsx
@@ -9,7 +9,6 @@ import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { InformationSourceType } from "@/submodules/javascript-functions/enums/enums";
 import { copyToClipboard } from "@/submodules/javascript-functions/general";
 import { Tooltip } from "@nextui-org/react";
-import { IconArrowLeft } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux"
 import { useRouter } from "next/router";
diff --git a/src/components/projects/projectId/labeling/sessionId/main-component/LabelingSettingsModal.tsx b/src/components/projects/projectId/labeling/sessionId/main-component/LabelingSettingsModal.tsx
index c9b974f9..194758d0 100644
--- a/src/components/projects/projectId/labeling/sessionId/main-component/LabelingSettingsModal.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/main-component/LabelingSettingsModal.tsx
@@ -10,7 +10,6 @@ import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { MemoIconInfoCircle } from "@/submodules/react-components/components/kern-icons/icons";
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
 import { Tooltip } from "@nextui-org/react";
-import { IconInfoCircle } from "@tabler/icons-react";
 import { Fragment, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
diff --git a/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarBottom.tsx b/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarBottom.tsx
index 668123af..7c417bb4 100644
--- a/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarBottom.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarBottom.tsx
@@ -4,14 +4,13 @@ import { ModalEnum } from "@/src/types/shared/modal";
 import { UserRole } from "@/src/types/shared/sidebar";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { Tooltip } from "@nextui-org/react";
-import { IconSettings, IconTrash } from "@tabler/icons-react";
 import { useDispatch, useSelector } from "react-redux";
 import DeleteRecordModal from "./DeleteRecordModal";
 import { selectDisplayUserRole, selectRecordRequestsRecord, selectSettings, updateSettings } from "@/src/reduxStore/states/pages/labeling";
 import { ComponentType } from "@/src/types/components/projects/projectId/labeling/settings";
 import LabelingSettingsModal from "./LabelingSettingsModal";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
-import { MemoIconSettings } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconSettings, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function NavigationBarBottom() {
     const dispatch = useDispatch();
@@ -49,7 +48,7 @@ export default function NavigationBarBottom() {
                                 onClick={() => dispatch(openModal(ModalEnum.DELETE_RECORD))}
                                 className="mr-3"
                                 disabled={record == null}
-                                icon={IconTrash}
+                                icon={MemoIconTrash}
                                 buttonColor="red"
                                 iconColor="red"
                             />
diff --git a/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarTop.tsx b/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarTop.tsx
index bb99522d..dd2d1312 100644
--- a/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarTop.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarTop.tsx
@@ -6,7 +6,6 @@ import { UserRole } from "@/src/types/shared/sidebar";
 import { SessionManager } from "@/src/util/classes/labeling/session-manager";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { Tooltip } from "@nextui-org/react";
-import { IconArrowLeft, IconArrowRight, IconCircle, IconStar } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { useDispatch, useSelector } from "react-redux";
 import style from '@/src/styles/components/projects/projectId/labeling.module.css';
@@ -15,7 +14,7 @@ import { useEffect } from "react";
 import { parseLinkFromText } from "@/src/util/shared/link-parser-helper";
 import { getAvailableLinks } from "@/src/services/base/labeling";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
-import { MemoIconCircle, MemoIconStar } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconArrowLeft, MemoIconArrowRight, MemoIconCircle, MemoIconStar } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function NavigationBarTop(props: NavigationBarTopProps) {
     const router = useRouter();
@@ -112,7 +111,7 @@ export default function NavigationBarTop(props: NavigationBarTopProps) {
                             text="Prev"
                             onClick={previousRecord}
                             disabled={SessionManager.prevDisabled}
-                            icon={IconArrowLeft}
+                            icon={MemoIconArrowLeft}
                         />
                         <KernButton
                             text="Next"
@@ -120,7 +119,7 @@ export default function NavigationBarTop(props: NavigationBarTopProps) {
                             solidTheme={true}
                             textColor="white"
                             onClick={nextRecord}
-                            icon={IconArrowRight}
+                            icon={MemoIconArrowRight}
                             disabled={SessionManager.nextDisabled}
                             iconColor="white"
                         />
diff --git a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSelectionBox.tsx b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSelectionBox.tsx
index cec41169..6475d8e5 100644
--- a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSelectionBox.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSelectionBox.tsx
@@ -6,7 +6,6 @@ import { UserRole } from "@/src/types/shared/sidebar";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { MemoIconCirclePlus } from "@/submodules/react-components/components/kern-icons/icons";
 import { Tooltip } from "@nextui-org/react";
-import { IconCirclePlus } from "@tabler/icons-react";
 import { Fragment, useEffect, useState, useCallback, useRef } from "react";
 import { useSelector } from "react-redux";
 
diff --git a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSettingsBox.tsx b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSettingsBox.tsx
index ae3622b0..fac22864 100644
--- a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSettingsBox.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelSettingsBox.tsx
@@ -3,7 +3,6 @@ import { LabelSettingsBoxProps } from "@/src/types/components/projects/projectId
 import { ModalEnum } from "@/src/types/shared/modal";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { Tooltip } from "@nextui-org/react";
-import { IconChecks, IconInfoCircle, IconX } from "@tabler/icons-react";
 import { useDispatch, useSelector } from "react-redux";
 import InfoLabelBoxModal from "./InfoLabelBoxModal";
 import { jsonCopy } from "@/submodules/javascript-functions/general";
diff --git a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingInfoTableModal.tsx b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingInfoTableModal.tsx
index 83e02f3a..f2973b54 100644
--- a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingInfoTableModal.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingInfoTableModal.tsx
@@ -3,7 +3,6 @@ import { selectHoverGroupDict, selectSettings, selectTmpHighlightIds, setHoverGr
 import { LabelingPageParts } from "@/src/types/components/projects/projectId/labeling/labeling-main-component";
 import { LabelingInfoTableModalProps } from "@/src/types/components/projects/projectId/labeling/overview-table";
 import { ModalEnum } from "@/src/types/shared/modal";
-import { IconSearch } from "@tabler/icons-react";
 import { useDispatch, useSelector } from "react-redux";
 import style from '@/src/styles/components/projects/projectId/labeling.module.css';
 import { LabelSourceHover } from "@/src/types/components/projects/projectId/labeling/labeling";
diff --git a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteLabeling.tsx b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteLabeling.tsx
index 20f57809..2e7f8893 100644
--- a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteLabeling.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteLabeling.tsx
@@ -9,7 +9,6 @@ import { UserRole } from "@/src/types/shared/sidebar"
 import { DEFAULT_LABEL_COLOR, FULL_RECORD_ID, SWIM_LANE_SIZE_PX, buildLabelingRlaData, checkCanEditLabels, collectSelectionData, filterRlaDataForLabeling, findOrderPosItem, getDefaultLabelingVars, getFirstFitPos, getGoldInfoForTask, getOrderLookupItem, getOrderLookupSort, getTaskTypeOrder, getTokenData, parseSelectionData } from "@/src/util/components/projects/projectId/labeling/labeling-helper"
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants"
 import { Tooltip } from "@nextui-org/react"
-import { IconAlertCircle, IconAssembly, IconBolt, IconCode, IconSparkles, IconStar, IconUsers } from "@tabler/icons-react"
 import { Fragment, useRef, useEffect, useState, useCallback } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import ExtractionDisplay from "./ExtractionDisplay"
diff --git a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteOverviewTable.tsx b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteOverviewTable.tsx
index f6c1279b..222c4a74 100644
--- a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteOverviewTable.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteOverviewTable.tsx
@@ -7,7 +7,6 @@ import { ModalEnum } from "@/src/types/shared/modal";
 import { LabelingSuiteManager } from "@/src/util/classes/labeling/manager";
 import { buildOverviewTableDisplayArray, filterRlaDataForUser, filterRlaLabelCondition, getEmptyHeaderHover, rlasHaveHeuristicData } from "@/src/util/components/projects/projectId/labeling/overview-table-helper";
 import { LabelSource } from "@/submodules/javascript-functions/enums/enums";
-import { IconSearch, IconTrash } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import LabelingInfoTableModal from "./LabelingInfoTableModal";
diff --git a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteTaskHeader.tsx b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteTaskHeader.tsx
index 5d21586b..3f6a45f1 100644
--- a/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteTaskHeader.tsx
+++ b/src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteTaskHeader.tsx
@@ -8,7 +8,6 @@ import { jsonCopy } from "@/submodules/javascript-functions/general";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import style from "@/src/styles/components/projects/projectId/labeling.module.css";
-import { IconLayoutNavbarCollapse } from "@tabler/icons-react";
 import QuickButtons from "./QuickButtons";
 import HeaderDisplay from "./HeaderDisplay";
 import { selectSettings, setSettings, updateSettings } from "@/src/reduxStore/states/pages/labeling";
diff --git a/src/components/projects/projectId/lookup-lists/LookupListCard.tsx b/src/components/projects/projectId/lookup-lists/LookupListCard.tsx
index 2102d7cd..e1e7d4d0 100644
--- a/src/components/projects/projectId/lookup-lists/LookupListCard.tsx
+++ b/src/components/projects/projectId/lookup-lists/LookupListCard.tsx
@@ -2,7 +2,6 @@ import { selectAllLookupLists, selectCheckedLookupLists, setCheckedLookupLists }
 import { selectProjectId } from "@/src/reduxStore/states/project";
 import { LookupListCardProps } from "@/src/types/components/projects/projectId/lookup-lists";
 import { MemoIconArrowRight } from "@/submodules/react-components/components/kern-icons/icons";
-import { IconArrowRight } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
diff --git a/src/components/projects/projectId/lookup-lists/lookupListId/LookupListOperations.tsx b/src/components/projects/projectId/lookup-lists/lookupListId/LookupListOperations.tsx
index 76980b97..66604e38 100644
--- a/src/components/projects/projectId/lookup-lists/lookupListId/LookupListOperations.tsx
+++ b/src/components/projects/projectId/lookup-lists/lookupListId/LookupListOperations.tsx
@@ -9,8 +9,6 @@ import { ModalEnum } from "@/src/types/shared/modal";
 import { UploadFileType } from "@/src/types/shared/upload";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { downloadByteData } from "@/submodules/javascript-functions/export";
-import { Tooltip } from "@nextui-org/react";
-import { IconClipboard, IconClipboardOff, IconDownload, IconUpload } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -19,6 +17,7 @@ import PasteLookupListModal from "./PasteLookupListModal";
 import RemoveLookupListModal from "./RemoveLookupListModal";
 import { getExportLookupList } from "@/src/services/base/lookup-lists";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconClipboard, MemoIconClipboardOff, MemoIconDownload, MemoIconUpload } from "@/submodules/react-components/components/kern-icons/icons";
 
 const BASE_OPTIONS = { reloadOnFinish: true, closeModalOnClick: true, isModal: true, knowledgeBaseId: null };
 
@@ -58,7 +57,7 @@ export default function LookupListOperations(props: LookupListOperationsProps) {
                     className="mr-3"
                     tooltip={TOOLTIPS_DICT.LOOKUP_LISTS_DETAILS.UPLOAD_LOOKUP_LIST}
                     tooltipPlacement="bottom"
-                    icon={IconUpload}
+                    icon={MemoIconUpload}
                     iconColor="gray"
                 />
             </div>
@@ -69,7 +68,7 @@ export default function LookupListOperations(props: LookupListOperationsProps) {
                     className="mr-3"
                     tooltip={TOOLTIPS_DICT.LOOKUP_LISTS_DETAILS.DOWNLOAD_LOOKUP_LIST}
                     tooltipPlacement="bottom"
-                    icon={IconDownload}
+                    icon={MemoIconDownload}
                     iconColor="gray"
                 />
             </div>
@@ -80,7 +79,7 @@ export default function LookupListOperations(props: LookupListOperationsProps) {
                     className="mr-3"
                     tooltip={TOOLTIPS_DICT.LOOKUP_LISTS_DETAILS.PASTE_LOOKUP_LIST}
                     tooltipPlacement="bottom"
-                    icon={IconClipboard}
+                    icon={MemoIconClipboard}
                     iconColor="gray"
                 />
             </div>
@@ -91,7 +90,7 @@ export default function LookupListOperations(props: LookupListOperationsProps) {
                     className="mr-3"
                     tooltip={TOOLTIPS_DICT.LOOKUP_LISTS_DETAILS.DELETE_LOOKUP_LIST}
                     tooltipPlacement="bottom"
-                    icon={IconClipboardOff}
+                    icon={MemoIconClipboardOff}
                     buttonColor="red"
                     iconColor="red"
                 />
diff --git a/src/components/projects/projectId/lookup-lists/lookupListId/LookupListsDetails.tsx b/src/components/projects/projectId/lookup-lists/lookupListId/LookupListsDetails.tsx
index a92c3c07..a15d6393 100644
--- a/src/components/projects/projectId/lookup-lists/lookupListId/LookupListsDetails.tsx
+++ b/src/components/projects/projectId/lookup-lists/lookupListId/LookupListsDetails.tsx
@@ -5,7 +5,6 @@ import { postProcessLookupList, postProcessTerms } from "@/src/util/components/p
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { copyToClipboard } from "@/submodules/javascript-functions/general";
 import { Tooltip } from "@nextui-org/react";
-import { IconArrowLeft } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux"
diff --git a/src/components/projects/projectId/lookup-lists/lookupListId/Terms.tsx b/src/components/projects/projectId/lookup-lists/lookupListId/Terms.tsx
index 125c50e1..b78eca36 100644
--- a/src/components/projects/projectId/lookup-lists/lookupListId/Terms.tsx
+++ b/src/components/projects/projectId/lookup-lists/lookupListId/Terms.tsx
@@ -5,9 +5,8 @@ import { BLACKLISTED_TERMS_DROPDOWN_OPTIONS, TERMS_DROPDOWN_OPTIONS, isTermUniqu
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { jsonCopy } from "@/submodules/javascript-functions/general";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconCircleCheckFilled, MemoIconCircleMinus } from "@/submodules/react-components/components/kern-icons/icons";
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
-import { Tooltip } from "@nextui-org/react";
-import { IconCircleCheckFilled, IconCircleMinus } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { Fragment, useState } from "react";
 import { useSelector } from "react-redux";
@@ -139,7 +138,7 @@ export default function Terms(props: TermsProps) {
                             </div>
                             <div className="mt-2 flex gap-x-2">
                                 <KernButton
-                                    icon={IconCircleCheckFilled}
+                                    icon={MemoIconCircleCheckFilled}
                                     tooltip={TOOLTIPS_DICT.GENERAL.SUBMIT}
                                     tooltipPlacement="top"
                                     onClick={() => {
@@ -149,7 +148,7 @@ export default function Terms(props: TermsProps) {
                                     }}
                                 />
                                 <KernButton
-                                    icon={IconCircleMinus}
+                                    icon={MemoIconCircleMinus}
                                     tooltip={TOOLTIPS_DICT.GENERAL.CANCEL}
                                     tooltipPlacement="top"
                                     onClick={cancelTermEditor}
diff --git a/src/components/projects/projectId/overview/ProjectOverviewCards.tsx b/src/components/projects/projectId/overview/ProjectOverviewCards.tsx
index 619013c6..cb6a76df 100644
--- a/src/components/projects/projectId/overview/ProjectOverviewCards.tsx
+++ b/src/components/projects/projectId/overview/ProjectOverviewCards.tsx
@@ -3,7 +3,6 @@ import MultilineTooltip from "@/src/components/shared/multilines-tooltip/Multili
 import { selectProjectId } from "@/src/reduxStore/states/project";
 import { CardStats, CardStatsEnum, ProjectOverviewCardsProps } from "@/src/types/components/projects/projectId/project-overview/project-overview";
 import { Tooltip } from "@nextui-org/react";
-import { IconBottle, IconBulb, IconClick } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { useSelector } from "react-redux";
 import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
diff --git a/src/components/projects/projectId/playground/CreateEvaluationSetModal.tsx b/src/components/projects/projectId/playground/CreateEvaluationSetModal.tsx
index 7a9ad8fc..47a111ad 100644
--- a/src/components/projects/projectId/playground/CreateEvaluationSetModal.tsx
+++ b/src/components/projects/projectId/playground/CreateEvaluationSetModal.tsx
@@ -11,10 +11,10 @@ import KernButton from "@/submodules/react-components/components/kern-button/Ker
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
 import useDebounce from "@/submodules/react-components/hooks/useHooks/useDebounce";
 import { Loading } from "@nextui-org/react";
-import { IconPlus, IconWand } from "@tabler/icons-react";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import QuestionHistory from "./QuestionHistory";
+import { MemoIconPlus, MemoIconWand } from "@/submodules/react-components/components/kern-icons/icons";
 
 const ACCEPT_BUTTON = { buttonCaption: 'Create', useButton: true };
 const SEARCH_REQUEST = { offset: 0, limit: 20 };
@@ -208,14 +208,14 @@ export default function CreateEvaluationSetModal(props: CreateEvaluationSetsModa
                         </input>
                         <KernButton
                             text="Run similarity search"
-                            icon={IconWand}
+                            icon={MemoIconWand}
                             iconColor='purple'
                             disabled={question === '' || !selectedEmbedding}
                             onClick={getSimilarRecords}
                         />
                         <KernButton
                             text="Add all similar"
-                            icon={IconPlus}
+                            icon={MemoIconPlus}
                             iconColor='green'
                             disabled={showSimilarityRecordsList === false}
                             onClick={() => {
diff --git a/src/components/projects/projectId/playground/EvaluationSets.tsx b/src/components/projects/projectId/playground/EvaluationSets.tsx
index eaa4844e..0c7cd0f2 100644
--- a/src/components/projects/projectId/playground/EvaluationSets.tsx
+++ b/src/components/projects/projectId/playground/EvaluationSets.tsx
@@ -12,7 +12,6 @@ import DeleteEvaluationSetsModal from "./DeleteEvaluationSetsModal";
 import KernTable from "@/submodules/react-components/components/kern-table/KernTable";
 import { EVALUATION_SETS_TABLE_CONFIG, EVALUATION_SETS_TABLE_HEADER, prepareTableBodyEvaluationSets } from "@/src/util/table-preparations/evaluation-sets";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
-import { IconMinus } from "@tabler/icons-react";
 import { selectAllUsers } from "@/src/reduxStore/states/general";
 import { arrayToDict } from "@/submodules/javascript-functions/general";
 
diff --git a/src/components/projects/projectId/playground/PlaygroundSearch.tsx b/src/components/projects/projectId/playground/PlaygroundSearch.tsx
index c2134e29..a3c0a4ed 100644
--- a/src/components/projects/projectId/playground/PlaygroundSearch.tsx
+++ b/src/components/projects/projectId/playground/PlaygroundSearch.tsx
@@ -10,14 +10,12 @@ import { useSelector, useDispatch } from "react-redux";
 import { RecordDisplay } from "@/src/components/shared/record-display/RecordDisplay";
 import { selectVisibleAttributesDataBrowser } from "@/src/reduxStore/states/pages/settings";
 import LoadingIcon from "@/submodules/react-components/components/LoadingIcon";
-import { IconFilterOff, IconFilter, IconCategoryPlus, IconLoader2, IconWand } from '@tabler/icons-react'
 import PlaygroundSearchMetaFilterModal from "./PlaygroundSearchMetaFilterModal";
 import PlaygroundSearchReformulateModal from "./PlaygroundSearchReformulateModal";
-import { Tooltip } from "@nextui-org/react";
 import QuestionHistory from "./QuestionHistory";
 import IconButton from "@/submodules/react-components/components/kern-button/IconButton";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
-import { MemoIconLoader2 } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconCategoryPlus, MemoIconFilter, MemoIconFilterOff, MemoIconLoader2, MemoIconWand } from "@/submodules/react-components/components/kern-icons/icons";
 
 const PLAYGROUND_LIMIT_DEFAULT = 10;
 const PLAYGROUND_THRESHOLD_DEFAULT = -9999;
@@ -101,7 +99,7 @@ export function PlaygroundSearch() {
                 {reformulationLoading && <span className="absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2"><MemoIconLoader2 className="absolute h-6 w-6 animate-spin" /></span>}
                 <div className="absolute top-2 right-2 flex gap-x-2">
                     <IconButton
-                        icon={IconWand}
+                        icon={MemoIconWand}
                         tooltip="Reformulate"
                         disabled={!question || loading}
                         onClick={() => dispatch(openModal(ModalEnum.EVALUATION_REFORMULATE))}
@@ -115,7 +113,7 @@ export function PlaygroundSearch() {
                     <KernButton
                         onClick={() => dispatch(openModal(ModalEnum.EVALUATION_META_FILTER_APPLY))}
                         disabled={!selectedEmbedding}
-                        icon={!metaDataFilter?.length ? IconFilterOff : IconFilter}
+                        icon={!metaDataFilter?.length ? MemoIconFilterOff : MemoIconFilter}
                         text="Meta"
                     />
                     <div className="flex items-center gap-x-2">
@@ -147,7 +145,7 @@ export function PlaygroundSearch() {
                     text="Create set from results"
                     disabled={!searchResults || searchResults?.length === 0 || selectedEmbedding === null || question === "" || loading || createdSet}
                     onClick={createSetFromRecords}
-                    icon={!setCreationLoading ? IconCategoryPlus : IconLoader2}
+                    icon={!setCreationLoading ? MemoIconCategoryPlus : MemoIconLoader2}
                     buttonColor="green"
                     iconColor="green"
                     className="ml-auto"
diff --git a/src/components/projects/projectId/playground/PlaygroundSearchMetaFilterModal.tsx b/src/components/projects/projectId/playground/PlaygroundSearchMetaFilterModal.tsx
index f788c502..4bd6c59e 100644
--- a/src/components/projects/projectId/playground/PlaygroundSearchMetaFilterModal.tsx
+++ b/src/components/projects/projectId/playground/PlaygroundSearchMetaFilterModal.tsx
@@ -12,7 +12,6 @@ import { checkDecimalPatterns, getAttributeType, getFilterIntegrationOperatorToo
 import { getColorForDataType } from "@/src/util/components/projects/projectId/settings/data-schema-helper";
 import { extendArrayElementsByUniqueId } from "@/submodules/javascript-functions/id-prep";
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
-import { IconPlus, IconTrash } from "@tabler/icons-react";
 import { getUniqueValuesByAttributes } from "@/src/services/base/dataSlices";
 import { postProcessUniqueValues } from "@/src/util/components/projects/projectId/data-browser/data-browser-helper";
 import { selectProjectId } from "@/src/reduxStore/states/project";
diff --git a/src/components/projects/projectId/playground/QuestionHistory.tsx b/src/components/projects/projectId/playground/QuestionHistory.tsx
index 06d56399..370e3665 100644
--- a/src/components/projects/projectId/playground/QuestionHistory.tsx
+++ b/src/components/projects/projectId/playground/QuestionHistory.tsx
@@ -2,9 +2,8 @@ import { selectProjectId } from "@/src/reduxStore/states/project";
 import { deleteQuestionFromHistory, getPlaygroundQuestions } from "@/src/services/base/playground";
 import { PlaygroundQuestion } from "@/src/types/components/projects/projectId/settings/playground";
 import IconButton from "@/submodules/react-components/components/kern-button/IconButton";
-import { MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconHistory, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 import useOnClickOutside from "@/submodules/react-components/hooks/useHooks/useOnClickOutside";
-import { IconHistory, IconTrash } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 
@@ -47,7 +46,7 @@ export default function QuestionHistory(props: QuestionHistoryProps) {
     return (
         <>
             <IconButton
-                icon={IconHistory}
+                icon={MemoIconHistory}
                 tooltip="History"
                 tooltipPlacement="bottom"
                 onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
diff --git a/src/components/projects/projectId/playground/QuestionPlayground.tsx b/src/components/projects/projectId/playground/QuestionPlayground.tsx
index 32dd6753..438972bb 100644
--- a/src/components/projects/projectId/playground/QuestionPlayground.tsx
+++ b/src/components/projects/projectId/playground/QuestionPlayground.tsx
@@ -9,7 +9,6 @@ import { getAttributes } from "@/src/services/base/attribute";
 import { setAllAttributes, setAllEmbeddings } from "@/src/reduxStore/states/pages/settings";
 import { getEmbeddings } from "@/src/services/base/embedding";
 import { postProcessingEmbeddings } from "@/src/util/components/projects/projectId/settings/embeddings-helper";
-import { IconCategoryPlus } from "@tabler/icons-react";
 import { MemoIconCategoryPlus } from "@/submodules/react-components/components/kern-icons/icons";
 
 const STEPS = [
diff --git a/src/components/projects/projectId/playground/evaluationRunId/EvaluationRunDetails.tsx b/src/components/projects/projectId/playground/evaluationRunId/EvaluationRunDetails.tsx
index 37433232..55d9c21e 100644
--- a/src/components/projects/projectId/playground/evaluationRunId/EvaluationRunDetails.tsx
+++ b/src/components/projects/projectId/playground/evaluationRunId/EvaluationRunDetails.tsx
@@ -5,8 +5,7 @@ import { getAttributes } from "@/src/services/base/attribute"
 import { getEvaluationRunById, getEvaluationSets } from "@/src/services/base/playground"
 import { arrayToDict, percentRoundString } from "@/submodules/javascript-functions/general"
 import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText"
-import { MemoIconCheck, MemoIconX } from "@/submodules/react-components/components/kern-icons/icons"
-import { IconArrowLeft, IconCheck, IconX } from "@tabler/icons-react"
+import { MemoIconArrowLeft, MemoIconCheck, MemoIconX } from "@/submodules/react-components/components/kern-icons/icons"
 import { useRouter } from "next/router"
 import { Fragment, useEffect, useState } from "react"
 import { useDispatch, useSelector } from "react-redux"
@@ -65,7 +64,7 @@ export default function EvaluationRunDetails() {
                 <ButtonAsText
                     text="Go back"
                     onClick={() => router.back()}
-                    iconLeft={IconArrowLeft}
+                    iconLeft={MemoIconArrowLeft}
                     color="green"
                 />
                 <label className="text-xl leading-6 text-gray-900 font-medium"> Evaluation Run Results</label>
diff --git a/src/components/projects/projectId/settings/DataSchema.tsx b/src/components/projects/projectId/settings/DataSchema.tsx
index d3fab0ff..f59d7a2c 100644
--- a/src/components/projects/projectId/settings/DataSchema.tsx
+++ b/src/components/projects/projectId/settings/DataSchema.tsx
@@ -10,12 +10,11 @@ import { ATTRIBUTES_VISIBILITY_STATES, getTooltipVisibilityState } from "@/src/u
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
 import { Tooltip } from "@nextui-org/react";
-import { IconArrowRight, IconCheck, IconX } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
-import { MemoIconCheck, MemoIconX } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconArrowRight, MemoIconCheck, MemoIconX } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function DataSchema(props: DataSchemaProps) {
     const router = useRouter();
@@ -134,7 +133,7 @@ export default function DataSchema(props: DataSchemaProps) {
                                                     <ButtonAsText
                                                         text="Details"
                                                         color="green"
-                                                        iconRight={IconArrowRight}
+                                                        iconRight={MemoIconArrowRight}
                                                         onClick={() => {
                                                             dispatch(setCurrentPage(CurrentPage.ATTRIBUTE_CALCULATION));
                                                             router.push(`/projects/${projectId}/attributes/${attribute.id}`);
diff --git a/src/components/projects/projectId/settings/ProjectMetaData.tsx b/src/components/projects/projectId/settings/ProjectMetaData.tsx
index 42bb85c2..455a35ed 100644
--- a/src/components/projects/projectId/settings/ProjectMetaData.tsx
+++ b/src/components/projects/projectId/settings/ProjectMetaData.tsx
@@ -2,12 +2,12 @@ import { selectProject, setActiveProject } from "@/src/reduxStore/states/project
 import { updateProjectNameAndDescriptionPost } from "@/src/services/base/project";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { Tooltip } from "@nextui-org/react";
-import { IconWreckingBall } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { deleteProjectPost } from "@/src/services/base/project";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconWreckingBall } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function ProjectMetaData() {
     const router = useRouter();
@@ -97,7 +97,7 @@ export default function ProjectMetaData() {
                             onClick={deleteProject}
                             disabled={!(projectNameDelete === project.name)}
                             type="button"
-                            icon={IconWreckingBall}
+                            icon={MemoIconWreckingBall}
                             buttonColor="red"
                             iconColor="red"
                         />
diff --git a/src/components/projects/projectId/settings/ProjectSettings.tsx b/src/components/projects/projectId/settings/ProjectSettings.tsx
index 3d114883..1f0d6bc4 100644
--- a/src/components/projects/projectId/settings/ProjectSettings.tsx
+++ b/src/components/projects/projectId/settings/ProjectSettings.tsx
@@ -4,7 +4,6 @@ import { selectProject, setActiveProject } from "@/src/reduxStore/states/project
 import { useCallback, useEffect, useState } from "react";
 import { selectAttributes, selectEmbeddings, setAllAttributes, setAllEmbeddings, setAllRecommendedEncodersDict, setLabelingTasksAll, setRecommendedEncodersAll } from "@/src/reduxStore/states/pages/settings";
 import { timer } from "rxjs";
-import { IconCamera, IconCheck, IconDots, IconPlus, IconUpload } from "@tabler/icons-react";
 import { ModalEnum } from "@/src/types/shared/modal";
 import { openModal, setModalStates } from "@/src/reduxStore/states/modal";
 import { useRouter } from "next/router";
@@ -33,7 +32,7 @@ import { getEmbeddings, getRecommendedEncoders } from "@/src/services/base/embed
 import { getQueuedTasks } from "@/src/services/base/project-setting";
 import { Application, CurrentPage } from "@/submodules/react-components/hooks/web-socket/constants";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
-import { MemoIconCheck, MemoIconDots } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconCamera, MemoIconCheck, MemoIconDots, MemoIconPlus, MemoIconUpload } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function ProjectSettings() {
     const dispatch = useDispatch();
@@ -251,7 +250,7 @@ export default function ProjectSettings() {
                         onClick={() => dispatch(openModal(ModalEnum.CREATE_NEW_ATTRIBUTE))}
                         tooltip={TOOLTIPS_DICT.PROJECT_SETTINGS.ADD_NEW_ATTRIBUTE}
                         tooltipPlacement="bottom"
-                        icon={IconPlus}
+                        icon={MemoIconPlus}
                     />
                     <KernButton
                         text="Upload records"
@@ -262,7 +261,7 @@ export default function ProjectSettings() {
                         }}
                         tooltip={isAcRunning ? 'Attribute calculation in progress' : tokenizationProgress < 1 ? 'Tokenization in progress' : 'Upload more records to the project'}
                         tooltipPlacement="right"
-                        icon={IconUpload}
+                        icon={MemoIconUpload}
                     />
                     <Export />
                     <KernButton
@@ -270,7 +269,7 @@ export default function ProjectSettings() {
                         onClick={() => dispatch(openModal(ModalEnum.PROJECT_SNAPSHOT))}
                         tooltip={TOOLTIPS_DICT.PROJECT_SETTINGS.PROJECT_SNAPSHOT}
                         tooltipPlacement="bottom"
-                        icon={IconCamera}
+                        icon={MemoIconCamera}
                     />
                 </div>
                 <div className="text-left lg:text-right flex flex-row items-center justify-end">
diff --git a/src/components/projects/projectId/settings/ProjectSnapshotExportModal.tsx b/src/components/projects/projectId/settings/ProjectSnapshotExportModal.tsx
index ed5341f8..9aaa6514 100644
--- a/src/components/projects/projectId/settings/ProjectSnapshotExportModal.tsx
+++ b/src/components/projects/projectId/settings/ProjectSnapshotExportModal.tsx
@@ -15,14 +15,13 @@ import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { downloadByteDataNoStringify } from "@/submodules/javascript-functions/export";
 import { formatBytes } from "@/submodules/javascript-functions/general";
 import { Tooltip } from "@nextui-org/react";
-import { IconDownload, IconInfoCircle, IconLoader } from "@tabler/icons-react";
 import { Fragment, useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { timer } from "rxjs";
 import { Application, CurrentPage, CurrentPageSubKey } from "@/submodules/react-components/hooks/web-socket/constants";
 import { selectOrganizationId } from "@/src/reduxStore/states/general";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
-import { MemoIconInfoCircle } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconDownload, MemoIconInfoCircle } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function ProjectSnapshotExportModal() {
     const dispatch = useDispatch();
@@ -180,7 +179,7 @@ export default function ProjectSnapshotExportModal() {
                 <KernButton
                     text={projectExportCredentials.downloadFileName}
                     onClick={exportViaFile}
-                    icon={IconDownload}
+                    icon={MemoIconDownload}
                     tooltip={TOOLTIPS_DICT.PROJECT_SETTINGS.LATEST_SNAPSHOT}
                 />
             }
diff --git a/src/components/projects/projectId/settings/embeddings/AddNewEmbeddingModal.tsx b/src/components/projects/projectId/settings/embeddings/AddNewEmbeddingModal.tsx
index 8f967c00..61bafc80 100644
--- a/src/components/projects/projectId/settings/embeddings/AddNewEmbeddingModal.tsx
+++ b/src/components/projects/projectId/settings/embeddings/AddNewEmbeddingModal.tsx
@@ -17,7 +17,6 @@ import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { MemoIconExternalLink } from "@/submodules/react-components/components/kern-icons/icons";
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
 import { Tooltip } from "@nextui-org/react";
-import { IconExternalLink } from "@tabler/icons-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
diff --git a/src/components/projects/projectId/settings/embeddings/Embeddings.tsx b/src/components/projects/projectId/settings/embeddings/Embeddings.tsx
index 0e87e8be..4c484c8f 100644
--- a/src/components/projects/projectId/settings/embeddings/Embeddings.tsx
+++ b/src/components/projects/projectId/settings/embeddings/Embeddings.tsx
@@ -7,7 +7,6 @@ import { Embedding, EmbeddingState, EmbeddingType } from "@/src/types/components
 import { ModalEnum } from "@/src/types/shared/modal";
 import { DATA_TYPES, getColorForDataType } from "@/src/util/components/projects/projectId/settings/data-schema-helper";
 import { Tooltip } from "@nextui-org/react";
-import { IconAlertTriangleFilled, IconArrowAutofitDown, IconCircleCheckFilled, IconNotes, IconPlus, IconTrash, IconMessageCircleSearch } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -18,7 +17,7 @@ import DeleteEmbeddingModal from "./DeleteEmbeddingModal";
 import { useWebsocket } from "@/submodules/react-components/hooks/web-socket/useWebsocket";
 import { Application, CurrentPage, CurrentPageSubKey } from "@/submodules/react-components/hooks/web-socket/constants";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
-import { MemoIconAlertTriangleFilled, MemoIconCircleCheckFilled, MemoIconNotes, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconAlertTriangleFilled, MemoIconArrowAutofitDown, MemoIconCircleCheckFilled, MemoIconMessageCircleSearch, MemoIconNotes, MemoIconPlus, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 
 
 export default function Embeddings(props: { refetchEmbeddings: () => void }) {
@@ -173,21 +172,21 @@ export default function Embeddings(props: { refetchEmbeddings: () => void }) {
                 <KernButton
                     text="Generate embedding"
                     onClick={() => dispatch(openModal(ModalEnum.ADD_EMBEDDING))}
-                    icon={IconPlus}
+                    icon={MemoIconPlus}
                     tooltip={TOOLTIPS_DICT.PROJECT_SETTINGS.EMBEDDINGS.GENERATE_EMBEDDING}
                     tooltipPlacement="right"
                 />
                 <KernButton
                     text="See downloaded models"
                     onClick={() => router.push('/models-download')}
-                    icon={IconArrowAutofitDown}
+                    icon={MemoIconArrowAutofitDown}
                     tooltip={TOOLTIPS_DICT.PROJECT_SETTINGS.EMBEDDINGS.NAVIGATE_MODELS_DOWNLOADED}
                     tooltipPlacement="right"
                 />
                 <KernButton
                     text="Evaluation"
                     onClick={() => router.push(`/projects/${projectId}/playground`)}
-                    icon={IconMessageCircleSearch}
+                    icon={MemoIconMessageCircleSearch}
                     tooltip={TOOLTIPS_DICT.PROJECT_SETTINGS.EMBEDDINGS.PLAYGROUND}
                     tooltipPlacement="right"
                 />
diff --git a/src/components/projects/projectId/settings/labeling-tasks/ChangeColorModal.tsx b/src/components/projects/projectId/settings/labeling-tasks/ChangeColorModal.tsx
index 3afd10d6..c3b7bb13 100644
--- a/src/components/projects/projectId/settings/labeling-tasks/ChangeColorModal.tsx
+++ b/src/components/projects/projectId/settings/labeling-tasks/ChangeColorModal.tsx
@@ -10,7 +10,6 @@ import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { jsonCopy } from "@/submodules/javascript-functions/general";
 import { MemoIconPencil } from "@/submodules/react-components/components/kern-icons/icons";
 import { Tooltip } from "@nextui-org/react";
-import { IconPencil } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
diff --git a/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx b/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx
index 5557128a..366bac14 100644
--- a/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx
+++ b/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx
@@ -6,8 +6,6 @@ import { ModalEnum } from "@/src/types/shared/modal";
 import { LabelHelper } from "@/src/util/classes/label-helper";
 import { isTaskNameUnique, labelingTaskFromString, labelingTaskToString } from "@/src/util/components/projects/projectId/settings/labeling-tasks-helper";
 import { jsonCopy } from "@/submodules/javascript-functions/general";
-import { Tooltip } from "@nextui-org/react";
-import { IconColorPicker, IconPlus, IconTrash } from "@tabler/icons-react";
 import { useEffect, useState } from "react"
 import { useDispatch, useSelector } from "react-redux";
 import RenameLabelModal from "./RenameLabelModal";
@@ -21,7 +19,7 @@ import KernDropdown from "@/submodules/react-components/components/KernDropdown"
 import { updateLabelingTask } from "@/src/services/base/labeling-tasks";
 import IconButton from "@/submodules/react-components/components/kern-button/IconButton";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
-import { MemoIconColorPicker, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconColorPicker, MemoIconPlus, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function LabelingTasks() {
     const dispatch = useDispatch();
@@ -147,7 +145,7 @@ export default function LabelingTasks() {
                                             </div>
                                         ))}
                                         <IconButton
-                                            icon={IconPlus}
+                                            icon={MemoIconPlus}
                                             disabled={task.taskType == LabelingTaskTaskType.NOT_SET}
                                             onClick={() => dispatch(setModalStates(ModalEnum.ADD_LABEL, { taskId: task.id, open: true }))}
                                         />
@@ -166,7 +164,7 @@ export default function LabelingTasks() {
         <div className="mt-1 flex items-center gap-1">
             <KernButton
                 text="Add labeling task"
-                icon={IconPlus}
+                icon={MemoIconPlus}
                 onClick={() => dispatch(openModal(ModalEnum.ADD_LABELING_TASK))}
                 tooltip={TOOLTIPS_DICT.PROJECT_SETTINGS.LABELING_TASK.NEW_LABELING_TASK}
                 tooltipPlacement="right"
diff --git a/src/components/projects/projectId/settings/labeling-tasks/RenameLabelModal.tsx b/src/components/projects/projectId/settings/labeling-tasks/RenameLabelModal.tsx
index 33caee7a..d9434d1a 100644
--- a/src/components/projects/projectId/settings/labeling-tasks/RenameLabelModal.tsx
+++ b/src/components/projects/projectId/settings/labeling-tasks/RenameLabelModal.tsx
@@ -13,7 +13,6 @@ import { jsonCopy } from "@/submodules/javascript-functions/general";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 import { MemoIconAlertTriangleFilled, MemoIconInfoCircleFilled, MemoIconTriangleInverted } from "@/submodules/react-components/components/kern-icons/icons";
 import { Tooltip } from "@nextui-org/react";
-import { IconAlertTriangleFilled, IconInfoCircleFilled, IconTriangleInverted } from "@tabler/icons-react";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
diff --git a/src/components/shared/comments/Comments.tsx b/src/components/shared/comments/Comments.tsx
index ec4a06b4..ceab738c 100644
--- a/src/components/shared/comments/Comments.tsx
+++ b/src/components/shared/comments/Comments.tsx
@@ -1,7 +1,6 @@
 import { Tooltip } from "@nextui-org/react";
 import CommentsMainSection from "./CommentsMainSection";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
-import { IconNotes } from "@tabler/icons-react";
 import { useDispatch, useSelector } from "react-redux";
 import { useCallback, useState } from "react";
 import { selectAllUsers, selectOrganizationId, setAllUsers, setComments } from "@/src/reduxStore/states/general";
diff --git a/src/components/shared/comments/CommentsMainSection.tsx b/src/components/shared/comments/CommentsMainSection.tsx
index 613cf934..f5a12504 100644
--- a/src/components/shared/comments/CommentsMainSection.tsx
+++ b/src/components/shared/comments/CommentsMainSection.tsx
@@ -2,7 +2,6 @@ import { CommentData, CommentMainSectionProps, CommentPosition } from "@/src/typ
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { useLocalStorage } from "@/submodules/react-components/hooks/useLocalStorage";
 import { Tooltip } from "@nextui-org/react";
-import { IconArrowLeft, IconArrowRight, IconX } from "@tabler/icons-react";
 import { useCallback, useEffect, useState } from "react";
 import DisplayComments from "./DisplayComments";
 import { useSelector } from "react-redux";
@@ -13,7 +12,7 @@ import { convertTypeToKey } from "@/src/util/shared/comments-helper";
 import { CommentDataManager } from "@/src/util/classes/comments";
 import { createComment, deleteCommentPost, updateCommentPost } from "@/src/services/base/comment";
 import IconButton from "@/submodules/react-components/components/kern-button/IconButton";
-import { MemoIconArrowLeft, MemoIconArrowRight } from "@/submodules/react-components/components/kern-icons/icons";
+import { MemoIconArrowLeft, MemoIconArrowRight, MemoIconX } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function CommentsMainSection(props: CommentMainSectionProps) {
     const comments = useSelector(selectComments);
@@ -155,7 +154,7 @@ export default function CommentsMainSection(props: CommentMainSectionProps) {
                                 </Tooltip>
                             </div>
                             <IconButton
-                                icon={IconX}
+                                icon={MemoIconX}
                                 onClick={props.toggleOpen}
                             />
                         </div>
diff --git a/src/components/shared/comments/DisplayComments.tsx b/src/components/shared/comments/DisplayComments.tsx
index 7e9f9004..80560fb6 100644
--- a/src/components/shared/comments/DisplayComments.tsx
+++ b/src/components/shared/comments/DisplayComments.tsx
@@ -4,7 +4,6 @@ import { combineClassNames } from "@/submodules/javascript-functions/general";
 import { MemoIconDotsVertical, MemoIconEdit, MemoIconEye, MemoIconEyeOff, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
 import { Menu, Transition } from "@headlessui/react";
 import { Tooltip } from "@nextui-org/react";
-import { IconDotsVertical, IconEdit, IconEye, IconEyeOff, IconTrash } from "@tabler/icons-react";
 import { Fragment } from "react";
 import { useSelector } from "react-redux";
 
diff --git a/src/components/shared/crypted-field/CryptedField.tsx b/src/components/shared/crypted-field/CryptedField.tsx
index 2957cca4..239e6d25 100644
--- a/src/components/shared/crypted-field/CryptedField.tsx
+++ b/src/components/shared/crypted-field/CryptedField.tsx
@@ -3,7 +3,6 @@ import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { MemoIconEye, MemoIconEyeOff } from "@/submodules/react-components/components/kern-icons/icons";
 import { useDefaults } from "@/submodules/react-components/hooks/useDefaults";
 import { Tooltip } from "@nextui-org/react";
-import { IconEye, IconEyeOff } from "@tabler/icons-react";
 import { useRef, useState } from "react";
 
 const DEFAULTS = {
diff --git a/src/components/shared/export/Export.tsx b/src/components/shared/export/Export.tsx
index 01569d56..379b897a 100644
--- a/src/components/shared/export/Export.tsx
+++ b/src/components/shared/export/Export.tsx
@@ -1,19 +1,18 @@
 import { openModal } from "@/src/reduxStore/states/modal";
 import { ModalEnum } from "@/src/types/shared/modal";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
-import { Tooltip } from "@nextui-org/react";
-import { IconDownload } from "@tabler/icons-react";
 import { useDispatch } from "react-redux";
 import ExportRecordsModal from "./ExportRecordsModal";
 import { ExportProps } from "@/src/types/shared/export";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconDownload } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function Export(props: ExportProps) {
     const dispatch = useDispatch();
     return (<>
         <KernButton
             text="Download records"
-            icon={IconDownload}
+            icon={MemoIconDownload}
             onClick={() => dispatch(openModal(ModalEnum.EXPORT_RECORDS))}
             className="mr-1"
             tooltip={TOOLTIPS_DICT.GENERAL.DOWNLOAD_RECORDS}
diff --git a/src/components/shared/export/ExportRecordsModal.tsx b/src/components/shared/export/ExportRecordsModal.tsx
index 49c94896..bfad2d21 100644
--- a/src/components/shared/export/ExportRecordsModal.tsx
+++ b/src/components/shared/export/ExportRecordsModal.tsx
@@ -11,9 +11,7 @@ import { LabelSource } from "@/submodules/javascript-functions/enums/enums";
 import { labelSourceToString } from "@/submodules/javascript-functions/enums/enum-functions";
 import postProcessExportRecordData, { NONE_IN_PROJECT, buildForm, getExportTooltipFor } from "@/src/util/shared/export-helper";
 import GroupDisplay from "./GroupDisplay";
-import { IconDownload } from "@tabler/icons-react";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
-import { Tooltip } from "@nextui-org/react";
 import { DownloadState } from "@/src/types/components/projects/projectId/settings/project-export";
 import LoadingIcon from "../../../../submodules/react-components/components/LoadingIcon";
 import { ExportHelper } from "@/src/util/classes/export";
@@ -28,6 +26,7 @@ import { getRecordExportFromData } from "@/src/services/base/project";
 import { getLastRecordExportCredentials, prepareRecordExport } from "@/src/services/base/project-setting";
 import { Application, CurrentPage } from "@/submodules/react-components/hooks/web-socket/constants";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
+import { MemoIconDownload } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function ExportRecordsModal(props: ExportProps) {
     const dispatch = useDispatch();
@@ -317,7 +316,7 @@ export default function ExportRecordsModal(props: ExportProps) {
                     text={recordExportCredentials.downloadFileName}
                     onClick={exportViaFile}
                     tooltip={TOOLTIPS_DICT.PROJECT_SETTINGS.LATEST_SNAPSHOT}
-                    icon={IconDownload}
+                    icon={MemoIconDownload}
                 />
             }
             <KernButton
diff --git a/src/components/shared/grid-cards/GridCards.tsx b/src/components/shared/grid-cards/GridCards.tsx
index d28c7ae4..58d666d4 100644
--- a/src/components/shared/grid-cards/GridCards.tsx
+++ b/src/components/shared/grid-cards/GridCards.tsx
@@ -4,7 +4,6 @@ import { GridCardsProps } from "@/src/types/shared/grid-cards";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { InformationSourceType } from "@/submodules/javascript-functions/enums/enums";
 import { Tooltip } from "@nextui-org/react";
-import { IconArrowRight, IconBolt, IconCode, IconSparkles, IconUsers } from "@tabler/icons-react";
 import { useSelector } from "react-redux";
 import style from '@/src/styles/components/projects/projectId/heuristics/heuristics.module.css';
 import { useRouter } from "next/router";
diff --git a/src/components/shared/header/Header.tsx b/src/components/shared/header/Header.tsx
index a83d57d1..3dd14ac4 100644
--- a/src/components/shared/header/Header.tsx
+++ b/src/components/shared/header/Header.tsx
@@ -6,7 +6,6 @@ import { useDispatch, useSelector } from "react-redux";
 import style from "@/src/styles/shared/header.module.css";
 import LogoutDropdown from "./LogoutDropdown";
 import { useRouter } from "next/router";
-import { IconBell, IconHexagons, IconHome, IconPlayCard } from "@tabler/icons-react";
 import { selectAllProjectsNamesDict, selectProject, setAllProjects } from "@/src/reduxStore/states/project";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import NotificationCenterModal from "../notification-center/NotificationCenterModal";
diff --git a/src/components/shared/layout/Layout.tsx b/src/components/shared/layout/Layout.tsx
index f65b9e82..28a0a4a8 100644
--- a/src/components/shared/layout/Layout.tsx
+++ b/src/components/shared/layout/Layout.tsx
@@ -2,7 +2,6 @@ import Header from "../header/Header";
 import Sidebar from "../sidebar/Sidebar";
 import { Fragment, useCallback, useEffect, useState } from "react";
 import { NotificationLevel } from "@/src/types/shared/notification-center";
-import { IconAlertTriangleFilled, IconCircleCheckFilled, IconInfoCircleFilled } from "@tabler/icons-react";
 import { useDispatch, useSelector } from "react-redux";
 import { selectCurrentPage, selectOrganizationId, selectUser } from "@/src/reduxStore/states/general";
 import { interval } from "rxjs";
diff --git a/src/components/shared/logs/ContainerLogs.tsx b/src/components/shared/logs/ContainerLogs.tsx
index d7ad7512..45d67039 100644
--- a/src/components/shared/logs/ContainerLogs.tsx
+++ b/src/components/shared/logs/ContainerLogs.tsx
@@ -1,12 +1,12 @@
 import { ContainerLogsProps } from "@/src/types/components/projects/projectId/settings/attribute-calculation";
 import { copyToClipboard } from "@/submodules/javascript-functions/general";
 import { Tooltip } from "@nextui-org/react";
-import { IconCheck, IconClipboard, IconClipboardOff } from "@tabler/icons-react";
 import { useState } from "react";
 import { first, timer } from "rxjs";
 import Logs from "./Logs";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import IconButton from "@/submodules/react-components/components/kern-button/IconButton";
+import { MemoIconCheck, MemoIconClipboard, MemoIconClipboardOff } from "@/submodules/react-components/components/kern-icons/icons";
 
 export default function ContainerLogs(props: ContainerLogsProps) {
 
@@ -29,14 +29,14 @@ export default function ContainerLogs(props: ContainerLogsProps) {
             {props.logs ? (
                 <IconButton
                     onClick={() => copyToClipboardLogs(props.logs.join('\n'), 0)}
-                    icon={copyClicked != 0 ? IconClipboard : IconCheck}
+                    icon={copyClicked != 0 ? MemoIconClipboard : MemoIconCheck}
                     tooltip={TOOLTIPS_DICT.GENERAL.CLICK_TO_COPY}
                     tooltipPlacement="top"
                 />
             ) : (
                 <Tooltip content='No runs to copy' color="invert" placement="top" className="cursor-auto">
                     <IconButton
-                        icon={IconClipboardOff}
+                        icon={MemoIconClipboardOff}
                         disabled
                     />
                 </Tooltip>)}
diff --git a/src/components/shared/record-display/RecordDisplay.tsx b/src/components/shared/record-display/RecordDisplay.tsx
index 1d62cb93..80bd4da0 100644
--- a/src/components/shared/record-display/RecordDisplay.tsx
+++ b/src/components/shared/record-display/RecordDisplay.tsx
@@ -1,11 +1,10 @@
 import { selectConfiguration, selectIsTextHighlightNeeded, selectTextHighlight } from "@/src/reduxStore/states/pages/data-browser";
-import { selectAttributesDict, selectVisibleAttributesHeuristics } from "@/src/reduxStore/states/pages/settings";
+import { selectAttributesDict } from "@/src/reduxStore/states/pages/settings";
 import { LineBreaksType } from "@/src/types/components/projects/projectId/data-browser/data-browser";
 import { Attribute } from "@/src/types/components/projects/projectId/settings/data-schema";
 import { DataTypeEnum } from "@/src/types/shared/general";
 import { postProcessAttributes, postProcessRecord } from "@/src/util/shared/record-display-helper";
-import { IconAlertCircle } from "@tabler/icons-react";
-import { use, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import Highlight from "../highlight/Highlight";
 import { MemoIconAlertCircle } from "@/submodules/react-components/components/kern-icons/icons";
diff --git a/src/components/shared/sidebar/VersionOverviewModal.tsx b/src/components/shared/sidebar/VersionOverviewModal.tsx
index 119595af..9448ad13 100644
--- a/src/components/shared/sidebar/VersionOverviewModal.tsx
+++ b/src/components/shared/sidebar/VersionOverviewModal.tsx
@@ -1,6 +1,5 @@
 import { ModalEnum } from "@/src/types/shared/modal";
 import Modal from "../modal/Modal";
-import { IconArrowRight } from "@tabler/icons-react";
 import { useSelector } from "react-redux";
 import { CacheEnum, selectCachedValue } from "@/src/reduxStore/states/cachedValues";
 import style from '@/src/styles/shared/sidebar.module.css';
diff --git a/src/components/shared/upload/ModalUpload.tsx b/src/components/shared/upload/ModalUpload.tsx
index 0d11d513..41d92917 100644
--- a/src/components/shared/upload/ModalUpload.tsx
+++ b/src/components/shared/upload/ModalUpload.tsx
@@ -7,7 +7,6 @@ import { useSelector } from "react-redux";
 import { selectAllProjects } from "@/src/reduxStore/states/project";
 import Upload from "./Upload";
 import { selectUploadData } from "@/src/reduxStore/states/upload";
-import { IconAlertTriangle } from "@tabler/icons-react";
 import { timer } from "rxjs";
 import { selectModal } from "@/src/reduxStore/states/modal";
 import { MemoIconAlertTriangle } from "@/submodules/react-components/components/kern-icons/icons";
diff --git a/src/components/shared/upload/helper-components/UploadField.tsx b/src/components/shared/upload/helper-components/UploadField.tsx
index 61d51aa4..814f5cd5 100644
--- a/src/components/shared/upload/helper-components/UploadField.tsx
+++ b/src/components/shared/upload/helper-components/UploadField.tsx
@@ -2,7 +2,6 @@ import { UploadFieldProps, UploadStates } from "@/src/types/shared/upload";
 import { formatBytes } from "@/submodules/javascript-functions/general";
 import { useEffect, useRef, useState } from "react";
 import LoadingIcon from "../../../../../submodules/react-components/components/LoadingIcon";
-import { IconDatabase } from "@tabler/icons-react";
 import { UploadHelper } from "@/src/util/classes/upload-helper";
 import { useDropzone } from 'react-dropzone';
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
diff --git a/src/components/shared/upload/helper-components/UploadWrapper.tsx b/src/components/shared/upload/helper-components/UploadWrapper.tsx
index 0b4e5e65..da56f4a8 100644
--- a/src/components/shared/upload/helper-components/UploadWrapper.tsx
+++ b/src/components/shared/upload/helper-components/UploadWrapper.tsx
@@ -4,7 +4,6 @@ import { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { selectUploadData, setImportOptions } from "@/src/reduxStore/states/upload";
 import { useRouter } from "next/router";
-import { IconAlertTriangle } from "@tabler/icons-react";
 import { selectEmbeddings } from "@/src/reduxStore/states/pages/settings";
 import { Embedding, PlatformType } from "@/src/types/components/projects/projectId/settings/embeddings";
 import CryptedField from "../../crypted-field/CryptedField";
diff --git a/src/components/users/UsersList.tsx b/src/components/users/UsersList.tsx
index 60e9d80e..1bf7dbb1 100644
--- a/src/components/users/UsersList.tsx
+++ b/src/components/users/UsersList.tsx
@@ -2,7 +2,6 @@ import { selectAnnotators, selectEngineers, selectExperts, selectInactiveOrganiz
 import { useSelector } from "react-redux"
 import YoutubeIntroduction from "../projects/YoutubeIntroduction";
 import { User } from "@/src/types/shared/general";
-import { IconUsersGroup } from "@tabler/icons-react";
 import { UNKNOWN_USER } from "@/src/util/constants";
 import { MemoIconUsersGroup } from "@/submodules/react-components/components/kern-icons/icons";
 
diff --git a/submodules/react-components b/submodules/react-components
index b8e6f4de..0dd98e89 160000
--- a/submodules/react-components
+++ b/submodules/react-components
@@ -1 +1 @@
-Subproject commit b8e6f4de8ffef0c166668a0f371526707195f417
+Subproject commit 0dd98e89fa9f3c4814eb5ee6e215d6ba0f12194c

From 3de2f74e1aeba9ccc46d1b7dc1e23fc950225d3b Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Wed, 14 May 2025 17:39:28 +0200
Subject: [PATCH 4/8] PR comments

---
 src/components/projects/ProjectCard.tsx              |  3 +--
 .../attributes/attributeId/AttributeCalculations.tsx | 12 ++++++++----
 .../projects/projectId/settings/data-schema.ts       |  4 ++++
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx
index c5fd063a..41870b71 100644
--- a/src/components/projects/ProjectCard.tsx
+++ b/src/components/projects/ProjectCard.tsx
@@ -1,7 +1,7 @@
 import { selectIsAdmin, selectUser } from "@/src/reduxStore/states/general";
 import { closeModal, setModalStates } from "@/src/reduxStore/states/modal";
 import { removeFromAllProjectsById } from "@/src/reduxStore/states/project";
-import { Project, ProjectCardProps, ProjectStatus } from "@/src/types/components/projects/projects-list";
+import { ProjectCardProps, ProjectStatus } from "@/src/types/components/projects/projects-list";
 import { ModalEnum } from "@/src/types/shared/modal";
 import { isStringTrue } from "@/submodules/javascript-functions/general";
 import { Tooltip } from "@nextui-org/react";
@@ -41,7 +41,6 @@ export default function ProjectCard(props: ProjectCardProps) {
         const deleteInstant = isStringTrue(localStorage.getItem("adminInstantDelete"));
         if (deleteInstant) {
             deleteProjectPost(projectId.current, (res) => {
-                dispatch(closeModal(ModalEnum.ADMIN_DELETE_PROJECT));
                 dispatch(removeFromAllProjectsById(projectId.current));
             })
         }
diff --git a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
index f9216345..9d8086eb 100644
--- a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
+++ b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
@@ -2,7 +2,7 @@ import Statuses from "@/src/components/shared/statuses/Statuses";
 import { selectAllLookupLists, setAllLookupLists } from "@/src/reduxStore/states/pages/lookup-lists";
 import { selectAttributes, selectVisibleAttributeAC, setAllAttributes, setLabelingTasksAll, updateAttributeById } from "@/src/reduxStore/states/pages/settings";
 import { selectProjectId } from "@/src/reduxStore/states/project"
-import { Attribute, AttributeState, LLMConfig } from "@/src/types/components/projects/projectId/settings/data-schema";
+import { Attribute, AttributeState, AttributeWithOnClick, LLMConfig } from "@/src/types/components/projects/projectId/settings/data-schema";
 import { DataTypeEnum } from "@/src/types/shared/general";
 import { LLM_PROVIDER_OPTIONS, postProcessCurrentAttribute } from "@/src/util/components/projects/projectId/settings/attribute-calculation-helper";
 import { ATTRIBUTES_VISIBILITY_STATES, DATA_TYPES, getTooltipVisibilityState } from "@/src/util/components/projects/projectId/settings/data-schema-helper";
@@ -318,6 +318,10 @@ export default function AttributeCalculation() {
         []
     );
 
+    const usableAttributesFinal = useMemo(() => usableAttributes.map((attribute) => (
+        { ...attribute, onClick: copyToClipboardFunc(attribute.name) }
+    )), [usableAttributes]);
+
     const disabledOptions = useMemo(() => {
         if (!currentAttribute || currentAttribute.dataType == DataTypeEnum.LLM_RESPONSE) return undefined;
         return DATA_TYPES.map((e) => e.value == DataTypeEnum.LLM_RESPONSE);
@@ -387,10 +391,10 @@ export default function AttributeCalculation() {
                     </div>
                     <div className="text-sm leading-5 font-medium text-gray-700 inline-block">Attributes</div>
                     <div className="flex flex-row items-center">
-                        {usableAttributes.length == 0 && <div className="text-sm font-normal text-gray-500">No usable attributes.</div>}
-                        {usableAttributes.map((attribute: Attribute) => (
+                        {usableAttributesFinal.length == 0 && <div className="text-sm font-normal text-gray-500">No usable attributes.</div>}
+                        {usableAttributesFinal.map((attribute: AttributeWithOnClick) => (
                             <Tooltip key={attribute.id} content={attribute.dataTypeName + ' - ' + TOOLTIPS_DICT.GENERAL.CLICK_TO_COPY} color="invert" placement="top">
-                                <span onClick={copyToClipboardFunc(attribute.name)}>
+                                <span onClick={attribute.onClick}>
                                     <div className={`cursor-pointer border items-center px-2 py-0.5 rounded text-xs font-medium text-center mr-2 ${'bg-' + attribute.color + '-100'} ${'text-' + attribute.color + '-700'} ${'border-' + attribute.color + '-400'} ${'hover:bg-' + attribute.color + '-200'}`}>
                                         {attribute.name}
                                     </div>
diff --git a/src/types/components/projects/projectId/settings/data-schema.ts b/src/types/components/projects/projectId/settings/data-schema.ts
index ad23a31d..947df63c 100644
--- a/src/types/components/projects/projectId/settings/data-schema.ts
+++ b/src/types/components/projects/projectId/settings/data-schema.ts
@@ -46,6 +46,10 @@ export type Attribute = {
     additionalConfig?: LLMConfig;
 }
 
+export type AttributeWithOnClick = Attribute & {
+    onClick?: () => void;
+}
+
 export type AttributeVisibilityStates = {
     name: string;
     value: string;

From b7f15ded505b4744fce3270e69f9ecf717d18754 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Wed, 14 May 2025 18:24:09 +0200
Subject: [PATCH 5/8] PR comments

---
 .../attributeId/AttributeCalculations.tsx     | 24 ++++++++++++-------
 .../attributeId/ExecutionContainer.tsx        | 23 ++++++++++++++----
 .../projects/projectId/lookup-lists.ts        |  4 ++++
 submodules/react-components                   |  2 +-
 4 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
index 9d8086eb..077df33c 100644
--- a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
+++ b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
@@ -2,7 +2,7 @@ import Statuses from "@/src/components/shared/statuses/Statuses";
 import { selectAllLookupLists, setAllLookupLists } from "@/src/reduxStore/states/pages/lookup-lists";
 import { selectAttributes, selectVisibleAttributeAC, setAllAttributes, setLabelingTasksAll, updateAttributeById } from "@/src/reduxStore/states/pages/settings";
 import { selectProjectId } from "@/src/reduxStore/states/project"
-import { Attribute, AttributeState, AttributeWithOnClick, LLMConfig } from "@/src/types/components/projects/projectId/settings/data-schema";
+import { Attribute, AttributeState, AttributeVisibility, AttributeWithOnClick, LLMConfig } from "@/src/types/components/projects/projectId/settings/data-schema";
 import { DataTypeEnum } from "@/src/types/shared/general";
 import { LLM_PROVIDER_OPTIONS, postProcessCurrentAttribute } from "@/src/util/components/projects/projectId/settings/attribute-calculation-helper";
 import { ATTRIBUTES_VISIBILITY_STATES, DATA_TYPES, getTooltipVisibilityState } from "@/src/util/components/projects/projectId/settings/data-schema-helper";
@@ -40,6 +40,7 @@ import { simpleDictCompare } from "@/submodules/javascript-functions/validations
 import { LLM_CODE_TEMPLATE_EXAMPLES, LLM_CODE_TEMPLATE_OPTIONS } from "./LLM/llmTemplates";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 import { MemoIconAlertTriangleFilled, MemoIconArrowLeft, MemoIconCircleCheckFilled } from "@/submodules/react-components/components/kern-icons/icons";
+import { LookupListWithOnClick } from "@/src/types/components/projects/projectId/lookup-lists";
 
 const EDITOR_OPTIONS = { theme: 'vs-light', language: 'python', readOnly: false };
 
@@ -197,10 +198,11 @@ export default function AttributeCalculation() {
 
     }
 
+    const attributesRef = useRefFor(attributes);
     const changeAttributeName = useCallback((name: string) => {
         if (name == currentAttributeRef.current.name) return;
         if (name == '') return;
-        const duplicateNameExists = attributes.find((attribute) => attribute.name == name);
+        const duplicateNameExists = attributesRef.current.find((attribute) => attribute.name == name);
         if (duplicateNameExists) {
             setDuplicateNameExists(true);
             setAttributeName(currentAttributeRef.current.name);
@@ -217,10 +219,10 @@ export default function AttributeCalculation() {
         }, null, null, attributeNew.name);
     }, []);
 
-    const updateVisibility = useCallback((option: any) => {
+    const updateVisibility = useCallback((option: { name: string, value: string }) => {
         const attributeNew = { ...currentAttributeRef.current };
-        attributeNew.visibility = option.value;
-        attributeNew.visibilityIndex = ATTRIBUTES_VISIBILITY_STATES.findIndex((state) => state.name === option);
+        attributeNew.visibility = option.value as AttributeVisibility;
+        attributeNew.visibilityIndex = ATTRIBUTES_VISIBILITY_STATES.findIndex((state) => state.name === option.name);
         attributeNew.visibilityName = option.name;
         attributeNew.saveSourceCode = false;
         updateAttribute(projectId, currentAttributeRef.current.id, (res) => {
@@ -229,7 +231,7 @@ export default function AttributeCalculation() {
         }, null, null, null, null, attributeNew.visibility);
     }, []);
 
-    const updateDataType = useCallback((option: any) => {
+    const updateDataType = useCallback((option: { name: string, value: string }) => {
         const attributeNew = { ...currentAttributeRef.current };
         attributeNew.dataType = option.value;
         attributeNew.dataTypeName = option.name;
@@ -322,6 +324,10 @@ export default function AttributeCalculation() {
         { ...attribute, onClick: copyToClipboardFunc(attribute.name) }
     )), [usableAttributes]);
 
+    const lookupListsFinal = useMemo(() => lookupLists.map((lookupList) => (
+        { ...lookupList, onClick: copyToClipboardFunc("from knowledge import " + lookupList.pythonVariable) }
+    )), [lookupLists]);
+
     const disabledOptions = useMemo(() => {
         if (!currentAttribute || currentAttribute.dataType == DataTypeEnum.LLM_RESPONSE) return undefined;
         return DATA_TYPES.map((e) => e.value == DataTypeEnum.LLM_RESPONSE);
@@ -404,11 +410,11 @@ export default function AttributeCalculation() {
                     </div>
 
                     <div className="text-sm leading-5 font-medium text-gray-700 inline-block">
-                        {lookupLists.length == 0 ? 'No lookup lists in project' : 'Lookup lists'}</div>
+                        {lookupListsFinal.length == 0 ? 'No lookup lists in project' : 'Lookup lists'}</div>
                     <div className="flex flex-row items-center">
-                        {lookupLists.map((lookupList) => (
+                        {lookupListsFinal.map((lookupList: LookupListWithOnClick) => (
                             <Tooltip key={lookupList.id} content={TOOLTIPS_DICT.GENERAL.IMPORT_STATEMENT} color="invert" placement="top">
-                                <span onClick={copyToClipboardFunc("from knowledge import " + lookupList.pythonVariable)}>
+                                <span onClick={lookupList.onClick}>
                                     <div className="cursor-pointer border items-center px-2 py-0.5 rounded text-xs font-medium text-center mr-2">
                                         {lookupList.pythonVariable} - {lookupList.termCount}
                                     </div>
diff --git a/src/components/projects/projectId/attributes/attributeId/ExecutionContainer.tsx b/src/components/projects/projectId/attributes/attributeId/ExecutionContainer.tsx
index 97587c5d..f1795545 100644
--- a/src/components/projects/projectId/attributes/attributeId/ExecutionContainer.tsx
+++ b/src/components/projects/projectId/attributes/attributeId/ExecutionContainer.tsx
@@ -6,7 +6,7 @@ import { AttributeState } from "@/src/types/components/projects/projectId/settin
 import { ModalEnum } from "@/src/types/shared/modal";
 import { postProcessRecordByRecordId } from "@/src/util/components/projects/projectId/settings/attribute-calculation-helper";
 import { Tooltip } from "@nextui-org/react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import ConfirmExecutionModal from "./ConfirmExecutionModal";
@@ -61,8 +61,9 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
         });
     }
 
+    const requestedSomethingRef = useRefFor(requestedSomething);
     const executeAttribute = useCallback(() => {
-        dispatch(setModalStates(ModalEnum.EXECUTE_ATTRIBUTE_CALCULATION, { open: true, requestedSomething: requestedSomething }));
+        dispatch(setModalStates(ModalEnum.EXECUTE_ATTRIBUTE_CALCULATION, { open: true, requestedSomething: requestedSomethingRef.current }));
     }, []);
 
     const sampleRecordsRef = useRefFor(sampleRecords);
@@ -71,6 +72,18 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
         recordByRecordId(sampleRecordsRef.current.recordIds[index]);
     }, []);
 
+    const sampleRecordsFinal = useMemo(() => {
+        if (sampleRecords && sampleRecords.calculatedAttributesDisplay) {
+            return sampleRecords.calculatedAttributesDisplay.map((record: any) => {
+                return {
+                    ...record,
+                    onClick: viewRecordDetails(record.id)
+                }
+            }
+            );
+        }
+    }, [sampleRecords]);
+
     return (<div>
         <div className="mt-8 text-sm leading-5">
             <div className="text-gray-700 font-medium mr-2">
@@ -112,12 +125,12 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
             </div>
         </div>
 
-        {sampleRecords && sampleRecords.calculatedAttributesDisplay.length > 0 && <div className="mt-4 flex flex-col">
+        {sampleRecordsFinal && sampleRecordsFinal.length > 0 && <div className="mt-4 flex flex-col">
             <div className="overflow-x-auto">
                 <div className="inline-block min-w-full align-middle">
                     <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                         <div className="min-w-full border divide-y divide-gray-300">
-                            {sampleRecords.calculatedAttributesDisplay.map((record: any, index: number) => (
+                            {sampleRecordsFinal.map((record: any, index: number) => (
                                 <div key={record.id} className="divide-y divide-gray-200 bg-white">
                                     <div className="flex-shrink-0 border-b border-gray-200 shadow-sm flex justify-between items-center">
                                         <div className="flex items-center text-xs leading-5 text-gray-500 font-normal mx-4 my-3 text-justify">
@@ -126,7 +139,7 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
                                         <div className="flex items-center justify-center mr-5 ml-auto">
                                             <KernButton
                                                 text="View"
-                                                onClick={viewRecordDetails(index)}
+                                                onClick={record.onClick}
                                             />
                                         </div>
                                     </div>
diff --git a/src/types/components/projects/projectId/lookup-lists.ts b/src/types/components/projects/projectId/lookup-lists.ts
index 99134284..3b43fffe 100644
--- a/src/types/components/projects/projectId/lookup-lists.ts
+++ b/src/types/components/projects/projectId/lookup-lists.ts
@@ -11,6 +11,10 @@ export type LookupList = {
     pythonVariable: string;
 }
 
+export type LookupListWithOnClick = LookupList & {
+    onClick: () => void;
+}
+
 export type Term = {
     blacklisted: boolean;
     comment: string;
diff --git a/submodules/react-components b/submodules/react-components
index 0dd98e89..0b2a21a2 160000
--- a/submodules/react-components
+++ b/submodules/react-components
@@ -1 +1 @@
-Subproject commit 0dd98e89fa9f3c4814eb5ee6e215d6ba0f12194c
+Subproject commit 0b2a21a2a03ca6b129622512bbc666e1b3809010

From f574412de767ae49ad048a7e232b64b0519b0fff Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Thu, 15 May 2025 10:25:08 +0200
Subject: [PATCH 6/8] PR comments

---
 .../attributeId/LLMResponsePlayground.tsx     |  5 ++-
 .../settings/embeddings/Embeddings.tsx        | 21 +++++++---
 .../settings/labeling-tasks/LabelingTasks.tsx | 38 +++++++++++++++----
 .../projects/projectId/settings/embeddings.ts |  4 ++
 .../projectId/settings/labeling-tasks.ts      |  9 +++++
 5 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/src/components/projects/projectId/attributes/attributeId/LLMResponsePlayground.tsx b/src/components/projects/projectId/attributes/attributeId/LLMResponsePlayground.tsx
index a88bc914..0cb91daa 100644
--- a/src/components/projects/projectId/attributes/attributeId/LLMResponsePlayground.tsx
+++ b/src/components/projects/projectId/attributes/attributeId/LLMResponsePlayground.tsx
@@ -5,6 +5,7 @@ import { setModalStates } from "@/src/reduxStore/states/modal";
 import { ModalEnum } from "@/src/types/shared/modal";
 import { useCallback } from "react";
 import { MemoIconPlayCardStar } from "@/submodules/react-components/components/kern-icons/icons";
+import useRefFor from "@/submodules/react-components/hooks/useRefFor";
 
 
 type LLMResponsePlaygroundProps = {
@@ -15,8 +16,10 @@ type LLMResponsePlaygroundProps = {
 export default function LLMResponsePlayground(props: LLMResponsePlaygroundProps) {
     const dispatch = useDispatch();
 
+    const attributeIdRef = useRefFor(props.attributeId);
+    const apiKeyRef = useRefFor(props.apiKey);
     const openLLMPlayground = useCallback(() => {
-        dispatch(setModalStates(ModalEnum.LLM_PLAYGROUND, { open: true, attributeId: props.attributeId, apiKey: props.apiKey }));
+        dispatch(setModalStates(ModalEnum.LLM_PLAYGROUND, { open: true, attributeId: attributeIdRef.current, apiKey: apiKeyRef.current }));
     }, []);
 
     return (
diff --git a/src/components/projects/projectId/settings/embeddings/Embeddings.tsx b/src/components/projects/projectId/settings/embeddings/Embeddings.tsx
index 4c484c8f..e334ec9f 100644
--- a/src/components/projects/projectId/settings/embeddings/Embeddings.tsx
+++ b/src/components/projects/projectId/settings/embeddings/Embeddings.tsx
@@ -3,12 +3,12 @@ import { selectOrganizationId } from "@/src/reduxStore/states/general";
 import { openModal, setModalStates } from "@/src/reduxStore/states/modal";
 import { selectAttributes, selectEmbeddings } from "@/src/reduxStore/states/pages/settings";
 import { selectProjectId } from "@/src/reduxStore/states/project";
-import { Embedding, EmbeddingState, EmbeddingType } from "@/src/types/components/projects/projectId/settings/embeddings";
+import { Embedding, EmbeddingState, EmbeddingType, EmbeddingWithOnClick } from "@/src/types/components/projects/projectId/settings/embeddings";
 import { ModalEnum } from "@/src/types/shared/modal";
 import { DATA_TYPES, getColorForDataType } from "@/src/util/components/projects/projectId/settings/data-schema-helper";
 import { Tooltip } from "@nextui-org/react";
 import { useRouter } from "next/router";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import AddNewEmbeddingModal from "./AddNewEmbeddingModal";
@@ -71,6 +71,14 @@ export default function Embeddings(props: { refetchEmbeddings: () => void }) {
     const orgId = useSelector(selectOrganizationId);
     useWebsocket(orgId, Application.REFINERY, CurrentPage.PROJECT_SETTINGS, handleWebsocketNotification, projectId, CurrentPageSubKey.EMBEDDINGS);
 
+    const openFilterAttributesModal = useCallback((embedding: Embedding) => () => {
+        embedding.onQdrant ? dispatch(setModalStates(ModalEnum.FILTERED_ATTRIBUTES, { embeddingId: embedding.id, open: true, attributeNames: prepareAttributeDataByNames(embedding.filterAttributes), showEditOption: showEditOption })) : null;
+    }, [showEditOption]);
+
+    const embeddingsFinal = useMemo(() => embeddings.map((embedding) => (
+        { ...embedding, onIconNotesClick: openFilterAttributesModal(embedding) }
+    )), [embeddings]);
+
     return (<div className="mt-8">
         <div className="text-lg leading-6 text-gray-900 font-medium inline-block w-full">
             <label>Embeddings</label>
@@ -107,7 +115,7 @@ export default function Embeddings(props: { refetchEmbeddings: () => void }) {
                                 </tr>
                             </thead>
                             {!somethingLoading ? <tbody className="divide-y divide-gray-200">
-                                {embeddings.map((embedding: Embedding, index: number) => (
+                                {embeddingsFinal.map((embedding: EmbeddingWithOnClick, index: number) => (
                                     <tr key={embedding.id} className={`${index % 2 != 0 ? 'bg-gray-50' : 'bg-white'}`}>
                                         <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
                                             {embedding.name}
@@ -119,8 +127,11 @@ export default function Embeddings(props: { refetchEmbeddings: () => void }) {
                                                         TOOLTIPS_DICT.PROJECT_SETTINGS.EMBEDDINGS.HAS_FILTER_ATTRIBUTES :
                                                         TOOLTIPS_DICT.PROJECT_SETTINGS.EMBEDDINGS.NO_FILTER_ATTRIBUTES)
                                                 } color="invert" >
-                                                    <MemoIconNotes onClick={() => embedding.onQdrant ? dispatch(setModalStates(ModalEnum.FILTERED_ATTRIBUTES, { embeddingId: embedding.id, open: true, attributeNames: prepareAttributeDataByNames(embedding.filterAttributes), showEditOption: showEditOption })) : null}
-                                                        className={`h-6 w-6 ${embedding.filterAttributes && embedding.filterAttributes.length > 0 ? 'text-gray-700' : 'text-gray-300'} ${embedding.onQdrant ? "" : "cursor-not-allowed opacity-50"}`} />
+                                                    <span onClick={embedding.onIconNotesClick}>
+                                                        <MemoIconNotes
+                                                            className={`h-6 w-6 ${embedding.filterAttributes && embedding.filterAttributes.length > 0 ? 'text-gray-700' : 'text-gray-300'} ${embedding.onQdrant ? "" : "cursor-not-allowed opacity-50"}`} />
+                                                    </span>
+
                                                 </Tooltip>
                                             </td> : <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500 flex justify-center"><LoadingIcon /></td>}
                                         <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
diff --git a/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx b/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx
index 366bac14..afca24b4 100644
--- a/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx
+++ b/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx
@@ -1,12 +1,12 @@
 import { openModal, setModalStates } from "@/src/reduxStore/states/modal";
 import { selectLabelingTasksAll, setLabelingTasksAll } from "@/src/reduxStore/states/pages/settings";
 import { selectProjectId } from "@/src/reduxStore/states/project";
-import { LabelType, LabelingTask, LabelingTaskTaskType } from "@/src/types/components/projects/projectId/settings/labeling-tasks";
+import { LabelType, LabelTypeWithOnClick, LabelingTask, LabelingTaskTaskType, LabelingTaskWithOnClick } from "@/src/types/components/projects/projectId/settings/labeling-tasks";
 import { ModalEnum } from "@/src/types/shared/modal";
 import { LabelHelper } from "@/src/util/classes/label-helper";
 import { isTaskNameUnique, labelingTaskFromString, labelingTaskToString } from "@/src/util/components/projects/projectId/settings/labeling-tasks-helper";
 import { jsonCopy } from "@/submodules/javascript-functions/general";
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { useDispatch, useSelector } from "react-redux";
 import RenameLabelModal from "./RenameLabelModal";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
@@ -20,6 +20,7 @@ import { updateLabelingTask } from "@/src/services/base/labeling-tasks";
 import IconButton from "@/submodules/react-components/components/kern-button/IconButton";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 import { MemoIconColorPicker, MemoIconPlus, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
+import { useConsoleLog } from "@/submodules/react-components/hooks/useConsoleLog";
 
 export default function LabelingTasks() {
     const dispatch = useDispatch();
@@ -87,6 +88,28 @@ export default function LabelingTasks() {
         return prepareNewArray;
     }
 
+    const deleteLabelingTask = useCallback((task) => () => dispatch(setModalStates(ModalEnum.DELETE_LABELING_TASK, { taskId: task.id, open: true })), [])
+
+    const deleteLabel = useCallback((task: LabelingTask, label: LabelType) => () => {
+        dispatch(setModalStates(ModalEnum.DELETE_LABEL, { taskId: task.id, label: label, open: true }));
+    }, []);
+
+    const changeColorLabel = useCallback((task: LabelingTask, label: LabelType) => () => {
+        dispatch(setModalStates(ModalEnum.CHANGE_COLOR, { taskId: task.id, label: label, open: true }));
+    }, []);
+
+    const labelingTasksFinal = useMemo(() => {
+        if (!labelingTasksSchema) return null;
+        return labelingTasksSchema.map((labelingTask) => (
+            {
+                ...labelingTask,
+                onDelete: deleteLabelingTask(labelingTask),
+                labels: labelingTask.labels.map((label) => ({ ...label, onDelete: deleteLabel(labelingTask, label), onChangeColor: changeColorLabel(labelingTask, label) })),
+            }
+        ))
+    }, [labelingTasksSchema]);
+
+
     return (<div className="mt-8">
         <div className="text-lg leading-6 text-gray-900 font-medium inline-block">
             Labeling tasks
@@ -119,7 +142,7 @@ export default function LabelingTasks() {
                             </tr>
                         </thead>
                         <tbody className="divide-y divide-gray-200">
-                            {labelingTasksSchema && labelingTasksSchema.map((task: LabelingTask, index: number) => (
+                            {labelingTasksFinal && labelingTasksFinal.map((task: LabelingTaskWithOnClick, index: number) => (
                                 <tr key={task.id} className={`${index % 2 != 0 ? 'bg-gray-50' : 'bg-white'}`}>
                                     <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{task.targetName}</td>
                                     <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
@@ -136,12 +159,12 @@ export default function LabelingTasks() {
                                             selectedOption={(option: any) => updateLabelingTaskType(task, index, labelingTaskFromString(option.name))} />
                                     </td>
                                     <td className="flex flex-wrap justify-center items-center px-3 py-2 text-sm text-gray-500">
-                                        {task.labels.map((label: LabelType) => (
+                                        {task.labels.map((label: LabelTypeWithOnClick) => (
                                             <div key={label.id} className={`inline-flex border items-center m-1 px-1.5 py-0.5 rounded-md text-sm font-medium ${label.color.backgroundColor} ${label.color.textColor} ${label.color.borderColor} ${label.color.hoverColor}`}>
-                                                <MemoIconColorPicker className="h-4 w-4 mr-1 cursor-pointer" onClick={() => dispatch(setModalStates(ModalEnum.CHANGE_COLOR, { taskId: task.id, label: label, open: true }))} />
+                                                <MemoIconColorPicker className="h-4 w-4 mr-1 cursor-pointer" onClick={label.onChangeColor} />
                                                 <span>{label.name}</span>
                                                 {label.hotkey && <kbd className="ml-2 uppercase inline-flex items-center border bg-white border-gray-200 rounded px-2 text-sm font-sans font-medium text-gray-400">{label.hotkey}</kbd>}
-                                                <MemoIconTrash className="h-4 w-4 ml-1 cursor-pointer" onClick={() => dispatch(setModalStates(ModalEnum.DELETE_LABEL, { taskId: task.id, label: label, open: true }))} />
+                                                <MemoIconTrash className="h-4 w-4 ml-1 cursor-pointer" onClick={label.onDelete} />
                                             </div>
                                         ))}
                                         <IconButton
@@ -151,8 +174,7 @@ export default function LabelingTasks() {
                                         />
                                     </td>
                                     <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
-                                        <MemoIconTrash onClick={() => dispatch(setModalStates(ModalEnum.DELETE_LABELING_TASK, { taskId: task.id, open: true }))}
-                                            className="h-6 w-6 text-red-700 cursor-pointer" />
+                                        <MemoIconTrash onClick={task.onDelete} className="h-6 w-6 text-red-700 cursor-pointer" />
                                     </td>
                                 </tr>
                             ))}
diff --git a/src/types/components/projects/projectId/settings/embeddings.ts b/src/types/components/projects/projectId/settings/embeddings.ts
index 325a4c3b..874fd411 100644
--- a/src/types/components/projects/projectId/settings/embeddings.ts
+++ b/src/types/components/projects/projectId/settings/embeddings.ts
@@ -25,6 +25,10 @@ export type Embedding = {
     onQdrant?: boolean;
 };
 
+export type EmbeddingWithOnClick = Embedding & {
+    onIconNotesClick?: () => void;
+}
+
 export enum EmbeddingType {
     ON_ATTRIBUTE = "ON_ATTRIBUTE",
     ON_TOKEN = "ON_TOKEN"
diff --git a/src/types/components/projects/projectId/settings/labeling-tasks.ts b/src/types/components/projects/projectId/settings/labeling-tasks.ts
index 3b56a18b..19da8bc5 100644
--- a/src/types/components/projects/projectId/settings/labeling-tasks.ts
+++ b/src/types/components/projects/projectId/settings/labeling-tasks.ts
@@ -14,6 +14,10 @@ export type LabelingTask = {
     targetName?: string;
 };
 
+export type LabelingTaskWithOnClick = LabelingTask & {
+    onDelete: () => void;
+}
+
 export type LabelType = {
     id: string;
     name: string;
@@ -21,6 +25,11 @@ export type LabelType = {
     hotkey: string;
 }
 
+export type LabelTypeWithOnClick = LabelType & {
+    onDelete: () => void;
+    onChangeColor: () => void;
+}
+
 export type LabelColors = {
     name: string,
     backgroundColor: string,

From 663afa380fbfeeffcb03c4fb314cf97d9eed6feb Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Wed, 21 May 2025 16:02:39 +0200
Subject: [PATCH 7/8] PR comments

---
 .../attributes/attributeId/AttributeCalculations.tsx     | 9 +++------
 .../projectId/settings/embeddings/Embeddings.tsx         | 7 ++-----
 .../projectId/settings/labeling-tasks/LabelingTasks.tsx  | 4 +---
 3 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
index 077df33c..760c3f26 100644
--- a/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
+++ b/src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx
@@ -315,17 +315,14 @@ export default function AttributeCalculation() {
         router.push(`/projects/${projectId}/settings`);
     }, []);
 
-    const copyToClipboardFunc = useCallback(
-        (name: string) => () => copyToClipboard(name),
-        []
-    );
+    const copyToClipboardFunc = useCallback((name: string) => copyToClipboard(name), []);
 
     const usableAttributesFinal = useMemo(() => usableAttributes.map((attribute) => (
-        { ...attribute, onClick: copyToClipboardFunc(attribute.name) }
+        { ...attribute, onClick: () => copyToClipboardFunc(attribute.name) }
     )), [usableAttributes]);
 
     const lookupListsFinal = useMemo(() => lookupLists.map((lookupList) => (
-        { ...lookupList, onClick: copyToClipboardFunc("from knowledge import " + lookupList.pythonVariable) }
+        { ...lookupList, onClick: () => copyToClipboardFunc("from knowledge import " + lookupList.pythonVariable) }
     )), [lookupLists]);
 
     const disabledOptions = useMemo(() => {
diff --git a/src/components/projects/projectId/settings/embeddings/Embeddings.tsx b/src/components/projects/projectId/settings/embeddings/Embeddings.tsx
index e334ec9f..f9aa2258 100644
--- a/src/components/projects/projectId/settings/embeddings/Embeddings.tsx
+++ b/src/components/projects/projectId/settings/embeddings/Embeddings.tsx
@@ -71,13 +71,10 @@ export default function Embeddings(props: { refetchEmbeddings: () => void }) {
     const orgId = useSelector(selectOrganizationId);
     useWebsocket(orgId, Application.REFINERY, CurrentPage.PROJECT_SETTINGS, handleWebsocketNotification, projectId, CurrentPageSubKey.EMBEDDINGS);
 
-    const openFilterAttributesModal = useCallback((embedding: Embedding) => () => {
-        embedding.onQdrant ? dispatch(setModalStates(ModalEnum.FILTERED_ATTRIBUTES, { embeddingId: embedding.id, open: true, attributeNames: prepareAttributeDataByNames(embedding.filterAttributes), showEditOption: showEditOption })) : null;
-    }, [showEditOption]);
 
     const embeddingsFinal = useMemo(() => embeddings.map((embedding) => (
-        { ...embedding, onIconNotesClick: openFilterAttributesModal(embedding) }
-    )), [embeddings]);
+        { ...embedding, onIconNotesClick: () => embedding.onQdrant ? dispatch(setModalStates(ModalEnum.FILTERED_ATTRIBUTES, { embeddingId: embedding.id, open: true, attributeNames: prepareAttributeDataByNames(embedding.filterAttributes), showEditOption: showEditOption })) : null }
+    )), [embeddings, showEditOption]);
 
     return (<div className="mt-8">
         <div className="text-lg leading-6 text-gray-900 font-medium inline-block w-full">
diff --git a/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx b/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx
index afca24b4..ff5fad1d 100644
--- a/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx
+++ b/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx
@@ -88,8 +88,6 @@ export default function LabelingTasks() {
         return prepareNewArray;
     }
 
-    const deleteLabelingTask = useCallback((task) => () => dispatch(setModalStates(ModalEnum.DELETE_LABELING_TASK, { taskId: task.id, open: true })), [])
-
     const deleteLabel = useCallback((task: LabelingTask, label: LabelType) => () => {
         dispatch(setModalStates(ModalEnum.DELETE_LABEL, { taskId: task.id, label: label, open: true }));
     }, []);
@@ -103,7 +101,7 @@ export default function LabelingTasks() {
         return labelingTasksSchema.map((labelingTask) => (
             {
                 ...labelingTask,
-                onDelete: deleteLabelingTask(labelingTask),
+                onDelete: () => dispatch(setModalStates(ModalEnum.DELETE_LABELING_TASK, { taskId: labelingTask.id, open: true })),
                 labels: labelingTask.labels.map((label) => ({ ...label, onDelete: deleteLabel(labelingTask, label), onChangeColor: changeColorLabel(labelingTask, label) })),
             }
         ))

From 8d04bfb2622a1cd9649446e7d34db77ef00ac82a Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Wed, 21 May 2025 16:07:04 +0200
Subject: [PATCH 8/8] Submodules merge

---
 submodules/react-components | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/submodules/react-components b/submodules/react-components
index 0b2a21a2..1af9f210 160000
--- a/submodules/react-components
+++ b/submodules/react-components
@@ -1 +1 @@
-Subproject commit 0b2a21a2a03ca6b129622512bbc666e1b3809010
+Subproject commit 1af9f210f292f5e6ea23a2cbb3f9f8619650eec8