diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Datepicker/DatePicker3_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Datepicker/DatePicker3_spec.ts
index a2f5acc71dfe..b2aee9b4ea00 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Datepicker/DatePicker3_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Datepicker/DatePicker3_spec.ts
@@ -8,7 +8,7 @@ import {
   propPane,
 } from "../../../../../support/Objects/ObjectsCore";
 
-import { format } from "date-fns";
+import { format } from "date-fns/format.cjs";
 import { datePickerlocators } from "../../../../../locators/WidgetLocators";
 import EditorNavigation, {
   EntityType,
diff --git a/app/client/jest.config.js b/app/client/jest.config.js
index 342158f21372..851fe78efa3b 100644
--- a/app/client/jest.config.js
+++ b/app/client/jest.config.js
@@ -21,7 +21,7 @@ module.exports = {
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "css"],
   moduleDirectories: ["node_modules", "src", "test"],
   transformIgnorePatterns: [
-    "<rootDir>/node_modules/(?!codemirror|konva|react-dnd|dnd-core|@babel|(@blueprintjs)|@github|lodash-es|@draft-js-plugins|react-documents|linkedom|assert-never|axios|usehooks-ts)",
+    "<rootDir>/node_modules/(?!codemirror|konva|react-dnd|dnd-core|@babel|(@blueprintjs)|@github|lodash-es|@draft-js-plugins|react-documents|linkedom|assert-never|axios|usehooks-ts|date-fns)",
   ],
   moduleNameMapper: {
     "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
diff --git a/app/client/package.json b/app/client/package.json
index 3b205ee5ea81..9742d7ca3c77 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -125,7 +125,7 @@
     "cypress-log-to-output": "^1.1.2",
     "cypress-repeat-pro": "^1.0.1",
     "d3-geo": "^3.1.0",
-    "date-fns": "2.30.0",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
     "downloadjs": "^1.4.7",
diff --git a/app/client/packages/icons/package.json b/app/client/packages/icons/package.json
index 351d24c894fc..514eeabb69c5 100644
--- a/app/client/packages/icons/package.json
+++ b/app/client/packages/icons/package.json
@@ -18,6 +18,8 @@
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "devDependencies": {
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
     "fast-glob": "^3.3.2",
     "figmagic": "^4.5.13",
     "fs-extra": "^11.2.0",
diff --git a/app/client/packages/icons/src/components/CustomIcons/AIAvatarCustomIcon.tsx b/app/client/packages/icons/src/components/CustomIcons/AIAvatarCustomIcon.tsx
new file mode 100644
index 000000000000..2c11db8ee939
--- /dev/null
+++ b/app/client/packages/icons/src/components/CustomIcons/AIAvatarCustomIcon.tsx
@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const AIAvatarCustomIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}><rect width={23} height={23} x={0.5} y={0.5} fill="#FFF7F4" rx={1.5} /><rect width={23} height={23} x={0.5} y={0.5} stroke="#FFE9E0" rx={1.5} /><path fill="#FF6D2D" d="M4.5 11a2 2 0 1 0 0 4v-4M19.5 11a2 2 0 1 1 0 4v-4" /><rect width={15} height={10} x={4.5} y={8} fill="#fff" stroke="#000" strokeMiterlimit={10} strokeWidth={0.149} rx={3} /><rect width={12} height={7} x={6} y={9.5} fill="#fff" stroke="#000" strokeMiterlimit={10} strokeWidth={0.5} rx={1.5} /><circle cx={9} cy={12} r={1} fill="#000" /><circle cx={15} cy={12} r={1} fill="#000" /><path fill="#000" d="M11.5 5.5h1V8h-1z" /><circle cx={12} cy={4.5} r={1.5} fill="#fff" stroke="#000" strokeMiterlimit={10} strokeWidth={0.149} /><path stroke="#000" strokeLinecap="round" strokeWidth={0.5} d="m10 14 .209.232A2.426 2.426 0 0 0 14 14v0" /></svg>;
+export { AIAvatarCustomIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/AIChatIcon.tsx b/app/client/packages/icons/src/components/Icons/AIChatIcon.tsx
index e40a07f10f73..0b8ba3a1e9a9 100644
--- a/app/client/packages/icons/src/components/Icons/AIChatIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/AIChatIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const AIChatIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none"><path fill="#000" fill-opacity=".25" fill-rule="evenodd" d="M1.5 1A1.5 1.5 0 0 0 0 2.5v8A1.5 1.5 0 0 0 1.5 12H2V4.5A1.5 1.5 0 0 1 3.5 3H13v-.5A1.5 1.5 0 0 0 11.5 1z" clip-rule="evenodd"/><mask id="a" fill="#fff"><path fill-rule="evenodd" d="M3.5 3A1.5 1.5 0 0 0 2 4.5v8A1.5 1.5 0 0 0 3.5 14H10l2.146 2.146a.5.5 0 0 0 .854-.353V14h.5a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 13.5 3z" clip-rule="evenodd"/></mask><path fill="#000" d="m10 14 .707-.707-.293-.293H10zm3 0v-1h-1v1zM3 4.5a.5.5 0 0 1 .5-.5V2A2.5 2.5 0 0 0 1 4.5zm0 8v-8H1v8zm.5.5a.5.5 0 0 1-.5-.5H1A2.5 2.5 0 0 0 3.5 15zm6.5 0H3.5v2H10zm2.854 2.44-2.147-2.147-1.414 1.414 2.146 2.147zm-.854.353a.5.5 0 0 1 .854-.354l-1.415 1.415c.945.945 2.561.275 2.561-1.061zM12 14v1.793h2V14zm1.5-1H13v2h.5zm.5-.5a.5.5 0 0 1-.5.5v2a2.5 2.5 0 0 0 2.5-2.5zm0-8v8h2v-8zm-.5-.5a.5.5 0 0 1 .5.5h2A2.5 2.5 0 0 0 13.5 2zm-10 0h10V2h-10z" mask="url(#a)"/><path stroke="#000" stroke-opacity=".75" d="m8.536 6.27.6 1.402.08.184.183.078 1.403.602-1.403.6-.184.08-.078.183-.601 1.403-.602-1.403-.078-.184-.184-.078-1.403-.601 1.403-.602.184-.078.078-.184z"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const AIChatIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={17} fill="none" {...props}><path fill="#000" fillOpacity={0.25} fillRule="evenodd" d="M1.5 1A1.5 1.5 0 0 0 0 2.5v8A1.5 1.5 0 0 0 1.5 12H2V4.5A1.5 1.5 0 0 1 3.5 3H13v-.5A1.5 1.5 0 0 0 11.5 1z" clipRule="evenodd" /><mask id="a" fill="#fff"><path fillRule="evenodd" d="M3.5 3A1.5 1.5 0 0 0 2 4.5v8A1.5 1.5 0 0 0 3.5 14H10l2.146 2.146a.5.5 0 0 0 .854-.353V14h.5a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 13.5 3z" clipRule="evenodd" /></mask><path fill="#000" d="m10 14 .707-.707-.293-.293H10zm3 0v-1h-1v1zM3 4.5a.5.5 0 0 1 .5-.5V2A2.5 2.5 0 0 0 1 4.5zm0 8v-8H1v8zm.5.5a.5.5 0 0 1-.5-.5H1A2.5 2.5 0 0 0 3.5 15zm6.5 0H3.5v2H10zm2.854 2.44-2.147-2.147-1.414 1.414 2.146 2.147zm-.854.353a.5.5 0 0 1 .854-.354l-1.415 1.415c.945.945 2.561.275 2.561-1.061zM12 14v1.793h2V14zm1.5-1H13v2h.5zm.5-.5a.5.5 0 0 1-.5.5v2a2.5 2.5 0 0 0 2.5-2.5zm0-8v8h2v-8zm-.5-.5a.5.5 0 0 1 .5.5h2A2.5 2.5 0 0 0 13.5 2zm-10 0h10V2h-10z" mask="url(#a)" /><path stroke="#000" strokeOpacity={0.75} d="m8.536 6.27.6 1.402.08.184.183.078 1.403.602-1.403.6-.184.08-.078.183-.601 1.403-.602-1.403-.078-.184-.184-.078-1.403-.601 1.403-.602.184-.078.078-.184z" /></svg>;
+export { AIChatIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/ButtonIcon.tsx b/app/client/packages/icons/src/components/Icons/ButtonIcon.tsx
index 1c1db17747a7..fe8d70414dcd 100644
--- a/app/client/packages/icons/src/components/Icons/ButtonIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/ButtonIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const ButtonIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M8.5 5.5v2m0 2v-2m3-2L9.793 7.207a1 1 0 0 1-.707.293H8.5M8.5 9.5v-4m3 4-2-2M3.5 8V7a1.5 1.5 0 1 1 3 0v1a1.5 1.5 0 1 1-3 0"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const ButtonIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M8.5 5.5v2m0 2v-2m3-2L9.793 7.207a1 1 0 0 1-.707.293H8.5M8.5 9.5v-4m3 4-2-2M3.5 8V7a1.5 1.5 0 1 1 3 0v1a1.5 1.5 0 1 1-3 0" /></svg>;
+export { ButtonIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/CheckboxGroupIcon.tsx b/app/client/packages/icons/src/components/Icons/CheckboxGroupIcon.tsx
index f8621332360f..3e9fc735f81b 100644
--- a/app/client/packages/icons/src/components/Icons/CheckboxGroupIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/CheckboxGroupIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const CheckboxGroupIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M5 6.5H2A1.5 1.5 0 0 1 .5 5V2A1.5 1.5 0 0 1 2 .5h3A1.5 1.5 0 0 1 6.5 2v3A1.5 1.5 0 0 1 5 6.5"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m2.5 3.5 1 1 1-2M8.5 2.5h6M8.5 12.5h4M5 14.5H2A1.5 1.5 0 0 1 .5 13v-3A1.5 1.5 0 0 1 2 8.5h3A1.5 1.5 0 0 1 6.5 10v3A1.5 1.5 0 0 1 5 14.5M8.5 4.5h4M8.5 10.5h6"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const CheckboxGroupIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M5 6.5H2A1.5 1.5 0 0 1 .5 5V2A1.5 1.5 0 0 1 2 .5h3A1.5 1.5 0 0 1 6.5 2v3A1.5 1.5 0 0 1 5 6.5" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="m2.5 3.5 1 1 1-2M8.5 2.5h6M8.5 12.5h4M5 14.5H2A1.5 1.5 0 0 1 .5 13v-3A1.5 1.5 0 0 1 2 8.5h3A1.5 1.5 0 0 1 6.5 10v3A1.5 1.5 0 0 1 5 14.5M8.5 4.5h4M8.5 10.5h6" /></svg>;
+export { CheckboxGroupIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/CheckboxIcon.tsx b/app/client/packages/icons/src/components/Icons/CheckboxIcon.tsx
index 29369bcba70b..e3d38ebfefdc 100644
--- a/app/client/packages/icons/src/components/Icons/CheckboxIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/CheckboxIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const CheckboxIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M11.5 1.5h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m4.5 7.5 2 2 4-4"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const CheckboxIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M11.5 1.5h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="m4.5 7.5 2 2 4-4" /></svg>;
+export { CheckboxIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/ComboboxSelectIcon.tsx b/app/client/packages/icons/src/components/Icons/ComboboxSelectIcon.tsx
index a5543679b2bd..054b78fe28d5 100644
--- a/app/client/packages/icons/src/components/Icons/ComboboxSelectIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/ComboboxSelectIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const ComboboxSelectIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7M14.5 7.5l-1 1-1-1"/><circle cx="5.5" cy="7.5" r="2.079" stroke="#000"/><path fill="#000" d="m7.534 8.685-.424-.424-.849.849.424.424zm.042 1.74a.6.6 0 0 0 .848-.85zm-.89-.891.89.89.848-.848-.89-.89z"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const ComboboxSelectIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7M14.5 7.5l-1 1-1-1" /><circle cx={5.5} cy={7.5} r={2.079} stroke="#000" /><path fill="#000" d="m7.534 8.685-.424-.424-.849.849.424.424zm.042 1.74a.6.6 0 0 0 .848-.85zm-.89-.891.89.89.848-.848-.89-.89z" /></svg>;
+export { ComboboxSelectIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/CurrencyInputIcon.tsx b/app/client/packages/icons/src/components/Icons/CurrencyInputIcon.tsx
index 92cfe3cb3aae..56a604bab54f 100644
--- a/app/client/packages/icons/src/components/Icons/CurrencyInputIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/CurrencyInputIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const CurrencyInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M7.5 5.5h-3a1 1 0 0 0-1 1v0a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-3M5.5 10.5v-6"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const CurrencyInputIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M7.5 5.5h-3a1 1 0 0 0-1 1v0a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-3M5.5 10.5v-6" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7" /></svg>;
+export { CurrencyInputIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/DatePickerIcon.tsx b/app/client/packages/icons/src/components/Icons/DatePickerIcon.tsx
index 663d3e8c330f..876c44b6a4b4 100644
--- a/app/client/packages/icons/src/components/Icons/DatePickerIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/DatePickerIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const DatePickerIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 1.5h-10a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-10a1 1 0 0 0-1-1M9.5 5.5v8M5.5 5.5v8M1.5 5.5h12M1.5 9.5h12M4.5 3.5v-3m6 3v-3"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const DatePickerIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M12.5 1.5h-10a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-10a1 1 0 0 0-1-1M9.5 5.5v8M5.5 5.5v8M1.5 5.5h12M1.5 9.5h12M4.5 3.5v-3m6 3v-3" /></svg>;
+export { DatePickerIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/EmailInputIcon.tsx b/app/client/packages/icons/src/components/Icons/EmailInputIcon.tsx
index e67d33183035..13f5c63190b0 100644
--- a/app/client/packages/icons/src/components/Icons/EmailInputIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/EmailInputIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const EmailInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" d="M6.5 8.5v-1a1 1 0 0 0-1-1v0a1 1 0 0 0-1 1v0a1 1 0 0 0 1 1zm0 0h.667c.736 0 1.333-.597 1.333-1.333v0A2.667 2.667 0 0 0 5.833 4.5H5.5a3 3 0 0 0-3 3v0a3 3 0 0 0 3 3h2"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const EmailInputIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7" /><path stroke="#000" strokeLinecap="round" d="M6.5 8.5v-1a1 1 0 0 0-1-1v0a1 1 0 0 0-1 1v0a1 1 0 0 0 1 1zm0 0h.667c.736 0 1.333-.597 1.333-1.333v0A2.667 2.667 0 0 0 5.833 4.5H5.5a3 3 0 0 0-3 3v0a3 3 0 0 0 3 3h2" /></svg>;
+export { EmailInputIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/HeadingIcon.tsx b/app/client/packages/icons/src/components/Icons/HeadingIcon.tsx
index ce21cb63e153..c6375fb87ef6 100644
--- a/app/client/packages/icons/src/components/Icons/HeadingIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/HeadingIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const HeadingIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M.5 1.5h2m2 0h-2m0 0v12m-2 0h4M10.5 1.5h2m2 0h-2m0 0v12m-2 0h4M2.5 7.5h10"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const HeadingIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M.5 1.5h2m2 0h-2m0 0v12m-2 0h4M10.5 1.5h2m2 0h-2m0 0v12m-2 0h4M2.5 7.5h10" /></svg>;
+export { HeadingIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/IconButtonIcon.tsx b/app/client/packages/icons/src/components/Icons/IconButtonIcon.tsx
index 510d24d59008..cd9f744dd14b 100644
--- a/app/client/packages/icons/src/components/Icons/IconButtonIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/IconButtonIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const IconButtonIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3"/><path stroke="#000" stroke-linecap="round" d="M5.5 7.5h4M7.5 9.5v-4"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const IconButtonIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3" /><path stroke="#000" strokeLinecap="round" d="M5.5 7.5h4M7.5 9.5v-4" /></svg>;
+export { IconButtonIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/InlineButtonsIcon.tsx b/app/client/packages/icons/src/components/Icons/InlineButtonsIcon.tsx
index ec89d44edf4a..8cce9902695b 100644
--- a/app/client/packages/icons/src/components/Icons/InlineButtonsIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/InlineButtonsIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const InlineButtonsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m11.5 7.5 1 1 1-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".75" d="m3.5 8.5 2-2m0 2-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".75" d="M5.5 4.5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const InlineButtonsIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="m11.5 7.5 1 1 1-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.75} d="m3.5 8.5 2-2m0 2-2-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.75} d="M5.5 4.5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2" /></svg>;
+export { InlineButtonsIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/InputIcon.tsx b/app/client/packages/icons/src/components/Icons/InputIcon.tsx
index fd209ac8da78..f6b98a73daf3 100644
--- a/app/client/packages/icons/src/components/Icons/InputIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/InputIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const InputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 9.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const InputIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="m7.5 9.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7" /></svg>;
+export { InputIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/KeyValueIcon.tsx b/app/client/packages/icons/src/components/Icons/KeyValueIcon.tsx
index 09a5bd7321ca..baf2871234d1 100644
--- a/app/client/packages/icons/src/components/Icons/KeyValueIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/KeyValueIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const KeyValueIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" stroke-width="2" d="M2 3h6"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 11.5h1m1 0h-1m-1-3 1-1v4M8.5 11.5h-3v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v0a1 1 0 0 0-1-1h-2M10.5 7.5h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-1M10.5 11.5h2a1 1 0 0 0 1-1v0a1 1 0 0 0-1-1h-1"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const KeyValueIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} strokeWidth={2} d="M2 3h6" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M1.5 11.5h1m1 0h-1m-1-3 1-1v4M8.5 11.5h-3v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v0a1 1 0 0 0-1-1h-2M10.5 7.5h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-1M10.5 11.5h2a1 1 0 0 0 1-1v0a1 1 0 0 0-1-1h-1" /></svg>;
+export { KeyValueIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/MenuButtonIcon.tsx b/app/client/packages/icons/src/components/Icons/MenuButtonIcon.tsx
index 26470441e927..fabb550194c4 100644
--- a/app/client/packages/icons/src/components/Icons/MenuButtonIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/MenuButtonIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const MenuButtonIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3"/><path stroke="#000" stroke-linecap="round" d="M5.5 7.5h4M5.5 9.5h4M5.5 5.5h4"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const MenuButtonIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3" /><path stroke="#000" strokeLinecap="round" d="M5.5 7.5h4M5.5 9.5h4M5.5 5.5h4" /></svg>;
+export { MenuButtonIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/ModalIcon.tsx b/app/client/packages/icons/src/components/Icons/ModalIcon.tsx
index 8496db1df687..7358fe43fc86 100644
--- a/app/client/packages/icons/src/components/Icons/ModalIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/ModalIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const ModalIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 2.5a1 1 0 0 1 1 1v7a3 3 0 0 1-3 3h-7a1 1 0 0 1-1-1v0"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M10.5.5h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2M7.5 5.5l2-2m0 2-2-2"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const ModalIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M12.5 2.5a1 1 0 0 1 1 1v7a3 3 0 0 1-3 3h-7a1 1 0 0 1-1-1v0" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M10.5.5h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2M7.5 5.5l2-2m0 2-2-2" /></svg>;
+export { ModalIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/MultilineInputIcon.tsx b/app/client/packages/icons/src/components/Icons/MultilineInputIcon.tsx
index 3401be75a150..f5ffb412de0d 100644
--- a/app/client/packages/icons/src/components/Icons/MultilineInputIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/MultilineInputIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const MultilineInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 7.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 1.5h-12a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" d="M3.5 12v-2a.5.5 0 0 1 .5-.5h2a1.5 1.5 0 0 1 0 3H4a.5.5 0 0 1-.5-.5Z"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const MultilineInputIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="m7.5 7.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M14.5 1.5h-12a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h7" /><path stroke="#000" strokeLinecap="round" d="M3.5 12v-2a.5.5 0 0 1 .5-.5h2a1.5 1.5 0 0 1 0 3H4a.5.5 0 0 1-.5-.5Z" /></svg>;
+export { MultilineInputIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/NumberInputIcon.tsx b/app/client/packages/icons/src/components/Icons/NumberInputIcon.tsx
index 312eb87ee69e..8de60a4c9c4e 100644
--- a/app/client/packages/icons/src/components/Icons/NumberInputIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/NumberInputIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const NumberInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M3.5 9.5h1m1 0h-1m-1-3 1-1v4M9.5 9.5h1m1 0h-1m-1-3 1-1v4"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" d="M7.5 9.5v.01"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const NumberInputIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M3.5 9.5h1m1 0h-1m-1-3 1-1v4M9.5 9.5h1m1 0h-1m-1-3 1-1v4" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7" /><path stroke="#000" strokeLinecap="round" d="M7.5 9.5v.01" /></svg>;
+export { NumberInputIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/ParagraphIcon.tsx b/app/client/packages/icons/src/components/Icons/ParagraphIcon.tsx
index fd3d7eb03870..59bb8ce2b762 100644
--- a/app/client/packages/icons/src/components/Icons/ParagraphIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/ParagraphIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const ParagraphIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 1.5h1m0 0h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-2m0-2v2m1 2h-2 1v-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".5" d="M7.5 1.5h6M7.5 3.5h6M7.5 5.5h6M1.5 7.5h12M1.5 9.5h12M1.5 11.5h12M1.5 13.5h7"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const ParagraphIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M1.5 1.5h1m0 0h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-2m0-2v2m1 2h-2 1v-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.5} d="M7.5 1.5h6M7.5 3.5h6M7.5 5.5h6M1.5 7.5h12M1.5 9.5h12M1.5 11.5h12M1.5 13.5h7" /></svg>;
+export { ParagraphIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/PasswordInputIcon.tsx b/app/client/packages/icons/src/components/Icons/PasswordInputIcon.tsx
index 133f72e44a80..6a7c7aed2ef1 100644
--- a/app/client/packages/icons/src/components/Icons/PasswordInputIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/PasswordInputIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const PasswordInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" stroke-width="2.1" d="M4 7h.01M7 7h.01M10 7h.01"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const PasswordInputIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7" /><path stroke="#000" strokeLinecap="round" strokeWidth={2.1} d="M4 7h.01M7 7h.01M10 7h.01" /></svg>;
+export { PasswordInputIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/PhoneInputIcon.tsx b/app/client/packages/icons/src/components/Icons/PhoneInputIcon.tsx
index c0c3b77c6bf0..1e8bc9a56367 100644
--- a/app/client/packages/icons/src/components/Icons/PhoneInputIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/PhoneInputIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const PhoneInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M7.5 9.5h1m1 0h-1m-1-3 1-1v4"/><path stroke="#000" stroke-linecap="round" d="M3.5 7.5h2M4.5 8.5v-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const PhoneInputIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M7.5 9.5h1m1 0h-1m-1-3 1-1v4" /><path stroke="#000" strokeLinecap="round" d="M3.5 7.5h2M4.5 8.5v-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7" /></svg>;
+export { PhoneInputIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/RadioGroupIcon.tsx b/app/client/packages/icons/src/components/Icons/RadioGroupIcon.tsx
index 9f24ed327cec..cb9617f69c9a 100644
--- a/app/client/packages/icons/src/components/Icons/RadioGroupIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/RadioGroupIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const RadioGroupIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M8.5 2.5h6M8.5 10.5h6M8.5 4.5h4M8.5 12.5h4"/><circle cx="3.5" cy="11.5" r="3" stroke="#000" stroke-linejoin="round" transform="rotate(-90 3.5 11.5)"/><path fill="#000" fill-opacity=".1" fill-rule="evenodd" d="M6.5 3.5a3 3 0 1 0-6 0 3 3 0 0 0 6 0M5 3.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0" clip-rule="evenodd"/><circle cx="3.5" cy="3.5" r="3" stroke="#000" stroke-linejoin="round" transform="rotate(-90 3.5 3.5)"/><circle cx="3.5" cy="3.5" r="1" stroke="#000" stroke-linejoin="round" transform="rotate(-90 3.5 3.5)"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const RadioGroupIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M8.5 2.5h6M8.5 10.5h6M8.5 4.5h4M8.5 12.5h4" /><circle cx={3.5} cy={11.5} r={3} stroke="#000" strokeLinejoin="round" transform="rotate(-90 3.5 11.5)" /><path fill="#000" fillOpacity={0.1} fillRule="evenodd" d="M6.5 3.5a3 3 0 1 0-6 0 3 3 0 0 0 6 0M5 3.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0" clipRule="evenodd" /><circle cx={3.5} cy={3.5} r={3} stroke="#000" strokeLinejoin="round" transform="rotate(-90 3.5 3.5)" /><circle cx={3.5} cy={3.5} r={1} stroke="#000" strokeLinejoin="round" transform="rotate(-90 3.5 3.5)" /></svg>;
+export { RadioGroupIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/SectionIcon.tsx b/app/client/packages/icons/src/components/Icons/SectionIcon.tsx
index e1f08894335e..ca589d7f0508 100644
--- a/app/client/packages/icons/src/components/Icons/SectionIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/SectionIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const SectionIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 6v3A1.5 1.5 0 0 0 3 10.5h9A1.5 1.5 0 0 0 13.5 9V6A1.5 1.5 0 0 0 12 4.5H3A1.5 1.5 0 0 0 1.5 6"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M13.5.5V1A1.5 1.5 0 0 1 12 2.5H3A1.5 1.5 0 0 1 1.5 1V.5M13.5 14.5V14a1.5 1.5 0 0 0-1.5-1.5H3A1.5 1.5 0 0 0 1.5 14v.5"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const SectionIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M1.5 6v3A1.5 1.5 0 0 0 3 10.5h9A1.5 1.5 0 0 0 13.5 9V6A1.5 1.5 0 0 0 12 4.5H3A1.5 1.5 0 0 0 1.5 6" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M13.5.5V1A1.5 1.5 0 0 1 12 2.5H3A1.5 1.5 0 0 1 1.5 1V.5M13.5 14.5V14a1.5 1.5 0 0 0-1.5-1.5H3A1.5 1.5 0 0 0 1.5 14v.5" /></svg>;
+export { SectionIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/StatsBoxIcon.tsx b/app/client/packages/icons/src/components/Icons/StatsBoxIcon.tsx
index 48e9f4f9c9bc..160b937d70c1 100644
--- a/app/client/packages/icons/src/components/Icons/StatsBoxIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/StatsBoxIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const StatsBoxIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 1.5h-10a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M3.5 4.5h6"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M3.5 10.5h1m1 0h-1m-1-3 1-1v4"/><path stroke="#000" stroke-linecap="round" d="M9.5 10.5V7"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 8.5 2-2 2 2"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const StatsBoxIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M12.5 1.5h-10a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M3.5 4.5h6" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M3.5 10.5h1m1 0h-1m-1-3 1-1v4" /><path stroke="#000" strokeLinecap="round" d="M9.5 10.5V7" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="m7.5 8.5 2-2 2 2" /></svg>;
+export { StatsBoxIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/SwitchGroupIcon.tsx b/app/client/packages/icons/src/components/Icons/SwitchGroupIcon.tsx
index babbde8020d3..3b151be0fce0 100644
--- a/app/client/packages/icons/src/components/Icons/SwitchGroupIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/SwitchGroupIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const SwitchGroupIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M10.5 8.5h-6a3 3 0 0 0 0 6h6a3 3 0 1 0 0-6"/><path fill="#000" fill-opacity=".15" fill-rule="evenodd" d="M1.5 3.5a3 3 0 0 1 3-3h6a3 3 0 0 0 0 6h-6a3 3 0 0 1-3-3" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M10.5.5h-6a3 3 0 0 0 0 6h6a3 3 0 1 0 0-6"/><circle cx="10.5" cy="3.5" r="3" stroke="#000"/><circle cx="4.5" cy="11.5" r="3" stroke="#000"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const SwitchGroupIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M10.5 8.5h-6a3 3 0 0 0 0 6h6a3 3 0 1 0 0-6" /><path fill="#000" fillOpacity={0.15} fillRule="evenodd" d="M1.5 3.5a3 3 0 0 1 3-3h6a3 3 0 0 0 0 6h-6a3 3 0 0 1-3-3" clipRule="evenodd" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M10.5.5h-6a3 3 0 0 0 0 6h6a3 3 0 1 0 0-6" /><circle cx={10.5} cy={3.5} r={3} stroke="#000" /><circle cx={4.5} cy={11.5} r={3} stroke="#000" /></svg>;
+export { SwitchGroupIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/SwitchIcon.tsx b/app/client/packages/icons/src/components/Icons/SwitchIcon.tsx
index e487c66e5009..83a53b7af672 100644
--- a/app/client/packages/icons/src/components/Icons/SwitchIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/SwitchIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const SwitchIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M10.5 4.5h-6a3 3 0 0 0 0 6h6a3 3 0 1 0 0-6"/><path fill="#000" fill-opacity=".15" fill-rule="evenodd" d="M1.5 7.5a3 3 0 0 1 3-3h6a3 3 0 0 0 0 6h-6a3 3 0 0 1-3-3" clip-rule="evenodd"/><circle cx="10.5" cy="7.5" r="3" stroke="#000"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const SwitchIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M10.5 4.5h-6a3 3 0 0 0 0 6h6a3 3 0 1 0 0-6" /><path fill="#000" fillOpacity={0.15} fillRule="evenodd" d="M1.5 7.5a3 3 0 0 1 3-3h6a3 3 0 0 0 0 6h-6a3 3 0 0 1-3-3" clipRule="evenodd" /><circle cx={10.5} cy={7.5} r={3} stroke="#000" /></svg>;
+export { SwitchIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/TableIcon.tsx b/app/client/packages/icons/src/components/Icons/TableIcon.tsx
index b5f1b5e98c3b..07849ad1cc80 100644
--- a/app/client/packages/icons/src/components/Icons/TableIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/TableIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const TableIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M11.5 1.5h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2M7.5 5.5v8M1.5 5.5h12M1.5 9.5h12"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const TableIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M11.5 1.5h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2M7.5 5.5v8M1.5 5.5h12M1.5 9.5h12" /></svg>;
+export { TableIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/ToolbarButtonsIcon.tsx b/app/client/packages/icons/src/components/Icons/ToolbarButtonsIcon.tsx
index 2d708cf15643..4ec6487de88e 100644
--- a/app/client/packages/icons/src/components/Icons/ToolbarButtonsIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/ToolbarButtonsIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const ToolbarButtonsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#000" fill-rule="evenodd" d="M5 5.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H4v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H5zM13.854 5.854a.5.5 0 0 0-.708-.708l-3 3a.5.5 0 0 0 .708.708zM9.775 9.765a.375.375 0 1 0-.53-.53l-.01.01a.375.375 0 0 0 .53.53z" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".5" d="M13.5 3.5h-11a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const ToolbarButtonsIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path fill="#000" fillRule="evenodd" d="M5 5.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H4v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H5zM13.854 5.854a.5.5 0 0 0-.708-.708l-3 3a.5.5 0 0 0 .708.708zM9.775 9.765a.375.375 0 1 0-.53-.53l-.01.01a.375.375 0 0 0 .53.53z" clipRule="evenodd" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.5} d="M13.5 3.5h-11a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2" /></svg>;
+export { ToolbarButtonsIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Icons/ZoneIcon.tsx b/app/client/packages/icons/src/components/Icons/ZoneIcon.tsx
index 4352f9ad3384..bd1094b89071 100644
--- a/app/client/packages/icons/src/components/Icons/ZoneIcon.tsx
+++ b/app/client/packages/icons/src/components/Icons/ZoneIcon.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const ZoneIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M2.5 4v7A1.5 1.5 0 0 0 4 12.5h7a1.5 1.5 0 0 0 1.5-1.5V4A1.5 1.5 0 0 0 11 2.5H4A1.5 1.5 0 0 0 2.5 4"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M.5 4v-.5a3 3 0 0 1 3-3H4M.5 11v.5a3 3 0 0 0 3 3H4M14.5 4v-.5a3 3 0 0 0-3-3H11M14.5 11v.5a3 3 0 0 1-3 3H11M.5 6.5v2M14.5 6.5v2M6.5.5h2M6.5 14.5h2"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const ZoneIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M2.5 4v7A1.5 1.5 0 0 0 4 12.5h7a1.5 1.5 0 0 0 1.5-1.5V4A1.5 1.5 0 0 0 11 2.5H4A1.5 1.5 0 0 0 2.5 4" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M.5 4v-.5a3 3 0 0 1 3-3H4M.5 11v.5a3 3 0 0 0 3 3H4M14.5 4v-.5a3 3 0 0 0-3-3H11M14.5 11v.5a3 3 0 0 1-3 3H11M.5 6.5v2M14.5 6.5v2M6.5.5h2M6.5 14.5h2" /></svg>;
+export { ZoneIcon };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/AIChatThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/AIChatThumbnail.tsx
index 80bc3b290c65..69911d23813a 100644
--- a/app/client/packages/icons/src/components/Thumbnails/AIChatThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/AIChatThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const AIChatThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><mask id="a" fill="#fff"><path fill-rule="evenodd" d="M40 21a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H21l-7.257 8.063c-.613.681-1.743.247-1.743-.669V45H9a3 3 0 0 1-3-3V24a3 3 0 0 1 3-3z" clip-rule="evenodd"/></mask><path fill="#fff" fill-rule="evenodd" d="M40 21a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H21l-7.257 8.063c-.613.681-1.743.247-1.743-.669V45H9a3 3 0 0 1-3-3V24a3 3 0 0 1 3-3z" clip-rule="evenodd"/><path fill="#CDD5DF" d="m21 45-.743-.669.298-.331H21zm-7.257 8.063.744.669zM12 45v-1h1v1zm30-21a2 2 0 0 0-2-2v-2a4 4 0 0 1 4 4zm0 18V24h2v18zm-2 2a2 2 0 0 0 2-2h2a4 4 0 0 1-4 4zm-19 0h19v2H21zm-8 8.394 7.257-8.063 1.486 1.338-7.256 8.063zm0 0 1.487 1.338C13.26 55.094 11 54.227 11 52.394zM13 45v7.394h-2V45zm-4-1h3v2H9zm-2-2a2 2 0 0 0 2 2v2a4 4 0 0 1-4-4zm0-18v18H5V24zm2-2a2 2 0 0 0-2 2H5a4 4 0 0 1 4-4zm31 0H9v-2h31z" mask="url(#a)"/><mask id="b" fill="#fff"><path fill-rule="evenodd" d="M32 29a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h19l7.257 8.063c.613.681 1.743.247 1.743-.669V53h3a3 3 0 0 0 3-3V32a3 3 0 0 0-3-3z" clip-rule="evenodd"/></mask><path fill="#FFBFA1" fill-rule="evenodd" d="M32 29a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h19l7.257 8.063c.613.681 1.743.247 1.743-.669V53h3a3 3 0 0 0 3-3V32a3 3 0 0 0-3-3z" clip-rule="evenodd"/><path fill="#CC3D00" d="m51 53 .743-.669-.298-.331H51zm7.257 8.063-.744.669zM60 53v-1h-1v1zM30 32a2 2 0 0 1 2-2v-2a4 4 0 0 0-4 4zm0 18V32h-2v18zm2 2a2 2 0 0 1-2-2h-2a4 4 0 0 0 4 4zm19 0H32v2h19zm8 8.394-7.257-8.063-1.486 1.338 7.256 8.063zm0 0-1.487 1.338C58.74 63.094 61 62.227 61 60.394zM59 53v7.394h2V53zm4-1h-3v2h3zm2-2a2 2 0 0 1-2 2v2a4 4 0 0 0 4-4zm0-18v18h2V32zm-2-2a2 2 0 0 1 2 2h2a4 4 0 0 0-4-4zm-31 0h31v-2H32z" mask="url(#b)"/><path fill="#fff" stroke="#CC3D00" d="M41.434 42.657a8.5 8.5 0 0 0 4.223-4.223 8.5 8.5 0 0 0 4.223 4.223 8.5 8.5 0 0 0-4.223 4.223 8.5 8.5 0 0 0-4.223-4.223ZM51.17 34.263l.073-.145.072.145a6.5 6.5 0 0 0 2.907 2.907l.145.073-.145.072a6.5 6.5 0 0 0-2.907 2.907l-.072.145-.073-.145a6.5 6.5 0 0 0-2.907-2.907l-.145-.072.145-.073a6.5 6.5 0 0 0 2.907-2.907Z"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const AIChatThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><mask id="a" fill="#fff"><path fillRule="evenodd" d="M40 21a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H21l-7.257 8.063c-.613.681-1.743.247-1.743-.669V45H9a3 3 0 0 1-3-3V24a3 3 0 0 1 3-3z" clipRule="evenodd" /></mask><path fill="#fff" fillRule="evenodd" d="M40 21a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H21l-7.257 8.063c-.613.681-1.743.247-1.743-.669V45H9a3 3 0 0 1-3-3V24a3 3 0 0 1 3-3z" clipRule="evenodd" /><path fill="#CDD5DF" d="m21 45-.743-.669.298-.331H21zm-7.257 8.063.744.669zM12 45v-1h1v1zm30-21a2 2 0 0 0-2-2v-2a4 4 0 0 1 4 4zm0 18V24h2v18zm-2 2a2 2 0 0 0 2-2h2a4 4 0 0 1-4 4zm-19 0h19v2H21zm-8 8.394 7.257-8.063 1.486 1.338-7.256 8.063zm0 0 1.487 1.338C13.26 55.094 11 54.227 11 52.394zM13 45v7.394h-2V45zm-4-1h3v2H9zm-2-2a2 2 0 0 0 2 2v2a4 4 0 0 1-4-4zm0-18v18H5V24zm2-2a2 2 0 0 0-2 2H5a4 4 0 0 1 4-4zm31 0H9v-2h31z" mask="url(#a)" /><mask id="b" fill="#fff"><path fillRule="evenodd" d="M32 29a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h19l7.257 8.063c.613.681 1.743.247 1.743-.669V53h3a3 3 0 0 0 3-3V32a3 3 0 0 0-3-3z" clipRule="evenodd" /></mask><path fill="#FFBFA1" fillRule="evenodd" d="M32 29a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h19l7.257 8.063c.613.681 1.743.247 1.743-.669V53h3a3 3 0 0 0 3-3V32a3 3 0 0 0-3-3z" clipRule="evenodd" /><path fill="#CC3D00" d="m51 53 .743-.669-.298-.331H51zm7.257 8.063-.744.669zM60 53v-1h-1v1zM30 32a2 2 0 0 1 2-2v-2a4 4 0 0 0-4 4zm0 18V32h-2v18zm2 2a2 2 0 0 1-2-2h-2a4 4 0 0 0 4 4zm19 0H32v2h19zm8 8.394-7.257-8.063-1.486 1.338 7.256 8.063zm0 0-1.487 1.338C58.74 63.094 61 62.227 61 60.394zM59 53v7.394h2V53zm4-1h-3v2h3zm2-2a2 2 0 0 1-2 2v2a4 4 0 0 0 4-4zm0-18v18h2V32zm-2-2a2 2 0 0 1 2 2h2a4 4 0 0 0-4-4zm-31 0h31v-2H32z" mask="url(#b)" /><path fill="#fff" stroke="#CC3D00" d="M41.434 43.657a8.5 8.5 0 0 0 4.223-4.223 8.5 8.5 0 0 0 4.223 4.223 8.5 8.5 0 0 0-4.223 4.223 8.5 8.5 0 0 0-4.223-4.223ZM51.17 35.263l.073-.145.072.145a6.5 6.5 0 0 0 2.907 2.907l.145.073-.145.072a6.5 6.5 0 0 0-2.907 2.907l-.072.145-.073-.145a6.5 6.5 0 0 0-2.907-2.907l-.145-.072.145-.073a6.5 6.5 0 0 0 2.907-2.907Z" /></svg>;
+export { AIChatThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/ButtonThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/ButtonThumbnail.tsx
index e094cbfb02d4..2600f39aed32 100644
--- a/app/client/packages/icons/src/components/Thumbnails/ButtonThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/ButtonThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const ButtonThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#FFEEE5" stroke="#CC3D00" rx="5.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M37.5 33.5v4m0 4v-4m6-4-3.414 3.414a2 2 0 0 1-1.414.586H37.5M37.5 41.5v-8m6 8-4-4M28.5 38.5v-2a3 3 0 1 1 6 0v2a3 3 0 1 1-6 0"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const ButtonThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={55} height={23} x={8.5} y={26.5} fill="#FFEEE5" stroke="#CC3D00" rx={5.5} /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="M37.5 33.5v4m0 4v-4m6-4-3.414 3.414a2 2 0 0 1-1.414.586H37.5M37.5 41.5v-8m6 8-4-4M28.5 38.5v-2a3 3 0 1 1 6 0v2a3 3 0 1 1-6 0" /></svg>;
+export { ButtonThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/CheckboxGroupThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/CheckboxGroupThumbnail.tsx
index 89d4c9603555..a6c591374532 100644
--- a/app/client/packages/icons/src/components/Thumbnails/CheckboxGroupThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/CheckboxGroupThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const CheckboxGroupThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><path fill="#fff" stroke="#CC3D00" stroke-linecap="square" d="M26.5 23.5h-9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z"/><path fill="#fff" stroke="#CDD5DF" stroke-linecap="square" d="M26.5 41.5h-9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m19 29 2 2 4-4"/><rect width="22" height="8" x="34" y="25" fill="#CDD5DF" rx="1"/><rect width="22" height="8" x="34" y="43" fill="#CDD5DF" rx="1"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const CheckboxGroupThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><path fill="#fff" stroke="#CC3D00" strokeLinecap="square" d="M26.5 23.5h-9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z" /><path fill="#fff" stroke="#CDD5DF" strokeLinecap="square" d="M26.5 41.5h-9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z" /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="m19 29 2 2 4-4" /><rect width={22} height={8} x={34} y={25} fill="#CDD5DF" rx={1} /><rect width={22} height={8} x={34} y={43} fill="#CDD5DF" rx={1} /></svg>;
+export { CheckboxGroupThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/CheckboxThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/CheckboxThumbnail.tsx
index 0fb1b6644632..9bd895928167 100644
--- a/app/client/packages/icons/src/components/Thumbnails/CheckboxThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/CheckboxThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const CheckboxThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><path fill="#fff" stroke="#CC3D00" stroke-linecap="square" d="M25.5 32.5h-9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m18 38 2 2 4-4"/><rect width="24" height="8" x="33" y="34" fill="#CDD5DF" rx="1"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const CheckboxThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><path fill="#fff" stroke="#CC3D00" strokeLinecap="square" d="M25.5 32.5h-9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z" /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="m18 38 2 2 4-4" /><rect width={24} height={8} x={33} y={34} fill="#CDD5DF" rx={1} /></svg>;
+export { CheckboxThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/ComboboxSelectThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/ComboboxSelectThumbnail.tsx
index fbf23f8b14d4..b7517a7bc923 100644
--- a/app/client/packages/icons/src/components/Thumbnails/ComboboxSelectThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/ComboboxSelectThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const ComboboxSelectThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="m56.5 36.5-3 3-3-3"/><circle cx="19" cy="37" r="4.5" stroke="#CC3D00"/><path stroke="#CC3D00" stroke-linecap="round" d="m22.5 40.5 2 2"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const ComboboxSelectThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={55} height={23} x={8.5} y={26.5} fill="#fff" stroke="#CDD5DF" rx={2.5} /><path stroke="#6A7585" strokeLinecap="round" strokeLinejoin="round" d="m56.5 36.5-3 3-3-3" /><circle cx={19} cy={37} r={4.5} stroke="#CC3D00" /><path stroke="#CC3D00" strokeLinecap="round" d="m22.5 40.5 2 2" /></svg>;
+export { ComboboxSelectThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/CurrencyInputThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/CurrencyInputThumbnail.tsx
index 26ceec3f0499..5c97ee56f66e 100644
--- a/app/client/packages/icons/src/components/Thumbnails/CurrencyInputThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/CurrencyInputThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const CurrencyInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M17 38.5a2.5 2.5 0 0 1 0-5M22 43.5a2.5 2.5 0 0 0 0-5M23.5 35.5a2 2 0 0 0-2-2M14.5 41.5a2 2 0 0 0 2 2M19.5 31.5v14M17 33.5h4.5m-4.5 5h5m-5.5 5H22"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const CurrencyInputThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={55} height={23} x={8.5} y={26.5} fill="#fff" stroke="#CDD5DF" rx={2.5} /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="M17 38.5a2.5 2.5 0 0 1 0-5M22 43.5a2.5 2.5 0 0 0 0-5M23.5 35.5a2 2 0 0 0-2-2M14.5 41.5a2 2 0 0 0 2 2M19.5 31.5v14M17 33.5h4.5m-4.5 5h5m-5.5 5H22" /><path stroke="#6A7585" strokeLinecap="round" strokeLinejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4" /></svg>;
+export { CurrencyInputThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/DatePickerThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/DatePickerThumbnail.tsx
index 1a7e6760799d..6a68cc72e795 100644
--- a/app/client/packages/icons/src/components/Thumbnails/DatePickerThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/DatePickerThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const DatePickerThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" rx="2.5"/><rect width="55" height="23" x="8.5" y="26.5" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M25.5 32.5h-10a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-10a1 1 0 0 0-1-1M22.5 36.5v8M18.5 36.5v8M14.5 36.5h12M14.5 40.5h12M17.5 34.5v-3m6 3v-3"/><path stroke="#99A4B3" stroke-linecap="round" stroke-linejoin="round" d="m56.5 36.5-3 3-3-3"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const DatePickerThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={55} height={23} x={8.5} y={26.5} fill="#fff" rx={2.5} /><rect width={55} height={23} x={8.5} y={26.5} stroke="#CDD5DF" rx={2.5} /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="M25.5 32.5h-10a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-10a1 1 0 0 0-1-1M22.5 36.5v8M18.5 36.5v8M14.5 36.5h12M14.5 40.5h12M17.5 34.5v-3m6 3v-3" /><path stroke="#99A4B3" strokeLinecap="round" strokeLinejoin="round" d="m56.5 36.5-3 3-3-3" /></svg>;
+export { DatePickerThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/EmailInputThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/EmailInputThumbnail.tsx
index aa1f63d557ff..95295be27fe1 100644
--- a/app/client/packages/icons/src/components/Thumbnails/EmailInputThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/EmailInputThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const EmailInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M21.5 40.5H19a1.5 1.5 0 0 1-1.5-1.5v-2a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v3.5Zm0 0 1.026.342a1.5 1.5 0 0 0 1.974-1.423V36.5a4 4 0 0 0-4-4h-2a4 4 0 0 0-4 4v3a4 4 0 0 0 4 4H23"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const EmailInputThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={55} height={23} x={8.5} y={26.5} fill="#fff" stroke="#CDD5DF" rx={2.5} /><path stroke="#CC3D00" strokeLinecap="round" d="M21.5 40.5H19a1.5 1.5 0 0 1-1.5-1.5v-2a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v3.5Zm0 0 1.026.342a1.5 1.5 0 0 0 1.974-1.423V36.5a4 4 0 0 0-4-4h-2a4 4 0 0 0-4 4v3a4 4 0 0 0 4 4H23" /><path stroke="#6A7585" strokeLinecap="round" strokeLinejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4" /></svg>;
+export { EmailInputThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/HeadingThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/HeadingThumbnail.tsx
index 133f49dea9d8..0fd8497fe275 100644
--- a/app/client/packages/icons/src/components/Thumbnails/HeadingThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/HeadingThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const HeadingThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="56" height="44" x="8" y="16" fill="#fff" rx="3"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M40.5 50.5h9m-9-24h9M22.5 50.5h9m-9-24h9"/><path fill="#FFEEE5" stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M42.5 26.5h5v24h-5zM24.5 26.5h5v24h-5z"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M29.5 37.5h13"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const HeadingThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={56} height={44} x={8} y={16} fill="#fff" rx={3} /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="M40.5 50.5h9m-9-24h9M22.5 50.5h9m-9-24h9" /><path fill="#FFEEE5" stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="M42.5 26.5h5v24h-5zM24.5 26.5h5v24h-5z" /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="M29.5 37.5h13" /></svg>;
+export { HeadingThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/IconButtonThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/IconButtonThumbnail.tsx
index 7b38c959d43d..ac80a1fbe807 100644
--- a/app/client/packages/icons/src/components/Thumbnails/IconButtonThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/IconButtonThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const IconButtonThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="31" height="23" x="20.5" y="26.5" fill="#FFEEE5" stroke="#CC3D00" rx="5.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M30.5 37.5h12M36.5 43.5v-12"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const IconButtonThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={31} height={23} x={20.5} y={26.5} fill="#FFEEE5" stroke="#CC3D00" rx={5.5} /><path stroke="#CC3D00" strokeLinecap="round" d="M30.5 37.5h12M36.5 43.5v-12" /></svg>;
+export { IconButtonThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/InlineButtonsThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/InlineButtonsThumbnail.tsx
index 962f9362bdb5..2012519022b6 100644
--- a/app/client/packages/icons/src/components/Thumbnails/InlineButtonsThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/InlineButtonsThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const InlineButtonsThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="59" height="23" x="6.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="5.5"/><rect width="24" height="15" x="37.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><rect width="24" height="15" x="10.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m45.5 37.5 3 3 5-5"/><path stroke="#6A7585" stroke-linecap="round" d="m20 35 6 6m0-6-6 6"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const InlineButtonsThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={59} height={23} x={6.5} y={26.5} fill="#fff" stroke="#CDD5DF" rx={5.5} /><rect width={24} height={15} x={37.5} y={30.5} fill="#FFEEE5" stroke="#CC3D00" rx={2.5} /><rect width={24} height={15} x={10.5} y={30.5} fill="#E3E8EF" stroke="#6A7585" rx={2.5} /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="m45.5 37.5 3 3 5-5" /><path stroke="#6A7585" strokeLinecap="round" d="m20 35 6 6m0-6-6 6" /></svg>;
+export { InlineButtonsThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/InputThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/InputThumbnail.tsx
index 2ec5890f1565..d1de1b7bbaeb 100644
--- a/app/client/packages/icons/src/components/Thumbnails/InputThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/InputThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const InputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m14.5 44.5 1.833-4m9.167 4-1.833-4m-7.334 0 3.667-8 3.667 8m-7.334 0h7.334"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const InputThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={55} height={23} x={8.5} y={26.5} fill="#fff" stroke="#CDD5DF" rx={2.5} /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="m14.5 44.5 1.833-4m9.167 4-1.833-4m-7.334 0 3.667-8 3.667 8m-7.334 0h7.334" /><path stroke="#6A7585" strokeLinecap="round" strokeLinejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4" /></svg>;
+export { InputThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/KeyValueThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/KeyValueThumbnail.tsx
index 75c3eaf36fde..c69375213650 100644
--- a/app/client/packages/icons/src/components/Thumbnails/KeyValueThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/KeyValueThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const KeyValueThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="44" height="39" x="14.5" y="19.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><rect width="16" height="6" x="22" y="27" fill="#CDD5DF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M22 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M34.5 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994a2 2 0 0 0 1.257-1.857V42.5a2 2 0 0 0-2-2h-3M37.5 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M37.5 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const KeyValueThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={44} height={39} x={14.5} y={19.5} fill="#fff" stroke="#CDD5DF" rx={2.5} /><rect width={16} height={6} x={22} y={27} fill="#CDD5DF" rx={1} /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="M22 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M34.5 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994a2 2 0 0 0 1.257-1.857V42.5a2 2 0 0 0-2-2h-3M37.5 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M37.5 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2" /></svg>;
+export { KeyValueThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/MenuButtonThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/MenuButtonThumbnail.tsx
index de371e7412f7..322bdbf66e84 100644
--- a/app/client/packages/icons/src/components/Thumbnails/MenuButtonThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/MenuButtonThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const MenuButtonThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="31" height="23" x="20.5" y="26.5" fill="#FFEEE5" stroke="#CC3D00" rx="5.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M30.5 33.5h12M30.5 37.5h12M30.5 41.5h12"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const MenuButtonThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={31} height={23} x={20.5} y={26.5} fill="#FFEEE5" stroke="#CC3D00" rx={5.5} /><path stroke="#CC3D00" strokeLinecap="round" d="M30.5 33.5h12M30.5 37.5h12M30.5 41.5h12" /></svg>;
+export { MenuButtonThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/ModalThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/ModalThumbnail.tsx
index 66d31520bd0c..6eb10073b9fb 100644
--- a/app/client/packages/icons/src/components/Thumbnails/ModalThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/ModalThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const ModalThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="56" height="56" x="9" y="12" fill="#E3E8EF" rx="4"/><rect width="56" height="56" x="7" y="10" fill="#fff" rx="3"/><rect width="28" height="9" x="15" y="18" fill="#E3E8EF" rx="1"/><rect width="40" height="6" x="15" y="36" fill="#E3E8EF" rx="1"/><rect width="40" height="6" x="15" y="44" fill="#E3E8EF" rx="1"/><rect width="24" height="6" x="15" y="52" fill="#E3E8EF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-width="1.5" d="m48.5 19.5 6 6m0-6-6 6"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const ModalThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={56} height={56} x={9} y={12} fill="#E3E8EF" rx={4} /><rect width={56} height={56} x={7} y={10} fill="#fff" rx={3} /><rect width={28} height={9} x={15} y={18} fill="#E3E8EF" rx={1} /><rect width={40} height={6} x={15} y={36} fill="#E3E8EF" rx={1} /><rect width={40} height={6} x={15} y={44} fill="#E3E8EF" rx={1} /><rect width={24} height={6} x={15} y={52} fill="#E3E8EF" rx={1} /><path stroke="#CC3D00" strokeLinecap="round" strokeWidth={1.5} d="m48.5 19.5 6 6m0-6-6 6" /></svg>;
+export { ModalThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/MultilineInputThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/MultilineInputThumbnail.tsx
index 48552883c829..c82f96f2a9e4 100644
--- a/app/client/packages/icons/src/components/Thumbnails/MultilineInputThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/MultilineInputThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const MultilineInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="41" x="8.5" y="14.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M49.5 23.5v0a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3v0M14.5 49.5h4a3 3 0 0 0 3-3v-6a3 3 0 0 0-3-3h-4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1ZM33.5 40.5v0a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v3m8 3v0a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3v-3m0 0h5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M28.5 20.5h5c1.657 0 3 .843 3 2.5s-1.343 2.5-3 2.5h-4M29.5 25.5h5c1.657 0 3 1.843 3 3.5s-1.343 3.5-3 3.5h-6M29.5 20.5v12M14.5 32.5l1.833-4m9.167 4-1.833-4m-7.334 0 3.667-8 3.667 8m-7.334 0h7.334"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 49.5h2m2 0h-2m0 0v12m-2 0h4"/><path stroke="#CC3D00" stroke-linecap="round" d="M37.5 49.5v-6m7-6h-4a3 3 0 0 0-3 3v3m0 0h4"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const MultilineInputThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={55} height={41} x={8.5} y={14.5} fill="#fff" stroke="#CDD5DF" rx={2.5} /><path stroke="#CC3D00" strokeLinecap="round" d="M49.5 23.5v0a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3v0M14.5 49.5h4a3 3 0 0 0 3-3v-6a3 3 0 0 0-3-3h-4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1ZM33.5 40.5v0a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v3m8 3v0a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3v-3m0 0h5" /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="M28.5 20.5h5c1.657 0 3 .843 3 2.5s-1.343 2.5-3 2.5h-4M29.5 25.5h5c1.657 0 3 1.843 3 3.5s-1.343 3.5-3 3.5h-6M29.5 20.5v12M14.5 32.5l1.833-4m9.167 4-1.833-4m-7.334 0 3.667-8 3.667 8m-7.334 0h7.334" /><path stroke="#6A7585" strokeLinecap="round" strokeLinejoin="round" d="M51.5 49.5h2m2 0h-2m0 0v12m-2 0h4" /><path stroke="#CC3D00" strokeLinecap="round" d="M37.5 49.5v-6m7-6h-4a3 3 0 0 0-3 3v3m0 0h4" /></svg>;
+export { MultilineInputThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/NumberInputThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/NumberInputThumbnail.tsx
index 2253ba3a9d88..3812ae48c320 100644
--- a/app/client/packages/icons/src/components/Thumbnails/NumberInputThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/NumberInputThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const NumberInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-width="1.25" d="M23.5 43.5h.01"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M16 43.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M26 43.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M33.5 33.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M33.5 43.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const NumberInputThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={55} height={23} x={8.5} y={26.5} fill="#fff" stroke="#CDD5DF" rx={2.5} /><path stroke="#CC3D00" strokeLinecap="round" strokeWidth={1.25} d="M23.5 43.5h.01" /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="M16 43.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M26 43.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10" /><path stroke="#6A7585" strokeLinecap="round" strokeLinejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4" /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="M33.5 33.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M33.5 43.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2" /></svg>;
+export { NumberInputThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/ParagraphThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/ParagraphThumbnail.tsx
index ceea22e4641f..3297fdf4b390 100644
--- a/app/client/packages/icons/src/components/Thumbnails/ParagraphThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/ParagraphThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const ParagraphThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="56" height="44" x="8" y="16" fill="#fff" rx="3"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M23.5 25.5h1m0 0H29a2.5 2.5 0 0 1 2.5 2.5v0a2.5 2.5 0 0 1-2.5 2.5h-4.5m0-5v5m0 3v-3m-1 3h2M35.5 25.5h12M35.5 29.5h12M35.5 33.5h12M23.5 37.5h24M23.5 41.5h24M23.5 45.5h24M23.5 49.5h14"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const ParagraphThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={56} height={44} x={8} y={16} fill="#fff" rx={3} /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="M23.5 25.5h1m0 0H29a2.5 2.5 0 0 1 2.5 2.5v0a2.5 2.5 0 0 1-2.5 2.5h-4.5m0-5v5m0 3v-3m-1 3h2M35.5 25.5h12M35.5 29.5h12M35.5 33.5h12M23.5 37.5h24M23.5 41.5h24M23.5 45.5h24M23.5 49.5h14" /></svg>;
+export { ParagraphThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/PasswordInputThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/PasswordInputThumbnail.tsx
index 5a96845987b6..da125fa569a0 100644
--- a/app/client/packages/icons/src/components/Thumbnails/PasswordInputThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/PasswordInputThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const PasswordInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/><path fill="#CC3D00" fill-rule="evenodd" d="M17 34.5a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L16 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L17.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L17 36.617zm8 0a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L24 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L25.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L25 36.617zm7.5-.5a.5.5 0 0 1 .5.5v2.117l1.743-1.046a.5.5 0 0 1 .514.858L33.472 37.5l1.785 1.071a.5.5 0 1 1-.514.858L33 38.383V40.5a.5.5 0 1 1-1 0v-2.117l-1.743 1.046a.5.5 0 1 1-.514-.858l1.785-1.071-1.785-1.071a.5.5 0 1 1 .514-.858L32 36.617V34.5a.5.5 0 0 1 .5-.5m8.5.5a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L40 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L41.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L41 36.617z" clip-rule="evenodd"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const PasswordInputThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={55} height={23} x={8.5} y={26.5} fill="#fff" stroke="#CDD5DF" rx={2.5} /><path stroke="#6A7585" strokeLinecap="round" strokeLinejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4" /><path fill="#CC3D00" fillRule="evenodd" d="M17 34.5a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L16 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L17.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L17 36.617zm8 0a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L24 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L25.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L25 36.617zm7.5-.5a.5.5 0 0 1 .5.5v2.117l1.743-1.046a.5.5 0 0 1 .514.858L33.472 37.5l1.785 1.071a.5.5 0 1 1-.514.858L33 38.383V40.5a.5.5 0 1 1-1 0v-2.117l-1.743 1.046a.5.5 0 1 1-.514-.858l1.785-1.071-1.785-1.071a.5.5 0 1 1 .514-.858L32 36.617V34.5a.5.5 0 0 1 .5-.5m8.5.5a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L40 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L41.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L41 36.617z" clipRule="evenodd" /></svg>;
+export { PasswordInputThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/PhoneInputThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/PhoneInputThumbnail.tsx
index 95d2de69e434..f9be741e4649 100644
--- a/app/client/packages/icons/src/components/Thumbnails/PhoneInputThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/PhoneInputThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const PhoneInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M15.5 38.5h8M19.5 42.5v-8"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M27 43.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const PhoneInputThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={55} height={23} x={8.5} y={26.5} fill="#fff" stroke="#CDD5DF" rx={2.5} /><path stroke="#CC3D00" strokeLinecap="round" d="M15.5 38.5h8M19.5 42.5v-8" /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="M27 43.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10" /><path stroke="#6A7585" strokeLinecap="round" strokeLinejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4" /></svg>;
+export { PhoneInputThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/RadioGroupThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/RadioGroupThumbnail.tsx
index 7505b07b6f48..7b8a72a407b5 100644
--- a/app/client/packages/icons/src/components/Thumbnails/RadioGroupThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/RadioGroupThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const RadioGroupThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><circle cx="22" cy="29" r="6.5" fill="#FFBFA1" stroke="#CC3D00"/><circle cx="22" cy="29" r="3.5" fill="#fff" stroke="#CC3D00"/><rect width="20" height="8" x="34" y="25" fill="#CDD5DF" rx="1"/><rect width="11" height="11" x="16.5" y="41.5" fill="#fff" stroke="#CDD5DF" rx="5.5"/><rect width="22" height="8" x="34" y="43" fill="#CDD5DF" rx="1"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const RadioGroupThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><circle cx={22} cy={29} r={6.5} fill="#FFBFA1" stroke="#CC3D00" /><circle cx={22} cy={29} r={3.5} fill="#fff" stroke="#CC3D00" /><rect width={20} height={8} x={34} y={25} fill="#CDD5DF" rx={1} /><rect width={11} height={11} x={16.5} y={41.5} fill="#fff" stroke="#CDD5DF" rx={5.5} /><rect width={22} height={8} x={34} y={43} fill="#CDD5DF" rx={1} /></svg>;
+export { RadioGroupThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/SectionThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/SectionThumbnail.tsx
index 2cd004ba1d2e..f860aa7022d6 100644
--- a/app/client/packages/icons/src/components/Thumbnails/SectionThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/SectionThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const SectionThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="53" height="29" x="9.5" y="23.5" fill="#fff" stroke="#CC3D00" rx="2"/><path stroke="#CC3D00" d="M62.5 9v4.5a2 2 0 0 1-2 2h-49a2 2 0 0 1-2-2V9M62.5 67v-4.5a2 2 0 0 0-2-2h-49a2 2 0 0 0-2 2V67"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const SectionThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={53} height={29} x={9.5} y={23.5} fill="#fff" stroke="#CC3D00" rx={2} /><path stroke="#CC3D00" d="M62.5 9v4.5a2 2 0 0 1-2 2h-49a2 2 0 0 1-2-2V9M62.5 67v-4.5a2 2 0 0 0-2-2h-49a2 2 0 0 0-2 2V67" /></svg>;
+export { SectionThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/SelectThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/SelectThumbnail.tsx
index ccd690d38e6f..9800e4c2e9ff 100644
--- a/app/client/packages/icons/src/components/Thumbnails/SelectThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/SelectThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const SelectThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m14.5 44.5 1.833-4m9.167 4-1.833-4m-7.334 0 3.667-8 3.667 8m-7.334 0h7.334"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="m56.5 36.5-3 3-3-3"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const SelectThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={55} height={23} x={8.5} y={26.5} fill="#fff" stroke="#CDD5DF" rx={2.5} /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="m14.5 44.5 1.833-4m9.167 4-1.833-4m-7.334 0 3.667-8 3.667 8m-7.334 0h7.334" /><path stroke="#6A7585" strokeLinecap="round" strokeLinejoin="round" d="m56.5 36.5-3 3-3-3" /></svg>;
+export { SelectThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/StatsBoxThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/StatsBoxThumbnail.tsx
index cd43593d6bff..1d34cbf7dbcf 100644
--- a/app/client/packages/icons/src/components/Thumbnails/StatsBoxThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/StatsBoxThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const StatsBoxThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="32" height="6" x="16" y="24" fill="#E3E8EF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M16 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M28.5 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994a2 2 0 0 0 1.257-1.857V42.5a2 2 0 0 0-2-2h-3M31.5 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M31.5 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/><rect width="12" height="12" x="43.5" y="39.5" fill="#FFEEE5" stroke="#CC3D00" rx="1.5"/><path stroke="#CC3D00" stroke-linecap="round" d="m47 48 4-4"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M48.5 43.5h3v3"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const StatsBoxThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={32} height={6} x={16} y={24} fill="#E3E8EF" rx={1} /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="M16 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M28.5 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994a2 2 0 0 0 1.257-1.857V42.5a2 2 0 0 0-2-2h-3M31.5 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M31.5 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2" /><rect width={12} height={12} x={43.5} y={39.5} fill="#FFEEE5" stroke="#CC3D00" rx={1.5} /><path stroke="#CC3D00" strokeLinecap="round" d="m47 48 4-4" /><path stroke="#CC3D00" strokeLinecap="round" strokeLinejoin="round" d="M48.5 43.5h3v3" /></svg>;
+export { StatsBoxThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/SwitchGroupThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/SwitchGroupThumbnail.tsx
index 48a78b2096ca..2abe405de7ba 100644
--- a/app/client/packages/icons/src/components/Thumbnails/SwitchGroupThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/SwitchGroupThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const SwitchGroupThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="17" height="11" x="40.5" y="23.5" fill="#FFBFA1" stroke="#CC3D00" rx="5.5"/><rect width="17" height="11" x="40.5" y="41.5" fill="#CDD5DF" stroke="#CDD5DF" rx="5.5"/><circle cx="52" cy="29" r="5.5" fill="#fff" stroke="#CC3D00"/><circle cx="46" cy="47" r="5.5" fill="#fff" stroke="#CDD5DF"/><rect width="22" height="8" x="14" y="25" fill="#CDD5DF" rx="1"/><rect width="18" height="8" x="14" y="43" fill="#CDD5DF" rx="1"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const SwitchGroupThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={17} height={11} x={40.5} y={23.5} fill="#FFBFA1" stroke="#CC3D00" rx={5.5} /><rect width={17} height={11} x={40.5} y={41.5} fill="#CDD5DF" stroke="#CDD5DF" rx={5.5} /><circle cx={52} cy={29} r={5.5} fill="#fff" stroke="#CC3D00" /><circle cx={46} cy={47} r={5.5} fill="#fff" stroke="#CDD5DF" /><rect width={22} height={8} x={14} y={25} fill="#CDD5DF" rx={1} /><rect width={18} height={8} x={14} y={43} fill="#CDD5DF" rx={1} /></svg>;
+export { SwitchGroupThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/SwitchThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/SwitchThumbnail.tsx
index cebc8d84d579..43c15b85820c 100644
--- a/app/client/packages/icons/src/components/Thumbnails/SwitchThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/SwitchThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const SwitchThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="22" height="8" x="14" y="34" fill="#CDD5DF" rx="1"/><rect width="17" height="11" x="40.5" y="32.5" fill="#FFBFA1" stroke="#CC3D00" rx="5.5"/><circle cx="52" cy="38" r="5.5" fill="#fff" stroke="#CC3D00"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const SwitchThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={22} height={8} x={14} y={34} fill="#CDD5DF" rx={1} /><rect width={17} height={11} x={40.5} y={32.5} fill="#FFBFA1" stroke="#CC3D00" rx={5.5} /><circle cx={52} cy={38} r={5.5} fill="#fff" stroke="#CC3D00" /></svg>;
+export { SwitchThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/TableThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/TableThumbnail.tsx
index e30756bff124..7e295987d1eb 100644
--- a/app/client/packages/icons/src/components/Thumbnails/TableThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/TableThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const TableThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="56" height="43" x="7.5" y="16.5" fill="#fff" stroke="#6A7585" rx="1.5"/><path fill="#FFEEE5" d="M22.5 32.5v26a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-41a1 1 0 0 1 1-1h54a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-39a1 1 0 0 0-1 1"/><path stroke="#CC3D00" d="M22.5 59.5H9A1.5 1.5 0 0 1 7.5 58V18A1.5 1.5 0 0 1 9 16.5h53a1.5 1.5 0 0 1 1.5 1.5v13.5"/><path stroke="#6A7585" stroke-linecap="round" d="M22.5 45.5h41"/><path stroke="#CC3D00" stroke-linecap="round" d="M22.5 17v28.5m0 14v-14m0 0h-15m.5-14h55.5"/><path fill="#E3E8EF" fill-rule="evenodd" d="M27 35a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1zm0 14a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h31a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1z" clip-rule="evenodd"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const TableThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={56} height={43} x={7.5} y={16.5} fill="#fff" stroke="#6A7585" rx={1.5} /><path fill="#FFEEE5" d="M22.5 32.5v26a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-41a1 1 0 0 1 1-1h54a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-39a1 1 0 0 0-1 1" /><path stroke="#CC3D00" d="M22.5 59.5H9A1.5 1.5 0 0 1 7.5 58V18A1.5 1.5 0 0 1 9 16.5h53a1.5 1.5 0 0 1 1.5 1.5v13.5" /><path stroke="#6A7585" strokeLinecap="round" d="M22.5 45.5h41" /><path stroke="#CC3D00" strokeLinecap="round" d="M22.5 17v28.5m0 14v-14m0 0h-15m.5-14h55.5" /><path fill="#E3E8EF" fillRule="evenodd" d="M27 35a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1zm0 14a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h31a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1z" clipRule="evenodd" /></svg>;
+export { TableThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/ToolbarButtonsThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/ToolbarButtonsThumbnail.tsx
index ed1c8efdb09a..02cd07e74f84 100644
--- a/app/client/packages/icons/src/components/Thumbnails/ToolbarButtonsThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/ToolbarButtonsThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const ToolbarButtonsThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="18" height="16" x="5.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M10.5 38.5h8M14.5 42.5v-8"/><rect width="18" height="16" x="26.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="m38 35-5.5 5.5 1 1L39 36a.707.707 0 0 0-1-1"/><rect width="19" height="16" x="48.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path stroke="#6A7585" stroke-linecap="round" stroke-width="2" d="M54 38h.01M58 38h.01M62 38h.01"/><path fill="#6A7585" stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="m32 41.5.5.5-1 .5z"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const ToolbarButtonsThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={18} height={16} x={5.5} y={30.5} fill="#FFEEE5" stroke="#CC3D00" rx={2.5} /><path stroke="#CC3D00" strokeLinecap="round" d="M10.5 38.5h8M14.5 42.5v-8" /><rect width={18} height={16} x={26.5} y={30.5} fill="#E3E8EF" stroke="#6A7585" rx={2.5} /><path stroke="#6A7585" strokeLinecap="round" strokeLinejoin="round" d="m38 35-5.5 5.5 1 1L39 36a.707.707 0 0 0-1-1" /><rect width={19} height={16} x={48.5} y={30.5} fill="#E3E8EF" stroke="#6A7585" rx={2.5} /><path stroke="#6A7585" strokeLinecap="round" strokeWidth={2} d="M54 38h.01M58 38h.01M62 38h.01" /><path fill="#6A7585" stroke="#6A7585" strokeLinecap="round" strokeLinejoin="round" strokeWidth={0.75} d="m32 41.5.5.5-1 .5z" /></svg>;
+export { ToolbarButtonsThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/components/Thumbnails/ZoneThumbnail.tsx b/app/client/packages/icons/src/components/Thumbnails/ZoneThumbnail.tsx
index e6b81df9b354..d907fd3476a5 100644
--- a/app/client/packages/icons/src/components/Thumbnails/ZoneThumbnail.tsx
+++ b/app/client/packages/icons/src/components/Thumbnails/ZoneThumbnail.tsx
@@ -1,2 +1,4 @@
-import React from "react";
-export const ZoneThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="43" height="43" x="14.5" y="16.5" fill="#fff" stroke="#CC3D00" stroke-linecap="square" stroke-linejoin="round" rx=".5"/><path stroke="#CC3D00" d="M9.5 59v4a1.5 1.5 0 0 0 1.5 1.5h4M62.5 59v4a1.5 1.5 0 0 1-1.5 1.5h-4M15 11.5h-4A1.5 1.5 0 0 0 9.5 13v4M57 11.5h4a1.5 1.5 0 0 1 1.5 1.5v4M9.5 22v7m0 5.5V42m0 5v7M62.5 22v7m0 5.5V42m0 5v7M20 11.5h7M20 64.5h7M32 11.5h8M32 64.5h8M45 11.5h7M45 64.5h7"/></svg>;
+import * as React from "react";
+import type { SVGProps } from "react";
+const ZoneThumbnail = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={72} height={76} fill="none" {...props}><rect width={43} height={43} x={14.5} y={16.5} fill="#fff" stroke="#CC3D00" strokeLinecap="square" strokeLinejoin="round" rx={0.5} /><path stroke="#CC3D00" d="M9.5 59v4a1.5 1.5 0 0 0 1.5 1.5h4M62.5 59v4a1.5 1.5 0 0 1-1.5 1.5h-4M15 11.5h-4A1.5 1.5 0 0 0 9.5 13v4M57 11.5h4a1.5 1.5 0 0 1 1.5 1.5v4M9.5 22v7m0 5.5V42m0 5v7M62.5 22v7m0 5.5V42m0 5v7M20 11.5h7M20 64.5h7M32 11.5h8M32 64.5h8M45 11.5h7M45 64.5h7" /></svg>;
+export { ZoneThumbnail };
\ No newline at end of file
diff --git a/app/client/packages/icons/src/icons/CustomIcons/AIAvatar.svg b/app/client/packages/icons/src/icons/CustomIcons/AIAvatar.svg
new file mode 100644
index 000000000000..9f1b244b608c
--- /dev/null
+++ b/app/client/packages/icons/src/icons/CustomIcons/AIAvatar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><rect width="23" height="23" x=".5" y=".5" fill="#FFF7F4" rx="1.5"/><rect width="23" height="23" x=".5" y=".5" stroke="#FFE9E0" rx="1.5"/><path fill="#FF6D2D" d="M4.5 11a2 2 0 1 0 0 4v-4M19.5 11a2 2 0 1 1 0 4v-4"/><rect width="15" height="10" x="4.5" y="8" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width=".149" rx="3"/><rect width="12" height="7" x="6" y="9.5" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width=".5" rx="1.5"/><circle cx="9" cy="12" r="1" fill="#000"/><circle cx="15" cy="12" r="1" fill="#000"/><path fill="#000" d="M11.5 5.5h1V8h-1z"/><circle cx="12" cy="4.5" r="1.5" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width=".149"/><path stroke="#000" stroke-linecap="round" stroke-width=".5" d="m10 14 .209.232A2.426 2.426 0 0 0 14 14v0"/></svg>
\ No newline at end of file
diff --git a/app/client/packages/icons/src/icons/Thumbnails/AIChat.svg b/app/client/packages/icons/src/icons/Thumbnails/AIChat.svg
index f42f9dce2327..be77ea9768c6 100644
--- a/app/client/packages/icons/src/icons/Thumbnails/AIChat.svg
+++ b/app/client/packages/icons/src/icons/Thumbnails/AIChat.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><mask id="a" fill="#fff"><path fill-rule="evenodd" d="M40 21a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H21l-7.257 8.063c-.613.681-1.743.247-1.743-.669V45H9a3 3 0 0 1-3-3V24a3 3 0 0 1 3-3z" clip-rule="evenodd"/></mask><path fill="#fff" fill-rule="evenodd" d="M40 21a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H21l-7.257 8.063c-.613.681-1.743.247-1.743-.669V45H9a3 3 0 0 1-3-3V24a3 3 0 0 1 3-3z" clip-rule="evenodd"/><path fill="#CDD5DF" d="m21 45-.743-.669.298-.331H21zm-7.257 8.063.744.669zM12 45v-1h1v1zm30-21a2 2 0 0 0-2-2v-2a4 4 0 0 1 4 4zm0 18V24h2v18zm-2 2a2 2 0 0 0 2-2h2a4 4 0 0 1-4 4zm-19 0h19v2H21zm-8 8.394 7.257-8.063 1.486 1.338-7.256 8.063zm0 0 1.487 1.338C13.26 55.094 11 54.227 11 52.394zM13 45v7.394h-2V45zm-4-1h3v2H9zm-2-2a2 2 0 0 0 2 2v2a4 4 0 0 1-4-4zm0-18v18H5V24zm2-2a2 2 0 0 0-2 2H5a4 4 0 0 1 4-4zm31 0H9v-2h31z" mask="url(#a)"/><mask id="b" fill="#fff"><path fill-rule="evenodd" d="M32 29a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h19l7.257 8.063c.613.681 1.743.247 1.743-.669V53h3a3 3 0 0 0 3-3V32a3 3 0 0 0-3-3z" clip-rule="evenodd"/></mask><path fill="#FFBFA1" fill-rule="evenodd" d="M32 29a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h19l7.257 8.063c.613.681 1.743.247 1.743-.669V53h3a3 3 0 0 0 3-3V32a3 3 0 0 0-3-3z" clip-rule="evenodd"/><path fill="#CC3D00" d="m51 53 .743-.669-.298-.331H51zm7.257 8.063-.744.669zM60 53v-1h-1v1zM30 32a2 2 0 0 1 2-2v-2a4 4 0 0 0-4 4zm0 18V32h-2v18zm2 2a2 2 0 0 1-2-2h-2a4 4 0 0 0 4 4zm19 0H32v2h19zm8 8.394-7.257-8.063-1.486 1.338 7.256 8.063zm0 0-1.487 1.338C58.74 63.094 61 62.227 61 60.394zM59 53v7.394h2V53zm4-1h-3v2h3zm2-2a2 2 0 0 1-2 2v2a4 4 0 0 0 4-4zm0-18v18h2V32zm-2-2a2 2 0 0 1 2 2h2a4 4 0 0 0-4-4zm-31 0h31v-2H32z" mask="url(#b)"/><path fill="#fff" stroke="#CC3D00" d="M41.434 42.657a8.5 8.5 0 0 0 4.223-4.223 8.5 8.5 0 0 0 4.223 4.223 8.5 8.5 0 0 0-4.223 4.223 8.5 8.5 0 0 0-4.223-4.223ZM51.17 34.263l.073-.145.072.145a6.5 6.5 0 0 0 2.907 2.907l.145.073-.145.072a6.5 6.5 0 0 0-2.907 2.907l-.072.145-.073-.145a6.5 6.5 0 0 0-2.907-2.907l-.145-.072.145-.073a6.5 6.5 0 0 0 2.907-2.907Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><mask id="a" fill="#fff"><path fill-rule="evenodd" d="M40 21a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H21l-7.257 8.063c-.613.681-1.743.247-1.743-.669V45H9a3 3 0 0 1-3-3V24a3 3 0 0 1 3-3z" clip-rule="evenodd"/></mask><path fill="#fff" fill-rule="evenodd" d="M40 21a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H21l-7.257 8.063c-.613.681-1.743.247-1.743-.669V45H9a3 3 0 0 1-3-3V24a3 3 0 0 1 3-3z" clip-rule="evenodd"/><path fill="#CDD5DF" d="m21 45-.743-.669.298-.331H21zm-7.257 8.063.744.669zM12 45v-1h1v1zm30-21a2 2 0 0 0-2-2v-2a4 4 0 0 1 4 4zm0 18V24h2v18zm-2 2a2 2 0 0 0 2-2h2a4 4 0 0 1-4 4zm-19 0h19v2H21zm-8 8.394 7.257-8.063 1.486 1.338-7.256 8.063zm0 0 1.487 1.338C13.26 55.094 11 54.227 11 52.394zM13 45v7.394h-2V45zm-4-1h3v2H9zm-2-2a2 2 0 0 0 2 2v2a4 4 0 0 1-4-4zm0-18v18H5V24zm2-2a2 2 0 0 0-2 2H5a4 4 0 0 1 4-4zm31 0H9v-2h31z" mask="url(#a)"/><mask id="b" fill="#fff"><path fill-rule="evenodd" d="M32 29a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h19l7.257 8.063c.613.681 1.743.247 1.743-.669V53h3a3 3 0 0 0 3-3V32a3 3 0 0 0-3-3z" clip-rule="evenodd"/></mask><path fill="#FFBFA1" fill-rule="evenodd" d="M32 29a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h19l7.257 8.063c.613.681 1.743.247 1.743-.669V53h3a3 3 0 0 0 3-3V32a3 3 0 0 0-3-3z" clip-rule="evenodd"/><path fill="#CC3D00" d="m51 53 .743-.669-.298-.331H51zm7.257 8.063-.744.669zM60 53v-1h-1v1zM30 32a2 2 0 0 1 2-2v-2a4 4 0 0 0-4 4zm0 18V32h-2v18zm2 2a2 2 0 0 1-2-2h-2a4 4 0 0 0 4 4zm19 0H32v2h19zm8 8.394-7.257-8.063-1.486 1.338 7.256 8.063zm0 0-1.487 1.338C58.74 63.094 61 62.227 61 60.394zM59 53v7.394h2V53zm4-1h-3v2h3zm2-2a2 2 0 0 1-2 2v2a4 4 0 0 0 4-4zm0-18v18h2V32zm-2-2a2 2 0 0 1 2 2h2a4 4 0 0 0-4-4zm-31 0h31v-2H32z" mask="url(#b)"/><path fill="#fff" stroke="#CC3D00" d="M41.434 43.657a8.5 8.5 0 0 0 4.223-4.223 8.5 8.5 0 0 0 4.223 4.223 8.5 8.5 0 0 0-4.223 4.223 8.5 8.5 0 0 0-4.223-4.223ZM51.17 35.263l.073-.145.072.145a6.5 6.5 0 0 0 2.907 2.907l.145.073-.145.072a6.5 6.5 0 0 0-2.907 2.907l-.072.145-.073-.145a6.5 6.5 0 0 0-2.907-2.907l-.145-.072.145-.073a6.5 6.5 0 0 0 2.907-2.907Z"/></svg>
\ No newline at end of file
diff --git a/app/client/packages/icons/src/index.ts b/app/client/packages/icons/src/index.ts
index 9bf0f1af21cf..628dfc25a4e2 100644
--- a/app/client/packages/icons/src/index.ts
+++ b/app/client/packages/icons/src/index.ts
@@ -55,3 +55,4 @@ export { SwitchIcon } from "./components/Icons/SwitchIcon";
 export { TableIcon } from "./components/Icons/TableIcon";
 export { ToolbarButtonsIcon } from "./components/Icons/ToolbarButtonsIcon";
 export { ZoneIcon } from "./components/Icons/ZoneIcon";
+export { AIAvatarCustomIcon } from "./components/CustomIcons/AIAvatarCustomIcon";
diff --git a/app/client/packages/icons/src/stories/CustomIcons.mdx b/app/client/packages/icons/src/stories/CustomIcons.mdx
new file mode 100644
index 000000000000..ac38a04a2945
--- /dev/null
+++ b/app/client/packages/icons/src/stories/CustomIcons.mdx
@@ -0,0 +1,19 @@
+import { Meta } from "@storybook/addon-docs";
+import { Flex } from "@appsmith/wds";
+import { AIAvatarCustomIcon } from "../components/CustomIcons/AIAvatarCustomIcon";
+
+<Meta title="Appsmith Icons/CustomIcons" />
+
+# CustomIcons
+
+Set of custom icons.
+
+export const Icons = () => {
+  return (
+    <Flex gap="spacing-4" wrap="wrap">
+      <AIAvatarCustomIcon />
+    </Flex>
+  );
+};
+
+<Icons />
diff --git a/app/client/packages/icons/src/utils/cleanup.ts b/app/client/packages/icons/src/utils/cleanup.ts
index 8deb1ed26f47..6d8f3d141820 100644
--- a/app/client/packages/icons/src/utils/cleanup.ts
+++ b/app/client/packages/icons/src/utils/cleanup.ts
@@ -1,11 +1,13 @@
 import fs from "fs-extra";
 
 async function cleanup() {
-  await fs.emptyDirSync("./src/icons/Icons");
-  await fs.emptyDirSync("./src/icons/Thumbnails");
-  await fs.emptyDirSync("./src/components/Icons");
-  await fs.emptyDirSync("./src/components/Thumbnails");
-  await fs.emptyDirSync("./src/stories");
+  await fs.emptyDir("./src/icons/Icons");
+  await fs.emptyDir("./src/icons/Thumbnails");
+  await fs.emptyDir("./src/icons/CustomIcons");
+  await fs.emptyDir("./src/components/Icons");
+  await fs.emptyDir("./src/components/Thumbnails");
+  await fs.emptyDir("./src/components/CustomIcons");
+  await fs.emptyDir("./src/stories");
   await fs.writeFile(`./src/index.ts`, "");
 }
 
diff --git a/app/client/packages/icons/src/utils/generateComponents.ts b/app/client/packages/icons/src/utils/generateComponents.ts
index ac773967ad80..25c1237f341c 100644
--- a/app/client/packages/icons/src/utils/generateComponents.ts
+++ b/app/client/packages/icons/src/utils/generateComponents.ts
@@ -2,12 +2,7 @@ import fg from "fast-glob";
 import type { PathLike } from "fs";
 import fs from "fs-extra";
 import path from "path";
-
-const createReactComponent = (name: string, svg: string) => {
-  return `import React from "react";
-export const ${name} = () => ${svg};
-`;
-};
+import { transform } from "@svgr/core";
 
 async function generateComponents() {
   const entries = await fg("./src/icons/**/*.svg");
@@ -29,11 +24,23 @@ async function generateComponents() {
         case "Thumbnails":
           name += "Thumbnail";
           break;
+        case "CustomIcons":
+          name += "CustomIcon";
+          break;
       }
 
       await fs.writeFile(
         `./src/components/${dir}/${name}.tsx`,
-        createReactComponent(name, file),
+        await transform(
+          file,
+          {
+            plugins: ["@svgr/plugin-jsx"],
+            typescript: true,
+            exportType: "named",
+            namedExport: name,
+          },
+          { componentName: name },
+        ),
         "utf8",
         function (err) {
           // eslint-disable-next-line no-console
diff --git a/app/client/packages/icons/src/utils/generateIndex.ts b/app/client/packages/icons/src/utils/generateIndex.ts
index 0ebf7adb7393..08a2071178df 100644
--- a/app/client/packages/icons/src/utils/generateIndex.ts
+++ b/app/client/packages/icons/src/utils/generateIndex.ts
@@ -8,6 +8,7 @@ const createImportListString = (name: string, dir: string) => {
 async function generateIndex() {
   await appendExports("Thumbnails");
   await appendExports("Icons");
+  await appendExports("CustomIcons");
 
   // eslint-disable-next-line no-console
   console.error(
@@ -31,8 +32,10 @@ async function appendExports(dir: string) {
     });
 
     await fs.appendFile(`./src/index.ts`, importList, "utf8", function (err) {
-      // eslint-disable-next-line no-console
-      if (err) return console.error(err);
+      if (err) {
+        // eslint-disable-next-line no-console
+        return console.error(err);
+      }
     });
   });
 }
diff --git a/app/client/packages/icons/src/utils/generateStories.ts b/app/client/packages/icons/src/utils/generateStories.ts
index 4aa09b947e45..cb47839119ef 100644
--- a/app/client/packages/icons/src/utils/generateStories.ts
+++ b/app/client/packages/icons/src/utils/generateStories.ts
@@ -45,6 +45,7 @@ async function generateStories() {
     "Icons",
     "Icon set for Entity Explorer Panel, which provides a visual representation of the widgets.",
   );
+  await generateStory("CustomIcons", "Set of custom icons.");
   // eslint-disable-next-line no-console
   console.error("\x1b[32mStories generation completed successfully!\x1b[0m");
 }
diff --git a/app/client/src/WidgetProvider/constants.ts b/app/client/src/WidgetProvider/constants.ts
index cb0837d60875..3183d918c0c1 100644
--- a/app/client/src/WidgetProvider/constants.ts
+++ b/app/client/src/WidgetProvider/constants.ts
@@ -11,6 +11,7 @@ import { WIDGET_STATIC_PROPS } from "constants/WidgetConstants";
 import type { Stylesheet } from "entities/AppTheming";
 import { omit } from "lodash";
 import moment from "moment";
+import type { SVGProps } from "react";
 import type { DerivedPropertiesMap } from "WidgetProvider/factory";
 import type { WidgetFeatures } from "utils/WidgetFeatures";
 import type { WidgetProps } from "../widgets/BaseWidget";
@@ -150,8 +151,8 @@ export interface WidgetMethods {
   getCanvasHeightOffset?: GetCanvasHeightOffset;
   getEditorCallouts?: GetEditorCallouts;
   getOneClickBindingConnectableWidgetConfig?: GetOneClickBindingConnectableWidgetConfig;
-  IconCmp?: () => JSX.Element;
-  ThumbnailCmp?: () => JSX.Element;
+  IconCmp?: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+  ThumbnailCmp?: (props: SVGProps<SVGSVGElement>) => JSX.Element;
 }
 
 type GetEditorCallouts = (props: WidgetProps) => WidgetCallout[];
diff --git a/app/client/src/layoutSystems/anvil/editor/canvasArenas/AnvilDragPreview/index.tsx b/app/client/src/layoutSystems/anvil/editor/canvasArenas/AnvilDragPreview/index.tsx
index 70a7776d29b3..ed4a97341967 100644
--- a/app/client/src/layoutSystems/anvil/editor/canvasArenas/AnvilDragPreview/index.tsx
+++ b/app/client/src/layoutSystems/anvil/editor/canvasArenas/AnvilDragPreview/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type SVGProps } from "react";
 import { createPortal } from "react-dom";
 import type { DragDetails } from "reducers/uiReducers/dragResizeReducer";
 import type { DraggedWidget } from "layoutSystems/anvil/utils/anvilTypes";
@@ -8,7 +8,7 @@ import memoize from "micro-memoize";
 
 interface DragPreviewConfig {
   displayName: string;
-  ThumbnailCmp?: () => JSX.Element;
+  ThumbnailCmp?: (props: SVGProps<SVGSVGElement>) => JSX.Element;
 }
 
 const getWidgetConfigsArray = memoize(() => {
diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx
index 8c53804ee798..312fadd18387 100644
--- a/app/client/src/widgets/BaseWidget.tsx
+++ b/app/client/src/widgets/BaseWidget.tsx
@@ -18,7 +18,7 @@ import type {
 import { RenderModes } from "constants/WidgetConstants";
 import { ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
 import type { SetterConfig, Stylesheet } from "entities/AppTheming";
-import type { Context, ReactNode, RefObject } from "react";
+import type { Context, ReactNode, RefObject, SVGProps } from "react";
 import { Component } from "react";
 import type {
   ModifyMetaWidgetPayload,
@@ -587,8 +587,8 @@ export interface WidgetCardProps {
   isBeta?: boolean;
   tags?: WidgetTags[];
   isSearchWildcard?: boolean;
-  IconCmp?: () => JSX.Element;
-  ThumbnailCmp?: () => JSX.Element;
+  IconCmp?: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+  ThumbnailCmp?: (props: SVGProps<SVGSVGElement>) => JSX.Element;
 }
 
 export const WidgetOperations = {
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 5f8a7a105b65..cafdbb43d8f0 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -12676,6 +12676,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "appsmith-icons@workspace:packages/icons"
   dependencies:
+    "@svgr/core": ^8.1.0
+    "@svgr/plugin-jsx": ^8.1.0
     fast-glob: ^3.3.2
     figmagic: ^4.5.13
     fs-extra: ^11.2.0
@@ -12857,7 +12859,7 @@ __metadata:
     cypress-wait-until: ^1.7.2
     cypress-xpath: ^1.6.0
     d3-geo: ^3.1.0
-    date-fns: 2.30.0
+    date-fns: ^4.1.0
     dayjs: ^1.10.6
     deep-diff: ^1.0.2
     diff: ^5.0.0
@@ -16326,7 +16328,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"date-fns@npm:2.30.0, date-fns@npm:^2.0.1, date-fns@npm:^2.24.0, date-fns@npm:^2.29.3":
+"date-fns@npm:^2.0.1, date-fns@npm:^2.24.0, date-fns@npm:^2.29.3":
   version: 2.30.0
   resolution: "date-fns@npm:2.30.0"
   dependencies:
@@ -16335,6 +16337,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "date-fns@npm:4.1.0"
+  checksum: fb681b242cccabed45494468f64282a7d375ea970e0adbcc5dcc92dcb7aba49b2081c2c9739d41bf71ce89ed68dd73bebfe06ca35129490704775d091895710b
+  languageName: node
+  linkType: hard
+
 "date-now@npm:^0.1.4":
   version: 0.1.4
   resolution: "date-now@npm:0.1.4"