diff --git a/react/Avatar/styles.styl b/react/Avatar/styles.styl
index deaa1fe4b2..7430aa9765 100644
--- a/react/Avatar/styles.styl
+++ b/react/Avatar/styles.styl
@@ -4,6 +4,7 @@
 .c-avatar
     @extend $circle
     @extend $avatar
+
 .c-avatar--text
     color white
 
@@ -18,6 +19,18 @@
         filter grayscale(1)
         opacity .3
 
+.c-avatar--xsmall
+    @extend $circle--xsmall
+
+.c-avatar--small
+    @extend $circle--small
+
+.c-avatar--large
+    @extend $circle--large
+
+.c-avatar--xlarge
+    @extend $circle--xlarge
+
 .c-avatar-initials
     @extend $circle-text
 
diff --git a/stylus/components/circle.styl b/stylus/components/circle.styl
index 30a26d0169..77683e0a66 100644
--- a/stylus/components/circle.styl
+++ b/stylus/components/circle.styl
@@ -1,7 +1,17 @@
 @require '../tools/mixins'
 
+circleSize(size)
+    width size
+    height size
+    min-width size
+    min-height size
+    font-size 'calc(%s / 2.28)' % size
+
 $circle
+    --circleSize rem(40)
     $size = var(--circleSize)
+
+    circleSize($size)
     display inline-flex
     align-items center
     justify-content center
@@ -9,11 +19,18 @@ $circle
     overflow hidden
     background-color var(--dodgerBlue)
     color var(--white)
-    width $size
-    height $size
-    min-width $size
-    min-height $size
-    font-size 'calc(%s / 2.28)' % $size
+
+$circle--xsmall
+    circleSize(rem(16))
+
+$circle--small
+    circleSize(rem(32))
+
+$circle--large
+    circleSize(rem(48))
+
+$circle--xlarge
+    circleSize(rem(64))
 
 $circle-text
     font-weight bold