Repository: pqoqubbw/icons
Pull request #133: Add panel icons and user round plus icon
Author: login: wzulfikar
Created: 2025-04-04T21:59:46Z | Merged: 2025-04-05T14:11:37Z

## I have read the [CONTRIBUTING.md](https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md) file.

YES

## I have run `yarn gen-cli` to generate the necessary files

YES

## What kind of change does this PR introduce?

Add new icons: panel-right-open, panel-left-open, panel-left-close, user-round-plus

https://github.com/user-attachments/assets/0e8429bd-d1a1-4ddd-8c54-43a5b71e34a9


Diff:
diff --git a/icons/index.ts b/icons/index.ts
index 77db1e46..97663b35 100644
--- a/icons/index.ts
+++ b/icons/index.ts
@@ -200,7 +200,7 @@ import { WindArrowDownIcon } from '@/icons/wind-arrow-down';
 import { CloudRainIcon } from '@/icons/cloud-rain';
 import { CloudRainWindIcon } from '@/icons/cloud-rain-wind';
 import { WavesIcon } from '@/icons/waves';
-import { WavesLadderIcon } from './waves-ladder';
+import { WavesLadderIcon } from '@/icons/waves-ladder';
 import { SquareArrowDownIcon } from '@/icons/square-arrow-down';
 import { SquareArrowLeftIcon } from '@/icons/square-arrow-left';
 import { SquareArrowUpIcon } from '@/icons/square-arrow-up';
@@ -245,6 +245,10 @@ import { LaughIcon } from '@/icons/laugh';
 import { AnnoyedIcon } from '@/icons/annoyed';
 import { MehIcon } from '@/icons/meh';
 import { HistoryIcon } from '@/icons/history';
+import { UserRoundPlusIcon } from '@/icons/user-round-plus';
+import { PanelLeftOpenIcon } from '@/icons/panel-left-open';
+import { PanelLeftCloseIcon } from '@/icons/panel-left-close';
+import { PanelRightOpenIcon } from '@/icons/panel-right-open';
 
 type IconListItem = {
   name: string;
@@ -2336,6 +2340,50 @@ const ICON_LIST: IconListItem[] = [
     icon: BoxesIcon,
     keywords: ['boxes', 'box', 'container', 'package', 'shipping'],
   },
+  {
+    name: 'user-round-plus',
+    icon: UserRoundPlusIcon,
+    keywords: [
+      'user',
+      'plus',
+      'add',
+      'create',
+      'new'
+    ],
+  },
+  {
+    name: 'panel-left-open',
+    icon: PanelLeftOpenIcon,
+    keywords: [
+      'panel',
+      'left',
+      'open',
+      'menu',
+      'navigation'
+    ],
+  },
+  {
+    name: 'panel-left-close',
+    icon: PanelLeftCloseIcon,
+    keywords: [
+      'panel',
+      'left',
+      'close',
+      'menu',
+      'navigation'
+    ],
+  },
+  {
+    name: 'panel-right-open',
+    icon: PanelRightOpenIcon,
+    keywords: [
+      'panel',
+      'right',
+      'open',
+      'menu',
+      'navigation'
+    ],
+  },
 ];
 
 export { ICON_LIST };
diff --git a/icons/panel-left-close.tsx b/icons/panel-left-close.tsx
new file mode 100644
index 00000000..d45f5904
--- /dev/null
+++ b/icons/panel-left-close.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import type { Transition, Variants } from 'motion/react';
+import { motion, useAnimation } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface PanelLeftCloseIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface PanelLeftCloseIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const defaultTransition: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const pathVariants: Variants = {
+  normal: { x: 0 },
+  animate: { x: [0, -1.5, 0] },
+};
+
+const PanelLeftCloseIcon = forwardRef<
+  PanelLeftCloseIconHandle,
+  PanelLeftCloseIconProps
+>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+  const controls = useAnimation();
+  const isControlledRef = useRef(false);
+
+  useImperativeHandle(ref, () => {
+    isControlledRef.current = true;
+    return {
+      startAnimation: () => controls.start('animate'),
+      stopAnimation: () => controls.start('normal'),
+    };
+  });
+
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) {
+        controls.start('animate');
+      } else {
+        onMouseEnter?.(e);
+      }
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) {
+        controls.start('normal');
+      } else {
+        onMouseLeave?.(e);
+      }
+    },
+    [controls, onMouseLeave]
+  );
+
+  return (
+    <div
+      className={cn(
+        `cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center`,
+        className
+      )}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M9 3v18" />
+        <motion.path
+          transition={defaultTransition}
+          variants={pathVariants}
+          animate={controls}
+          d="m16 15-3-3 3-3"
+        />
+      </svg>
+    </div>
+  );
+});
+
+PanelLeftCloseIcon.displayName = 'PanelLeftCloseIcon';
+
+export { PanelLeftCloseIcon };
diff --git a/icons/panel-left-open.tsx b/icons/panel-left-open.tsx
new file mode 100644
index 00000000..ad35f463
--- /dev/null
+++ b/icons/panel-left-open.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import type { Transition, Variants } from 'motion/react';
+import { motion, useAnimation } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface PanelLeftOpenIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface PanelLeftOpenIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const defaultTransition: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const pathVariants: Variants = {
+  normal: { x: 0 },
+  animate: { x: [0, 1.5, 0] },
+};
+
+const PanelLeftOpenIcon = forwardRef<
+  PanelLeftOpenIconHandle,
+  PanelLeftOpenIconProps
+>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+  const controls = useAnimation();
+  const isControlledRef = useRef(false);
+
+  useImperativeHandle(ref, () => {
+    isControlledRef.current = true;
+    return {
+      startAnimation: () => controls.start('animate'),
+      stopAnimation: () => controls.start('normal'),
+    };
+  });
+
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) {
+        controls.start('animate');
+      } else {
+        onMouseEnter?.(e);
+      }
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) {
+        controls.start('normal');
+      } else {
+        onMouseLeave?.(e);
+      }
+    },
+    [controls, onMouseLeave]
+  );
+
+  return (
+    <div
+      className={cn(
+        `cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center`,
+        className
+      )}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M9 3v18" />
+        <motion.path
+          transition={defaultTransition}
+          variants={pathVariants}
+          animate={controls}
+          d="m14 9 3 3-3 3"
+        />
+      </svg>
+    </div>
+  );
+});
+
+PanelLeftOpenIcon.displayName = 'PanelLeftOpenIcon';
+
+export { PanelLeftOpenIcon };
diff --git a/icons/panel-right-open.tsx b/icons/panel-right-open.tsx
new file mode 100644
index 00000000..dd9e0875
--- /dev/null
+++ b/icons/panel-right-open.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import type { Transition, Variants } from 'motion/react';
+import { motion, useAnimation } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface PanelRightOpenIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface PanelRightOpenIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const defaultTransition: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const pathVariants: Variants = {
+  normal: { x: 0 },
+  animate: { x: [0, -1.5, 0] },
+};
+
+const PanelRightOpenIcon = forwardRef<
+  PanelRightOpenIconHandle,
+  PanelRightOpenIconProps
+>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+  const controls = useAnimation();
+  const isControlledRef = useRef(false);
+
+  useImperativeHandle(ref, () => {
+    isControlledRef.current = true;
+    return {
+      startAnimation: () => controls.start('animate'),
+      stopAnimation: () => controls.start('normal'),
+    };
+  });
+
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) {
+        controls.start('animate');
+      } else {
+        onMouseEnter?.(e);
+      }
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) {
+        controls.start('normal');
+      } else {
+        onMouseLeave?.(e);
+      }
+    },
+    [controls, onMouseLeave]
+  );
+
+  return (
+    <div
+      className={cn(
+        `cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center`,
+        className
+      )}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M15 3v18" />
+        <motion.path
+          transition={defaultTransition}
+          variants={pathVariants}
+          animate={controls}
+          d="m10 15-3-3 3-3"
+        />
+      </svg>
+    </div>
+  );
+});
+
+PanelRightOpenIcon.displayName = 'PanelRightOpenIcon';
+
+export { PanelRightOpenIcon };
diff --git a/icons/user-round-plus.tsx b/icons/user-round-plus.tsx
new file mode 100644
index 00000000..5293e885
--- /dev/null
+++ b/icons/user-round-plus.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import type { Variants } from 'motion/react';
+import { motion, useAnimation } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface UserRoundPlusIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface UserRoundPlusIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const verticalBarVariants: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.3,
+      duration: 0.2,
+      opacity: { duration: 0.1, delay: 0.3 },
+    },
+  },
+};
+
+const horizontalBarVariants: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.6,
+      duration: 0.2,
+      opacity: { duration: 0.1, delay: 0.6 },
+    },
+  },
+};
+
+const UserRoundPlusIcon = forwardRef<UserRoundPlusIconHandle, UserRoundPlusIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start('animate'),
+        stopAnimation: () => controls.start('normal'),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+          controls.start('animate');
+        } else {
+          onMouseEnter?.(e);
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+          controls.start('normal');
+        } else {
+          onMouseLeave?.(e);
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(
+          `cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center`,
+          className
+        )}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <motion.svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          initial="normal"
+        >
+          <path d="M2 21a8 8 0 0 1 13.292-6" />
+          <circle cx="10" cy="8" r="5" />
+          <motion.path
+            d="M19 16v6"
+            variants={verticalBarVariants}
+            initial="normal"
+            animate={controls}
+          />
+          <motion.path
+            d="M22 19h-6"
+            variants={horizontalBarVariants}
+            initial="normal"
+            animate={controls}
+          />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+UserRoundPlusIcon.displayName = 'UserRoundPlusIcon';
+
+export { UserRoundPlusIcon };
diff --git a/public/c/panel-left-close.json b/public/c/panel-left-close.json
new file mode 100644
index 00000000..7f84cd43
--- /dev/null
+++ b/public/c/panel-left-close.json
@@ -0,0 +1,21 @@
+{
+  "name": "panel-left-close",
+  "type": "registry:ui",
+  "registryDependencies": [],
+  "dependencies": [
+    "motion"
+  ],
+  "devDependencies": [],
+  "tailwind": {},
+  "cssVars": {
+    "light": {},
+    "dark": {}
+  },
+  "files": [
+    {
+      "path": "panel-left-close.tsx",
+      "content": "'use client';\n\nimport type { Transition, Variants } from 'motion/react';\nimport { motion, useAnimation } from 'motion/react';\nimport type { HTMLAttributes } from 'react';\nimport { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface PanelLeftCloseIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface PanelLeftCloseIconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst defaultTransition: Transition = {\n  times: [0, 0.4, 1],\n  duration: 0.5,\n};\n\nconst pathVariants: Variants = {\n  normal: { x: 0 },\n  animate: { x: [0, -1.5, 0] },\n};\n\nconst PanelLeftCloseIcon = forwardRef<\n  PanelLeftCloseIconHandle,\n  PanelLeftCloseIconProps\n>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n  const controls = useAnimation();\n  const isControlledRef = useRef(false);\n\n  useImperativeHandle(ref, () => {\n    isControlledRef.current = true;\n    return {\n      startAnimation: () => controls.start('animate'),\n      stopAnimation: () => controls.start('normal'),\n    };\n  });\n\n  const handleMouseEnter = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!isControlledRef.current) {\n        controls.start('animate');\n      } else {\n        onMouseEnter?.(e);\n      }\n    },\n    [controls, onMouseEnter]\n  );\n\n  const handleMouseLeave = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!isControlledRef.current) {\n        controls.start('normal');\n      } else {\n        onMouseLeave?.(e);\n      }\n    },\n    [controls, onMouseLeave]\n  );\n\n  return (\n    <div\n      className={cn(\n        `cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center`,\n        className\n      )}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n        <path d=\"M9 3v18\" />\n        <motion.path\n          transition={defaultTransition}\n          variants={pathVariants}\n          animate={controls}\n          d=\"m16 15-3-3 3-3\"\n        />\n      </svg>\n    </div>\n  );\n});\n\nPanelLeftCloseIcon.displayName = 'PanelLeftCloseIcon';\n\nexport { PanelLeftCloseIcon };\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/public/c/panel-left-open.json b/public/c/panel-left-open.json
new file mode 100644
index 00000000..0fe2725c
--- /dev/null
+++ b/public/c/panel-left-open.json
@@ -0,0 +1,21 @@
+{
+  "name": "panel-left-open",
+  "type": "registry:ui",
+  "registryDependencies": [],
+  "dependencies": [
+    "motion"
+  ],
+  "devDependencies": [],
+  "tailwind": {},
+  "cssVars": {
+    "light": {},
+    "dark": {}
+  },
+  "files": [
+    {
+      "path": "panel-left-open.tsx",
+      "content": "'use client';\n\nimport type { Transition, Variants } from 'motion/react';\nimport { motion, useAnimation } from 'motion/react';\nimport type { HTMLAttributes } from 'react';\nimport { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface PanelLeftOpenIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface PanelLeftOpenIconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst defaultTransition: Transition = {\n  times: [0, 0.4, 1],\n  duration: 0.5,\n};\n\nconst pathVariants: Variants = {\n  normal: { x: 0 },\n  animate: { x: [0, 1.5, 0] },\n};\n\nconst PanelLeftOpenIcon = forwardRef<\n  PanelLeftOpenIconHandle,\n  PanelLeftOpenIconProps\n>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n  const controls = useAnimation();\n  const isControlledRef = useRef(false);\n\n  useImperativeHandle(ref, () => {\n    isControlledRef.current = true;\n    return {\n      startAnimation: () => controls.start('animate'),\n      stopAnimation: () => controls.start('normal'),\n    };\n  });\n\n  const handleMouseEnter = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!isControlledRef.current) {\n        controls.start('animate');\n      } else {\n        onMouseEnter?.(e);\n      }\n    },\n    [controls, onMouseEnter]\n  );\n\n  const handleMouseLeave = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!isControlledRef.current) {\n        controls.start('normal');\n      } else {\n        onMouseLeave?.(e);\n      }\n    },\n    [controls, onMouseLeave]\n  );\n\n  return (\n    <div\n      className={cn(\n        `cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center`,\n        className\n      )}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n        <path d=\"M9 3v18\" />\n        <motion.path\n          transition={defaultTransition}\n          variants={pathVariants}\n          animate={controls}\n          d=\"m14 9 3 3-3 3\"\n        />\n      </svg>\n    </div>\n  );\n});\n\nPanelLeftOpenIcon.displayName = 'PanelLeftOpenIcon';\n\nexport { PanelLeftOpenIcon };\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/public/c/panel-right-open.json b/public/c/panel-right-open.json
new file mode 100644
index 00000000..ad2e37bb
--- /dev/null
+++ b/public/c/panel-right-open.json
@@ -0,0 +1,21 @@
+{
+  "name": "panel-right-open",
+  "type": "registry:ui",
+  "registryDependencies": [],
+  "dependencies": [
+    "motion"
+  ],
+  "devDependencies": [],
+  "tailwind": {},
+  "cssVars": {
+    "light": {},
+    "dark": {}
+  },
+  "files": [
+    {
+      "path": "panel-right-open.tsx",
+      "content": "'use client';\n\nimport type { Transition, Variants } from 'motion/react';\nimport { motion, useAnimation } from 'motion/react';\nimport type { HTMLAttributes } from 'react';\nimport { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface PanelRightOpenIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface PanelRightOpenIconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst defaultTransition: Transition = {\n  times: [0, 0.4, 1],\n  duration: 0.5,\n};\n\nconst pathVariants: Variants = {\n  normal: { x: 0 },\n  animate: { x: [0, -1.5, 0] },\n};\n\nconst PanelRightOpenIcon = forwardRef<\n  PanelRightOpenIconHandle,\n  PanelRightOpenIconProps\n>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n  const controls = useAnimation();\n  const isControlledRef = useRef(false);\n\n  useImperativeHandle(ref, () => {\n    isControlledRef.current = true;\n    return {\n      startAnimation: () => controls.start('animate'),\n      stopAnimation: () => controls.start('normal'),\n    };\n  });\n\n  const handleMouseEnter = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!isControlledRef.current) {\n        controls.start('animate');\n      } else {\n        onMouseEnter?.(e);\n      }\n    },\n    [controls, onMouseEnter]\n  );\n\n  const handleMouseLeave = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!isControlledRef.current) {\n        controls.start('normal');\n      } else {\n        onMouseLeave?.(e);\n      }\n    },\n    [controls, onMouseLeave]\n  );\n\n  return (\n    <div\n      className={cn(\n        `cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center`,\n        className\n      )}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n        <path d=\"M15 3v18\" />\n        <motion.path\n          transition={defaultTransition}\n          variants={pathVariants}\n          animate={controls}\n          d=\"m10 15-3-3 3-3\"\n        />\n      </svg>\n    </div>\n  );\n});\n\nPanelRightOpenIcon.displayName = 'PanelRightOpenIcon';\n\nexport { PanelRightOpenIcon };\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/public/c/user-round-plus.json b/public/c/user-round-plus.json
new file mode 100644
index 00000000..d8ea345d
--- /dev/null
+++ b/public/c/user-round-plus.json
@@ -0,0 +1,21 @@
+{
+  "name": "user-round-plus",
+  "type": "registry:ui",
+  "registryDependencies": [],
+  "dependencies": [
+    "motion"
+  ],
+  "devDependencies": [],
+  "tailwind": {},
+  "cssVars": {
+    "light": {},
+    "dark": {}
+  },
+  "files": [
+    {
+      "path": "user-round-plus.tsx",
+      "content": "'use client';\n\nimport type { Variants } from 'motion/react';\nimport { motion, useAnimation } from 'motion/react';\nimport type { HTMLAttributes } from 'react';\nimport { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface UserRoundPlusIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface UserRoundPlusIconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst verticalBarVariants: Variants = {\n  normal: {\n    opacity: 1,\n  },\n  animate: {\n    opacity: [0, 1],\n    pathLength: [0, 1],\n    transition: {\n      delay: 0.3,\n      duration: 0.2,\n      opacity: { duration: 0.1, delay: 0.3 },\n    },\n  },\n};\n\nconst horizontalBarVariants: Variants = {\n  normal: {\n    opacity: 1,\n  },\n  animate: {\n    opacity: [0, 1],\n    pathLength: [0, 1],\n    transition: {\n      delay: 0.6,\n      duration: 0.2,\n      opacity: { duration: 0.1, delay: 0.6 },\n    },\n  },\n};\n\nconst UserRoundPlusIcon = forwardRef<UserRoundPlusIconHandle, UserRoundPlusIconProps>(\n  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n    const controls = useAnimation();\n    const isControlledRef = useRef(false);\n\n    useImperativeHandle(ref, () => {\n      isControlledRef.current = true;\n\n      return {\n        startAnimation: () => controls.start('animate'),\n        stopAnimation: () => controls.start('normal'),\n      };\n    });\n\n    const handleMouseEnter = useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (!isControlledRef.current) {\n          controls.start('animate');\n        } else {\n          onMouseEnter?.(e);\n        }\n      },\n      [controls, onMouseEnter]\n    );\n\n    const handleMouseLeave = useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (!isControlledRef.current) {\n          controls.start('normal');\n        } else {\n          onMouseLeave?.(e);\n        }\n      },\n      [controls, onMouseLeave]\n    );\n\n    return (\n      <div\n        className={cn(\n          `cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center`,\n          className\n        )}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        {...props}\n      >\n        <motion.svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width={size}\n          height={size}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          initial=\"normal\"\n        >\n          <path d=\"M19.914 11.105A7.298 7.298 0 0 0 20 10a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 1.202 0 32 32 0 0 0 .824-.738\" />\n          <circle cx=\"12\" cy=\"10\" r=\"3\" />\n          <motion.path\n            d=\"M16 18h6\"\n            variants={horizontalBarVariants}\n            initial=\"normal\"\n            animate={controls}\n          />\n          <motion.path\n            d=\"M19 15v6\"\n            variants={verticalBarVariants}\n            initial=\"normal\"\n            animate={controls}\n          />\n        </motion.svg>\n      </div>\n    );\n  }\n);\n\nUserRoundPlusIcon.displayName = 'UserRoundPlusIcon';\n\nexport { UserRoundPlusIcon };\n",
+      "type": "registry:ui"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/scripts/registry-components.ts b/scripts/registry-components.ts
index c9e16638..b622ec26 100644
--- a/scripts/registry-components.ts
+++ b/scripts/registry-components.ts
@@ -1523,5 +1523,29 @@ export const components: ComponentDefinition[] = [
     'path': path.join(__dirname, '../icons/history.tsx'),
     'registryDependencies': [],
     'dependencies': ['motion'],
+  },
+  {
+    'name': 'panel-left-close',
+    'path': path.join(__dirname, '../icons/panel-left-close.tsx'),
+    'registryDependencies': [],
+    'dependencies': ['motion'],
+  },
+  {
+    'name': 'panel-left-open',
+    'path': path.join(__dirname, '../icons/panel-left-open.tsx'),
+    'registryDependencies': [],
+    'dependencies': ['motion'],
+  },
+  {
+    'name': 'panel-right-open',
+    'path': path.join(__dirname, '../icons/panel-right-open.tsx'),
+    'registryDependencies': [],
+    'dependencies': ['motion'],
+  },
+  {
+    'name': 'user-round-plus',
+    'path': path.join(__dirname, '../icons/user-round-plus.tsx'),
+    'registryDependencies': [],
+    'dependencies': ['motion'],
   }
 ];
\ No newline at end of file


Reviews:
user: login: wzulfikar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T22:21:32Z
user: login: wzulfikar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T22:23:17Z
user: login: wzulfikar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T22:25:09Z
user: login: wzulfikar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T22:25:33Z
user: login: wzulfikar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T22:25:43Z
user: login: wzulfikar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T22:26:22Z
user: login: pqoqubbw
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-05T14:10:12Z
user: login: pqoqubbw
body: approved, thanks a lot!
state: APPROVED
author_association: OWNER
submitted_at: 2025-04-05T14:11:30Z
user: login: wzulfikar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-06T07:16:32Z

Review comments:
diff_hunk: @@ -200,7 +200,7 @@ import { WindArrowDownIcon } from '@/icons/wind-arrow-down';
 import { CloudRainIcon } from '@/icons/cloud-rain';
 import { CloudRainWindIcon } from '@/icons/cloud-rain-wind';
 import { WavesIcon } from '@/icons/waves';
-import { WavesLadderIcon } from './waves-ladder';
+import { WavesLadderIcon } from '@/icons/waves-ladder';
path: icons/index.ts
user: login: wzulfikar
body: Updated for consistency
created_at: 2025-04-04T22:21:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -2336,6 +2340,50 @@ const ICON_LIST: IconListItem[] = [
     icon: BoxesIcon,
     keywords: ['boxes', 'box', 'container', 'package', 'shipping'],
   },
+  {
+    name: 'user-round-plus',
+    icon: UserRoundPlusIcon,
+    keywords: [
+      'user',
+      'plus',
+      'add',
+      'create',
+      'new'
+    ],
+  },
+  {
+    name: 'panel-left-open',
+    icon: PanelLeftOpenIcon,
+    keywords: [
+      'panel',
+      'left',
+      'open',
+      'menu',
+      'navigation'
+    ],
+  },
+  {
+    name: 'panel-left-close',
+    icon: PanelLeftCloseIcon,
+    keywords: [
+      'panel',
+      'left',
+      'close',
+      'menu',
+      'navigation'
+    ],
+  },
+  {
+    name: 'panel-right-open',
+    icon: PanelRightOpenIcon,
+    keywords: [
+      'panel',
+      'right',
+      'open',
+      'menu',
+      'navigation'
+    ],
+  },
path: icons/index.ts
user: login: wzulfikar
body: I was wondering at first why the icons don't appear in the local dev after I ran `gen-cli`. Turns out I still need to add the new icons manually here. Do you think we should update the gen-cli script to add the new icons to this file?

I might be able to send PR separately for it.
created_at: 2025-04-04T22:23:17Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,101 @@
+'use client';
+
+import type { Transition, Variants } from 'motion/react';
+import { motion, useAnimation } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface PanelLeftCloseIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface PanelLeftCloseIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const defaultTransition: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const pathVariants: Variants = {
+  normal: { x: 0 },
+  animate: { x: [0, -1.5, 0] },
+};
+
+const PanelLeftCloseIcon = forwardRef<
+  PanelLeftCloseIconHandle,
+  PanelLeftCloseIconProps
+>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+  const controls = useAnimation();
+  const isControlledRef = useRef(false);
+
+  useImperativeHandle(ref, () => {
+    isControlledRef.current = true;
+    return {
+      startAnimation: () => controls.start('animate'),
+      stopAnimation: () => controls.start('normal'),
+    };
+  });
+
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) {
+        controls.start('animate');
+      } else {
+        onMouseEnter?.(e);
+      }
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) {
+        controls.start('normal');
+      } else {
+        onMouseLeave?.(e);
+      }
+    },
+    [controls, onMouseLeave]
+  );
+
+  return (
+    <div
+      className={cn(
+        `cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center`,
+        className
+      )}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M9 3v18" />
+        <motion.path
+          transition={defaultTransition}
+          variants={pathVariants}
+          animate={controls}
+          d="m16 15-3-3 3-3"
+        />
+      </svg>
path: icons/panel-left-close.tsx
user: login: wzulfikar
body: Mostly based on `square-chevron-left`. Replaced the svg and kept the same motion.

![image](https://github.com/user-attachments/assets/ee6a3315-aed8-42f1-abc1-97719ed2d025)

created_at: 2025-04-04T22:25:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,101 @@
+'use client';
+
+import type { Transition, Variants } from 'motion/react';
+import { motion, useAnimation } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface PanelLeftOpenIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface PanelLeftOpenIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const defaultTransition: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const pathVariants: Variants = {
+  normal: { x: 0 },
+  animate: { x: [0, 1.5, 0] },
+};
+
+const PanelLeftOpenIcon = forwardRef<
+  PanelLeftOpenIconHandle,
+  PanelLeftOpenIconProps
+>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+  const controls = useAnimation();
+  const isControlledRef = useRef(false);
+
+  useImperativeHandle(ref, () => {
+    isControlledRef.current = true;
+    return {
+      startAnimation: () => controls.start('animate'),
+      stopAnimation: () => controls.start('normal'),
+    };
+  });
+
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) {
+        controls.start('animate');
+      } else {
+        onMouseEnter?.(e);
+      }
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) {
+        controls.start('normal');
+      } else {
+        onMouseLeave?.(e);
+      }
+    },
+    [controls, onMouseLeave]
+  );
+
+  return (
+    <div
+      className={cn(
+        `cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center`,
+        className
+      )}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M9 3v18" />
+        <motion.path
+          transition={defaultTransition}
+          variants={pathVariants}
+          animate={controls}
+          d="m14 9 3 3-3 3"
+        />
+      </svg>
path: icons/panel-left-open.tsx
user: login: wzulfikar
body: Same approach as above
created_at: 2025-04-04T22:25:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,101 @@
+'use client';
+
+import type { Transition, Variants } from 'motion/react';
+import { motion, useAnimation } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface PanelRightOpenIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface PanelRightOpenIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const defaultTransition: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const pathVariants: Variants = {
+  normal: { x: 0 },
+  animate: { x: [0, -1.5, 0] },
+};
+
+const PanelRightOpenIcon = forwardRef<
+  PanelRightOpenIconHandle,
+  PanelRightOpenIconProps
+>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+  const controls = useAnimation();
+  const isControlledRef = useRef(false);
+
+  useImperativeHandle(ref, () => {
+    isControlledRef.current = true;
+    return {
+      startAnimation: () => controls.start('animate'),
+      stopAnimation: () => controls.start('normal'),
+    };
+  });
+
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) {
+        controls.start('animate');
+      } else {
+        onMouseEnter?.(e);
+      }
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) {
+        controls.start('normal');
+      } else {
+        onMouseLeave?.(e);
+      }
+    },
+    [controls, onMouseLeave]
+  );
+
+  return (
+    <div
+      className={cn(
+        `cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center`,
+        className
+      )}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M15 3v18" />
+        <motion.path
+          transition={defaultTransition}
+          variants={pathVariants}
+          animate={controls}
+          d="m10 15-3-3 3-3"
+        />
+      </svg>
path: icons/panel-right-open.tsx
user: login: wzulfikar
body: Same approach as above
created_at: 2025-04-04T22:25:43Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,128 @@
+'use client';
+
+import type { Variants } from 'motion/react';
+import { motion, useAnimation } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface UserRoundPlusIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface UserRoundPlusIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const verticalBarVariants: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.3,
+      duration: 0.2,
+      opacity: { duration: 0.1, delay: 0.3 },
+    },
+  },
+};
+
+const horizontalBarVariants: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.6,
+      duration: 0.2,
+      opacity: { duration: 0.1, delay: 0.6 },
+    },
+  },
+};
+
+const UserRoundPlusIcon = forwardRef<UserRoundPlusIconHandle, UserRoundPlusIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start('animate'),
+        stopAnimation: () => controls.start('normal'),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+          controls.start('animate');
+        } else {
+          onMouseEnter?.(e);
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+          controls.start('normal');
+        } else {
+          onMouseLeave?.(e);
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(
+          `cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center`,
+          className
+        )}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <motion.svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          initial="normal"
+        >
+          <path d="M2 21a8 8 0 0 1 13.292-6" />
+          <circle cx="10" cy="8" r="5" />
+          <motion.path
+            d="M19 16v6"
+            variants={verticalBarVariants}
+            initial="normal"
+            animate={controls}
+          />
+          <motion.path
+            d="M22 19h-6"
+            variants={horizontalBarVariants}
+            initial="normal"
+            animate={controls}
+          />
+        </motion.svg>
path: icons/user-round-plus.tsx
user: login: wzulfikar
body: Same approach as above. Based on `map-pin-plus`.

![image](https://github.com/user-attachments/assets/0495fbc6-be04-442c-b995-feab2cf20818)

created_at: 2025-04-04T22:26:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -2336,6 +2340,50 @@ const ICON_LIST: IconListItem[] = [
     icon: BoxesIcon,
     keywords: ['boxes', 'box', 'container', 'package', 'shipping'],
   },
+  {
+    name: 'user-round-plus',
+    icon: UserRoundPlusIcon,
+    keywords: [
+      'user',
+      'plus',
+      'add',
+      'create',
+      'new'
+    ],
+  },
+  {
+    name: 'panel-left-open',
+    icon: PanelLeftOpenIcon,
+    keywords: [
+      'panel',
+      'left',
+      'open',
+      'menu',
+      'navigation'
+    ],
+  },
+  {
+    name: 'panel-left-close',
+    icon: PanelLeftCloseIcon,
+    keywords: [
+      'panel',
+      'left',
+      'close',
+      'menu',
+      'navigation'
+    ],
+  },
+  {
+    name: 'panel-right-open',
+    icon: PanelRightOpenIcon,
+    keywords: [
+      'panel',
+      'right',
+      'open',
+      'menu',
+      'navigation'
+    ],
+  },
path: icons/index.ts
user: login: pqoqubbw
body: no, it works as expected. you add new file with icon and then you add this icons to this array with lucide keywords and then run `gen-cli` to generate shadcn config
created_at: 2025-04-05T14:10:12Z
author_association: OWNER
diff_hunk: @@ -2336,6 +2340,50 @@ const ICON_LIST: IconListItem[] = [
     icon: BoxesIcon,
     keywords: ['boxes', 'box', 'container', 'package', 'shipping'],
   },
+  {
+    name: 'user-round-plus',
+    icon: UserRoundPlusIcon,
+    keywords: [
+      'user',
+      'plus',
+      'add',
+      'create',
+      'new'
+    ],
+  },
+  {
+    name: 'panel-left-open',
+    icon: PanelLeftOpenIcon,
+    keywords: [
+      'panel',
+      'left',
+      'open',
+      'menu',
+      'navigation'
+    ],
+  },
+  {
+    name: 'panel-left-close',
+    icon: PanelLeftCloseIcon,
+    keywords: [
+      'panel',
+      'left',
+      'close',
+      'menu',
+      'navigation'
+    ],
+  },
+  {
+    name: 'panel-right-open',
+    icon: PanelRightOpenIcon,
+    keywords: [
+      'panel',
+      'right',
+      'open',
+      'menu',
+      'navigation'
+    ],
+  },
path: icons/index.ts
user: login: wzulfikar
body: Got it! So it’s part of “make your changes to the codebase”. 

![IMG_9633](https://github.com/user-attachments/assets/3eb5ecd6-741c-4f29-92fa-c41ce04ebfe4)

created_at: 2025-04-06T07:16:32Z
author_association: CONTRIBUTOR

PR comments:
user: login: vercel[bot]
created_at: 2025-04-04T21:59:49Z
body: @wzulfikar is attempting to deploy a commit to the **pqoqubbw** Team on [Vercel](https://vercel.com).

A member of the Team first needs to [authorize it](https://vercel.com/git/authorize?team=pqoqubbw&type=github&job=%7B%22headInfo%22%3A%7B%22sha%22%3A%22f3a09b80a478cd4545c22c3f19790d5850328216%22%7D%2C%22id%22%3A%22QmNS6iPpb1nGRcrKMRXHa9e2dKhQCHsT4ecmLD8e6mAx4k%22%2C%22org%22%3A%22pqoqubbw%22%2C%22prId%22%3A133%2C%22repo%22%3A%22icons%22%7D).


author_association: NONE
user: login: wzulfikar
created_at: 2025-04-04T22:27:03Z
body: @pqoqubbw could you take a look? Thanks!
author_association: CONTRIBUTOR