diff --git a/.eslintignore b/.eslintignore
index 2977080e3..b86a8d03f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -5,6 +5,7 @@
 **/*.js
 !**/test/*.js
 !**/stories/**/*.js
+**/stories/**/*autogenerated*.js
 
 **/*.tsbuildinfo
 **/storybook-static
diff --git a/__snapshots__/icon button.md b/__snapshots__/icon button.md
index faa877048..6e92420fe 100644
--- a/__snapshots__/icon button.md	
+++ b/__snapshots__/icon button.md	
@@ -8,7 +8,7 @@
   class="mdc-icon-button"
 >
   <vwc-icon
-    class="vwc-icon"
+    class="vvd-icon"
     size="small"
     type="bin"
   >
diff --git a/components/button/src/vwc-button.scss b/components/button/src/vwc-button.scss
index ad83c21cc..15abd95c3 100644
--- a/components/button/src/vwc-button.scss
+++ b/components/button/src/vwc-button.scss
@@ -38,8 +38,7 @@
 
 	&:not(.mdc-button--dense) {
 		.vvd-icon {
-			min-height: 18px;
-			min-width: 18px;
+			--icon-size: 20px;
 		}
 	}
 
@@ -65,6 +64,10 @@
 
 	.mdc-button {
 		height: 32px;
+
+		.vvd-icon {
+			--icon-size: 16px;
+		}
 	}
 }
 
@@ -75,8 +78,7 @@
 		height: 48px;
 
 		.vvd-icon {
-			min-height: 20px;
-			min-width: 20px;
+			--icon-size: 24px;
 		}
 
 		> span.trailing-icon {
diff --git a/components/icon-button/src/vwc-icon-button.scss b/components/icon-button/src/vwc-icon-button.scss
index 87aeca254..d51cb80ed 100644
--- a/components/icon-button/src/vwc-icon-button.scss
+++ b/components/icon-button/src/vwc-icon-button.scss
@@ -20,10 +20,8 @@
 		overflow: hidden;
 	}
 
-	.vwc-icon {
-		--size: 20px;
-		height: var(--size);
-		width: var(--size);
+	.vvd-icon {
+		--icon-size: 20px;
 	}
 }
 
@@ -58,16 +56,16 @@
 :host([dense]) {
 	--mdc-icon-button-size: 32px;
 
-	.vwc-icon {
-		--size: 16px;
+	.vvd-icon {
+		--icon-size: 16px;
 	}
 }
 
 :host([enlarged]) {
 	--mdc-icon-button-size: 48px;
 
-	.vwc-icon {
-		--size: 24px;
+	.vvd-icon {
+		--icon-size: 24px;
 	}
 }
 
diff --git a/components/icon-button/src/vwc-icon-button.ts b/components/icon-button/src/vwc-icon-button.ts
index c8447d476..e1ee1351b 100644
--- a/components/icon-button/src/vwc-icon-button.ts
+++ b/components/icon-button/src/vwc-icon-button.ts
@@ -83,7 +83,7 @@ export class VWCIconButton extends MWCIconButton {
 
 	protected renderIcon(): TemplateResult {
 		return html`<vwc-icon
-			class="vwc-icon"
+			class="vvd-icon"
 			size="small"
 			type="${this.icon}"
 		></vwc-icon>`;
diff --git a/components/icon/src/vwc-icon.scss b/components/icon/src/vwc-icon.scss
index e265198b7..e9075f1de 100644
--- a/components/icon/src/vwc-icon.scss
+++ b/components/icon/src/vwc-icon.scss
@@ -1,6 +1,25 @@
-:host { display: inline-block; fill: currentColor; width: 24px; height: 24px; }
-:host > slot { margin: 0; padding: 0; display: block; position: relative; width: 100%; height: 100%; }
-:host > slot > svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
-:host([size=small]) { width: 16px; height: 16px; }
-:host([size=medium]) { width: 24px; height: 24px; }
-:host([size=large]) { width: 32px; height: 32px; }
\ No newline at end of file
+$size-variable-name: --icon-size;
+
+:host([size=small]) {
+	#{$size-variable-name}: 16px;
+}
+:host, :host([size=medium]) {
+	#{$size-variable-name}: 24px;
+}
+:host([size=large]) {
+	#{$size-variable-name}: 32px;
+}
+
+:host {
+	display: inline-flex;
+	fill: currentColor;
+	width: var(#{$size-variable-name});
+	height: var(#{$size-variable-name});
+	inline-size: var(#{$size-variable-name});
+	block-size: var(#{$size-variable-name});
+
+	svg {
+		flex-grow: 1;
+		align-items: stretch;
+	}
+}
\ No newline at end of file
diff --git a/components/icon/test/icon.test.js b/components/icon/test/icon.test.js
index 651368924..cad4a080c 100644
--- a/components/icon/test/icon.test.js
+++ b/components/icon/test/icon.test.js
@@ -1,4 +1,11 @@
 import '@vonage/vwc-icon';
+import {
+	waitInterval,
+	isolatedElementsCreation,
+	textToDomToParent,
+	assertDistancePixels,
+	assertComputedStyle,
+} from '../../../test/test-helpers.js';
 
 const LOAD_TIME = 400;
 const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
@@ -43,4 +50,35 @@ describe('vwc-icon', () => {
 			});
 		});
 	});
+
+	describe('icon layout', () => {
+		const addElement = isolatedElementsCreation();
+		const ICON_SIZES = {
+			small: '16px',
+			medium: '24px',
+			large: '32px',
+		};
+
+		for (const [sizeName, sizeValue] of Object.entries(ICON_SIZES)) {
+			it(`'${sizeName}' icon should be sized property`, async () => {
+				const [e] = addElement(
+					textToDomToParent(`<vwc-icon type="home" size="${sizeName}"></vwc-icon>`)
+				);
+				await waitInterval(LOAD_TIME);
+				const svg = e.shadowRoot.querySelector('svg');
+				assertComputedStyle(e, { width: sizeValue, height: sizeValue });
+				assertComputedStyle(svg, { width: sizeValue, height: sizeValue });
+			});
+
+			it(`'${sizeName}' icon should be located property`, async () => {
+				const [e] = addElement(
+					textToDomToParent(`<vwc-icon type="home" size="${sizeName}"></vwc-icon>`)
+				);
+				await waitInterval(LOAD_TIME);
+				const svg = e.shadowRoot.querySelector('svg');
+				assertDistancePixels(e, svg, 'top', 0);
+				assertDistancePixels(e, svg, 'left', 0);
+			});
+		}
+	});
 });
diff --git a/components/tab-bar/src/vwc-tab.scss b/components/tab-bar/src/vwc-tab.scss
index 9e2320729..204dccd82 100644
--- a/components/tab-bar/src/vwc-tab.scss
+++ b/components/tab-bar/src/vwc-tab.scss
@@ -15,9 +15,9 @@
 }
 
 .vvd-icon {
+  --icon-size: 20px;
   color: var(--mdc-tab-text-label-color-default);
-  height: 20px;
-  width: 20px;
+  vertical-align: sub;
 }
 
 :host([active]) {
diff --git a/components/textfield/src/vwc-textfield.scss b/components/textfield/src/vwc-textfield.scss
index 89416a612..b171202da 100644
--- a/components/textfield/src/vwc-textfield.scss
+++ b/components/textfield/src/vwc-textfield.scss
@@ -175,11 +175,10 @@
 	}
 
 	vwc-icon {
+		--icon-size: #{textfield-variables.$icon-size};
 		align-self: center;
 		padding: 0;
 		margin: 0 #{textfield-variables.$horizontal-gutter};
-		min-block-size: textfield-variables.$icon-size;
-		min-inline-size: textfield-variables.$icon-size;
 	}
 }