diff --git a/src/components/AvatarSkeleton.tsx b/src/components/AvatarSkeleton.tsx
index a6781448c3ba..273143f76098 100644
--- a/src/components/AvatarSkeleton.tsx
+++ b/src/components/AvatarSkeleton.tsx
@@ -6,12 +6,12 @@ import SkeletonViewContentLoader from './SkeletonViewContentLoader';
 
 function AvatarSkeleton() {
     const theme = useTheme();
-    const skeletonCircleRadius = variables.componentSizeSmall / 2;
+    const skeletonCircleRadius = variables.sidebarAvatarSize / 2;
 
     return (
         <SkeletonViewContentLoader
             animate
-            height={variables.componentSizeSmall}
+            height={variables.sidebarAvatarSize}
             backgroundColor={theme.skeletonLHNIn}
             foregroundColor={theme.skeletonLHNOut}
         >
diff --git a/src/styles/index.ts b/src/styles/index.ts
index df89cd823fa4..50a9743f1124 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1443,9 +1443,9 @@ const styles = (theme: ThemeColors) =>
         },
 
         sidebarAvatar: {
-            borderRadius: 28,
-            height: 28,
-            width: 28,
+            borderRadius: variables.sidebarAvatarSize,
+            height: variables.sidebarAvatarSize,
+            width: variables.sidebarAvatarSize,
         },
 
         selectedAvatarBorder: {
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 0ebc4e60991f..d911a2fc4b0e 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -83,6 +83,7 @@ export default {
     iconSizeSuperLarge: 60,
     iconSizeUltraLarge: 120,
     iconBottomBar: 24,
+    sidebarAvatarSize: 28,
     iconHeader: 48,
     emojiSize: 20,
     emojiLineHeight: 28,