diff --git a/src/components/UserAvatar/UserAvatar.js b/src/components/UserAvatar/UserAvatar.js
new file mode 100644
index 0000000..7040737
--- /dev/null
+++ b/src/components/UserAvatar/UserAvatar.js
@@ -0,0 +1,21 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Avatar } from "@material-ui/core";
+
+export default function UserAvatar({userName, userAlias}){
+
+    return(
+        <Avatar>
+            {userName === "" ? null : userName.charAt(0)}
+        </Avatar>
+    );
+};
+
+UserAvatar.propTypes = {
+    /** The name of the user. */
+    "userName": PropTypes.string
+};
+
+UserAvatar.defaultProps = {
+    "userName": ""
+};
\ No newline at end of file
diff --git a/src/components/UserAvatar/UserAvatar.md b/src/components/UserAvatar/UserAvatar.md
new file mode 100644
index 0000000..40c9a48
--- /dev/null
+++ b/src/components/UserAvatar/UserAvatar.md
@@ -0,0 +1,23 @@
+The UserAvatar displays a graphical representation of a person and is meant to be used in conjunction with other identifiers like names or emails.
+
+---
+
+The UserAvatar will the first letter of the `userName` prop.
+```jsx
+import UserAvatar from "./UserAvatar";
+<UserAvatar userName="Justin Campbell" />
+```
+
+```jsx static
+<UserAvatar userName="Justin Campbell" />
+```
+
+If no value, a null value, or an empty string is passed to the UserAvatar, it will fall back to a generic icon.
+```jsx
+import UserAvatar from "./UserAvatar";
+<UserAvatar />
+```
+
+```jsx static
+<UserAvatar />
+```
\ No newline at end of file
diff --git a/src/components/UserAvatar/index.js b/src/components/UserAvatar/index.js
new file mode 100644
index 0000000..3f9a167
--- /dev/null
+++ b/src/components/UserAvatar/index.js
@@ -0,0 +1,3 @@
+import UserAvatar from "./UserAvatar";
+
+export default UserAvatar;
\ No newline at end of file