diff --git a/packages/icon/src/render/span.ts b/packages/icon/src/render/span.ts
index b9164db..fa39639 100644
--- a/packages/icon/src/render/span.ts
+++ b/packages/icon/src/render/span.ts
@@ -30,6 +30,13 @@ for (const prefix in propsToAddTo) {
 	}
 }
 
+/**
+ * Fix size: add 'px' to numbers
+ */
+function fixSize(value: string): string {
+	return value + (value.match(/^[-0-9.]+$/) ? 'px' : '');
+}
+
 /**
  * Render node as <span>
  */
@@ -60,8 +67,8 @@ export function renderSPAN(
 	const svgStyle = node.style;
 	const styles: Record<string, string> = {
 		'--svg': url,
-		'width': renderAttribs.width,
-		'height': renderAttribs.height,
+		'width': fixSize(renderAttribs.width),
+		'height': fixSize(renderAttribs.height),
 		...(useMask ? monotoneProps : coloredProps),
 	};
 
diff --git a/packages/icon/tests/render-icon-test.ts b/packages/icon/tests/render-icon-test.ts
index d5c8fe6..13e8e90 100644
--- a/packages/icon/tests/render-icon-test.ts
+++ b/packages/icon/tests/render-icon-test.ts
@@ -119,7 +119,7 @@ describe('Testing rendering loaded icon', () => {
 
 		// Test HTML
 		expect(node.innerHTML).toBe(
-			`<style>${expectedInline}</style><span style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>`
+			`<style>${expectedInline}</style><span style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 24px; height: 24px; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>`
 		);
 	});
 });