diff --git a/packages/pluggableWidgets/image-web/CHANGELOG.md b/packages/pluggableWidgets/image-web/CHANGELOG.md
index 91deee3d0c..6d2ff1ddc9 100644
--- a/packages/pluggableWidgets/image-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/image-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where showing icons as datasource would scale the icon container disproportionately and cause alignment issues.
+
 ## [1.5.0] - 2025-08-29
 
 ### Added
diff --git a/packages/pluggableWidgets/image-web/src/Image.editorConfig.ts b/packages/pluggableWidgets/image-web/src/Image.editorConfig.ts
index 806521a99d..28e9f33846 100644
--- a/packages/pluggableWidgets/image-web/src/Image.editorConfig.ts
+++ b/packages/pluggableWidgets/image-web/src/Image.editorConfig.ts
@@ -91,7 +91,14 @@ export function getProperties(
     }
 
     if (values.datasource === "icon" && (values.imageIcon?.type === "glyph" || values.imageIcon?.type === "icon")) {
-        hidePropertiesIn(defaultProperties, values, ["widthUnit", "width", "heightUnit", "height"]);
+        hidePropertiesIn(defaultProperties, values, [
+            "widthUnit",
+            "width",
+            "heightUnit",
+            "height",
+            "minHeightUnit",
+            "maxHeightUnit"
+        ]);
     } else {
         hidePropertyIn(defaultProperties, values, "iconSize");
     }
diff --git a/packages/pluggableWidgets/image-web/src/Image.tsx b/packages/pluggableWidgets/image-web/src/Image.tsx
index 0d3f8a9224..d6745017b2 100644
--- a/packages/pluggableWidgets/image-web/src/Image.tsx
+++ b/packages/pluggableWidgets/image-web/src/Image.tsx
@@ -61,7 +61,7 @@ export const Image: FunctionComponent<ImageContainerProps> = props => {
     const { type, image } = getImageProps(props);
 
     const altText = props.alternativeText?.status === ValueStatus.Available ? props.alternativeText.value : undefined;
-    const styleObject = constructStyleObject(props);
+    const styleObject = type === "image" && constructStyleObject(props);
 
     const imageStyle = { ...props.style, ...styleObject };
 
diff --git a/packages/pluggableWidgets/image-web/src/components/Image/Image.tsx b/packages/pluggableWidgets/image-web/src/components/Image/Image.tsx
index e22b7c451e..826b9c1c68 100644
--- a/packages/pluggableWidgets/image-web/src/components/Image/Image.tsx
+++ b/packages/pluggableWidgets/image-web/src/components/Image/Image.tsx
@@ -129,6 +129,7 @@ export const Image: FunctionComponent<ImageProps> = ({
         <ImageUi.Wrapper
             className={className}
             responsive={responsive}
+            type={type}
             hasImage={image !== undefined && image.length > 0}
         >
             {content}
diff --git a/packages/pluggableWidgets/image-web/src/components/Image/ui.tsx b/packages/pluggableWidgets/image-web/src/components/Image/ui.tsx
index ae9d44bc37..932e7cf877 100644
--- a/packages/pluggableWidgets/image-web/src/components/Image/ui.tsx
+++ b/packages/pluggableWidgets/image-web/src/components/Image/ui.tsx
@@ -19,6 +19,7 @@ export interface ImageWrapperProps {
     className?: string;
     responsive: boolean;
     hasImage: boolean;
+    type: string;
     children:
         | ReactElement<ImageContentIcon | ImageContentImage>
         | [ReactElement<ImageContentIcon | ImageContentImage>, ReactElement<LightboxProps> | false];
@@ -37,6 +38,7 @@ function Wrapper(props: ImageWrapperProps): ReactElement {
             className={classNames(
                 "mx-image-viewer",
                 { "mx-image-viewer-responsive": props.responsive },
+                { "mx-image-viewer-icon": props.type === "glyph" || props.type === "icon" },
                 props.className,
                 { hidden: !props.hasImage }
             )}
diff --git a/packages/pluggableWidgets/image-web/src/components/__tests__/__snapshots__/Image.spec.tsx.snap b/packages/pluggableWidgets/image-web/src/components/__tests__/__snapshots__/Image.spec.tsx.snap
index 7105b7bfe0..8fdceca35a 100644
--- a/packages/pluggableWidgets/image-web/src/components/__tests__/__snapshots__/Image.spec.tsx.snap
+++ b/packages/pluggableWidgets/image-web/src/components/__tests__/__snapshots__/Image.spec.tsx.snap
@@ -16,7 +16,7 @@ exports[`Image renders the structure as a background image 1`] = `
 exports[`Image renders the structure with a glyph icon 1`] = `
 <DocumentFragment>
   <div
-    class="mx-image-viewer mx-image-viewer-responsive"
+    class="mx-image-viewer mx-image-viewer-responsive mx-image-viewer-icon"
   >
     <span
       class="glyphicon-asterisk glyphicon"
@@ -30,7 +30,7 @@ exports[`Image renders the structure with a glyph icon 1`] = `
 exports[`Image renders the structure with an icon 1`] = `
 <DocumentFragment>
   <div
-    class="mx-image-viewer mx-image-viewer-responsive"
+    class="mx-image-viewer mx-image-viewer-responsive mx-image-viewer-icon"
   >
     <span
       class="mx-icon mx-icon-asterisk"
diff --git a/packages/pluggableWidgets/image-web/src/ui/Image.scss b/packages/pluggableWidgets/image-web/src/ui/Image.scss
index d02cadfaca..6fbec8e994 100644
--- a/packages/pluggableWidgets/image-web/src/ui/Image.scss
+++ b/packages/pluggableWidgets/image-web/src/ui/Image.scss
@@ -1,6 +1,9 @@
 .mx-image-viewer {
     width: 100%;
     height: 100%;
+    &-icon {
+        height: unset;
+    }
 }
 
 .mx-image-viewer-responsive img {