diff --git a/src/platform/web/ui/avatar.js b/src/platform/web/ui/avatar.js
index 4e502de9..596a8a2c 100644
--- a/src/platform/web/ui/avatar.js
+++ b/src/platform/web/ui/avatar.js
@@ -107,6 +107,7 @@ export function renderStaticAvatar(vm, size, extraClasses = undefined) {
     const hasAvatar = !!vm.avatarUrl;
     let avatarClasses = classNames({
         avatar: true,
+        [`size-${size}`]: true,
         [`usercolor${vm.avatarColorNumber}`]: !hasAvatar,
     });
     if (extraClasses) {
diff --git a/src/platform/web/ui/css/avatar.css b/src/platform/web/ui/css/avatar.css
index 04d837e6..15f2222b 100644
--- a/src/platform/web/ui/css/avatar.css
+++ b/src/platform/web/ui/css/avatar.css
@@ -15,23 +15,48 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.avatar {
+.hydrogen {
+    --avatar-size: 32px;
+}
+
+.hydrogen .avatar {
     width: var(--avatar-size);
     height: var(--avatar-size);
+    line-height: var(--avatar-size);
+    font-size: calc(var(--avatar-size) * 0.6);
     overflow: hidden;
     flex-shrink: 0;
     user-select: none;
-    line-height: var(--avatar-size);
-    font-size: calc(var(--avatar-size) * 0.6);
     text-align: center;
     speak: none;
 }
 
-.avatar.large {
-    --avatar-size: 40px;
-}
-
-.avatar img {
+.hydrogen .avatar img {
     width: 100%;
     height: 100%;
 }
+
+/* work around postcss-css-variables limitations and repeat variable usage */
+.hydrogen .avatar.size-128 {
+    --avatar-size: 128px;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    line-height: var(--avatar-size);
+    font-size: calc(var(--avatar-size) * 0.6);
+}
+
+.hydrogen .avatar.size-64 {
+    --avatar-size: 64px;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    line-height: var(--avatar-size);
+    font-size: calc(var(--avatar-size) * 0.6);
+}
+
+.hydrogen .avatar.size-24 {
+    --avatar-size: 24px;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    line-height: var(--avatar-size);
+    font-size: calc(var(--avatar-size) * 0.6);
+}
diff --git a/src/platform/web/ui/css/login.css b/src/platform/web/ui/css/login.css
index 5d9e2b21..aefdac42 100644
--- a/src/platform/web/ui/css/login.css
+++ b/src/platform/web/ui/css/login.css
@@ -19,7 +19,6 @@ limitations under the License.
 
 .SessionPickerView {
     padding: 0.4em;
-    --avatar-size: 32px;
 }
 
 .SessionPickerView ul {
diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index 53c09dd8..f38ba82b 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -255,7 +255,6 @@ a.button-action {
     /* make scrollbar hit right edge of parent */
     padding-right: 8px;
     margin-right: -8px;
-    --avatar-size: 32px;
 }
 
 .RoomList > li {
@@ -440,10 +439,6 @@ a {
     background-position-x: 10px;
 }
 
-.RoomHeader {
-    --avatar-size: 32px;
-}
-
 .RoomHeader .topic {
     font-size: 14rem;
 }
@@ -533,10 +528,6 @@ ul.Timeline > li.messageStatus .message-container > p {
     align-items: center;
 }
 
-.message-container .avatar {
-    --avatar-size: 25px;
-}
-
 .TextMessageView {
     width: 100%;
 }
@@ -879,12 +870,10 @@ button.link {
 
 .InviteView_roomAvatar {
     grid-area: avatar;
-    --avatar-size: 64px;
 }
 
 .InviteView_dmAvatar {
     align-self: center;
-    --avatar-size: 128px;
 }
 
 .InviteView_inviter {
@@ -893,7 +882,6 @@ button.link {
 }
 
 .InviteView_inviter .avatar {
-    --avatar-size: 24px;
     display: inline-block;
     vertical-align: middle;
     margin-right: 4px;