diff --git a/client/package.json b/client/package.json
index f2054b530..fbed11fa2 100644
--- a/client/package.json
+++ b/client/package.json
@@ -78,6 +78,7 @@
     "chalk": "4",
     "number-precision": "^1.6.0",
     "react-player": "^2.11.0",
+    "remixicon-react": "^1.0.0",
     "tui-image-editor": "^3.15.3"
   }
 }
diff --git a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
index eaae8bfe5..232f89ca7 100644
--- a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
+++ b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
@@ -1,19 +1,29 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import type { IconDefinition } from "@fortawesome/free-regular-svg-icons";
-import { default as Popover } from "antd/es/popover";
-import { ActionType } from '@rc-component/trigger/lib/interface';
+// import type { IconDefinition as IconDefinitionBrands } from "@fortawesome/free-brands-svg-icons";
+import { Popover } from "antd";
+import { ActionType } from "@rc-component/trigger/lib/interface";
 import { TacoInput } from "components/tacoInput";
 import { Tooltip } from "components/toolTip";
 import { trans } from "i18n/design";
 import _ from "lodash";
-import { ReactNode, useEffect, useCallback, useMemo, useRef, useState } from "react";
+import {
+  ReactNode,
+  useEffect,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import Draggable from "react-draggable";
 import { default as List, ListRowProps } from "react-virtualized/dist/es/List";
 import styled from "styled-components";
 import { CloseIcon, SearchIcon } from "icons";
+import { ANTDICON } from "icons/antIcon";
+import { Divider } from "antd-mobile";
 
 const PopupContainer = styled.div`
-  width: 408px;
+  width: 580px;
   background: #ffffff;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   border-radius: 8px;
@@ -76,10 +86,11 @@ const IconList = styled(List)`
     background-color: rgba(139, 143, 163, 0.36);
   }
 `;
+
 const IconRow = styled.div`
   padding: 0 6px;
   display: flex;
-  align-items: center;
+  align-items: flex-start; /* Align items to the start to allow different heights */
   justify-content: space-between;
 
   &:last-child {
@@ -87,14 +98,16 @@ const IconRow = styled.div`
     justify-content: flex-start;
   }
 `;
+
 const IconItemContainer = styled.div`
-  width: 40px;
-  height: 40px;
+  width: 60px;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center; 
+  justify-content: flex-start; 
   cursor: pointer;
-  font-size: 20px;
+  font-size: 28px;
+  margin-bottom: 24px; 
 
   &:hover {
     border: 1px solid #315efb;
@@ -108,13 +121,41 @@ const IconItemContainer = styled.div`
   }
 `;
 
+const IconWrapper = styled.div`
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const IconKeyDisplay = styled.div`
+  font-size: 8px;
+  color: #8b8fa3;
+  margin-top: 4px; /* Space between the icon and the text */
+  text-align: center;
+  word-wrap: break-word; /* Ensure text wraps */
+  width: 100%; /* Ensure the container can grow */
+`;
+
 class Icon {
   readonly title: string;
-  constructor(readonly def: IconDefinition, readonly names: string[]) {
-    this.title = def.iconName.split("-").map(_.upperFirst).join(" ");
+  constructor(readonly def: IconDefinition | any, readonly names: string[]) {
+    if (def?.iconName) {
+      this.title = def.iconName.split("-").map(_.upperFirst).join(" ");
+    } else {
+      this.title = names[0].slice(5);
+      this.def = def;
+    }
   }
   getView() {
-    return <FontAwesomeIcon icon={this.def} style={{ width: "1em", height: "1em" }} />;
+    if (this.names[0]?.startsWith("antd/")) return this.def;
+    else
+      return (
+        <FontAwesomeIcon
+          icon={this.def}
+          style={{ width: "1em", height: "1em"}}
+        />
+      );
   }
 }
 
@@ -127,6 +168,7 @@ async function getAllIcons() {
   const [{ far }, { fas }] = await Promise.all([
     import("@fortawesome/free-regular-svg-icons"),
     import("@fortawesome/free-solid-svg-icons"),
+    // import("@fontawesome/free-brands-svg-icons"),
   ]);
   const ret: Record<string, Icon> = {};
   for (const [type, pack] of Object.entries({ solid: fas, regular: far })) {
@@ -144,6 +186,13 @@ async function getAllIcons() {
       }
     }
   }
+  //append ant icon
+  for (let key of Object.keys(ANTDICON)) {
+    ret["antd/" + key] = new Icon(
+      ANTDICON[key.toLowerCase() as keyof typeof ANTDICON],
+      ["antd/" + key]
+    );
+  }
   allIcons = ret;
   return ret;
 }
@@ -151,7 +200,11 @@ async function getAllIcons() {
 export const iconPrefix = "/icon:";
 
 export function removeQuote(value?: string) {
-  return value ? (value.startsWith('"') && value.endsWith('"') ? value.slice(1, -1) : value) : "";
+  return value
+    ? value.startsWith('"') && value.endsWith('"')
+      ? value.slice(1, -1)
+      : value
+    : "";
 }
 
 function getIconKey(value?: string) {
@@ -171,7 +224,8 @@ export function useIcon(value?: string) {
 function search(
   allIcons: Record<string, Icon>,
   searchText: string,
-  searchKeywords?: Record<string, string>
+  searchKeywords?: Record<string, string>,
+  IconType?: "OnlyAntd" | "All" | "default" | undefined
 ) {
   const tokens = searchText
     .toLowerCase()
@@ -182,6 +236,8 @@ function search(
       if (icon.names.length === 0) {
         return false;
       }
+      if (IconType === "OnlyAntd" && !key.startsWith("antd/")) return false;
+      if (IconType === "default" && key.startsWith("antd/")) return false;
       let text = icon.names
         .flatMap((name) => [name, searchKeywords?.[name]])
         .filter((t) => t)
@@ -198,43 +254,54 @@ const IconPopup = (props: {
   label?: ReactNode;
   onClose: () => void;
   searchKeywords?: Record<string, string>;
+  IconType?: "OnlyAntd" | "All" | "default" | undefined;
 }) => {
   const [searchText, setSearchText] = useState("");
   const [allIcons, setAllIcons] = useState<Record<string, Icon>>({});
   const searchResults = useMemo(
-    () => search(allIcons, searchText, props.searchKeywords),
+    () => search(allIcons, searchText, props.searchKeywords, props.IconType),
     [searchText, allIcons]
   );
   const onChangeRef = useRef(props.onChange);
   onChangeRef.current = props.onChange;
-  const onChangeIcon = useCallback((key: string) => onChangeRef.current(iconPrefix + key), []);
+  const onChangeIcon = useCallback(
+    (key: string) => onChangeRef.current(iconPrefix + key),
+    []
+  );
   const columnNum = 8;
 
   useEffect(() => {
     getAllIcons().then(setAllIcons);
   }, []);
 
+  const smallTextStyle = {
+    fontSize: '8px'
+  };
+
   const rowRenderer = useCallback(
     (p: ListRowProps) => (
       <IconRow key={p.key} style={p.style}>
-        {searchResults.slice(p.index * columnNum, (p.index + 1) * columnNum).map(([key, icon]) => (
-          <Tooltip
-            key={key}
-            title={icon.title}
-            placement="bottom"
-            align={{ offset: [0, -7, 0, 0] }}
-            destroyTooltipOnHide
-          >
-            <IconItemContainer
-              tabIndex={0}
-              onClick={() => {
-                onChangeIcon(key);
-              }}
+        {searchResults
+          .slice(p.index * columnNum, (p.index + 1) * columnNum)
+          .map(([key, icon]) => (
+            <Tooltip
+              key={key}
+              title={icon.title + ", Key: " + key}
+              placement="bottom"
+              align={{ offset: [0, -7, 0, 0] }}
+              destroyTooltipOnHide
             >
-              {icon.getView()}
-            </IconItemContainer>
-          </Tooltip>
-        ))}
+              <IconItemContainer
+                tabIndex={0}
+                onClick={() => {
+                  onChangeIcon(key);
+                }}
+              >
+                <IconWrapper>{icon.getView()}</IconWrapper>
+                <IconKeyDisplay>{key}</IconKeyDisplay>
+              </IconItemContainer>
+            </Tooltip>
+          ))}
       </IconRow>
     ),
     [searchResults, allIcons, onChangeIcon]
@@ -257,9 +324,9 @@ const IconPopup = (props: {
         </SearchDiv>
         <IconListWrapper>
           <IconList
-            width={394}
-            height={312}
-            rowHeight={48}
+            width={550}
+            height={400}
+            rowHeight={80}
             rowCount={Math.ceil(searchResults.length / columnNum)}
             rowRenderer={rowRenderer}
           />
@@ -279,6 +346,7 @@ export const IconSelectBase = (props: {
   leftOffset?: number;
   parent?: HTMLElement | null;
   searchKeywords?: Record<string, string>;
+  IconType?: "OnlyAntd" | "All" | "default" | undefined;
 }) => {
   const { setVisible, parent } = props;
   return (
@@ -290,7 +358,11 @@ export const IconSelectBase = (props: {
       onOpenChange={setVisible}
       getPopupContainer={parent ? () => parent : undefined}
       // hide the original background when dragging the popover is allowed
-      overlayInnerStyle={{ border: "none", boxShadow: "none", background: "transparent" }}
+      overlayInnerStyle={{
+        border: "none",
+        boxShadow: "none",
+        background: "transparent",
+      }}
       // when dragging is allowed, always re-location to avoid the popover exceeds the screen
       destroyTooltipOnHide
       content={
@@ -299,6 +371,7 @@ export const IconSelectBase = (props: {
           label={props.label}
           onClose={() => setVisible?.(false)}
           searchKeywords={props.searchKeywords}
+          IconType={props.IconType}
         />
       }
     >
@@ -312,6 +385,7 @@ export const IconSelect = (props: {
   label?: ReactNode;
   children?: ReactNode;
   searchKeywords?: Record<string, string>;
+  IconType?: "OnlyAntd" | "All" | "default" | undefined;
 }) => {
   const [visible, setVisible] = useState(false);
   return (
diff --git a/client/packages/lowcoder-design/src/icons/IconCompIcon.svg b/client/packages/lowcoder-design/src/icons/IconCompIcon.svg
new file mode 100644
index 000000000..ce549b56c
--- /dev/null
+++ b/client/packages/lowcoder-design/src/icons/IconCompIcon.svg
@@ -0,0 +1 @@
+<svg t="1691242418775" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15052" width="200" height="200"><path d="M497.6 263.9l-4.5-41.9-2.5-21-1.9-12.1c-0.7-4-1.9-7.9-2.9-11.7-9-30.9-28.6-56.9-53-74.1C408.3 86 379.2 77.4 350.6 78c-27.9 0.6-55.8 0.7-83.8 0.1l-41.9-1.4-20.9-1.1h-11c-3.7 0-7.3 0.6-11 0.9-29.3 3.4-58.1 17.4-79.1 40-10.4 11.3-19.1 24.5-25 39-5.9 14.5-9.2 30.1-10 45.9l-2.7 83.8-1.3 41.8-0.7 21 0.3 12.3c0.2 4.1 0.9 8.2 1.3 12.2 5 32.6 21.8 63.5 47 85.4 25.1 22 58.4 35 92.3 35.8 27.9 0.8 55.8 1.6 83.8 2.8l41.9 1.7 21 0.8 13.2-0.2c4.4-0.1 8.8-0.9 13.2-1.4 35-5.2 68.3-23.5 91.2-50.9 11.3-13.8 20.5-29.4 26.3-46.3 5.8-16.9 8.5-34.7 8.3-52.4-1-28-2.8-55.9-5.4-83.9z m-45.9-71.6l-0.8 8.9-2.5 20.9-4.5 41.9c-2.6 27.9-4.4 55.8-5.4 83.8-1 20.5-8.7 40-21.5 55.5-12.9 15.6-30.9 26.7-50.8 31.2-2.5 0.4-5 1.2-7.6 1.5l-7.7 0.8-20.9 0.9-41.9 1.7c-27.9 1.1-55.8 2-83.8 2.8-22 0.6-44.2-6.5-61.9-20.4-17.8-13.8-30.4-34.3-35.1-56.6-0.5-2.8-1.2-5.6-1.5-8.5l-0.8-8.6-0.7-20.9-1.3-41.9-2.7-83.8c-0.9-24.2 6.4-48.9 21.2-69.3 14.8-20.4 37.3-35.8 62.9-42.2 3.2-0.6 6.4-1.5 9.7-1.9L204 87l20.9-1.1 41.9-1.4c27.9-0.6 55.8-0.5 83.8 0.1 27.2 0.8 53.6 12.2 72 30.9 18.6 18.6 28.4 43.9 29.2 67.9-0.1 3 0.2 5.9-0.1 8.9zM497.6 709.6l-4.5-41.9-2.5-21-1.9-12.1c-0.7-4-1.9-7.9-2.9-11.7-9-30.9-28.6-56.9-53-74.1-24.5-17.2-53.6-25.8-82.2-25.2-27.9 0.6-55.8 0.7-83.8 0.1l-41.9-1.4-20.9-1.1h-11c-3.7 0-7.3 0.6-11 0.9-29.3 3.4-58.1 17.4-79.1 40-10.4 11.3-19.1 24.5-25 39-5.9 14.5-9.2 30.1-10 45.9l-2.7 83.8-1.3 41.9-0.7 21 0.3 12.3c0.2 4.1 0.9 8.2 1.3 12.2 5 32.6 21.8 63.5 47 85.4 25.1 22 58.4 35 92.3 35.8 27.9 0.8 55.8 1.6 83.8 2.8l41.9 1.7 21 0.8 13.2-0.2c4.4-0.1 8.8-0.9 13.2-1.4 35-5.2 68.3-23.5 91.2-50.9 11.3-13.8 20.5-29.4 26.3-46.3 5.8-16.9 8.5-34.7 8.3-52.4-1-28-2.8-55.9-5.4-83.9zM451.7 638l-0.8 8.9-2.5 20.9-4.5 41.9c-2.6 27.9-4.4 55.8-5.4 83.8-1 20.5-8.7 40-21.5 55.5-12.9 15.6-30.9 26.7-50.8 31.2-2.5 0.4-5 1.2-7.6 1.5l-7.7 0.8-20.9 0.9-42 1.6c-27.9 1.1-55.8 2-83.8 2.8-22 0.6-44.2-6.5-61.9-20.4-17.8-13.8-30.4-34.3-35.1-56.6-0.5-2.8-1.2-5.6-1.5-8.5l-0.8-8.6-0.7-20.9-1.3-41.9-2.7-83.8c-0.9-24.2 6.4-48.9 21.2-69.3 14.8-20.4 37.3-35.8 62.9-42.2 3.2-0.6 6.4-1.5 9.7-1.9l9.9-1.1 20.9-1.1 41.9-1.4c27.9-0.6 55.8-0.5 83.8 0.1 27.2 0.8 53.6 12.2 72 30.9 18.6 18.6 28.4 43.9 29.2 67.9 0 3 0.3 6 0 9zM521.3 372.5c5 32.6 21.8 63.5 47 85.4 25.1 22 58.4 35 92.3 35.8 27.9 0.8 55.8 1.6 83.8 2.8l41.9 1.7 21 0.8 13.2-0.2c4.4-0.1 8.8-0.9 13.2-1.4 35-5.2 68.3-23.5 91.2-50.9 11.3-13.8 20.5-29.4 26.3-46.3 5.8-16.9 8.5-34.7 8.3-52.4-1-27.9-2.8-55.8-5.4-83.8l-4.5-41.9-2.5-21L945 189c-0.7-4-1.9-7.9-2.9-11.7-9-30.9-28.6-56.9-53-74.1C864.7 86 835.6 77.4 806.9 78c-27.9 0.6-55.8 0.7-83.8 0.1l-41.9-1.4-20.9-1.1h-11c-3.7 0-7.3 0.6-11 0.9-29.3 3.4-58.1 17.4-79.1 40-10.4 11.3-19.1 24.5-25 39-5.9 14.5-9.2 30.1-10 45.9l-2.7 83.8-1.3 41.9-0.7 21 0.3 12.3c0.3 3.9 1 8 1.5 12.1zM577.8 132c14.8-20.4 37.3-35.8 62.9-42.2 3.2-0.6 6.4-1.5 9.7-1.9l9.9-1.1 20.9-1.1 41.9-1.4c27.9-0.6 55.8-0.5 83.8 0.1 27.2 0.8 53.6 12.2 72 30.9 18.6 18.6 28.4 43.9 29.2 67.9-0.1 3 0.2 6-0.1 9l-0.8 8.9-2.5 20.9-4.5 41.9c-2.6 27.9-4.4 55.8-5.4 83.8-1 20.5-8.7 40-21.5 55.5-12.9 15.6-30.9 26.7-50.8 31.2-2.5 0.4-5 1.2-7.6 1.5l-7.7 0.8-20.9 0.9-41.9 1.7c-27.9 1.1-55.8 2-83.8 2.8-22 0.6-44.2-6.5-61.9-20.4-17.8-13.8-30.4-34.3-35.1-56.6-0.5-2.8-1.2-5.6-1.5-8.5l-0.8-8.6-0.7-20.9-1.3-41.9-2.7-83.8c-1-24.3 6.4-49 21.2-69.4zM954 709.6l-4.5-41.9-2.5-21-1.9-12.1c-0.7-4-1.9-7.9-2.9-11.7-9-30.9-28.6-56.9-53-74.1-24.5-17.2-53.6-25.8-82.2-25.2-27.9 0.6-55.8 0.7-83.8 0.1l-41.9-1.4-20.9-1.1h-11c-3.7 0-7.3 0.6-11 0.9-29.3 3.4-58.1 17.4-79.1 40-10.4 11.3-19.1 24.5-25 39-5.9 14.5-9.2 30.1-10 45.9l-2.7 83.8-1.3 41.9-0.7 21 0.3 12.3c0.1 4.1 0.9 8.2 1.3 12.2 5 32.6 21.8 63.5 47 85.4 25.1 22 58.4 35 92.3 35.8 27.9 0.8 55.8 1.6 83.8 2.8l41.9 1.7 21 0.8 13.2-0.2c4.4-0.1 8.8-0.9 13.2-1.4 35-5.2 68.3-23.5 91.2-50.9 11.3-13.8 20.5-29.4 26.3-46.3 5.8-16.9 8.5-34.7 8.3-52.4-1-28-2.8-55.9-5.4-83.9zM908.1 638l-0.8 8.9-2.5 20.9-4.5 41.9c-2.6 27.9-4.4 55.8-5.4 83.8-1 20.5-8.7 40-21.5 55.5-12.9 15.6-30.9 26.7-50.8 31.2-2.5 0.4-5 1.2-7.6 1.5l-7.7 0.8-20.9 0.9-41.9 1.7c-27.9 1.1-55.8 2-83.8 2.8-22 0.6-44.2-6.5-61.9-20.4-17.8-13.8-30.4-34.3-35.1-56.6-0.5-2.8-1.2-5.6-1.5-8.5l-0.8-8.6-0.7-20.9-1.3-41.9-2.7-83.8c-0.9-24.2 6.4-48.9 21.2-69.3 14.8-20.4 37.3-35.8 62.9-42.2 3.2-0.6 6.4-1.5 9.7-1.9l9.9-1.1 20.9-1.1 41.9-1.4c27.9-0.6 55.8-0.5 83.8 0.1 27.2 0.8 53.6 12.2 72 30.9 18.6 18.6 28.4 43.9 29.2 67.9-0.1 2.9 0.1 5.9-0.1 8.9z" fill="#d7d9e0" p-id="15053"></path></svg>
\ No newline at end of file
diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
index e9d141765..1862d85ae 100644
--- a/client/packages/lowcoder-design/src/icons/index.ts
+++ b/client/packages/lowcoder-design/src/icons/index.ts
@@ -280,6 +280,7 @@ export { ReactComponent as SignatureIcon } from "./icon-signature.svg";
 export { ReactComponent as ManualIcon } from "./icon-manual.svg";
 export { ReactComponent as WarnIcon } from "./icon-warn.svg";
 export { ReactComponent as SyncManualIcon } from "./icon-sync-manual.svg";
+export { ReactComponent as IconCompIcon } from "icons/IconCompIcon.svg";
 export { ReactComponent as DangerIcon } from "./icon-danger.svg";
 export { ReactComponent as TableMinusIcon } from "./icon-table-minus.svg";
 export { ReactComponent as TablePlusIcon } from "./icon-table-plus.svg";
@@ -614,4 +615,5 @@ export { ReactComponent as MentionIcon } from "./icon-mention-comp.svg";
 export { ReactComponent as AutoCompleteCompIcon } from "./icon-autocomplete-comp.svg";
 export { ReactComponent as WidthIcon } from "./icon-width.svg";
 export { ReactComponent as ResponsiveLayoutCompIcon } from "./remix/layout-column-line.svg"; // Closest match for responsive layout component
-export { ReactComponent as TextSizeIcon } from "./icon-text-size.svg"; */
\ No newline at end of file
+export { ReactComponent as TextSizeIcon } from "./icon-text-size.svg"; */
+
diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
index 1e8e50789..addc573f8 100644
--- a/client/packages/lowcoder/package.json
+++ b/client/packages/lowcoder/package.json
@@ -6,7 +6,7 @@
   "main": "src/index.sdk.ts",
   "types": "src/index.sdk.ts",
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
+    "@ant-design/icons": "^5.3.0",
     "@codemirror/autocomplete": "^6.11.1",
     "@codemirror/commands": "^6.3.2",
     "@codemirror/lang-css": "^6.2.1",
@@ -19,9 +19,10 @@
     "@dnd-kit/modifiers": "^5.0.0",
     "@dnd-kit/sortable": "^6.0.0",
     "@dnd-kit/utilities": "^3.1.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "latest",
     "@manaflair/redux-batch": "^1.0.0",
     "@rjsf/antd": "^5.15.1",
diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
new file mode 100644
index 000000000..d2db61596
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
@@ -0,0 +1,146 @@
+import { useEffect, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import { RecordConstructorToView } from "lowcoder-core";
+import { styleControl } from "comps/controls/styleControl";
+import _ from "lodash";
+import {
+  IconStyle,
+  IconStyleType,
+  heightCalculator,
+  widthCalculator,
+} from "comps/controls/styleControlConstants";
+import { UICompBuilder } from "comps/generators/uiCompBuilder";
+import { withDefault } from "../generators";
+import {
+  NameConfigHidden,
+  withExposingConfigs,
+} from "comps/generators/withExposing";
+import { Section, sectionNames } from "lowcoder-design";
+import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { trans } from "i18n";
+import { NumberControl } from "comps/controls/codeControl";
+import { IconControl } from "comps/controls/iconControl";
+import ReactResizeDetector from "react-resize-detector";
+import { AutoHeightControl } from "../controls/autoHeightControl";
+import {
+  clickEvent,
+  eventHandlerControl,
+} from "../controls/eventHandlerControl";
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
+const Container = styled.div<{ $style: IconStyleType | undefined }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${(props) => props.$style && css`
+    height: calc(100% - ${props.$style.margin});
+    width: calc(100% - ${props.$style.margin});
+    padding: ${props.$style.padding};
+    margin: ${props.$style.margin};
+    border: ${props.$style.borderWidth} solid ${props.$style.border};
+    border-radius: ${props.$style.radius};
+    background: ${props.$style.background};
+    svg {
+      max-width: ${widthCalculator(props.$style.margin)};
+      max-height: ${heightCalculator(props.$style.margin)};
+      color: ${props.$style.fill};
+      object-fit: contain;
+      pointer-events: auto;
+    }
+  `}
+`;
+
+const EventOptions = [clickEvent] as const;
+
+const childrenMap = {
+  style: styleControl(IconStyle),
+  icon: withDefault(IconControl, "/icon:antd/homefilled"),
+  autoHeight: withDefault(AutoHeightControl, "auto"),
+  iconSize: withDefault(NumberControl, 20),
+  onEvent: eventHandlerControl(EventOptions),
+};
+
+const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
+  const conRef = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    if (height && width) {
+      onResize();
+    }
+  }, [height, width]);
+
+  const onResize = () => {
+    const container = conRef.current;
+    setWidth(container?.clientWidth ?? 0);
+    setHeight(container?.clientHeight ?? 0);
+  };
+
+  return (
+    <ReactResizeDetector onResize={onResize}>
+      <Container
+        ref={conRef}
+        $style={props.style}
+        style={{
+          fontSize: props.autoHeight
+            ? `${height < width ? height : width}px`
+            : props.iconSize,
+          background: props.style.background,
+        }}
+        onClick={() => props.onEvent("click")}
+      >
+        {props.icon}  
+      </Container>
+    </ReactResizeDetector>
+  );
+};
+
+let IconBasicComp = (function () {
+  return new UICompBuilder(childrenMap, (props) => <IconView {...props} />)
+    .setPropertyViewFn((children) => (
+      <>
+        <Section name={sectionNames.basic}>
+          {children.icon.propertyView({
+            label: trans("iconComp.icon"),
+            IconType: "All",
+          })}
+          
+        </Section> 
+
+        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {hiddenPropertyView(children)}
+          </Section>
+        )}
+
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <><Section name={sectionNames.layout}>
+            {children.autoHeight.propertyView({
+            label: trans("iconComp.autoSize"),
+          })}
+            {!children.autoHeight.getView() &&
+            children.iconSize.propertyView({
+              label: trans("iconComp.iconSize"),
+            })}
+          </Section><Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section></>
+        )}
+      </>
+    ))
+    .build();
+})();
+
+IconBasicComp = class extends IconBasicComp {
+  override autoHeight(): boolean {
+    return false;
+  }
+};
+
+export const IconComp = withExposingConfigs(IconBasicComp, [
+  NameConfigHidden,
+]);
diff --git a/client/packages/lowcoder/src/comps/controls/controlParams.tsx b/client/packages/lowcoder/src/comps/controls/controlParams.tsx
index 0ee9de8e6..7b84c439d 100644
--- a/client/packages/lowcoder/src/comps/controls/controlParams.tsx
+++ b/client/packages/lowcoder/src/comps/controls/controlParams.tsx
@@ -18,6 +18,7 @@ export interface ControlParams extends CodeEditorControlParams {
   preInputNode?: ReactNode;
   childrenWrapperStyle?: CSSProperties;
   extraChildren?: ReactNode;
+  IconType?: "OnlyAntd" | "All" | "default" | undefined;
 }
 
 export interface ControlType {
diff --git a/client/packages/lowcoder/src/comps/controls/dropdownControl.tsx b/client/packages/lowcoder/src/comps/controls/dropdownControl.tsx
index 01b7b832c..ea8e6f006 100644
--- a/client/packages/lowcoder/src/comps/controls/dropdownControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/dropdownControl.tsx
@@ -28,6 +28,7 @@ interface DropdownControlParams<T extends OptionsType> extends ControlParams {
   showSearch?: boolean;
   dropdownStyle?: React.CSSProperties;
   labelStyle?: React.CSSProperties;
+  IconType?: "OnlyAntd" | "All" | "default" | undefined;
 }
 
 interface DropdownPropertyViewProps<T extends OptionsType>
diff --git a/client/packages/lowcoder/src/comps/controls/iconControl.tsx b/client/packages/lowcoder/src/comps/controls/iconControl.tsx
index 26a768b4e..ca954b47d 100644
--- a/client/packages/lowcoder/src/comps/controls/iconControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/iconControl.tsx
@@ -75,6 +75,7 @@ const IconPicker = (props: {
   value: string;
   onChange: (value: string) => void;
   label?: ReactNode;
+  IconType?: "OnlyAntd" | "All" | "default" | undefined;
 }) => {
   const icon = useIcon(props.value);
   return (
@@ -82,6 +83,7 @@ const IconPicker = (props: {
       onChange={props.onChange}
       label={props.label}
       searchKeywords={i18nObjs.iconSearchKeywords}
+      IconType={props.IconType}
     >
       <TacoButton style={{ width: "100%" }}>
         {icon ? (
@@ -251,7 +253,7 @@ export class IconControl extends AbstractComp<ReactNode, string, Node<ValueAndMs
         { filterText: params.label },
         <Wrapper>
           <SwitchWrapper label={params.label} tooltip={params.tooltip} lastNode={jsContent} />
-          {this.useCodeEditor && <IconCodeEditor codeControl={this.codeControl} params={params} />}
+          {this.useCodeEditor && <IconCodeEditor codeControl={this.codeControl} params={params}/>}
         </Wrapper>
       );
     }
@@ -262,6 +264,7 @@ export class IconControl extends AbstractComp<ReactNode, string, Node<ValueAndMs
             value={this.codeControl.getView()}
             onChange={(x) => this.dispatchChangeValueAction(x)}
             label={params.label}
+            IconType={params.IconType}
           />
         )}
       </ControlPropertyViewWrapper>
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index a9749121f..11f4e012d 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1078,6 +1078,16 @@ export const NavigationStyle = [
 
 export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const;
 
+export const IconStyle = [
+  getStaticBackground("#00000000"),
+  getStaticBorder("#00000000"), 
+  FILL,
+  RADIUS,
+  BORDER_WIDTH,
+  MARGIN, 
+  PADDING] as const;
+
+
 export const ListViewStyle = BG_STATIC_BORDER_RADIUS;
 
 export const JsonSchemaFormStyle = BG_STATIC_BORDER_RADIUS;
@@ -1331,6 +1341,7 @@ export type DividerStyleType = StyleConfigType<typeof DividerStyle>;
 export type ProgressStyleType = StyleConfigType<typeof ProgressStyle>;
 export type NavigationStyleType = StyleConfigType<typeof NavigationStyle>;
 export type ImageStyleType = StyleConfigType<typeof ImageStyle>;
+export type IconStyleType = StyleConfigType<typeof IconStyle>;
 export type ListViewStyleType = StyleConfigType<typeof ListViewStyle>;
 export type JsonSchemaFormStyleType = StyleConfigType<typeof JsonSchemaFormStyle>;
 export type TreeSelectStyleType = StyleConfigType<typeof TreeSelectStyle>;
diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx
index 0de77fadc..aebaae3bf 100644
--- a/client/packages/lowcoder/src/comps/index.tsx
+++ b/client/packages/lowcoder/src/comps/index.tsx
@@ -67,6 +67,7 @@ import { VideoMeetingStreamComp } from "./comps/meetingComp/videoMeetingStreamCo
 import { ControlButton } from "./comps/meetingComp/controlButton";
 import { VideoMeetingControllerComp } from "./comps/meetingComp/videoMeetingControllerComp";
 import { VideoSharingStreamComp } from "./comps/meetingComp/videoSharingStreamComp";
+import { IconComp } from "./comps/iconComp";
 
 import {
   AudioCompIcon,
@@ -132,6 +133,7 @@ import {
   AutoCompleteCompIcon,
   ResponsiveLayoutCompIcon,
   MermaidIcon,
+  IconCompIcon,
 } from "lowcoder-design";
 
 type Registry = {
@@ -915,6 +917,19 @@ var uiCompMap: Registry = {
       h: 40,
     },
   },
+  icon: {
+    name: trans("uiComp.iconCompName"),
+    enName: "icon",
+    description: trans("uiComp.iconCompDesc"),
+    categories: ["multimedia"],
+    icon: IconCompIcon,
+    keywords: trans("uiComp.iconCompKeywords"),
+    comp: IconComp,
+    layoutInfo: {
+      w: 2,
+      h: 10,
+    },
+  },
   imageEditor: {
     name: trans("uiComp.imageEditorCompName"),
     enName: "Image Editor",
diff --git a/client/packages/lowcoder/src/comps/uiCompRegistry.ts b/client/packages/lowcoder/src/comps/uiCompRegistry.ts
index f015a46db..c74893811 100644
--- a/client/packages/lowcoder/src/comps/uiCompRegistry.ts
+++ b/client/packages/lowcoder/src/comps/uiCompRegistry.ts
@@ -119,12 +119,14 @@ export type UICompType =
   | "calendar"
   | "signature"
   | "jsonLottie" //Added By Aqib Mirza
+  | "icon" //Added By Mousheng
   | "timeline" //Added By Mousheng
   | "comment" //Added By Mousheng
   | "mention" //Added By Mousheng
   | "autocomplete" //Added By Mousheng
   | "responsiveLayout";
 
+
 export const uiCompRegistry = {} as Record<UICompType | string, UICompManifest>;
 
 export function registerComp(
diff --git a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
index 2820e14c9..5d69824e3 100644
--- a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
@@ -41,7 +41,9 @@ import {
   CommentIcon,
   MentionIcon,
   AutoCompleteCompIcon,
+  IconCompIcon,
   ResponsiveLayoutCompIcon,
+
 } from "lowcoder-design";
 
 export const CompStateIcon: {
@@ -116,5 +118,7 @@ export const CompStateIcon: {
   comment: <CommentIcon />,
   mention: <MentionIcon />,
   autocomplete: <AutoCompleteCompIcon />,
+  icon: <IconCompIcon />,
   responsiveLayout: <ResponsiveLayoutCompIcon />,
+
 };
diff --git a/client/yarn.lock b/client/yarn.lock
index 95b2481e6..385109146 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -63,15 +63,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ant-design/colors@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "@ant-design/colors@npm:6.0.0"
-  dependencies:
-    "@ctrl/tinycolor": ^3.4.0
-  checksum: 55110ac8a3353f3ec2d2fdee6ffb841967dd75f3783ef4e68c22731e042606bc5b3c3febb6cd20aed3f14585729ce8eddf75b531c703c06a2e95b8569861bb47
-  languageName: node
-  linkType: hard
-
 "@ant-design/colors@npm:^7.0.0, @ant-design/colors@npm:^7.0.2":
   version: 7.0.2
   resolution: "@ant-design/colors@npm:7.0.2"
@@ -106,36 +97,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ant-design/icons@npm:^4.7.0":
-  version: 4.8.1
-  resolution: "@ant-design/icons@npm:4.8.1"
+"@ant-design/icons-svg@npm:^4.4.0":
+  version: 4.4.2
+  resolution: "@ant-design/icons-svg@npm:4.4.2"
+  checksum: c66cda4533ec2f86162a9adda04be2aba5674d5c758ba886bd9d8de89dc45473ef3124eb755b4cfbd09121d3bdc34e075ee931e47dd0f8a7fdc01be0cb3d6c40
+  languageName: node
+  linkType: hard
+
+"@ant-design/icons@npm:^5.2.6":
+  version: 5.2.6
+  resolution: "@ant-design/icons@npm:5.2.6"
   dependencies:
-    "@ant-design/colors": ^6.0.0
+    "@ant-design/colors": ^7.0.0
     "@ant-design/icons-svg": ^4.3.0
     "@babel/runtime": ^7.11.2
     classnames: ^2.2.6
-    lodash: ^4.17.15
-    rc-util: ^5.9.4
+    rc-util: ^5.31.1
   peerDependencies:
     react: ">=16.0.0"
     react-dom: ">=16.0.0"
-  checksum: abd3603ea951983a8bfa7f4c7e6fcc787ccdc4804faa8bb8641b6904a95cf5fc04753cf636a6c5b5b798f371f4075fddae29684779bb16e2a025b727ab2c8ad3
+  checksum: 2f571699b1903383cd09faa78e4cce34973debb0e7ec6223b9d9a0a6ab2b2f0c876072db62bbd4e6a45e864df5447343315e066abeffaf58aa5b97df3acc89f1
   languageName: node
   linkType: hard
 
-"@ant-design/icons@npm:^5.2.6":
-  version: 5.2.6
-  resolution: "@ant-design/icons@npm:5.2.6"
+"@ant-design/icons@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "@ant-design/icons@npm:5.3.0"
   dependencies:
     "@ant-design/colors": ^7.0.0
-    "@ant-design/icons-svg": ^4.3.0
+    "@ant-design/icons-svg": ^4.4.0
     "@babel/runtime": ^7.11.2
     classnames: ^2.2.6
     rc-util: ^5.31.1
   peerDependencies:
     react: ">=16.0.0"
     react-dom: ">=16.0.0"
-  checksum: 2f571699b1903383cd09faa78e4cce34973debb0e7ec6223b9d9a0a6ab2b2f0c876072db62bbd4e6a45e864df5447343315e066abeffaf58aa5b97df3acc89f1
+  checksum: 6b58bb057f0c92b5d1fc5bd062119e070ac0ef86979c011dbae657b54e51bdfc4efd1d7f52cd3e0e05a8f82c81847f86bb4bb7f797154b5fcfc750f4758b4a45
   languageName: node
   linkType: hard
 
@@ -1946,7 +1943,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ctrl/tinycolor@npm:^3.4.0, @ctrl/tinycolor@npm:^3.6.1":
+"@ctrl/tinycolor@npm:^3.6.1":
   version: 3.6.1
   resolution: "@ctrl/tinycolor@npm:3.6.1"
   checksum: cefec6fcaaa3eb8ddf193f981e097dccf63b97b93b1e861cb18c645654824c831a568f444996e15ee509f255658ed82fba11c5365494a6e25b9b12ac454099e0
@@ -2497,7 +2494,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fortawesome/fontawesome-svg-core@npm:^6.4.0":
+"@fortawesome/fontawesome-svg-core@npm:^6.5.1":
   version: 6.5.1
   resolution: "@fortawesome/fontawesome-svg-core@npm:6.5.1"
   dependencies:
@@ -2506,7 +2503,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fortawesome/free-regular-svg-icons@npm:^6.4.0":
+"@fortawesome/free-brands-svg-icons@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@fortawesome/free-brands-svg-icons@npm:6.5.1"
+  dependencies:
+    "@fortawesome/fontawesome-common-types": 6.5.1
+  checksum: c29f8a9ad9886c0733d3616b5ea05b08b4943c1b5231c73f31a07e7df36c337e5a51cfe7cc610e623cb2b4a0607e3f82a8a3f46107c4347aa653784489672314
+  languageName: node
+  linkType: hard
+
+"@fortawesome/free-regular-svg-icons@npm:^6.5.1":
   version: 6.5.1
   resolution: "@fortawesome/free-regular-svg-icons@npm:6.5.1"
   dependencies:
@@ -2515,7 +2521,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fortawesome/free-solid-svg-icons@npm:^6.4.0":
+"@fortawesome/free-solid-svg-icons@npm:^6.5.1":
   version: 6.5.1
   resolution: "@fortawesome/free-solid-svg-icons@npm:6.5.1"
   dependencies:
@@ -11964,6 +11970,7 @@ __metadata:
     number-precision: ^1.6.0
     prettier: ^3.1.0
     react-player: ^2.11.0
+    remixicon-react: ^1.0.0
     rimraf: ^3.0.2
     rollup: ^2.79.0
     shelljs: ^0.8.5
@@ -12007,7 +12014,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "lowcoder@workspace:packages/lowcoder"
   dependencies:
-    "@ant-design/icons": ^4.7.0
+    "@ant-design/icons": ^5.3.0
     "@codemirror/autocomplete": ^6.11.1
     "@codemirror/commands": ^6.3.2
     "@codemirror/lang-css": ^6.2.1
@@ -12020,9 +12027,10 @@ __metadata:
     "@dnd-kit/modifiers": ^5.0.0
     "@dnd-kit/sortable": ^6.0.0
     "@dnd-kit/utilities": ^3.1.0
-    "@fortawesome/fontawesome-svg-core": ^6.4.0
-    "@fortawesome/free-regular-svg-icons": ^6.4.0
-    "@fortawesome/free-solid-svg-icons": ^6.4.0
+    "@fortawesome/fontawesome-svg-core": ^6.5.1
+    "@fortawesome/free-brands-svg-icons": ^6.5.1
+    "@fortawesome/free-regular-svg-icons": ^6.5.1
+    "@fortawesome/free-solid-svg-icons": ^6.5.1
     "@fortawesome/react-fontawesome": latest
     "@manaflair/redux-batch": ^1.0.0
     "@rjsf/antd": ^5.15.1
@@ -14751,7 +14759,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-util@npm:^5.0.1, rc-util@npm:^5.16.1, rc-util@npm:^5.17.0, rc-util@npm:^5.18.1, rc-util@npm:^5.19.2, rc-util@npm:^5.2.0, rc-util@npm:^5.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.24.4, rc-util@npm:^5.25.2, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.28.0, rc-util@npm:^5.30.0, rc-util@npm:^5.31.1, rc-util@npm:^5.32.2, rc-util@npm:^5.34.1, rc-util@npm:^5.35.0, rc-util@npm:^5.36.0, rc-util@npm:^5.37.0, rc-util@npm:^5.38.0, rc-util@npm:^5.38.1, rc-util@npm:^5.8.0, rc-util@npm:^5.9.4":
+"rc-util@npm:^5.0.1, rc-util@npm:^5.16.1, rc-util@npm:^5.17.0, rc-util@npm:^5.18.1, rc-util@npm:^5.19.2, rc-util@npm:^5.2.0, rc-util@npm:^5.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.24.4, rc-util@npm:^5.25.2, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.28.0, rc-util@npm:^5.30.0, rc-util@npm:^5.31.1, rc-util@npm:^5.32.2, rc-util@npm:^5.34.1, rc-util@npm:^5.35.0, rc-util@npm:^5.36.0, rc-util@npm:^5.37.0, rc-util@npm:^5.38.0, rc-util@npm:^5.38.1, rc-util@npm:^5.8.0":
   version: 5.38.1
   resolution: "rc-util@npm:5.38.1"
   dependencies:
@@ -15578,6 +15586,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remixicon-react@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "remixicon-react@npm:1.0.0"
+  peerDependencies:
+    react: ">=0.14.0"
+  checksum: be7abfb3558c9ed18ccfff5a28bd66dbee4207887682ae7a00c697e6051eadecad0da83f1e83910ed6ddebe7f2ab73e488f0f4c604897605bbb3d8f519f416ed
+  languageName: node
+  linkType: hard
+
 "request-promise-core@npm:1.1.4":
   version: 1.1.4
   resolution: "request-promise-core@npm:1.1.4"