diff --git a/public/scss/generics.scss b/public/scss/generics.scss
index 189349d72c..583691e6b6 100644
--- a/public/scss/generics.scss
+++ b/public/scss/generics.scss
@@ -79,41 +79,10 @@
 	/* Contains the user icon class as a mixin, so there's no need to include that in the template */
 	@include user-icon;
 
-	&.avatar-xs {
-		width: 16px;
-		height: 16px;
-		@include user-icon-style($line-height-base, $font-size-base * 0.75);
-	}
-
-	&.avatar-sm {
-		width: 24px;
-		height: 24px;
-		@include user-icon-style($line-height-base, $font-size-base);
-	}
-
-	&.avatar-sm2x {
-		width: 48px;
-		height: 48px;
-		@include user-icon-style($line-height-base, $font-size-base * 2);
-	}
-
-	&.avatar-md {
-		width: 32px;
-		height: 32px;
-		@include user-icon-style($line-height-base, $font-size-base * 1.5);
-	}
-
-	&.avatar-lg {
-		width: 64px;
-		height: 64px;
-		@include user-icon-style($line-height-base, $font-size-base * 3);
-	}
-
-	&.avatar-xl {
-		width: 128px;
-		height: 128px;
-		@include user-icon-style($line-height-base * 1.15, $font-size-base * 6);
-	}
+	$size: var(--avatar-size);
+	width: $size;
+	height: $size;
+	@include user-icon-style($line-height-base, calc($size * 0.6));
 
 	&.avatar-rounded {
 		border-radius: 50%;
diff --git a/public/scss/mixins.scss b/public/scss/mixins.scss
index 6cb6a67472..060b90c89b 100644
--- a/public/scss/mixins.scss
+++ b/public/scss/mixins.scss
@@ -68,8 +68,6 @@
 
 @mixin user-icon-style($size: 32px, $font-size: 1.5rem, $border-radius: inherit){
 	border-radius: $border-radius;
-	width: $size;
-	height: $size;
 	line-height: $size;
 	font-size: $font-size;
 }
diff --git a/public/src/modules/helpers.common.js b/public/src/modules/helpers.common.js
index 3df00f28a3..7381182f40 100644
--- a/public/src/modules/helpers.common.js
+++ b/public/src/modules/helpers.common.js
@@ -292,7 +292,7 @@ module.exports = function (utils, Benchpress, relative_path) {
 		/**
 		 * userObj requires:
 		 *   - uid, picture, icon:bgColor, icon:text (getUserField w/ "picture" should return all 4), username
-		 * size: one of "xs", "sm", "md", "lg", or "xl" (required), or an integer
+		 * size: a picture size in the form of a value with units (e.g. 64px, 4rem, etc.)
 		 * rounded: true or false (optional, default false)
 		 * classNames: additional class names to prepend (optional, default none)
 		 * component: overrides the default component (optional, default none)
@@ -309,18 +309,10 @@ module.exports = function (utils, Benchpress, relative_path) {
 			'data-uid="' + userObj.uid + '"',
 			'loading="lazy"',
 		];
-		const styles = [];
+		const styles = [`--avatar-size: ${size};`];
 		classNames = classNames || '';
 
-		// Validate sizes, handle integers, otherwise fall back to `avatar-sm`
-		if (['xs', 'sm', 'sm2x', 'md', 'lg', 'xl'].includes(size)) {
-			classNames += ' avatar-' + size;
-		} else if (!isNaN(parseInt(size, 10))) {
-			styles.push('width: ' + size + 'px;', 'height: ' + size + 'px;', 'line-height: ' + size + 'px;', 'font-size: ' + (parseInt(size, 10) / 16) + 'rem;');
-		} else {
-			classNames += ' avatar-sm';
-		}
-		attributes.unshift('class="avatar ' + classNames + (rounded ? ' avatar-rounded' : '') + '"');
+		attributes.unshift(`class="avatar ${classNames}${rounded ? ' avatar-rounded' : ''}"`);
 
 		// Component override
 		if (component) {
diff --git a/src/socket.io/user/picture.js b/src/socket.io/user/picture.js
index bad7c963b7..32a4f0e30c 100644
--- a/src/socket.io/user/picture.js
+++ b/src/socket.io/user/picture.js
@@ -23,22 +23,36 @@ module.exports = function (SocketUser) {
 			throw new Error('[[error:invalid-data]]');
 		}
 
-		const [list, uploaded] = await Promise.all([
+		const [list, userObj] = await Promise.all([
 			plugins.hooks.fire('filter:user.listPictures', {
 				uid: data.uid,
 				pictures: [],
 			}),
-			user.getUserField(data.uid, 'uploadedpicture'),
+			user.getUserData(data.uid),
 		]);
 
-		if (uploaded) {
+		if (userObj.uploadedpicture) {
 			list.pictures.push({
 				type: 'uploaded',
-				url: uploaded,
+				url: userObj.uploadedpicture,
 				text: '[[user:uploaded_picture]]',
 			});
 		}
 
+		// Normalize list into "user object" format
+		list.pictures = list.pictures.map(({ type, url, text }) => ({
+			type,
+			username: text,
+			picture: url,
+		}));
+
+		list.pictures.unshift({
+			type: 'default',
+			'icon:text': userObj['icon:text'],
+			'icon:bgColor': userObj['icon:bgColor'],
+			username: '[[user:default_picture]]',
+		});
+
 		return list.pictures;
 	};
 };