diff --git a/src/components/atoms/UserAvatar/UserAvatar.scss b/src/components/atoms/UserAvatar/UserAvatar.scss
index 4a56415677..4cd4331caf 100644
--- a/src/components/atoms/UserAvatar/UserAvatar.scss
+++ b/src/components/atoms/UserAvatar/UserAvatar.scss
@@ -1,9 +1,26 @@
 @import "scss/constants";
 
 .UserAvatar {
+  $avatar-sizes-map: (
+    small: 25px,
+    medium: 40px,
+    large: 54px,
+    full: 100%,
+  );
+  $indicator-sizes-map: (
+    small: 8px,
+    medium: 10px,
+    large: 12px,
+    full: 25%,
+  );
+
+  // NOTE: parent and img mismatch due to legacy reasons
+  $default-avatar-size: 25px;
+  $default-image-size: 100%;
+  $default-indicator-size: 8px;
+
+  @include square-size($default-avatar-size);
   position: relative;
-  width: 25px;
-  height: 25px;
 
   &:hover {
     .UserAvatar__nametag--hover {
@@ -19,25 +36,24 @@
   }
 
   &__image {
-    height: 100%;
-    width: 100%;
+    @include square-size($default-image-size);
     border-radius: 50%;
     vertical-align: unset;
   }
 
   &__status-indicator {
     position: absolute;
-    bottom: -1px;
-    right: -1px;
+    bottom: 0;
+    right: 0;
     border-radius: 50%;
-    height: 8px;
-    width: 8px;
     z-index: z(user-avatar-status-indicator);
     display: block;
+    @include square-size($default-indicator-size);
 
-    &--large {
-      height: 12px;
-      width: 12px;
+    @each $modifier, $size in $indicator-sizes-map {
+      &--#{$modifier} {
+        @include square-size($size);
+      }
     }
   }
 
@@ -49,19 +65,11 @@
     }
   }
 
-  &--small {
-    width: 25px;
-    height: 25px;
-  }
-
-  &--medium {
-    height: 40px;
-    width: 40px;
-  }
-
-  &--large {
-    height: 54px;
-    width: 54px;
+  @each $modifier, $size in $avatar-sizes-map {
+    &--#{$modifier},
+    &--#{$modifier} img {
+      @include square-size($size);
+    }
   }
 
   &__nametag {
@@ -74,12 +82,11 @@
 
     text-align: center;
 
-    margin: 0 auto;
+    margin: 0 -50% 0 auto;
     padding: 0 $spacing--xs;
 
     bottom: 10%;
     left: 50%;
-    margin-right: -50%;
 
     border-radius: $border-radius--md;
 
diff --git a/src/components/atoms/UserAvatar/UserAvatar.tsx b/src/components/atoms/UserAvatar/UserAvatar.tsx
index b32bcaa080..48630adb12 100644
--- a/src/components/atoms/UserAvatar/UserAvatar.tsx
+++ b/src/components/atoms/UserAvatar/UserAvatar.tsx
@@ -14,6 +14,8 @@ import { useVenueId } from "hooks/useVenueId";
 
 import "./UserAvatar.scss";
 
+export type UserAvatarSize = "small" | "medium" | "large" | "full";
+
 export interface UserAvatarProps {
   user?: WithId<User>;
   containerClassName?: string;
@@ -21,8 +23,7 @@ export interface UserAvatarProps {
   showNametag?: UsernameVisibility;
   showStatus?: boolean;
   onClick?: () => void;
-  large?: boolean;
-  medium?: boolean;
+  size?: UserAvatarSize;
 }
 
 // @debt the UserProfilePicture component serves a very similar purpose to this, we should unify them as much as possible
@@ -33,8 +34,7 @@ export const _UserAvatar: React.FC<UserAvatarProps> = ({
   showNametag,
   onClick,
   showStatus,
-  large,
-  medium,
+  size,
 }) => {
   const venueId = useVenueId();
 
@@ -56,8 +56,7 @@ export const _UserAvatar: React.FC<UserAvatarProps> = ({
 
   const containerClasses = classNames("UserAvatar", containerClassName, {
     "UserAvatar--clickable": onClick !== undefined,
-    "UserAvatar--large": large,
-    "UserAvatar--medium": medium,
+    [`UserAvatar--${size}`]: size,
   });
 
   const isOnline = useMemo(
@@ -76,7 +75,7 @@ export const _UserAvatar: React.FC<UserAvatarProps> = ({
   const statusIndicatorClasses = classNames("UserAvatar__status-indicator", {
     "UserAvatar__status-indicator--online": isOnline,
     [`UserAvatar__status-indicator--${status}`]: isOnline && status,
-    "UserAvatar__status-indicator--large": large,
+    [`UserAvatar__status-indicator--${size}`]: size,
   });
 
   const statusIndicatorStyles = useMemo(
diff --git a/src/components/molecules/NavBar/NavBar.tsx b/src/components/molecules/NavBar/NavBar.tsx
index b6b9ce7c63..32e6f0e573 100644
--- a/src/components/molecules/NavBar/NavBar.tsx
+++ b/src/components/molecules/NavBar/NavBar.tsx
@@ -314,7 +314,7 @@ export const NavBar: React.FC<NavBarPropsType> = ({ hasBackButton = true }) => {
                   overlay={ProfilePopover}
                   rootClose={true}
                 >
-                  <UserAvatar user={userWithId} showStatus medium />
+                  <UserAvatar user={userWithId} showStatus size="medium" />
                 </OverlayTrigger>
               </div>
             )}
diff --git a/src/components/organisms/ProfileModal/UserInformationContent/UserInformationContent.tsx b/src/components/organisms/ProfileModal/UserInformationContent/UserInformationContent.tsx
index c0e1e88889..fa65b2436a 100644
--- a/src/components/organisms/ProfileModal/UserInformationContent/UserInformationContent.tsx
+++ b/src/components/organisms/ProfileModal/UserInformationContent/UserInformationContent.tsx
@@ -133,7 +133,7 @@ export const UserInformationContent: React.FunctionComponent<UserInformationCont
       <h1 className="UserInformationContent__title">My Profile</h1>
       <div className="UserInformationContent__information">
         <div>
-          <UserAvatar user={user} showStatus large />
+          <UserAvatar user={user} showStatus size="large" />
         </div>
         <div className="UserInformationContent__text-container">
           <h3 className="UserInformationContent__user-name">
diff --git a/src/scss/constants.scss b/src/scss/constants.scss
index d7406e75af..2549d13620 100644
--- a/src/scss/constants.scss
+++ b/src/scss/constants.scss
@@ -239,3 +239,12 @@ $z-layers: (
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@mixin square-size($size: 1, $min: null, $max: null) {
+  height: $size;
+  width: $size;
+  min-height: $min;
+  min-width: $min;
+  max-height: $max;
+  max-width: $max;
+}