diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 4ddd43c165..02866635a1 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -1,4 +1,5 @@
 import React, {useState} from 'react';
+import {Property} from 'csstype';
 import {styled, focusRing, hideMouseFocus} from '@workday/canvas-kit-react/common';
 import isPropValid from '@emotion/is-prop-valid';
 import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
@@ -35,6 +36,13 @@ export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
    * Will render an `div` tag instead of a `button` when defined.
    */
   as?: 'div';
+  /**
+   * The object-fit CSS property sets how the content of a replaced element,
+   * such as an <img> or <video>, should be resized to fit its container.
+   * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+   * If your image is not a square, you can use this property to ensure the image is rendered properly.
+   */
+  objectFit?: Property.ObjectFit;
 }
 
 /**
@@ -107,15 +115,16 @@ const StyledIcon = styled(SystemIconCircle)<{isImageLoaded: boolean}>(
   })
 );
 
-const StyledImage = styled('img')<{isLoaded: boolean}>(
+const StyledImage = styled('img')<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
   {
     width: '100%',
     height: '100%',
     borderRadius: borderRadius.circle,
     transition: fadeTransition,
   },
-  ({isLoaded}) => ({
+  ({isLoaded, objectFit}) => ({
     opacity: isLoaded ? 1 : 0,
+    objectFit,
   })
 );
 
@@ -127,6 +136,7 @@ export const Avatar: AvatarOverload = React.forwardRef(
       altText = 'Avatar',
       url,
       onClick,
+      objectFit,
       ...elemProps
     }: AvatarProps,
     ref: React.Ref<HTMLButtonElement>
@@ -164,7 +174,13 @@ export const Avatar: AvatarOverload = React.forwardRef(
         </StyledStack>
         {url && (
           <StyledStack size={size}>
-            <StyledImage src={url} alt={altText} onLoad={loadImage} isLoaded={imageLoaded} />
+            <StyledImage
+              src={url}
+              alt={altText}
+              onLoad={loadImage}
+              isLoaded={imageLoaded}
+              objectFit={objectFit}
+            />
           </StyledStack>
         )}
       </StyledContainer>
diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
index 9de084d9ef..288a046109 100644
--- a/modules/react/avatar/stories/stories.tsx
+++ b/modules/react/avatar/stories/stories.tsx
@@ -57,6 +57,18 @@ storiesOf('Components/Indicators/Avatar', module)
       <h3>Extra Small</h3>
       <Avatar as="div" size={Avatar.Size.xs} url={testAvatar} />
     </div>
+  ))
+  .add('Non-Square Image', () => (
+    <div className="story">
+      <h3>Original Rectangle Image</h3>
+      <img alt="" src="https://placekitten.com/g/450/200" />
+      <h3>Using Object Fit on a Rectangle Image</h3>
+      <Avatar as="div" size={200} url="https://placekitten.com/g/450/200" objectFit="contain" />
+      <h3>Original Square Image</h3>
+      <img alt="" src="https://placekitten.com/g/450/450" />
+      <h3>Using a Square Image</h3>
+      <Avatar as="div" size={200} url="https://placekitten.com/g/450/450" />
+    </div>
   ));
 
 storiesOf('Components/Indicators/Avatar/Avatar Button', module)