diff --git a/packages/stack/src/components/user-avatar.tsx b/packages/stack/src/components/user-avatar.tsx
index b34d452c1..e4c961b0b 100644
--- a/packages/stack/src/components/user-avatar.tsx
+++ b/packages/stack/src/components/user-avatar.tsx
@@ -1,6 +1,16 @@
 import { RxPerson } from "react-icons/rx";
 import { Avatar, AvatarFallback, AvatarImage, Text } from "..";
 import { User } from "../lib/stack-app";
+import { SECONDARY_FONT_COLORS } from "../utils/constants";
+import styled from "styled-components";
+
+
+const StyledIcon = styled(RxPerson)`
+  color: ${SECONDARY_FONT_COLORS.light};
+  html[data-stack-theme='dark'] & {
+    color: ${SECONDARY_FONT_COLORS.dark};
+  }
+`;
 
 export default function UserAvatar(props: { size?: number, user: User | null }) {
   const user = props.user;
@@ -12,7 +22,7 @@ export default function UserAvatar(props: { size?: number, user: User | null })
           <Text style={{ fontWeight: 500 }}>
             {(user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase()}
           </Text> :
-          <RxPerson size={props.size} />}
+          <StyledIcon size={props.size} />}
       </AvatarFallback>
     </Avatar>
   );