diff --git a/playroom/snippets.tsx b/playroom/snippets.tsx
index 172cfc93b6..b2645fa116 100644
--- a/playroom/snippets.tsx
+++ b/playroom/snippets.tsx
@@ -615,6 +615,7 @@ const cardSnippets: Array<Snippet> = [
             title="Title"
             subtitle="Subtitle"
             description="Description"
+            icon={<Avatar size={40} src="https://source.unsplash.com/600x600/?face" />}
             extra={<Placeholder />}
             button={
                 <ButtonPrimary small onPress={() => {}}>
@@ -635,6 +636,7 @@ const cardSnippets: Array<Snippet> = [
             title="Title"
             subtitle="Subtitle"
             description="Description"
+            icon={<Avatar size={40} src="https://source.unsplash.com/600x600/?face" />}
             extra={<Placeholder />}
             button={
                 <ButtonPrimary small onPress={() => {}}>
diff --git a/src/__screenshot_tests__/__image_snapshots__/media-card-screenshot-test-tsx-media-card-group-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/media-card-screenshot-test-tsx-media-card-group-1-snap.png
index 2c39384a74..5361cda438 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/media-card-screenshot-test-tsx-media-card-group-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/media-card-screenshot-test-tsx-media-card-group-1-snap.png differ
diff --git a/src/__stories__/media-card-story.tsx b/src/__stories__/media-card-story.tsx
index 2c514091ae..4cefb4994f 100644
--- a/src/__stories__/media-card-story.tsx
+++ b/src/__stories__/media-card-story.tsx
@@ -10,11 +10,14 @@ import {
     Image,
     Tag,
     IconMobileDeviceRegular,
+    Circle,
+    skinVars,
 } from '..';
 import ResponsiveLayout from '../responsive-layout';
 import {Placeholder} from '../placeholder';
 import tennisImg from './images/tennis.jpg';
 import confettiVideo from './videos/confetti.mp4';
+import avatarImg from './images/avatar.jpg';
 
 import type {TagType} from '..';
 
@@ -26,6 +29,7 @@ const VIDEO_SRC = confettiVideo;
 const IMAGE_SRC = tennisImg;
 
 type Args = {
+    asset: 'icon' | 'circle + icon' | 'image' | 'circle + image';
     media: 'image' | 'video';
     headlineType: TagType;
     headline: string;
@@ -51,7 +55,19 @@ export const Default: StoryComponent<Args> = ({
     closable,
     withTopAction,
     media,
+    asset,
 }) => {
+    let icon;
+    if (asset === 'circle + icon') {
+        icon = (
+            <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
+                <IconMobileDeviceRegular color={skinVars.colors.brand} />
+            </Circle>
+        );
+    } else if (asset === 'circle + image') {
+        icon = <Circle size={40} backgroundImage={avatarImg} />;
+    }
+
     const button = actions.includes('button') ? (
         <ButtonPrimary small href="https://google.com">
             Action
@@ -79,6 +95,7 @@ export const Default: StoryComponent<Args> = ({
             title={title}
             subtitle={subtitle}
             description={description}
+            icon={icon}
             media={
                 media === 'video' ? (
                     <Video src={VIDEO_SRC} aspectRatio="16:9" dataAttributes={{qsysid: 'video'}} />
@@ -108,6 +125,7 @@ export const Default: StoryComponent<Args> = ({
 
 Default.storyName = 'Media card';
 Default.args = {
+    asset: 'icon',
     media: 'image',
     headlineType: 'promo',
     headline: 'Priority',
@@ -121,6 +139,10 @@ Default.args = {
     withTopAction: false,
 };
 Default.argTypes = {
+    asset: {
+        options: ['circle + icon', 'circle + image', 'none'],
+        control: {type: 'select'},
+    },
     media: {
         options: ['image', 'video'],
         control: {type: 'select'},
diff --git a/src/card.css.ts b/src/card.css.ts
index a42247def7..0947123db7 100644
--- a/src/card.css.ts
+++ b/src/card.css.ts
@@ -177,6 +177,13 @@ export const mediaCardContent = style([
     },
 ]);
 
+export const mediaCardIcon = style([
+    {
+        position: 'absolute',
+        zIndex: 1,
+    },
+]);
+
 export const nakedCardContent = style([
     sprinkles({
         display: 'flex',
diff --git a/src/card.tsx b/src/card.tsx
index e2d9c5fda2..281b00981a 100644
--- a/src/card.tsx
+++ b/src/card.tsx
@@ -439,6 +439,7 @@ interface MediaCardBaseProps {
     subtitle?: string;
     subtitleLinesMax?: number;
     description?: string;
+    icon?: React.ReactElement;
     descriptionLinesMax?: number;
     extra?: React.ReactNode;
     actions?: Array<CardAction>;
@@ -469,6 +470,7 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
             title,
             titleLinesMax,
             description,
+            icon,
             descriptionLinesMax,
             extra,
             actions,
@@ -516,6 +518,15 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
                                     buttonLink={buttonLink}
                                 />
                             </div>
+                            {icon && (
+                                <Box
+                                    className={styles.mediaCardIcon}
+                                    paddingLeft={{mobile: 16, desktop: 24}}
+                                    paddingTop={{mobile: 16, desktop: 24}}
+                                >
+                                    {icon}
+                                </Box>
+                            )}
                         </div>
                     </BaseTouchable>
                 </Boxed>