diff --git a/packages/avatars/package.json b/packages/avatars/package.json
index 5ac6a0a23ad..accaed5636e 100644
--- a/packages/avatars/package.json
+++ b/packages/avatars/package.json
@@ -29,7 +29,7 @@
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
-    "@zendeskgarden/css-avatars": "3.0.11",
+    "@zendeskgarden/css-avatars": "4.0.0",
     "@zendeskgarden/react-theming": "^3.1.3"
   },
   "keywords": [
diff --git a/packages/avatars/src/Avatar.example.md b/packages/avatars/src/Avatar.example.md
index b4e4ecc8bbf..f2a09c71f3c 100644
--- a/packages/avatars/src/Avatar.example.md
+++ b/packages/avatars/src/Avatar.example.md
@@ -24,6 +24,11 @@ For accessibility ensure that all children include an `alt` description.
 ```jsx
 <Grid>
   <Row alignItems="center" justifyContent="center">
+    <Col md>
+      <Avatar size="extrasmall">
+        <img src="images/jason.png" alt="Example Avatar" />
+      </Avatar>
+    </Col>
     <Col md>
       <Avatar size="small">
         <img src="images/jason.png" alt="Example Avatar" />
@@ -47,6 +52,23 @@ For accessibility ensure that all children include an `alt` description.
 
 ```jsx
 <Grid>
+  <Row>
+    <Col md={4}>
+      <Avatar size="extrasmall">
+        <img src="images/jason.png" alt="Example Avatar" />
+      </Avatar>
+    </Col>
+    <Col md={4}>
+      <Avatar disabled size="extrasmall">
+        <img src="images/jason.png" alt="Example Avatar" />
+      </Avatar>
+    </Col>
+    <Col md={4}>
+      <Avatar isBorderless size="extrasmall">
+        <img src="images/amir.png" alt="Example Avatar" />
+      </Avatar>
+    </Col>
+  </Row>
   <Row>
     <Col md={4}>
       <Avatar size="small">
diff --git a/packages/avatars/src/Avatar.js b/packages/avatars/src/Avatar.js
index fc1547ca381..28080eb215d 100644
--- a/packages/avatars/src/Avatar.js
+++ b/packages/avatars/src/Avatar.js
@@ -13,6 +13,7 @@ import AvatarStyles from '@zendeskgarden/css-avatars';
 
 const COMPONENT_ID = 'avatars.avatar';
 const SIZE = {
+  EXTRASMALL: 'extrasmall',
   SMALL: 'small',
   LARGE: 'large'
 };
@@ -29,8 +30,9 @@ const Avatar = styled.figure.attrs({
       [AvatarStyles['c-avatar--system']]: props.system,
 
       // Sizes
-      [AvatarStyles['c-avatar--small']]: props.size === SIZE.SMALL,
-      [AvatarStyles['c-avatar--large']]: props.size === SIZE.LARGE,
+      [AvatarStyles['c-avatar--xs']]: props.size === SIZE.EXTRASMALL,
+      [AvatarStyles['c-avatar--sm']]: props.size === SIZE.SMALL,
+      [AvatarStyles['c-avatar--lg']]: props.size === SIZE.LARGE,
 
       // State
       [AvatarStyles['is-disabled']]: props.disabled,
@@ -43,7 +45,7 @@ const Avatar = styled.figure.attrs({
 Avatar.propTypes = {
   /** Applies system styling */
   system: PropTypes.bool,
-  size: PropTypes.oneOf([SIZE.SMALL, SIZE.LARGE]),
+  size: PropTypes.oneOf([SIZE.EXTRASMALL, SIZE.SMALL, SIZE.LARGE]),
   disabled: PropTypes.bool,
   /** Removes border for improved display on a dark background */
   isBorderless: PropTypes.bool
diff --git a/packages/avatars/src/Avatar.spec.js b/packages/avatars/src/Avatar.spec.js
index 40b9314f046..f362dab850f 100644
--- a/packages/avatars/src/Avatar.spec.js
+++ b/packages/avatars/src/Avatar.spec.js
@@ -25,7 +25,7 @@ describe('Avatar', () => {
   });
 
   describe('Sizes', () => {
-    ['small', 'large'].forEach(size => {
+    ['extrasmall', 'small', 'large'].forEach(size => {
       it(`applies ${size} correctly if provided`, () => {
         const wrapper = shallow(<Avatar size={size}>{defaultImage}</Avatar>);
 
diff --git a/packages/avatars/src/__snapshots__/Avatar.spec.js.snap b/packages/avatars/src/__snapshots__/Avatar.spec.js.snap
index 5e9f88c1b08..48aa39a0010 100644
--- a/packages/avatars/src/__snapshots__/Avatar.spec.js.snap
+++ b/packages/avatars/src/__snapshots__/Avatar.spec.js.snap
@@ -1,8 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Avatar Sizes applies extrasmall correctly if provided 1`] = `
+<figure
+  className="c-avatar c-avatar--xs "
+  data-garden-id="avatars.avatar"
+  data-garden-version="version"
+  size="extrasmall"
+>
+  <img
+    alt="test"
+    src="test"
+  />
+</figure>
+`;
+
 exports[`Avatar Sizes applies large correctly if provided 1`] = `
 <figure
-  className="c-avatar c-avatar--large "
+  className="c-avatar c-avatar--lg "
   data-garden-id="avatars.avatar"
   data-garden-version="version"
   size="large"
@@ -16,7 +30,7 @@ exports[`Avatar Sizes applies large correctly if provided 1`] = `
 
 exports[`Avatar Sizes applies small correctly if provided 1`] = `
 <figure
-  className="c-avatar c-avatar--small "
+  className="c-avatar c-avatar--sm "
   data-garden-id="avatars.avatar"
   data-garden-version="version"
   size="small"