From 185ede9ac1b1d770bf580083e0e2c03185e93d9d Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Fri, 17 Apr 2026 02:46:25 -0400
Subject: [PATCH 1/3] Add search icon

---
 plugins/phosphor/src/App.css        | 17 +++++++++++++++++
 plugins/phosphor/src/App.tsx        | 26 ++++++++++++++++----------
 plugins/phosphor/src/SearchIcon.tsx | 18 ++++++++++++++++++
 3 files changed, 51 insertions(+), 10 deletions(-)
 create mode 100644 plugins/phosphor/src/SearchIcon.tsx

diff --git a/plugins/phosphor/src/App.css b/plugins/phosphor/src/App.css
index a5fba417b..f27a87dbc 100644
--- a/plugins/phosphor/src/App.css
+++ b/plugins/phosphor/src/App.css
@@ -37,6 +37,11 @@
     overflow-y: scroll;
 }
 
+.search-input-container {
+    position: relative;
+    width: 100%;
+}
+
 .search-input {
     height: 30px;
     width: 100%;
@@ -44,6 +49,7 @@
     line-height: 24px;
     font-weight: 500 !important;
     font-family: "Inter", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    padding-left: 33px;
 }
 
 .search-input::placeholder {
@@ -55,6 +61,17 @@
     font-family: "Inter", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 }
 
+.search-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 11px;
+    top: 0;
+    bottom: 0;
+    color: var(--framer-color-text-tertiary);
+}
+
 .grid {
     width: 100%;
     display: grid;
diff --git a/plugins/phosphor/src/App.tsx b/plugins/phosphor/src/App.tsx
index d8e880ad1..938e2fb8b 100644
--- a/plugins/phosphor/src/App.tsx
+++ b/plugins/phosphor/src/App.tsx
@@ -1,6 +1,7 @@
 import { Draggable, framer, useIsAllowedTo } from "framer-plugin"
 import Fuse from "fuse.js"
 import { Suspense, useCallback, useDeferredValue, useMemo, useState } from "react"
+import SearchIcon from "./SearchIcon"
 import "./App.css"
 
 import { icons as iconData } from "@phosphor-icons/core"
@@ -141,16 +142,21 @@ export function App() {
     return (
         <>
             <div className="search-container">
-                <input
-                    autoComplete="nope"
-                    autoCorrect="off"
-                    autoFocus
-                    className="search-input"
-                    onChange={e => {
-                        setSearchQuery(e.target.value)
-                    }}
-                    placeholder="Search…"
-                />
+                <div className="search-input-container">
+                    <input
+                        autoComplete="nope"
+                        autoCorrect="off"
+                        autoFocus
+                        className="search-input"
+                        onChange={e => {
+                            setSearchQuery(e.target.value)
+                        }}
+                        placeholder="Search…"
+                    />
+                    <div className="search-icon">
+                        <SearchIcon />
+                    </div>
+                </div>
                 <select
                     className="weight-selector"
                     value={weight}
diff --git a/plugins/phosphor/src/SearchIcon.tsx b/plugins/phosphor/src/SearchIcon.tsx
new file mode 100644
index 000000000..e013e627d
--- /dev/null
+++ b/plugins/phosphor/src/SearchIcon.tsx
@@ -0,0 +1,18 @@
+export default function SearchIcon() {
+    return (
+        <svg
+            role="img"
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            fill="none"
+            viewBox="0 0 12 12"
+            aria-label="Search"
+        >
+            <path
+                d="M5.299.5a5 5 0 0 1 4.416 7.345.75.75 0 0 0 .127.887l1.621 1.622a.749.749 0 1 1-1.06 1.06L8.851 9.862a.75.75 0 0 0-.925-.107A5.001 5.001 0 1 1 5.299.5m-3.5 5a3.5 3.5 0 1 0 7 0 3.5 3.5 0 0 0-7 0"
+                fill="currentColor"
+            ></path>
+        </svg>
+    )
+}

From cbe9b15f3f511404ec75d8e2ec160e704419093b Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Fri, 17 Apr 2026 02:55:09 -0400
Subject: [PATCH 2/3] Notifications and title

---
 plugins/phosphor/src/App.tsx | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/plugins/phosphor/src/App.tsx b/plugins/phosphor/src/App.tsx
index 938e2fb8b..64a7fa9be 100644
--- a/plugins/phosphor/src/App.tsx
+++ b/plugins/phosphor/src/App.tsx
@@ -67,6 +67,17 @@ const fuse = new Fuse(icons, {
     useExtendedSearch: true,
 })
 
+function formatIconDisplayName(displayName?: string): string {
+    if (!displayName) return "Unknown"
+
+    const withoutSuffix = displayName.replace(/Icon$/, "")
+
+    return withoutSuffix
+        .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2")
+        .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+        .trim()
+}
+
 function IconGrid(props: { searchQuery: string; weight: IconWeight }) {
     const { searchQuery, weight } = props
 
@@ -91,6 +102,8 @@ function IconGrid(props: { searchQuery: string; weight: IconWeight }) {
                 svg,
                 name: "Icon",
             })
+
+            framer.notify(`Inserted ${formatIconDisplayName(Icon.displayName)} icon`, { variant: "success" })
         },
         [weight]
     )
@@ -115,6 +128,17 @@ function IconGrid(props: { searchQuery: string; weight: IconWeight }) {
                             name: "Icon",
                             svg: renderToStaticMarkup(<Icon size={32} color={"black"} weight={weight} />),
                         })}
+                        onDragComplete={result => {
+                            if (result.status === "success") {
+                                framer.notify(`Inserted ${formatIconDisplayName(Icon.displayName)} icon`, {
+                                    variant: "success",
+                                })
+                            } else {
+                                framer.notify(`Failed to insert ${formatIconDisplayName(Icon.displayName)} icon`, {
+                                    variant: "error",
+                                })
+                            }
+                        }}
                         key={entry.name}
                     >
                         <button
@@ -124,7 +148,7 @@ function IconGrid(props: { searchQuery: string; weight: IconWeight }) {
                                 void handleIconClick(entry)
                             }}
                             disabled={!isAllowedToAddSVG}
-                            title={isAllowedToAddSVG ? undefined : "Insufficient permissions"}
+                            title={formatIconDisplayName(Icon.displayName)}
                         >
                             <Icon size={32} color={"var(--framer-color-text)"} weight={weight} />
                         </button>

From 6572d4bfd48bcd4b472a5d9d581864daafd368ff Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Fri, 17 Apr 2026 03:06:52 -0400
Subject: [PATCH 3/3] Change name format

---
 plugins/phosphor/src/App.tsx | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/plugins/phosphor/src/App.tsx b/plugins/phosphor/src/App.tsx
index 64a7fa9be..300d7b65e 100644
--- a/plugins/phosphor/src/App.tsx
+++ b/plugins/phosphor/src/App.tsx
@@ -67,15 +67,14 @@ const fuse = new Fuse(icons, {
     useExtendedSearch: true,
 })
 
-function formatIconDisplayName(displayName?: string): string {
-    if (!displayName) return "Unknown"
-
-    const withoutSuffix = displayName.replace(/Icon$/, "")
-
-    return withoutSuffix
-        .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2")
-        .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
-        .trim()
+function formatIconName(name?: string): string {
+    if (!name) return "Unknown"
+
+    return name
+        .split("-")
+        .filter(Boolean)
+        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(" ")
 }
 
 function IconGrid(props: { searchQuery: string; weight: IconWeight }) {
@@ -103,7 +102,7 @@ function IconGrid(props: { searchQuery: string; weight: IconWeight }) {
                 name: "Icon",
             })
 
-            framer.notify(`Inserted ${formatIconDisplayName(Icon.displayName)} icon`, { variant: "success" })
+            framer.notify(`Inserted ${formatIconName(entry.name)} icon`, { variant: "success" })
         },
         [weight]
     )
@@ -130,11 +129,11 @@ function IconGrid(props: { searchQuery: string; weight: IconWeight }) {
                         })}
                         onDragComplete={result => {
                             if (result.status === "success") {
-                                framer.notify(`Inserted ${formatIconDisplayName(Icon.displayName)} icon`, {
+                                framer.notify(`Inserted ${formatIconName(entry.name)} icon`, {
                                     variant: "success",
                                 })
                             } else {
-                                framer.notify(`Failed to insert ${formatIconDisplayName(Icon.displayName)} icon`, {
+                                framer.notify(`Failed to insert ${formatIconName(entry.name)} icon`, {
                                     variant: "error",
                                 })
                             }
@@ -148,7 +147,7 @@ function IconGrid(props: { searchQuery: string; weight: IconWeight }) {
                                 void handleIconClick(entry)
                             }}
                             disabled={!isAllowedToAddSVG}
-                            title={formatIconDisplayName(Icon.displayName)}
+                            title={formatIconName(entry.name)}
                         >
                             <Icon size={32} color={"var(--framer-color-text)"} weight={weight} />
                         </button>