diff --git a/packages/app/src/settings/workspaces/project-dialog.tsx b/packages/app/src/settings/workspaces/project-dialog.tsx
index 6c8f06e67262..7d8232c48578 100644
--- a/packages/app/src/settings/workspaces/project-dialog.tsx
+++ b/packages/app/src/settings/workspaces/project-dialog.tsx
@@ -11,7 +11,8 @@ import { useLanguage } from "@/runtime/i18n/language"
 import { getProjectAvatarVariant, type LocalProject } from "@/shell/state/layout"
 import { ServerConnection } from "@/runtime/server/registry"
 import { LocationProvider } from "@/workspaces/location"
-import { displayName, getProjectAvatarSource } from "@/shell/layout/helpers"
+import { displayName } from "@/shell/layout/helpers"
+import { ProjectIcon } from "@/shell/layout/project-icon"
 import { createEditProjectModel } from "./project-model"
 import { ProjectSettingsExtensions } from "./project-extensions"
 import { SettingsServerDataScope } from "@/settings/server-scope"
@@ -57,11 +58,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
         <Tabs.List>
           <div class="project-settings-nav">
             <Tabs.Trigger value="general">
-              <ProjectAvatar
-                fallback={projectName()}
-                variant={getProjectAvatarVariant(props.project.icon?.color)}
-                class="!size-4 shrink-0"
-              />
+              <ProjectIcon project={props.project} class="!size-4 shrink-0" />
               <span class="truncate">{projectName()}</span>
             </Tabs.Trigger>
             <Tabs.Trigger value="scripts">
@@ -114,14 +111,14 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
                     onDragLeave={model.dragLeave}
                     onClick={model.iconClick}
                   >
-                    <ProjectAvatar
+                    <ProjectIcon
+                      project={props.project}
                       fallback={model.store.name || model.defaultName()}
-                      src={getProjectAvatarSource(props.project.id, {
+                      icon={{
                         color: model.store.color,
                         url: props.project.icon?.url,
                         override: model.store.iconOverride,
-                      })}
-                      variant={getProjectAvatarVariant(model.store.color)}
+                      }}
                       class="!size-16 [&_[data-slot=project-avatar-surface]]:!rounded-[6px] [&_[data-slot=project-avatar-surface]]:!text-[32px]"
                     />
                     <span
diff --git a/packages/app/src/settings/workspaces/projects.tsx b/packages/app/src/settings/workspaces/projects.tsx
index 10d02030bace..78d949d759e4 100644
--- a/packages/app/src/settings/workspaces/projects.tsx
+++ b/packages/app/src/settings/workspaces/projects.tsx
@@ -1,13 +1,12 @@
 import { Component, For, Show, createMemo, createSignal } from "solid-js"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Icon } from "@opencode-ai/ui/icon"
-import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/runtime/i18n/language"
 import { useGlobal } from "@/runtime/server/runtime"
-import { getProjectAvatarVariant } from "@/shell/state/layout"
 import { ServerConnection, serverName } from "@/runtime/server/registry"
 import { displayName } from "@/shell/layout/helpers"
+import { ProjectIcon } from "@/shell/layout/project-icon"
 import { InlineServerSelect } from "@/settings/server-select"
 import { DialogEditProject } from "./project-dialog"
 import "@/settings/settings.css"
@@ -40,14 +39,13 @@ export const SettingsProjects: Component = () => {
 
   const ProjectRow: Component<{ project: ProjectItem; server: ServerConnection.Any }> = (props) => {
     const name = () => displayName(props.project)
-    const color = () => getProjectAvatarVariant(props.project.icon?.color)
     return (
       <div
         class="group flex items-center justify-between gap-5 px-4 py-2.5 rounded-lg bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)] cursor-pointer transition-all hover:bg-v2-background-bg-layer-01"
         onClick={() => openProjectSettings(props.project, props.server)}
       >
         <div class="flex items-center gap-2.5 min-w-0 flex-1">
-          <ProjectAvatar fallback={name()} variant={color()} class="shrink-0" />
+          <ProjectIcon project={props.project} class="shrink-0" />
           <span class="text-13-medium text-v2-text-text-base truncate">{name()}</span>
         </div>
         <div class="flex items-center gap-2 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
diff --git a/packages/app/src/shell/layout/project-icon.tsx b/packages/app/src/shell/layout/project-icon.tsx
new file mode 100644
index 000000000000..e7218ce42b12
--- /dev/null
+++ b/packages/app/src/shell/layout/project-icon.tsx
@@ -0,0 +1,24 @@
+import { ProjectAvatar, type ProjectAvatarProps } from "@opencode-ai/ui/project-avatar"
+import { splitProps } from "solid-js"
+import { displayName, getProjectAvatarSource } from "@/shell/layout/helpers"
+import { getProjectAvatarVariant, type LocalProject } from "@/shell/state/layout"
+
+type ProjectIconProps = Omit<ProjectAvatarProps, "fallback" | "src" | "variant"> & {
+  project: LocalProject
+  fallback?: string
+  icon?: LocalProject["icon"]
+}
+
+export function ProjectIcon(props: ProjectIconProps) {
+  const [local, rest] = splitProps(props, ["project", "fallback", "icon"])
+  const icon = () => local.icon ?? local.project.icon
+
+  return (
+    <ProjectAvatar
+      {...rest}
+      fallback={local.fallback ?? displayName(local.project)}
+      src={getProjectAvatarSource(local.project.id, icon())}
+      variant={getProjectAvatarVariant(icon()?.color)}
+    />
+  )
+}