diff --git a/web/components/user-avatar.react.js b/web/components/user-avatar.react.js
new file mode 100644
index 000000000..94cfa9dc5
--- /dev/null
+++ b/web/components/user-avatar.react.js
@@ -0,0 +1,31 @@
+// @flow
+
+import * as React from 'react';
+
+import {
+  getAvatarForUser,
+  useENSResolvedAvatar,
+} from 'lib/shared/avatar-utils.js';
+
+import Avatar from './avatar.react.js';
+import { useSelector } from '../redux/redux-utils.js';
+
+type Props = {
+  +userID: ?string,
+  +size: 'micro' | 'small' | 'large' | 'profile',
+};
+
+function UserAvatar(props: Props): React.Node {
+  const { userID, size } = props;
+
+  const userInfo = useSelector(state =>
+    userID ? state.userStore.userInfos[userID] : null,
+  );
+  const avatarInfo = getAvatarForUser(userInfo);
+
+  const resolvedUserAvatar = useENSResolvedAvatar(avatarInfo, userInfo);
+
+  return <Avatar size={size} avatarInfo={resolvedUserAvatar} />;
+}
+
+export default UserAvatar;