diff --git a/docs/swarm/README.md b/docs/swarm/README.md
index d498fddf..9c233eb6 100644
--- a/docs/swarm/README.md
+++ b/docs/swarm/README.md
@@ -465,7 +465,8 @@ credential publishes it: the queue grants that credential
 none of the bucket. The harness writes once per start, because a config change
 reaches an agent by restarting its container. An agent with no icon deletes its
 key. Swarm-side, `GET /api/agents/<name>/icon` serves the stored bytes, and 404
-means the agent has no icon.
+means the agent has no icon. swarm-ui's agent cards load it as an `<img>` and show the
+dimmed hyperhive mark for an agent without one, as the hive dashboard does.
 
 ### Swarm-wide forge objects
 
diff --git a/frontend/packages/swarm-ui/src/pages/agents/AgentCard.css b/frontend/packages/swarm-ui/src/pages/agents/AgentCard.css
index 90a81e33..e548aa9f 100644
--- a/frontend/packages/swarm-ui/src/pages/agents/AgentCard.css
+++ b/frontend/packages/swarm-ui/src/pages/agents/AgentCard.css
@@ -22,3 +22,37 @@
   white-space: normal;
   word-break: break-word;
 }
+/* Icon beside the name/message, sized and dimmed like the hive
+   dashboard's `.container-icon` (dashboard.css). */
+.ui-agent-card-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.7em;
+}
+.ui-agent-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35em;
+  flex: 1;
+  min-width: 0;
+}
+.ui-agent-card-icon {
+  position: relative;
+  overflow: hidden;
+  flex: none;
+  width: 5em;
+  aspect-ratio: 1;
+  border-radius: 6px;
+  background-color: color-mix(in srgb, var(--crust) 60%, transparent);
+}
+.ui-agent-card-icon > img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.ui-agent-card-icon-none {
+  filter: grayscale(1);
+  opacity: 0.4;
+}
diff --git a/frontend/packages/swarm-ui/src/pages/agents/AgentCard.tsx b/frontend/packages/swarm-ui/src/pages/agents/AgentCard.tsx
index e1ea8803..894b7c44 100644
--- a/frontend/packages/swarm-ui/src/pages/agents/AgentCard.tsx
+++ b/frontend/packages/swarm-ui/src/pages/agents/AgentCard.tsx
@@ -12,6 +12,7 @@
 // `WantedMenu` below keeps its own clicks (mouse or keyboard-synthesized,
 // `WantedMenu` hosts real `<button>`s) from also firing `Card`'s
 // `onClick` and opening the detail panel.
+import { useState } from "preact/hooks";
 import { Badge } from "@hive/shared/badge.js";
 import type { ProblemDetails } from "@hive/shared/api-error.js";
 import { Card } from "../../ui/card/Card.js";
@@ -46,48 +47,84 @@ export function AgentCard({
   const { tone, label } = FRESHNESS[row.freshness];
   return (
     <Card selected={selected} onClick={() => onOpenDetail(row)}>
-      <div class="ui-agent-card-line1">
-        <span class="ui-agent-card-name">{row.name}</span>
-        <Badge
-          tone={tone}
-          title={
-            row.freshness === "unknown"
-              ? "reported by its hive but not registered in swarm-level identity — needs migration"
-              : undefined
-          }
-          value={
-            <>
-              {label}
-              {row.last_seen_unix !== null ? (
-                <>
-                  {" "}
-                  (<RelativeTime epochMs={row.last_seen_unix * 1000} />)
-                </>
-              ) : null}
-            </>
-          }
-        />
-        <span class="ui-agent-card-wanted" onClick={(e) => e.stopPropagation()}>
-          <WantedMenu
-            row={row}
-            pending={pending}
-            showDestroy={false}
-            onSelectUp={onSelectUp}
-            onSelectOffline={onSelectOffline}
-            onSelectPaused={onSelectPaused}
-          />
-          {error ? (
+      <div class="ui-agent-card-row">
+        <AgentIcon name={row.name} />
+        <div class="ui-agent-card-body">
+          <div class="ui-agent-card-line1">
+            <span class="ui-agent-card-name">{row.name}</span>
             <Badge
-              tone="negative"
-              value="failed"
-              title={error.detail ?? "the declaration failed"}
+              tone={tone}
+              title={
+                row.freshness === "unknown"
+                  ? "reported by its hive but not registered in swarm-level identity — needs migration"
+                  : undefined
+              }
+              value={
+                <>
+                  {label}
+                  {row.last_seen_unix !== null ? (
+                    <>
+                      {" "}
+                      (<RelativeTime epochMs={row.last_seen_unix * 1000} />)
+                    </>
+                  ) : null}
+                </>
+              }
             />
-          ) : null}
-        </span>
-      </div>
-      <div class="ui-agent-card-message">
-        {row.snapshot?.status_text ?? "—"}
+            <span
+              class="ui-agent-card-wanted"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <WantedMenu
+                row={row}
+                pending={pending}
+                showDestroy={false}
+                onSelectUp={onSelectUp}
+                onSelectOffline={onSelectOffline}
+                onSelectPaused={onSelectPaused}
+              />
+              {error ? (
+                <Badge
+                  tone="negative"
+                  value="failed"
+                  title={error.detail ?? "the declaration failed"}
+                />
+              ) : null}
+            </span>
+          </div>
+          <div class="ui-agent-card-message">
+            {row.snapshot?.status_text ?? "—"}
+          </div>
+        </div>
       </div>
     </Card>
   );
 }
+
+// The agent's icon from swarm-controller's `GET /api/agents/{name}/icon`,
+// the same square and fallback as the hive dashboard's container row: an
+// agent with no icon (404) or an unreachable controller shows the dimmed
+// hyperhive mark instead of a broken image. Always an `<img>`: the body is
+// an agent-authored SVG, and only an image load keeps its script from running.
+function AgentIcon({ name }: { name: string }) {
+  const [fallback, setFallback] = useState(false);
+  return (
+    <div
+      class={
+        fallback
+          ? "ui-agent-card-icon ui-agent-card-icon-none"
+          : "ui-agent-card-icon"
+      }
+    >
+      <img
+        alt=""
+        src={
+          fallback
+            ? "/favicon.svg"
+            : `/api/agents/${encodeURIComponent(name)}/icon`
+        }
+        onError={() => setFallback(true)}
+      />
+    </div>
+  );
+}