diff --git a/packages/font-icons/scss/_variables.scss b/packages/font-icons/scss/_variables.scss
index c26369a6..fc9b3818 100644
--- a/packages/font-icons/scss/_variables.scss
+++ b/packages/font-icons/scss/_variables.scss
@@ -1,3 +1,5 @@
+@use "./_font.scss" as *;
+
 $ki-font-family: "WebComponentsIcons" !default;
 $ki-icon-size: 16px !default;
 
diff --git a/packages/font-icons/scss/all.scss b/packages/font-icons/scss/all.scss
index 23d1f1f8..6bf13d40 100644
--- a/packages/font-icons/scss/all.scss
+++ b/packages/font-icons/scss/all.scss
@@ -1,3 +1,4 @@
-@import "index.scss";
+@forward "index.scss";
+@use "index.scss" as *;
 
 @include kendo-font-icon-styles();
diff --git a/packages/font-icons/scss/index.scss b/packages/font-icons/scss/index.scss
index 976a5884..5d705c25 100644
--- a/packages/font-icons/scss/index.scss
+++ b/packages/font-icons/scss/index.scss
@@ -1,6 +1,8 @@
-@import "_font.scss";
-@import"_variables.scss";
-@import "_icon-list.scss";
+@forward "_variables.scss";
+
+@use "_font.scss" as *;
+@use "_variables.scss" as *;
+@use "_icon-list.scss" as *;
 
 @mixin kendo-font-icon-styles() {
 
diff --git a/packages/svg-icons/scss/all.scss b/packages/svg-icons/scss/all.scss
index 58125da6..1e9ca84e 100644
--- a/packages/svg-icons/scss/all.scss
+++ b/packages/svg-icons/scss/all.scss
@@ -1,3 +1,4 @@
-@import "index.scss";
+@forward "index.scss";
+@use "index.scss" as *;
 
 @include kendo-svg-icon-styles();
diff --git a/packages/svg-icons/scss/index.scss b/packages/svg-icons/scss/index.scss
index 35cbe40b..a1714515 100644
--- a/packages/svg-icons/scss/index.scss
+++ b/packages/svg-icons/scss/index.scss
@@ -1,4 +1,5 @@
-@import "_variables.scss";
+@forward "_variables.scss";
+@use "_variables.scss" as *;
 
 @mixin kendo-svg-icon-styles() {