diff --git a/src/BootstrapBlazor/Components/Icon/BootstrapBlazorIcon.razor.scss b/src/BootstrapBlazor/Components/Icon/BootstrapBlazorIcon.razor.scss
index c14eb0e2261..ba65f6c914e 100644
--- a/src/BootstrapBlazor/Components/Icon/BootstrapBlazorIcon.razor.scss
+++ b/src/BootstrapBlazor/Components/Icon/BootstrapBlazorIcon.razor.scss
@@ -1,5 +1,5 @@
 .bb-icon {
-    --bb-icon-width: 12px;
+    --bb-icon-width: #{$bb-icon-width};
     --bb-icon-color: var(--bs-body-color);
     display: inline-flex;
 
diff --git a/src/BootstrapBlazor/Components/Icon/SvgIcon.razor.css b/src/BootstrapBlazor/Components/Icon/SvgIcon.razor.scss
similarity index 67%
rename from src/BootstrapBlazor/Components/Icon/SvgIcon.razor.css
rename to src/BootstrapBlazor/Components/Icon/SvgIcon.razor.scss
index 1068c59281a..a05bafe6572 100644
--- a/src/BootstrapBlazor/Components/Icon/SvgIcon.razor.css
+++ b/src/BootstrapBlazor/Components/Icon/SvgIcon.razor.scss
@@ -1,14 +1,14 @@
-.bb-svg-icon {
-    --bb-svg-icon-width: 12px;
+.bb-svg-icon {
+    --bb-svg-icon-width: #{$bb-svg-icon-width};
     --bb-svg-icon-color: var(--bs-body-color);
     display: inline-flex;
-}
 
-    .bb-svg-icon > svg {
+    > svg {
         width: var(--bb-svg-icon-width);
         height: var(--bb-svg-icon-width);
-    }
 
-        .bb-svg-icon > svg > * {
+        > * {
             stroke: var(--bb-svg-icon-color);
         }
+    }
+}
diff --git a/src/BootstrapBlazor/wwwroot/scss/components.scss b/src/BootstrapBlazor/wwwroot/scss/components.scss
index 4551beb7eec..bb5e3c9ddbe 100644
--- a/src/BootstrapBlazor/wwwroot/scss/components.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/components.scss
@@ -47,6 +47,7 @@
 @import "../../Components/GroupBox/GroupBox.razor.scss";
 @import "../../Components/Handwritten/Handwritten.razor.scss";
 @import "../../Components/Icon/BootstrapBlazorIcon.razor.scss";
+@import "../../Components/Icon/SvgIcon.razor.scss";
 @import "../../Components/IFrame/IFrame.razor.scss";
 @import "../../Components/ImagePreviewer/ImagePreviewer.razor.scss";
 @import "../../Components/ImageViewer/ImageViewer.razor.scss";
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
index dbb21477eaf..2731b5b09c1 100644
--- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
@@ -306,6 +306,12 @@ $bb-groupbox-legend-padding: 0 .5rem;
 $bb-groupbox-legend-left: 1rem;
 $bb-groupbox-legend-top: -10px;
 
+// Icon
+$bb-icon-width: 12px;
+
+// Icon Svg
+$bb-svg-icon-width: 12px;
+
 // ImagePreviewer
 $bb-viewer-button-bg: #606266;
 $bb-viewer-border-radius: 50%;