diff --git a/apps/client/index.html b/apps/client/index.html
index a8d4153d..bdfca8c4 100644
--- a/apps/client/index.html
+++ b/apps/client/index.html
@@ -35,10 +35,13 @@
     <!-- Styles -->
     <link rel="stylesheet" href="/src/styles/main.css" />
   </head>
-  <body class="bg-background text-foreground text-sm antialiased print:bg-white print:m-0">
+  <body class="text-sm antialiased bg-background text-foreground print:bg-white print:m-0">
     <div id="root"></div>
 
     <!-- Scripts -->
     <script type="module" src="/src/main.tsx"></script>
+
+    <!-- Phosphor Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
   </body>
 </html>
diff --git a/apps/client/src/pages/builder/sidebars/left/sections/custom/section.tsx b/apps/client/src/pages/builder/sidebars/left/sections/custom/section.tsx
index 9a0af2fc..5ec40380 100644
--- a/apps/client/src/pages/builder/sidebars/left/sections/custom/section.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/sections/custom/section.tsx
@@ -1,8 +1,15 @@
 import { t } from "@lingui/macro";
 import { createId } from "@paralleldrive/cuid2";
-import { DotsSixVertical, Plus, X } from "@phosphor-icons/react";
+import { DotsSixVertical, Envelope, Plus, X } from "@phosphor-icons/react";
 import { CustomField as ICustomField } from "@reactive-resume/schema";
-import { Button, Input } from "@reactive-resume/ui";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Tooltip,
+  Button,
+  Input,
+} from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 import { AnimatePresence, Reorder, useDragControls } from "framer-motion";
 
@@ -39,10 +46,26 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
           <DotsSixVertical />
         </Button>
 
+        <Popover>
+          <Tooltip content={t`Icon`}>
+            <PopoverTrigger asChild>
+              <Button size="icon" variant="ghost">
+                {field.icon ? <i className={`ph ph-${field.icon}`}></i> : <Envelope />}
+              </Button>
+            </PopoverTrigger>
+          </Tooltip>
+          <PopoverContent className="p-1.5">
+            <Input
+              value={field.icon}
+              placeholder={t`Enter Phosphor Icon`}
+              onChange={(event) => onChange({ ...field, icon: event.target.value })}
+            />
+          </PopoverContent>
+        </Popover>
+
         <Input
           placeholder={t`Name`}
           value={field.name}
-          className="!ml-0"
           onChange={(event) => handleChange("name", event.target.value)}
         />
 
