diff --git a/react-ui/src/components/IconSelector/CopyableIcon.tsx b/react-ui/src/components/IconSelector/CopyableIcon.tsx
new file mode 100644
index 0000000..371cba0
--- /dev/null
+++ b/react-ui/src/components/IconSelector/CopyableIcon.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import * as AntdIcons from '@ant-design/icons';
+import type { ThemeType } from './index';
+import styles from './style.less';
+
+const allIcons: {
+  [key: string]: any;
+} = AntdIcons;
+
+export interface CopyableIconProps {
+  name: string;
+  isNew: boolean;
+  theme: ThemeType;
+  justCopied: string | null;
+  onSelect: (type: string, text: string) => any;
+}
+
+const CopyableIcon: React.FC<CopyableIconProps> = ({
+  name,
+  justCopied,
+  onSelect,
+  theme,
+}) => {
+  const className = classNames({
+    copied: justCopied === name,
+    [theme]: !!theme,
+  });
+  return (
+    <li className={className}
+      onClick={() => {
+        if (onSelect) {
+          onSelect(theme, name);
+        }
+      }}>
+      <Tooltip title={name}>
+        {React.createElement(allIcons[name], { className: styles.anticon })}
+      </Tooltip>
+      {/* <span className={styles.anticonClass}>
+          <Badge dot={isNew}>{name}</Badge>
+        </span> */}
+    </li>
+  );
+};
+
+export default CopyableIcon;