diff --git a/web/components/avatar.css b/web/components/avatar.css
new file mode 100644
index 000000000..9940b55bf
--- /dev/null
+++ b/web/components/avatar.css
@@ -0,0 +1,57 @@
+.emojiContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.emojiMicro {
+  font-size: 9px;
+  height: 16px;
+  line-height: 16px;
+}
+
+.emojiSmall {
+  font-size: 14px;
+  height: 24px;
+  line-height: 24px;
+}
+
+.emojiLarge {
+  font-size: 28px;
+  height: 42px;
+  line-height: 42px;
+}
+
+.emojiProfile {
+  font-size: 80px;
+  height: 112px;
+  line-height: 112px;
+}
+
+.micro {
+  border-radius: 8px;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+}
+
+.small {
+  border-radius: 12px;
+  height: 24px;
+  width: 24px;
+  min-width: 24px;
+}
+
+.large {
+  border-radius: 21px;
+  height: 42px;
+  width: 42px;
+  min-width: 42px;
+}
+
+.profile {
+  border-radius: 56px;
+  height: 112px;
+  width: 112px;
+  min-width: 112px;
+}
diff --git a/web/components/avatar.react.js b/web/components/avatar.react.js
new file mode 100644
index 000000000..4430cc395
--- /dev/null
+++ b/web/components/avatar.react.js
@@ -0,0 +1,67 @@
+// @flow
+
+import classnames from 'classnames';
+import * as React from 'react';
+
+import type { ResolvedClientAvatar } from 'lib/types/avatar-types';
+
+import css from './avatar.css';
+
+type Props = {
+  +avatarInfo: ResolvedClientAvatar,
+  +size: 'micro' | 'small' | 'large' | 'profile',
+};
+
+function Avatar(props: Props): React.Node {
+  const { avatarInfo, size } = props;
+
+  const containerSizeClassName = classnames({
+    [css.micro]: size === 'micro',
+    [css.small]: size === 'small',
+    [css.large]: size === 'large',
+    [css.profile]: size === 'profile',
+  });
+
+  const emojiSizeClassName = classnames({
+    [css.emojiContainer]: true,
+    [css.emojiMicro]: size === 'micro',
+    [css.emojiSmall]: size === 'small',
+    [css.emojiLarge]: size === 'large',
+    [css.emojiProfile]: size === 'profile',
+  });
+
+  const emojiContainerColorStyle = React.useMemo(() => {
+    if (avatarInfo.type === 'emoji') {
+      return { backgroundColor: `#${avatarInfo.color}` };
+    }
+  }, [avatarInfo.color, avatarInfo.type]);
+
+  const avatar = React.useMemo(() => {
+    if (avatarInfo.type === 'image') {
+      return (
+        <img
+          src={avatarInfo.uri}
+          alt="image avatar"
+          className={containerSizeClassName}
+        />
+      );
+    }
+
+    return (
+      <div className={containerSizeClassName} style={emojiContainerColorStyle}>
+        <div className={emojiSizeClassName}>{avatarInfo.emoji}</div>
+      </div>
+    );
+  }, [
+    avatarInfo.emoji,
+    avatarInfo.type,
+    avatarInfo.uri,
+    containerSizeClassName,
+    emojiContainerColorStyle,
+    emojiSizeClassName,
+  ]);
+
+  return avatar;
+}
+
+export default Avatar;