diff --git a/app/db/models/badges.server.ts b/app/db/models/badges.server.ts
index 7ce1a6ab7..f07f924d1 100644
--- a/app/db/models/badges.server.ts
+++ b/app/db/models/badges.server.ts
@@ -2,7 +2,7 @@ import { sql } from "../sql";
 import type { Badge, User } from "../types";
 
 const countsByUserIdStm = sql.prepare(`
-  select "Badge"."code", "Badge"."displayName", count("BadgeOwner"."badgeId") as count 
+  select "Badge"."code", "Badge"."displayName", "Badge"."id", count("BadgeOwner"."badgeId") as count 
     from "BadgeOwner" 
     join "Badge" on "Badge"."id" = "BadgeOwner"."badgeId"
     where "BadgeOwner"."userId" = $userId 
@@ -10,7 +10,7 @@ const countsByUserIdStm = sql.prepare(`
   `);
 
 export type CountsByUserId = Array<
-  Pick<Badge, "code" | "displayName"> & {
+  Pick<Badge, "code" | "displayName" | "id"> & {
     count: number;
   }
 >;
diff --git a/app/routes/u.$identifier/index.tsx b/app/routes/u.$identifier/index.tsx
index 0d44567b2..f1d7c5867 100644
--- a/app/routes/u.$identifier/index.tsx
+++ b/app/routes/u.$identifier/index.tsx
@@ -145,8 +145,7 @@ function BadgeContainer(props: { badges: UserPageLoaderData["badges"] }) {
         {smallBadges.length > 0 ? (
           <div className="u__small-badges">
             {smallBadges.map((badge) => (
-              // xxx: should use badge.id - code is not necessarily unique
-              <div key={badge.code} className="u__small-badge-container">
+              <div key={badge.id} className="u__small-badge-container">
                 <img
                   src={`/gif/badges/${badge.code}.gif`}
                   alt={badge.displayName}