diff --git a/components/AdminMessages.tsx b/components/AdminMessages.tsx
index 1f46e3a..eefed44 100644
--- a/components/AdminMessages.tsx
+++ b/components/AdminMessages.tsx
@@ -1,7 +1,7 @@
 import { AdminMessageLevel, AdminMessagesProps } from "@/submodules/react-components/types/admin-messages";
 import { CurrentPage } from "@/submodules/react-components/hooks/web-socket/constants";
-import { IconAlertCircle, IconInfoSquare, IconPoint, IconX } from "@tabler/icons-react";
 import { useMemo } from "react";
+import { MemoIconAlertCircle, MemoIconInfoSquare, MemoIconPoint, MemoIconX } from "./kern-icons/icons";
 
 export default function AdminMessages(props: AdminMessagesProps) {
     const isOnLabelingPage = useMemo(() => props.currentPage == CurrentPage.LABELING, [props.currentPage]);
@@ -18,13 +18,13 @@ export default function AdminMessages(props: AdminMessagesProps) {
             <div key={activeMessage.id} className={`pointer-events-auto items-center justify-between gap-x-6 py-2.5 mt-2 border px-6 sm:rounded-xl sm:py-3 sm:pr-3.5 sm:pl-4 ${activeMessage.borderColor} ${activeMessage.backgroundColor} ${activeMessage.visible ? 'flex' : 'hidden'}`}
                 style={{ maxWidth: props.maxWidth ?? 'calc(100vw - 200px)' }}>
                 <div className={`text-sm leading-6 flex flex-row items-center w-full ${activeMessage.textColor}`}>
-                    {activeMessage.level == AdminMessageLevel.INFO && <IconInfoSquare className="text-blue-700" size={24} />}
-                    {activeMessage.level == AdminMessageLevel.WARNING && <IconAlertCircle className="text-yellow-700" size={24} />}
-                    <strong className="font-semibold uppercase">{activeMessage.level}</strong><IconPoint className="mx-2" size={16} />
+                    {activeMessage.level == AdminMessageLevel.INFO && <MemoIconInfoSquare className="text-blue-700" size={24} />}
+                    {activeMessage.level == AdminMessageLevel.WARNING && <MemoIconAlertCircle className="text-yellow-700" size={24} />}
+                    <strong className="font-semibold uppercase">{activeMessage.level}</strong><MemoIconPoint className="mx-2" size={16} />
                     <strong className="font-semibold">{activeMessage.text}</strong>
-                    {activeMessage.displayDate && <><IconPoint className="mx-2" size={16} /><div>Scheduled for {activeMessage.displayDate}</div></>}
+                    {activeMessage.displayDate && <><MemoIconPoint className="mx-2" size={16} /><div>Scheduled for {activeMessage.displayDate}</div></>}
                     <button type="button" className="-my-1.5 ml-auto mr-0 flex-none p-1.5" onClick={() => closeMessage(activeMessage.id)}>
-                        <IconX className={`${activeMessage.textColor} cursor-pointer`} size={20} strokeWidth={1.5} />
+                        <MemoIconX className={`${activeMessage.textColor} cursor-pointer`} size={20} strokeWidth={1.5} />
                     </button>
                 </div>
             </div >))
diff --git a/components/InfoButton.tsx b/components/InfoButton.tsx
index 317fd6d..7f4a9c7 100644
--- a/components/InfoButton.tsx
+++ b/components/InfoButton.tsx
@@ -1,10 +1,10 @@
 import { combineClassNames } from "@/submodules/javascript-functions/general";
 import { useDefaults } from "@/submodules/react-components/hooks/useDefaults";
-import { IconInfoCircle } from "@tabler/icons-react";
 import { Dispatch, Fragment, SetStateAction, useEffect, useRef, useState } from "react";
 import useOnClickOutside from "@/submodules/react-components/hooks/useHooks/useOnClickOutside";
 import { Transition } from "@headlessui/react";
 import { INFO_BUTTON_DEFAULT_VALUES, InfoButtonConfig, InfoButtonProps } from "../types/infoButton";
+import { MemoIconInfoCircle } from "./kern-icons/icons";
 
 
 function generateAndCheckConfig(props: InfoButtonProps, setOpen: Dispatch<SetStateAction<boolean>>): InfoButtonConfig {
@@ -45,7 +45,7 @@ export function InfoButton(_props: InfoButtonProps) {
     if (!config) return null;
     return (
         <div className={combineClassNames("relative w-fit p-1", config.cursorClass)} onClick={props.access == 'click' ? config.showInfo : undefined} onMouseEnter={props.access == 'hover' ? config.showInfo : undefined} onMouseLeave={props.access == 'hover' ? config.hideInfo : undefined}>
-            <IconInfoCircle size={config.size} className={props.infoButtonColorClass} />
+            <MemoIconInfoCircle size={config.size} className={props.infoButtonColorClass} />
             {props.display == "absoluteDiv" ? <RenderDiv
                 positionClass={config.positionClass + " " + props.addClasses}
                 content={props.content}
@@ -76,7 +76,7 @@ function RenderDiv({ positionClass, open, content, access, onMouseEnter, onMouse
                     {typeof content == "string" ?
                         <div className="flex items-center gap-x-2">
                             <div className="flex-shrink-0">
-                                <IconInfoCircle className="h-5 w-5 text-blue-400" aria-hidden="true" />
+                                <MemoIconInfoCircle className="h-5 w-5 text-blue-400" aria-hidden="true" />
                             </div>
                             <p className="text-sm text-blue-700 w-max max-w-sm">{content}</p>
                         </div> : content}
diff --git a/components/InputWithClearIcon.tsx b/components/InputWithClearIcon.tsx
index d79e6dd..0d639ae 100644
--- a/components/InputWithClearIcon.tsx
+++ b/components/InputWithClearIcon.tsx
@@ -1,4 +1,6 @@
-import { IconX } from "@tabler/icons-react";
+import { useCallback } from "react";
+import { MemoIconX } from "./kern-icons/icons";
+import useRefFor from "../hooks/useRefFor";
 
 export type InputWithClearIconProps = {
     value: string;
@@ -8,6 +10,11 @@ export type InputWithClearIconProps = {
 }
 
 export default function InputWithClearIcon(props: InputWithClearIconProps) {
+    const clearInputRef = useRefFor(props.onChange)
+    const clearInput = useCallback(() => {
+        clearInputRef.current('');
+    }, [props.onChange]);
+
     return (<div className={`relative ${props.classNames}`}>
         <input id={props.id} type="text" placeholder="Search"
             className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
@@ -15,7 +22,7 @@ export default function InputWithClearIcon(props: InputWithClearIconProps) {
             onChange={(event) => props.onChange(event.target.value)}
         />
         {props.value && (
-            <IconX className='absolute right-2 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500' onClick={() => props.onChange("")} />
+            <MemoIconX className='absolute right-2 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500' onClick={clearInput} />
         )}
     </div>)
 }
\ No newline at end of file
diff --git a/components/KernDropdown.tsx b/components/KernDropdown.tsx
index 64159d5..85029bd 100644
--- a/components/KernDropdown.tsx
+++ b/components/KernDropdown.tsx
@@ -4,13 +4,12 @@ import { KernDropdownProps } from '../types/dropdown';
 import { combineClassNames } from '../../javascript-functions/general';
 import { SELECT_ALL, checkDropdownProps, getActiveNegateGroupColor, getDropdownDisplayText, prepareDropdownOptionsToArray, reduceColorProperty, setOptionsWithSearchBar } from '../helpers/dropdown-helper';
 import { Tooltip } from '@nextui-org/react';
-import { IconChevronDown, IconDotsVertical, IconExternalLink } from '@tabler/icons-react';
-import { IconTrashXFilled } from '@tabler/icons-react';
 import useOnClickOutside from '../hooks/useHooks/useOnClickOutside';
 import { useDefaults } from '../hooks/useDefaults';
 import SVGIcon from './SVGIcon';
 import { CSSProperties } from 'react';
 import useRefFor from '../hooks/useRefFor';
+import { MemoIconChevronDown, MemoIconDotsVertical, MemoIconExternalLink, MemoIconTrashXFilled } from './kern-icons/icons';
 
 const DEFAULTS = { fontSizeClass: 'text-xs' };
 
@@ -197,14 +196,14 @@ export default function KernDropdown(props: KernDropdownProps) {
                         className="h-9 w-full text-sm border-gray-300 rounded-md placeholder-italic border text-gray-900 pr-8 pl-4 truncate 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"
                         disabled={isDisabled && !props.ignoreDisabledForSearch}
                         placeholder="Type to search..." />
-                    <IconChevronDown
+                    <MemoIconChevronDown
                         className={`h-5 w-5 absolute right-0 mr-3 -mt-7 ${isDisabled && !props.ignoreDisabledForSearch ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
                         aria-hidden="true"
                     />
                 </div> : <>
                     {props.hasButtonDots ? (<Menu.Button onClick={toggleDropdown} className="group relative inline-flex h-8 w-8 items-center justify-center rounded-full">
                         <span className="flex h-full w-full items-center justify-center rounded-full">
-                            <IconDotsVertical
+                            <MemoIconDotsVertical
                                 size={24}
                                 strokeWidth={2}
                                 className='text-gray-700 font-bold' />
@@ -219,7 +218,7 @@ export default function KernDropdown(props: KernDropdownProps) {
                             <span style={{ color: '#4e46e5' }}>{getDropdownDisplayText(props.options, "NOT_NEGATED")}</span>
                             <span style={{ color: '#ef4444' }}>{getDropdownDisplayText(props.options, "NEGATED")}</span>
                         </label>}
-                        <IconChevronDown
+                        <MemoIconChevronDown
                             className="-mr-1 ml-2 h-5 w-5"
                             aria-hidden="true"
                         />
@@ -271,8 +270,8 @@ export default function KernDropdown(props: KernDropdownProps) {
                                                     {props.iconsArray && props.iconsArray[index] && <span className='mx-2 text-gray-700'>
                                                         <SVGIcon icon={props.iconsArray[index]} size={16} strokeWidth={2} useFillForIcons={props.useFillForIcons && props.useFillForIcons[index]} /></span>}
                                                     <span className='truncate'>{option}</span>
-                                                    {props.onClickDelete && <div className="ml-auto flex items-center cursor-pointer hover:bg-gray-200" onClick={(e) => { e.stopPropagation(); props.onClickDelete(option) }}><IconTrashXFilled size={20} /></div>}
-                                                    {props.optionsHaveLink && <a href={props.linkList[index]} target="_blank" className="h-4 w-4 mr-2 ml-auto flex items-center cursor-pointer"><IconExternalLink size={16} /></a>}
+                                                    {props.onClickDelete && <div className="ml-auto flex items-center cursor-pointer hover:bg-gray-200" onClick={(e) => { e.stopPropagation(); props.onClickDelete(option) }}><MemoIconTrashXFilled size={20} /></div>}
+                                                    {props.optionsHaveLink && <a href={props.linkList[index]} target="_blank" className="h-4 w-4 mr-2 ml-auto flex items-center cursor-pointer"><MemoIconExternalLink size={16} /></a>}
                                                     {props.dropdownAdd && props.dropdownAdd[index]}
                                                 </label>
                                             </Tooltip>
diff --git a/components/SVGIcon.tsx b/components/SVGIcon.tsx
index 11b437c..390636f 100644
--- a/components/SVGIcon.tsx
+++ b/components/SVGIcon.tsx
@@ -1,4 +1,4 @@
-import { IconBolt, IconChevronDown, IconCode, IconDotsVertical, IconEdit, IconExternalLink, IconFileInfo, IconFilePencil, IconLoader, IconPlayerPlayFilled, IconShieldCheckFilled, IconShieldFilled, IconSquare, IconSquareCheck, IconTrash } from '@tabler/icons-react';
+import { MemoIconBolt, MemoIconChevronDown, MemoIconCode, MemoIconDotsVertical, MemoIconEdit, MemoIconExternalLink, MemoIconFileInfo, MemoIconFilePencil, MemoIconLoader, MemoIconPlayerPlayFilled, MemoIconShieldCheckFilled, MemoIconShieldFilled, MemoIconSquare, MemoIconSquareCheck, MemoIconTrash } from './kern-icons/icons';
 
 export const SUPPORTED_ICONS = ['IconCode', 'IconBolt', 'IconSquareCheck', 'IconSquare', 'IconPlayerPlayFilled', 'IconTrash', 'IconExternalLink',
     'IconLoader', 'IconFilePencil', 'IconFileInfo', 'IconEdit', 'IconShieldFilled', 'IconShieldCheckFilled'
@@ -14,36 +14,36 @@ type SVGIconProps = {
 export default function SVGIcon(props: SVGIconProps) {
     switch (props.icon) {
         case 'IconCode':
-            return <IconCode size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconCode size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconBolt':
-            return <IconBolt size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconBolt size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconSquareCheck':
-            return <IconSquareCheck size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconSquareCheck size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconSquare':
-            return <IconSquare size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconSquare size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconPlayerPlayFilled':
-            return <IconPlayerPlayFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconPlayerPlayFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconTrash':
-            return <IconTrash size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconTrash size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconExternalLink':
-            return <IconExternalLink size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconExternalLink size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconChevronDown':
-            return <IconChevronDown size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconChevronDown size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconDotsVertical':
-            return <IconDotsVertical size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconDotsVertical size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconLoader':
-            return <IconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconFilePencil':
-            return <IconFilePencil size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconFilePencil size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconFileInfo':
-            return <IconFileInfo size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconFileInfo size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconEdit':
-            return <IconEdit size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconEdit size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconShieldFilled':
-            return <IconShieldFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconShieldFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconShieldCheckFilled':
-            return <IconShieldCheckFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
-        default: return <IconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconShieldCheckFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        default: return <MemoIconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
     }
 
 }
\ No newline at end of file
diff --git a/components/kern-button/IconButton.tsx b/components/kern-button/IconButton.tsx
index aa828ed..60a9042 100644
--- a/components/kern-button/IconButton.tsx
+++ b/components/kern-button/IconButton.tsx
@@ -1,7 +1,7 @@
 import { combineClassNames } from "@/submodules/javascript-functions/general";
 import { Tooltip } from '@nextui-org/react'
-import { IconCheck } from "@tabler/icons-react";
 import { useState } from "react";
+import { MemoIconCheck } from "../kern-icons/icons";
 
 interface IconButtonProps {
     icon: (props: any) => any;
@@ -59,7 +59,7 @@ function InnerButton(props: IconButtonProps) {
             disabled={props.disabled}
         >
             {confirmed ? (
-                <IconCheck
+                <MemoIconCheck
                     className={combineClassNames(
                         `text-green-500 group-hover:text-green-600`,
                         props.size == 'small' ? (
diff --git a/components/kern-button/KernButton.tsx b/components/kern-button/KernButton.tsx
index a7aad6f..7ae75c4 100644
--- a/components/kern-button/KernButton.tsx
+++ b/components/kern-button/KernButton.tsx
@@ -1,8 +1,7 @@
 import { combineClassNames } from "@/submodules/javascript-functions/general";
-import { IconLoader2 } from "@tabler/icons-react";
 import { Tooltip } from '@nextui-org/react'
 import React, { useCallback, useMemo, useState } from "react";
-import { IconCheck } from "@tabler/icons-react";
+import { MemoIconCheck, MemoIconLoader2 } from "../kern-icons/icons";
 
 interface KernButtonProps {
     text?: string;
@@ -76,7 +75,7 @@ export default function KernButton(props: KernButtonProps) {
     const children = <Tooltip className={"flex gap-x-2 items-center " + (props.disabled ? "cursor-not-allowed" : "")} color="invert" content={props.tooltip} placement={props.tooltipPlacement || "bottom"} >
         {
             props.loading ? (
-                <IconLoader2 className={combineClassNames(
+                <MemoIconLoader2 className={combineClassNames(
                     props.iconColor === "white" ? (
                         `animate-spin text-white group-hover:text-white`
                     ) : (
@@ -86,7 +85,7 @@ export default function KernButton(props: KernButtonProps) {
                 } />
             ) : props.icon ? (
                 confirm ? (
-                    <IconCheck className={combineClassNames(`text-green-500 group-hover:text-green-600`,
+                    <MemoIconCheck className={combineClassNames(`text-green-500 group-hover:text-green-600`,
                         iconSize)} />
                 ) : (
                     <props.icon className={combineClassNames(
diff --git a/components/kern-button/SaveButton.tsx b/components/kern-button/SaveButton.tsx
index e2ee9d1..fbb751b 100644
--- a/components/kern-button/SaveButton.tsx
+++ b/components/kern-button/SaveButton.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { IconDeviceFloppy, IconCheck, IconAlertTriangle } from '@tabler/icons-react';
 import { combineClassNames, } from "@/submodules/javascript-functions/general"
 import { Tooltip } from '@nextui-org/react';
 import { getButtonColorClasses, getDisabledClasses, getWidthClasses, getHeightClasses, getSizeClasses, buttonWarningColorClasses } from '../../helpers/button-helper';
 import { Loading } from '@nextui-org/react';
+import { MemoIconAlertTriangle, MemoIconCheck, MemoIconDeviceFloppy } from '../kern-icons/icons';
 
 type SaveButtonProps = {
     text?: string;
@@ -55,7 +55,7 @@ export default function SaveButton(props: SaveButtonProps) {
         <div className='text-sm group flex items-center rounded-md transition duration-200 ease-in-out'        >
             {(props.warningCue) ?
                 <Tooltip className="flex items-center justify-center mr-2" content="Warning: Potential invalid config!" color="invert">
-                    <IconAlertTriangle className="h-4 w-4 text-orange-400" />
+                    <MemoIconAlertTriangle className="h-4 w-4 text-orange-400" />
                 </Tooltip> : null}
             <button
                 onClick={handleButtonClick}
@@ -70,10 +70,10 @@ export default function SaveButton(props: SaveButtonProps) {
                     </div>
 
                 ) : confirm ? (
-                    <IconCheck className={combineClassNames(`text-green-500 group-hover:text-green-600`,
+                    <MemoIconCheck className={combineClassNames(`text-green-500 group-hover:text-green-600`,
                         sizeClasses)} />
                 ) : (
-                    <IconDeviceFloppy className={combineClassNames(`text-${props.iconColor}-500 group-hover:text-${props.iconColor}-600`,
+                    <MemoIconDeviceFloppy className={combineClassNames(`text-${props.iconColor}-500 group-hover:text-${props.iconColor}-600`,
                         sizeClasses)} />
                 )
                 }
diff --git a/components/kern-icons/icons.ts b/components/kern-icons/icons.ts
new file mode 100644
index 0000000..28dc1f9
--- /dev/null
+++ b/components/kern-icons/icons.ts
@@ -0,0 +1,174 @@
+import { memo } from 'react';
+import { IconActivity, IconAdjustments, IconAdjustmentsAlt, IconAdjustmentsOff, IconAlertCircle, IconAlertTriangle, IconAlertTriangleFilled, IconAngle, IconApi, IconArchive, IconArrowAutofitDown, IconArrowCurveRight, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowsRandom, IconArrowsSort, IconArrowUp, IconArrowUpRight, IconAssembly, IconBallpen, IconBallpenOff, IconBell, IconBolt, IconBottle, IconBox, IconBoxOff, IconBrandOpenai, IconBrandPython, IconBulb, IconBulldozer, IconCamera, IconCategoryPlus, IconCell, IconChartBubble, IconChartCircles, IconChartDots3, IconChartLine, IconChartPie, IconCheck, IconChecks, IconChevronCompactLeft, IconChevronCompactRight, IconChevronDown, IconChevronRight, IconChevronUp, IconCircle, IconCircleCheckFilled, IconCircleMinus, IconCirclePlus, IconClick, IconClipboard, IconClipboardCheck, IconClipboardOff, IconCode, IconCodePlus, IconColorPicker, IconColumns, IconColumns1, IconColumns2, IconColumns3, IconCopy, IconCrown, IconCrownOff, IconDatabase, IconDatabasePlus, IconDeviceFloppy, IconDots, IconDotsVertical, IconDownload, IconEdit, IconEngine, IconExclamationCircle, IconExclamationMark, IconExternalLink, IconEye, IconEyeCancel, IconEyeCheck, IconEyeOff, IconFile, IconFileDownload, IconFileImport, IconFileInfo, IconFilePencil, IconFiles, IconFileText, IconFileUpload, IconFilter, IconFilterOff, IconFishHook, IconFolderBolt, IconGripVertical, IconHandClick, IconHeading, IconHelp, IconHexagons, IconHierarchy, IconHierarchy3, IconHistory, IconHome, IconHourglass, IconHourglassEmpty, IconInfoCircle, IconInfoCircleFilled, IconInfoSquare, IconLayoutList, IconLayoutNavbarCollapse, IconLayoutSidebar, IconLetterGSmall, IconLink, IconList, IconLoader, IconLoader2, IconLockAccess, IconMap, IconMaximize, IconMessageCircle, IconMessageCircleSearch, IconMessages, IconMinimize, IconMoustache, IconNews, IconNotes, IconPencil, IconPlayCardStar, IconPlayerPlay, IconPlayerPlayFilled, IconPlus, IconPoint, IconPointerOff, IconPointerSearch, IconPointFilled, IconQuestionMark, IconRefresh, IconResize, IconRobot, IconRotate, IconScissors, IconScreenshot, IconSearch, IconSend, IconSettings, IconShieldCheckFilled, IconShieldFilled, IconSquare, IconSquareCheck, IconStar, IconTag, IconTemplate, IconTerminal, IconThumbDown, IconThumbDownFilled, IconThumbUp, IconThumbUpFilled, IconTrash, IconTrashXFilled, IconTriangleInverted, IconTriangleSquareCircle, IconUpload, IconUser, IconUsersGroup, IconUserX, IconVariable, IconVariablePlus, IconVersions, IconWand, IconWaveSine, IconWebhook, IconWreckingBall, IconX, IconZoomCode } from '@tabler/icons-react';
+
+export const MemoIconHome = memo(IconHome);
+export const MemoIconInfoCircle = memo(IconInfoCircle);
+export const MemoIconLockAccess = memo(IconLockAccess);
+export const MemoIconCopy = memo(IconCopy);
+export const MemoIconCheck = memo(IconCheck);
+export const MemoIconArrowUpRight = memo(IconArrowUpRight);
+export const MemoIconLink = memo(IconLink);
+export const MemoIconPointFilled = memo(IconPointFilled);
+export const MemoIconUpload = memo(IconUpload);
+export const MemoIconX = memo(IconX);
+export const MemoIconExclamationMark = memo(IconExclamationMark);
+export const MemoIconUser = memo(IconUser);
+export const MemoIconRobot = memo(IconRobot);
+export const MemoIconVariablePlus = memo(IconVariablePlus);
+export const MemoIconVariable = memo(IconVariable);
+export const MemoIconEye = memo(IconEye);
+export const MemoIconEyeOff = memo(IconEyeOff);
+export const MemoIconActivity = memo(IconActivity);
+export const MemoIconChevronDown = memo(IconChevronDown);
+export const MemoIconChartLine = memo(IconChartLine);
+export const MemoIconMessages = memo(IconMessages);
+export const MemoIconHourglass = memo(IconHourglass);
+export const MemoIconFileImport = memo(IconFileImport);
+export const MemoIconMap = memo(IconMap);
+export const MemoIconClick = memo(IconClick);
+export const MemoIconEngine = memo(IconEngine);
+export const MemoIconLoader2 = memo(IconLoader2);
+export const MemoIconClipboard = memo(IconClipboard);
+export const MemoIconClipboardCheck = memo(IconClipboardCheck);
+export const MemoIconSettings = memo(IconSettings);
+export const MemoIconPoint = memo(IconPoint);
+export const MemoIconHierarchy = memo(IconHierarchy);
+export const MemoIconHierarchy3 = memo(IconHierarchy3);
+export const MemoIconChartDots3 = memo(IconChartDots3);
+export const MemoIconWebhook = memo(IconWebhook);
+export const MemoIconBrandPython = memo(IconBrandPython);
+export const MemoIconBrandOpenai = memo(IconBrandOpenai);
+export const MemoIconBoxOff = memo(IconBoxOff);
+export const MemoIconFilter = memo(IconFilter);
+export const MemoIconPointerSearch = memo(IconPointerSearch);
+export const MemoIconScissors = memo(IconScissors);
+export const MemoIconHeading = memo(IconHeading);
+export const MemoIconSend = memo(IconSend);
+export const MemoIconBox = memo(IconBox);
+export const MemoIconBulldozer = memo(IconBulldozer);
+export const MemoIconColumns = memo(IconColumns);
+export const MemoIconQuestionMark = memo(IconQuestionMark);
+export const MemoIconHourglassEmpty = memo(IconHourglassEmpty);
+export const MemoIconEdit = memo(IconEdit);
+export const MemoIconAlertTriangleFilled = memo(IconAlertTriangleFilled);
+export const MemoIconAlertTriangle = memo(IconAlertTriangle);
+export const MemoIconVersions = memo(IconVersions);
+export const MemoIconMoustache = memo(IconMoustache);
+export const MemoIconEyeCancel = memo(IconEyeCancel);
+export const MemoIconEyeCheck = memo(IconEyeCheck);
+export const MemoIconTerminal = memo(IconTerminal);
+export const MemoIconHelp = memo(IconHelp);
+export const MemoIconTrash = memo(IconTrash);
+export const MemoIconSearch = memo(IconSearch);
+export const MemoIconTemplate = memo(IconTemplate);
+export const MemoIconCodePlus = memo(IconCodePlus);
+export const MemoIconArchive = memo(IconArchive);
+export const MemoIconUserX = memo(IconUserX);
+export const MemoIconArrowDown = memo(IconArrowDown);
+export const MemoIconChevronUp = memo(IconChevronUp);
+export const MemoIconRefresh = memo(IconRefresh);
+export const MemoIconFileText = memo(IconFileText);
+export const MemoIconThumbUpFilled = memo(IconThumbUpFilled);
+export const MemoIconThumbUp = memo(IconThumbUp);
+export const MemoIconThumbDownFilled = memo(IconThumbDownFilled);
+export const MemoIconThumbDown = memo(IconThumbDown);
+export const MemoIconChevronCompactLeft = memo(IconChevronCompactLeft);
+export const MemoIconChevronCompactRight = memo(IconChevronCompactRight);
+export const MemoIconPlus = memo(IconPlus);
+export const MemoIconFolderBolt = memo(IconFolderBolt);
+export const MemoIconDotsVertical = memo(IconDotsVertical);
+export const MemoIconDots = memo(IconDots);
+export const MemoIconCrown = memo(IconCrown);
+export const MemoIconCrownOff = memo(IconCrownOff);
+export const MemoIconZoomCode = memo(IconZoomCode);
+export const MemoIconFiles = memo(IconFiles);
+export const MemoIconApi = memo(IconApi);
+export const MemoIconBolt = memo(IconBolt);
+export const MemoIconLayoutList = memo(IconLayoutList);
+export const MemoIconList = memo(IconList);
+export const MemoIconLetterGSmall = memo(IconLetterGSmall);
+export const MemoIconGripVertical = memo(IconGripVertical);
+export const MemoIconResize = memo(IconResize);
+export const MemoIconDatabasePlus = memo(IconDatabasePlus);
+export const MemoIconExclamationCircle = memo(IconExclamationCircle);
+export const MemoIconDatabase = memo(IconDatabase);
+export const MemoIconInfoSquare = memo(IconInfoSquare);
+export const MemoIconAlertCircle = memo(IconAlertCircle);
+export const MemoIconTrashXFilled = memo(IconTrashXFilled);
+export const MemoIconExternalLink = memo(IconExternalLink);
+export const MemoIconCode = memo(IconCode);
+export const MemoIconSquareCheck = memo(IconSquareCheck);
+export const MemoIconSquare = memo(IconSquare);
+export const MemoIconPlayerPlayFilled = memo(IconPlayerPlayFilled);
+export const MemoIconLoader = memo(IconLoader);
+export const MemoIconFilePencil = memo(IconFilePencil);
+export const MemoIconFileInfo = memo(IconFileInfo);
+export const MemoIconShieldFilled = memo(IconShieldFilled);
+export const MemoIconShieldCheckFilled = memo(IconShieldCheckFilled);
+export const MemoIconDeviceFloppy = memo(IconDeviceFloppy);
+export const MemoIconNotes = memo(IconNotes);
+export const MemoIconFileDownload = memo(IconFileDownload);
+export const MemoIconTag = memo(IconTag);
+export const MemoIconCircleCheckFilled = memo(IconCircleCheckFilled);
+export const MemoIconCell = memo(IconCell);
+export const MemoIconArrowsSort = memo(IconArrowsSort);
+export const MemoIconArrowUp = memo(IconArrowUp);
+export const MemoIconFile = memo(IconFile);
+export const MemoIconChevronRight = memo(IconChevronRight);
+export const MemoIconFileUpload = memo(IconFileUpload);
+export const MemoIconArrowRight = memo(IconArrowRight)
+export const MemoIconArrowLeft = memo(IconArrowLeft)
+export const MemoIconArrowCurveRight = memo(IconArrowCurveRight);
+export const MemoIconFishHook = memo(IconFishHook);
+export const MemoIconMessageCircle = memo(IconMessageCircle);
+export const MemoIconNews = memo(IconNews);
+export const MemoIconScreenshot = memo(IconScreenshot);
+export const MemoIconPlayCardStar = memo(IconPlayCardStar);
+export const MemoIconChartCircles = memo(IconChartCircles);
+export const MemoIconLayoutSidebar = memo(IconLayoutSidebar);
+export const MemoIconFilterOff = memo(IconFilterOff);
+export const MemoIconArrowsRandom = memo(IconArrowsRandom);
+export const MemoIconBallpenOff = memo(IconBallpenOff);
+export const MemoIconBallpen = memo(IconBallpen);
+export const MemoIconInfoCircleFilled = memo(IconInfoCircleFilled);
+export const MemoIconStar = memo(IconStar);
+export const MemoIconCircle = memo(IconCircle);
+export const MemoIconAssembly = memo(IconAssembly);
+export const MemoIconLayoutNavbarCollapse = memo(IconLayoutNavbarCollapse);
+export const MemoIconCirclePlus = memo(IconCirclePlus);
+export const MemoIconChecks = memo(IconChecks);
+export const MemoIconBottle = memo(IconBottle);
+export const MemoIconBulb = memo(IconBulb);
+export const MemoIconCategoryPlus = memo(IconCategoryPlus);
+export const MemoIconPencil = memo(IconPencil);
+export const MemoIconColorPicker = memo(IconColorPicker);
+export const MemoIconTriangleInverted = memo(IconTriangleInverted);
+export const MemoIconHexagons = memo(IconHexagons);
+export const MemoIconBell = memo(IconBell);
+export const MemoIconChartPie = memo(IconChartPie);
+export const MemoIconTriangleSquareCircle = memo(IconTriangleSquareCircle);
+export const MemoIconMaximize = memo(IconMaximize);
+export const MemoIconMinimize = memo(IconMinimize);
+export const MemoIconUsersGroup = memo(IconUsersGroup);
+export const MemoIconAdjustmentsAlt = memo(IconAdjustmentsAlt);
+export const MemoIconAdjustmentsOff = memo(IconAdjustmentsOff);
+export const MemoIconHandClick = memo(IconHandClick);
+export const MemoIconPlayerPlay = memo(IconPlayerPlay);
+export const MemoIconAdjustments = memo(IconAdjustments);
+export const MemoIconRotate = memo(IconRotate);
+export const MemoIconChartBubble = memo(IconChartBubble);
+export const MemoIconPointerOff = memo(IconPointerOff);
+export const MemoIconAngle = memo(IconAngle);
+export const MemoIconColumns1 = memo(IconColumns1);
+export const MemoIconColumns2 = memo(IconColumns2);
+export const MemoIconColumns3 = memo(IconColumns3);
+export const MemoIconWaveSine = memo(IconWaveSine);
+export const MemoIconDownload = memo(IconDownload);
+export const MemoIconClipboardOff = memo(IconClipboardOff);
+export const MemoIconCircleMinus = memo(IconCircleMinus);
+export const MemoIconWand = memo(IconWand);
+export const MemoIconHistory = memo(IconHistory);
+export const MemoIconWreckingBall = memo(IconWreckingBall);
+export const MemoIconCamera = memo(IconCamera);
+export const MemoIconArrowAutofitDown = memo(IconArrowAutofitDown);
+export const MemoIconMessageCircleSearch = memo(IconMessageCircleSearch);
\ No newline at end of file
diff --git a/components/kern-table/CellComponents.tsx b/components/kern-table/CellComponents.tsx
index 82233d3..f25cc5a 100644
--- a/components/kern-table/CellComponents.tsx
+++ b/components/kern-table/CellComponents.tsx
@@ -1,6 +1,5 @@
 import { ActiveBadge, InactiveBadge, NotApplicableBadge } from "@/submodules/react-components/components/Badges"
 import { Link, Tooltip } from "@nextui-org/react";
-import { IconAlertCircle, IconAlertTriangleFilled, IconArrowRight, IconCircleCheckFilled, IconExternalLink, IconFileDownload, IconInfoCircle, IconInfoSquare, IconLoader, IconNotes, IconTag, IconThumbDownFilled, IconThumbUpFilled, IconTrash, IconUserX } from "@tabler/icons-react";
 import KernDropdown from "../KernDropdown";
 import { Application } from "../../hooks/web-socket/constants";
 import SVGIcon from "../SVGIcon";
@@ -10,6 +9,7 @@ import { AdminMessageLevel } from "../../types/admin-messages";
 import { FeedbackType, ModelsDownloadedStatus } from "@/submodules/javascript-functions/enums/enums";
 import LoadingIcon from "@/submodules/react-components/components/LoadingIcon";
 import { EvaluationRunState } from "../../types/evaluationRun";
+import { MemoIconAlertCircle, MemoIconAlertTriangleFilled, MemoIconArrowRight, MemoIconCircleCheckFilled, MemoIconExternalLink, MemoIconFileDownload, MemoIconInfoCircle, MemoIconInfoSquare, MemoIconLoader, MemoIconNotes, MemoIconTag, MemoIconThumbDownFilled, MemoIconThumbUpFilled, MemoIconTrash, MemoIconUserX } from "../kern-icons/icons";
 
 
 function OrganizationAndUsersCell({ organization }) {
@@ -42,7 +42,7 @@ function CommentsCell({ hasComments, onClick }) {
     return (
         <div className="cursor-pointer" onClick={onClick}>
             <Tooltip content={hasComments ? 'Has comments' : 'No comments'} color="invert" className="m-auto">
-                <IconNotes
+                <MemoIconNotes
                     strokeWidth={1.5}
                     className={`h-6 w-6 m-auto ${hasComments ? 'text-gray-500' : 'text-gray-300'}`} />
             </Tooltip>
@@ -59,7 +59,7 @@ function ExportConsumptionAndDeleteCell({ organization, onClickConsumptionExport
         <div className="flex items-center gap-x-6 justify-end">
             <div className="cursor-pointer" onClick={onClickConsumptionExport}>
                 <Tooltip content="Export Consumption" color="invert">
-                    <IconFileDownload
+                    <MemoIconFileDownload
                         strokeWidth={1.5}
                         className={"h-6 w-6 m-auto text-gray-500"} />
                 </Tooltip>
@@ -77,7 +77,7 @@ function OrganizationUserCell({ userToOrganization, organizations, user, onClick
     return <>{(userToOrganization && user.id in userToOrganization) ? (<div className="flex items-center flex-row">
         <span className="mr-2">{userToOrganization[user.id]['name']}</span>
         <div onClick={() => onClickRemove(user.id)} className="cursor-pointer">
-            <IconUserX
+            <MemoIconUserX
                 size={20}
                 strokeWidth={2}
                 className='text-gray-900 font-bold cursor-pointer' />
@@ -100,7 +100,7 @@ function DeleteUserCell({ user, deleteUser }) {
 }
 
 function LevelCell({ value }) {
-    return <>{value == AdminMessageLevel.INFO ? (<IconInfoSquare className='text-blue-700 h-6 w-6' />) : (<IconInfoCircle className='text-yellow-700 h-6 w-6' />)}</>
+    return <>{value == AdminMessageLevel.INFO ? (<MemoIconInfoSquare className='text-blue-700 h-6 w-6' />) : (<MemoIconInfoCircle className='text-yellow-700 h-6 w-6' />)}</>
 }
 
 function ArchiveReasonCell({ message, onClick }) {
@@ -170,9 +170,9 @@ function AbortSessionButtonCell({ session, onClick }) {
 
 function FeedbackMessageCell({ value }) {
     return <div className="flex justify-center">
-        {value === FeedbackType.POSITIVE && <IconThumbUpFilled className="h-6 w-6 text-green-600" aria-hidden="true" />}
-        {value === FeedbackType.NEGATIVE && <IconThumbDownFilled className="h-6 w-6 text-red-600" aria-hidden="true" />}
-        {value === FeedbackType.NEUTRAL && <IconThumbUpFilled className="h-6 w-6 text-orange-600 -rotate-90" aria-hidden="true" />}
+        {value === FeedbackType.POSITIVE && <MemoIconThumbUpFilled className="h-6 w-6 text-green-600" aria-hidden="true" />}
+        {value === FeedbackType.NEGATIVE && <MemoIconThumbDownFilled className="h-6 w-6 text-red-600" aria-hidden="true" />}
+        {value === FeedbackType.NEUTRAL && <MemoIconThumbUpFilled className="h-6 w-6 text-orange-600 -rotate-90" aria-hidden="true" />}
     </div>
 }
 
@@ -186,7 +186,7 @@ function JumpToConversationCell({ projectId, conversationId }) {
             href={`/cognition/projects/${projectId}/ui/${conversationId}`}
             className='inline-flex p-2 items-center justify-center rounded-lg hover:bg-gray-200'
         >
-            <IconTag className='h-4 w-4' />
+            <MemoIconTag className='h-4 w-4' />
         </Link>
     </div>
 }
@@ -195,14 +195,14 @@ function RemoteVersionCell({ service }) {
     return <div className="flex flex-row items-center justify-center">
         <div className="mr-2">{service.remoteVersion}</div>
         {service.remoteHasNewer && <Tooltip placement="right" trigger="hover" color="invert" content='Newer version available' className="cursor-auto">
-            <IconAlertCircle className="h-5 w-5 text-yellow-700" />
+            <MemoIconAlertCircle className="h-5 w-5 text-yellow-700" />
         </Tooltip>}
     </div>
 }
 
 function ExternalLinkCell({ link }) {
     return <a href={link} target="_blank" rel="noopener noreferrer" className="h-4 w-4 m-auto block p-0">
-        <IconExternalLink className="h-4 w-4 m-auto" />
+        <MemoIconExternalLink className="h-4 w-4 m-auto" />
     </a>
 }
 
@@ -220,22 +220,22 @@ function FileSizeCell({ model }) {
 function StatusModelCell({ model }) {
     return <div className="flex justify-center">
         {model.status === ModelsDownloadedStatus.FINISHED && <Tooltip content="Successfully created" color="invert" placement="top" className="cursor-auto">
-            <IconCircleCheckFilled className="h-6 w-6 text-green-500" />
+            <MemoIconCircleCheckFilled className="h-6 w-6 text-green-500" />
         </Tooltip>}
         {model.status === ModelsDownloadedStatus.FAILED && <Tooltip content="Execution ran into errors" color="invert" placement="top" className="cursor-auto">
-            <IconAlertTriangleFilled className="h-6 w-6 text-red-500" />
+            <MemoIconAlertTriangleFilled className="h-6 w-6 text-red-500" />
         </Tooltip>}
         {model.status === ModelsDownloadedStatus.DOWNLOADING && <Tooltip content="Model is downloading" color="invert" placement="top" className="cursor-auto">
             <LoadingIcon />
         </Tooltip>}
         {model.status === ModelsDownloadedStatus.INITIALIZING && <Tooltip content="Model is initializing" color="invert" placement="top" className="cursor-auto">
-            <IconLoader className="h-6 w-6 text-gray-500" />
+            <MemoIconLoader className="h-6 w-6 text-gray-500" />
         </Tooltip>}
     </div>
 }
 
 function DeleteModelCell({ isAdmin, model, onClick }) {
-    return <>{isAdmin && <IconTrash onClick={() => onClick(model)}
+    return <>{isAdmin && <MemoIconTrash onClick={() => onClick(model)}
         className="h-6 w-6 text-red-700 cursor-pointer" />}</>
 }
 
@@ -286,7 +286,7 @@ function EvaluationRunDetailsCell({ onClick, disabled }) {
     return <button type="button" className="text-green-800 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
         onClick={onClick} disabled={disabled}>
         <span className="leading-5">Details</span>
-        <IconArrowRight className="h-5 w-5 inline-block text-green-800" />
+        <MemoIconArrowRight className="h-5 w-5 inline-block text-green-800" />
     </button>
 }
 
diff --git a/components/kern-table/KernTable.tsx b/components/kern-table/KernTable.tsx
index 4030d25..32e6b07 100644
--- a/components/kern-table/KernTable.tsx
+++ b/components/kern-table/KernTable.tsx
@@ -2,12 +2,12 @@ import SortArrows from "@/submodules/react-components/components/kern-table/Sort
 import { KernTableProps } from "../../types/kern-table";
 import { AbortSessionButtonCell, ArchiveReasonCell, BadgeCell, CancelTaskCell, CommentsCell, ConfigCell, DeleteModelCell, DeleteUserCell, EditDeleteOrgButtonCell, EmailCell, EtlApiTokenCell, EvaluationRunDetailsCell, EvaluationRunStateCell, ExportConsumptionAndDeleteCell, ExternalLinkCell, FeedbackMessageCell, FeedbackMessageTextCell, FileSizeCell, IconCell, JumpToConversationCell, LabelCell, LevelCell, MaxRowsColsCharsCell, ModelDateCell, OrganizationAndUsersCell, OrganizationUserCell, ProjectNameTaskCell, RemoteVersionCell, StatusModelCell, ViewCell, ViewStackCell } from "./CellComponents";
 import { Fragment, useMemo } from "react";
-import { IconEdit } from "@tabler/icons-react";
 import KernDropdown from "../KernDropdown";
 import { NotApplicableBadge } from "@/submodules/react-components/components/Badges";
 import { Tooltip } from "@nextui-org/react";
 import MultilineTooltipAutoContent from "@/submodules/react-components/components/MultilineTooltipAuto";
 import { NoTableEntriesYet } from "../NoTableEntriesYet";
+import { MemoIconCell, MemoIconEdit } from "../kern-icons/icons";
 
 export default function KernTable(props: KernTableProps) {
     const length = useMemo(() => props.headers?.length || 5, [props.headers?.length]);
@@ -50,7 +50,7 @@ export default function KernTable(props: KernTableProps) {
                                 <td className={"text-center px-3 py-2 text-sm text-gray-500 " + (props.headers[index].wrapWhitespace ? "whitespace-normal" : "whitespace-nowrap")}>
                                     <div className="flex flex-row items-center justify-center gap-x-2">
                                         <ComponentMapper {...cell} />
-                                        {cell.editFunction && <IconEdit className="h-5 w-5 text-gray-500 cursor-pointer" onClick={cell.editFunction} />}
+                                        {cell.editFunction && <MemoIconEdit className="h-5 w-5 text-gray-500 cursor-pointer" onClick={cell.editFunction} />}
                                     </div>
                                 </td>
                             </Fragment>
@@ -88,7 +88,7 @@ function ComponentMapper(cell: any) {
                 case 'CancelTaskCell':
                     return <CancelTaskCell {...cell} />;
                 case 'IconCell':
-                    return <IconCell {...cell} />;
+                    return <MemoIconCell {...cell} />;
                 case 'ConfigCell':
                     return <ConfigCell {...cell} />;
                 case 'EditDeleteOrgButtonCell':
diff --git a/components/kern-table/SortArrows.tsx b/components/kern-table/SortArrows.tsx
index 503f20f..5baed46 100644
--- a/components/kern-table/SortArrows.tsx
+++ b/components/kern-table/SortArrows.tsx
@@ -1,18 +1,18 @@
-import { IconArrowDown, IconArrowUp, IconArrowsSort } from '@tabler/icons-react';
 import { SortArrowsProps } from '../../types/sort';
+import { MemoIconArrowDown, MemoIconArrowsSort, MemoIconArrowUp } from '../kern-icons/icons';
 
 export default function SortArrows(props: SortArrowsProps) {
     return (
         props.sortKey.attributeName != props.property || (props.sortKey.attributeName == props.property && props.sortKey.direction == 0) ? (
-            <IconArrowsSort
+            <MemoIconArrowsSort
                 className='text-gray-500 h-4 w-4' />
 
         ) : (
             props.sortKey.attributeName == props.property && props.sortKey.direction == 1 ? (
-                <IconArrowUp
+                <MemoIconArrowUp
                     className='text-gray-500 h-4 w-4' />
             ) : (
-                <IconArrowDown
+                <MemoIconArrowDown
                     className='text-gray-500 h-4 w-4' />
             )
         )