From 08bb209557469c643de2286cb9df3625880e09df Mon Sep 17 00:00:00 2001
From: Curry Yang <163384738+CurryYangxx@users.noreply.github.com>
Date: Mon, 8 Sep 2025 15:02:08 +0800
Subject: [PATCH] feat: add custom mcp icon (#9112)

---
 ...$organizationId.project.$projectId._index.tsx | 10 +++++-----
 packages/insomnia/src/ui/components/icon.tsx     | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/insomnia/src/routes/organization.$organizationId.project.$projectId._index.tsx b/packages/insomnia/src/routes/organization.$organizationId.project.$projectId._index.tsx
index 8cafa9443b..d1f1bd390c 100644
--- a/packages/insomnia/src/routes/organization.$organizationId.project.$projectId._index.tsx
+++ b/packages/insomnia/src/routes/organization.$organizationId.project.$projectId._index.tsx
@@ -1,4 +1,4 @@
-import type { IconName } from '@fortawesome/fontawesome-svg-core';
+import type { IconName, IconProp } from '@fortawesome/fontawesome-svg-core';
 import { Fragment, useEffect, useMemo, useState } from 'react';
 import {
   Button,
@@ -677,7 +677,7 @@ const Component = () => {
   const createInProjectActionList: {
     id: string;
     name: string;
-    icon: IconName;
+    icon: IconProp;
     action: () => void;
   }[] = [
     {
@@ -695,7 +695,7 @@ const Component = () => {
     {
       id: 'new-mcp-client',
       name: 'MCP Client',
-      icon: 'file',
+      icon: ['fac', 'mcp'] as unknown as IconProp,
       action: createNewMcpClient,
     },
     {
@@ -715,7 +715,7 @@ const Component = () => {
   const scopeActionList: {
     id: string;
     label: string;
-    icon: IconName;
+    icon: IconProp;
     action?: {
       icon: IconName;
       label: string;
@@ -750,7 +750,7 @@ const Component = () => {
     {
       id: 'mcp',
       label: `MCP Clients (${mcpClientsCount})`,
-      icon: 'file',
+      icon: ['fac', 'mcp'] as unknown as IconProp,
       action: {
         icon: 'plus',
         label: 'New mcp client',
diff --git a/packages/insomnia/src/ui/components/icon.tsx b/packages/insomnia/src/ui/components/icon.tsx
index 96e4ff6a7c..85a34a0c6b 100644
--- a/packages/insomnia/src/ui/components/icon.tsx
+++ b/packages/insomnia/src/ui/components/icon.tsx
@@ -6,4 +6,20 @@ import { FontAwesomeIcon, type FontAwesomeIconProps } from '@fortawesome/react-f
 
 library.add(fas, far, fab);
 
+import type { IconDefinition, IconName, IconPrefix } from '@fortawesome/fontawesome-common-types';
+
+const customMcpIcon: IconDefinition = {
+  prefix: 'fac' as IconPrefix, // custom prefix for "custom" icons, avoids conflicts with standard prefixes
+  iconName: 'mcp' as IconName,
+  icon: [
+    24,
+    24,
+    [],
+    '',
+    'M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z',
+  ],
+};
+
+library.add(customMcpIcon);
+
 export const Icon = (props: FontAwesomeIconProps) => <FontAwesomeIcon {...props} />;