From 984992d0fd62bfca4fabe85d0a3b12831247f048 Mon Sep 17 00:00:00 2001
From: yessenia <yessenia.contact@gmail.com>
Date: Mon, 9 Feb 2026 16:37:19 +0800
Subject: [PATCH] feat: add Plugin icon component and integrate it into the
 navigation operations

---
 .../icons/assets/vender/plugin/plugin.svg     |  5 ++
 .../base/icons/src/vender/plugin/Plugin.json  | 53 +++++++++++++++++++
 .../base/icons/src/vender/plugin/Plugin.tsx   | 20 +++++++
 .../base/icons/src/vender/plugin/index.ts     |  1 +
 .../plugins/plugin-page/nav-operations.tsx    |  6 +--
 5 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 web/app/components/base/icons/assets/vender/plugin/plugin.svg
 create mode 100644 web/app/components/base/icons/src/vender/plugin/Plugin.json
 create mode 100644 web/app/components/base/icons/src/vender/plugin/Plugin.tsx

diff --git a/web/app/components/base/icons/assets/vender/plugin/plugin.svg b/web/app/components/base/icons/assets/vender/plugin/plugin.svg
new file mode 100644
index 0000000000..f9107c5d52
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/plugin/plugin.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 6.66675H17.5V15.8334H2.5V6.66675Z" stroke="#354052" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.16675 6.66659V3.33325H8.33341V6.66659" stroke="#354052" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.6667 6.66659V3.33325H15.8334V6.66659" stroke="#354052" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/app/components/base/icons/src/vender/plugin/Plugin.json b/web/app/components/base/icons/src/vender/plugin/Plugin.json
new file mode 100644
index 0000000000..b5282c7974
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/plugin/Plugin.json
@@ -0,0 +1,53 @@
+{
+  "icon": {
+    "type": "element",
+    "isRootNode": true,
+    "name": "svg",
+    "attributes": {
+      "width": "20",
+      "height": "20",
+      "viewBox": "0 0 20 20",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    },
+    "children": [
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M2.5 6.66675H17.5V15.8334H2.5V6.66675Z",
+          "stroke": "currentColor",
+          "stroke-width": "1.5",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        },
+        "children": []
+      },
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M4.16675 6.66659V3.33325H8.33341V6.66659",
+          "stroke": "currentColor",
+          "stroke-width": "1.5",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        },
+        "children": []
+      },
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M11.6667 6.66659V3.33325H15.8334V6.66659",
+          "stroke": "currentColor",
+          "stroke-width": "1.5",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        },
+        "children": []
+      }
+    ]
+  },
+  "name": "Plugin"
+}
diff --git a/web/app/components/base/icons/src/vender/plugin/Plugin.tsx b/web/app/components/base/icons/src/vender/plugin/Plugin.tsx
new file mode 100644
index 0000000000..72f22561bf
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/plugin/Plugin.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import type { IconData } from '@/app/components/base/icons/IconBase'
+import * as React from 'react'
+import IconBase from '@/app/components/base/icons/IconBase'
+import data from './Plugin.json'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'Plugin'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/plugin/index.ts b/web/app/components/base/icons/src/vender/plugin/index.ts
index 43b22a3d5d..80993401e0 100644
--- a/web/app/components/base/icons/src/vender/plugin/index.ts
+++ b/web/app/components/base/icons/src/vender/plugin/index.ts
@@ -1,4 +1,5 @@
 export { default as BoxSparkleFill } from './BoxSparkleFill'
 export { default as LeftCorner } from './LeftCorner'
 export { default as Playground } from './Playground'
+export { default as Plugin } from './Plugin'
 export { default as Trigger } from './Trigger'
diff --git a/web/app/components/plugins/plugin-page/nav-operations.tsx b/web/app/components/plugins/plugin-page/nav-operations.tsx
index 9cd8792454..8193f20723 100644
--- a/web/app/components/plugins/plugin-page/nav-operations.tsx
+++ b/web/app/components/plugins/plugin-page/nav-operations.tsx
@@ -1,12 +1,12 @@
 'use client'
-import { RiAddLine, RiBookOpenLine, RiGithubLine, RiPuzzle2Line } from '@remixicon/react'
+import { RiAddLine, RiBookOpenLine, RiGithubLine } from '@remixicon/react'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import Button, { buttonVariants } from '@/app/components/base/button'
-import { Playground } from '@/app/components/base/icons/src/vender/plugin'
+import { Playground, Plugin } from '@/app/components/base/icons/src/vender/plugin'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -99,7 +99,7 @@ export const CreationTypeTabs = ({ creationType: creationTypeProp }: CreationTyp
           creationType === 'plugins' && 'bg-state-base-hover text-text-secondary',
         )}
       >
-        <RiPuzzle2Line className="h-4 w-4 shrink-0" />
+        <Plugin className="h-4 w-4 shrink-0" />
         <span className="system-sm-medium hidden md:inline">
           {t('plugins', { ns: 'plugin' })}
         </span>