diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index f6a07f07..9e4d42a0 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -34,6 +34,7 @@ exports[`Storyshots Avatar Icon 1`] = `
       className=""
       fill="#7E7F86"
       height={32}
+      width={32}
     >
       dassana.svg
     </svg>
@@ -3879,6 +3880,7 @@ exports[`Storyshots Popover Default 1`] = `
         className=""
         fill="#7E7F86"
         height={32}
+        width={32}
       >
         dassana.svg
       </svg>
@@ -3909,6 +3911,7 @@ exports[`Storyshots Popover Title 1`] = `
         className=""
         fill="#7E7F86"
         height={32}
+        width={32}
       >
         dassana.svg
       </svg>
@@ -6130,6 +6133,7 @@ exports[`Storyshots Tooltip Default 1`] = `
         className=""
         fill="#7E7F86"
         height={32}
+        width={32}
       >
         dassana.svg
       </svg>
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index 3ac45c9b..42e3a683 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -47,10 +47,14 @@ export type IconProps = IconKey | IconPath
 export const Icon: FC<IconProps> = ({ height, width, ...props }: IconProps) => {
 	const { classes = [] } = props
 
+	const areDimensionsUndefined = isUndefined(height) && isUndefined(width)
+
 	const commonProps = {
 		className: cn(classes),
-		height: isUndefined(height) && isUndefined(width) ? 32 : height,
-		width
+		// if both width and height are undefined, default both to 32.
+		// otherwise, let user control the dimensions with either just the height, width or both
+		height: areDimensionsUndefined ? 32 : height,
+		width: areDimensionsUndefined ? 32 : width
 	}
 
 	if (props.iconKey) {