diff --git a/packages/component/src/Activity/Avatar.js b/packages/component/src/Activity/Avatar.js
index 2b4ee7d093..963789a98c 100644
--- a/packages/component/src/Activity/Avatar.js
+++ b/packages/component/src/Activity/Avatar.js
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 
 import connectToWebChat from '../connectToWebChat';
+import CroppedImage from '../Utils/CroppedImage';
 
 const connectAvatar = (...selectors) => connectToWebChat(
   ({
@@ -39,11 +40,15 @@ const Avatar = ({
       ) }
     >
       { avatarInitials }
-      <div
-        aria-hidden={ true }
-        className="image"
-        style={{ backgroundImage: `url(${ encodeURI(backgroundImage) })` }}
-      />
+      { !!avatarImage &&
+        <CroppedImage
+          alt=""
+          className="image"
+          height="100%"
+          src={ avatarImage }
+          width="100%"
+        />
+      }
     </div>
 
 export default connectAvatar(
diff --git a/packages/component/src/Styles/StyleSet/Avatar.js b/packages/component/src/Styles/StyleSet/Avatar.js
index 1a6094bbb7..7266891e08 100644
--- a/packages/component/src/Styles/StyleSet/Avatar.js
+++ b/packages/component/src/Styles/StyleSet/Avatar.js
@@ -21,12 +21,9 @@ export default function createAvatarStyle({
     width: avatarSize,
 
     '& > .image': {
-      backgroundSize: 'cover',
-      height: '100%',
       left: 0,
       position: 'absolute',
-      top: 0,
-      width: '100%'
+      top: 0
     }
   };
 }