diff --git a/hub/filelib-web/src/lib/GrantsPanel.svelte b/hub/filelib-web/src/lib/GrantsPanel.svelte
index ae9cced..24fa650 100644
--- a/hub/filelib-web/src/lib/GrantsPanel.svelte
+++ b/hub/filelib-web/src/lib/GrantsPanel.svelte
@@ -19,6 +19,7 @@
   import type { Grant, MemberGroupSearchResult, NodeDetail, Role, UserSearchResult } from "./types.js";
   import Icon from "./Icon.svelte";
   import Modal from "./Modal.svelte";
+  import Avatar from "./Avatar.svelte";
 
   let { node }: { node: NodeDetail } = $props();
 
@@ -254,9 +255,7 @@
             <tr>
               <td>
                 <a class="inline-flex items-center gap-2 text-ink hover:text-accent" href={principalHref(g)}>
-                  <span class="flex text-ink-3">
-                    <Icon name={g.principalType === "USER" ? "user" : "group"} size={14} />
-                  </span>
+                  <Avatar displayName={g.principalName} userId={g.principalId} size={26} />
                   <span>
                     <span class="flex items-center gap-1.5 text-[13px]">
                       {g.principalName ?? g.principalId}