diff --git a/packages/docs/src/pages/components/avatar.js b/packages/docs/src/pages/components/avatar.js
index 73e93d3..367baa1 100644
--- a/packages/docs/src/pages/components/avatar.js
+++ b/packages/docs/src/pages/components/avatar.js
@@ -70,6 +70,24 @@ const Documentation = () => {
             <Avatar size="large"  src="https://github.com/sameen-shi.png" />
           `}</Example.Code>
         </Example>
+
+        <Example title="Responsive Size">
+          <Para>
+            <Text variant="subtle" size={3}>
+              (Try resizing the browser window to see this in effect. If you're
+              on mobile, try switching to landscape mode)
+            </Text>
+          </Para>
+          <Example.Preview>
+            <Avatar
+              size={['small', 'medium', 'large']}
+              src="https://github.com/sameen-shi.png"
+            />
+          </Example.Preview>
+          <Example.Code>{`
+            <Avatar size={["small", "medium", "large"]} src="https://github.com/sameen-shi.png" />
+          `}</Example.Code>
+        </Example>
       </Section>
 
       <Section title="Customisation">
diff --git a/packages/react-ui/src/components/avatar/index.js b/packages/react-ui/src/components/avatar/index.js
index 3525930..1c939d0 100644
--- a/packages/react-ui/src/components/avatar/index.js
+++ b/packages/react-ui/src/components/avatar/index.js
@@ -20,7 +20,10 @@ Avatar.propTypes = {
   /** Image url for avatar */
   src: PropTypes.string.isRequired,
   /** size of avatar */
-  size: PropTypes.string
+  size: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ])
 }
 
 Avatar.defaultProps = {}
diff --git a/packages/react-ui/src/primitives/element.js b/packages/react-ui/src/primitives/element.js
index d45e125..9fd6aeb 100644
--- a/packages/react-ui/src/primitives/element.js
+++ b/packages/react-ui/src/primitives/element.js
@@ -75,8 +75,11 @@ function Element(
     if (typeof theme.sizes[component] !== 'object') {
       // single value, attach to component
       value = theme.sizes[component]
+    } else if (Array.isArray(size)) {
+      // if its multiple values and size is array (responsive), attach the corresponding key
+      value = size.map(s => theme.sizes[component][s]);
     } else {
-      // if its multiple values, attach the corresponding key
+      // if its multiple values and size is single value (non reponsive), attach the corresponding key
       value = theme.sizes[component][size]
     }