diff --git a/components/icon/src/vwc-icon.js b/components/icon/src/vwc-icon.js
index bd50aeec1..3eed2417b 100644
--- a/components/icon/src/vwc-icon.js
+++ b/components/icon/src/vwc-icon.js
@@ -1,6 +1,7 @@
 import '@vonage/vvd-core';
 import kefir from "kefir";
 import resolveIcon from "./icon-resolve.autogenerated";
+import { style } from "../vwc-icon.css";
 
 const [
 	SYMBOL_CONNECT,
@@ -9,10 +10,6 @@ const [
 	SYMBOL_PROPERTY_TYPE_SET
 ] = ["connect", "disconnect", "property-type", "property-type-set"].map((name) => Symbol(name));
 
-const
-	SIZES = { small: 16, medium: 24, large: 32 },
-	DEFAULT_SIZE = "medium";
-
 const noop = ()=> { };
 
 /**
@@ -34,12 +31,7 @@ class IconElement extends HTMLElement {
 			rootEl = this.attachShadow({ mode: "open" }),
 			[styleEl, slotEl] = ["style", "slot"].map((elName) => document.createElement(elName));
 
-		styleEl.innerHTML = [
-			`:host { display: inline-block; fill: currentColor; }`,
-			`: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; }`,
-			...[[null, SIZES[DEFAULT_SIZE]], ...Object.entries(SIZES)].map(([sizeId, size])=>`:host${sizeId ? `([size=${sizeId}])` : ''} { width: ${size}px; height: ${size}px; }`)
-		].join('\n');
+		styleEl.innerHTML = style.cssText;
 
 		[SYMBOL_CONNECT, SYMBOL_DISCONNECT, SYMBOL_PROPERTY_TYPE_SET].forEach((symbol) => this[symbol] = noop);
 
diff --git a/components/icon/src/vwc-icon.scss b/components/icon/src/vwc-icon.scss
new file mode 100644
index 000000000..b99e35fd6
--- /dev/null
+++ b/components/icon/src/vwc-icon.scss
@@ -0,0 +1,7 @@
+:host { display: inline-block; fill: currentColor; }
+: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 { width: 24px; height: 24px; }
+: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
diff --git a/components/icon/tsconfig.json b/components/icon/tsconfig.json
index 76e4b7493..4f612ccb3 100644
--- a/components/icon/tsconfig.json
+++ b/components/icon/tsconfig.json
@@ -1,13 +1,14 @@
 {
 	"extends": "../../tsconfig.json",
 	"compilerOptions": {
-		"allowJs": true,
 		"composite": true,
 		"rootDir": "src",
 		"outDir": ".",
 		"tsBuildInfoFile": ".tsbuildinfo"
 	},
-	"include": [],
+	"include": [
+		"src/*.ts"
+	],
 	"references": [
 		{
 			"path": "../../common/core"
diff --git a/tsconfig.json b/tsconfig.json
index b8ea4cef0..b61551546 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -60,6 +60,7 @@
 		{ "path": "components/textarea" },
 		{ "path": "components/textfield" },
 		{ "path": "components/top-app-bar" },
-		{ "path": "components/top-app-bar-fixed" }
+		{ "path": "components/top-app-bar-fixed" },
+		{ "path": "components/icon" }
 	]
 }