diff --git a/packages/html/src/bottom-nav/bottom-nav-item.tsx b/packages/html/src/bottom-nav/bottom-nav-item.tsx
index a17fbe2576b..66362810ce2 100644
--- a/packages/html/src/bottom-nav/bottom-nav-item.tsx
+++ b/packages/html/src/bottom-nav/bottom-nav-item.tsx
@@ -45,7 +45,7 @@ export const BottomNavItem = (
                 disabled
             })
         )}>
-            { icon && <Icon className="k-bottom-nav-item-icon" icon={icon} /> }
+            { icon && <Icon className="k-bottom-nav-item-icon" icon={icon} size="xlarge" /> }
 
             { text && <span className="k-bottom-nav-item-text">{text}</span> }
 
diff --git a/packages/html/src/bottom-nav/tests/bottom-nav-items.tsx b/packages/html/src/bottom-nav/tests/bottom-nav-items.tsx
index 3af5e169425..c6dceaa7264 100644
--- a/packages/html/src/bottom-nav/tests/bottom-nav-items.tsx
+++ b/packages/html/src/bottom-nav/tests/bottom-nav-items.tsx
@@ -32,19 +32,19 @@ root.render(
                 <h4>Bottom Navigation with BUTTON</h4>
                 <BottomNav fillMode="flat" themeColor="primary" border flow="vertical">
                     <button className="k-bottom-nav-item">
-                        <Icon className="k-bottom-nav-item-icon" icon="envelop" />
+                        <Icon className="k-bottom-nav-item-icon" icon="envelop" size="xlarge" />
                         <span className="k-bottom-nav-item-text">Normal</span>
                     </button>
                     <button className="k-bottom-nav-item k-focus">
-                        <Icon className="k-bottom-nav-item-icon" icon="envelop" />
+                        <Icon className="k-bottom-nav-item-icon" icon="envelop" size="xlarge" />
                         <span className="k-bottom-nav-item-text">Focused</span>
                     </button>
                     <button className="k-bottom-nav-item k-selected">
-                        <Icon className="k-bottom-nav-item-icon" icon="envelop" />
+                        <Icon className="k-bottom-nav-item-icon" icon="envelop" size="xlarge" />
                         <span className="k-bottom-nav-item-text">Selected</span>
                     </button>
                     <button className="k-bottom-nav-item k-disabled">
-                        <Icon className="k-bottom-nav-item-icon" icon="envelop" />
+                        <Icon className="k-bottom-nav-item-icon" icon="envelop" size="xlarge" />
                         <span className="k-bottom-nav-item-text">Disabled</span>
                     </button>
                 </BottomNav>
@@ -54,19 +54,19 @@ root.render(
                 <h4>Bottom Navigation with A</h4>
                 <BottomNav fillMode="flat" themeColor="primary" border flow="vertical">
                     <a className="k-bottom-nav-item">
-                        <Icon className="k-bottom-nav-item-icon" icon="envelop" />
+                        <Icon className="k-bottom-nav-item-icon" icon="envelop" size="xlarge" />
                         <span className="k-bottom-nav-item-text">Normal</span>
                     </a>
                     <a className="k-bottom-nav-item k-focus" href="#">
-                        <Icon className="k-bottom-nav-item-icon" icon="envelop" />
+                        <Icon className="k-bottom-nav-item-icon" icon="envelop" size="xlarge" />
                         <span className="k-bottom-nav-item-text">Focused</span>
                     </a>
                     <a className="k-bottom-nav-item k-selected">
-                        <Icon className="k-bottom-nav-item-icon" icon="envelop" />
+                        <Icon className="k-bottom-nav-item-icon" icon="envelop" size="xlarge" />
                         <span className="k-bottom-nav-item-text">Selected</span>
                     </a>
                     <a className="k-bottom-nav-item k-disabled">
-                        <Icon className="k-bottom-nav-item-icon" icon="envelop" />
+                        <Icon className="k-bottom-nav-item-icon" icon="envelop" size="xlarge" />
                         <span className="k-bottom-nav-item-text">Disabled</span>
                     </a>
                 </BottomNav>
diff --git a/packages/html/src/breadcrumb/tests/breadcrumb-rtl.tsx b/packages/html/src/breadcrumb/tests/breadcrumb-rtl.tsx
index 7ee7a2fb644..a7c532f914b 100644
--- a/packages/html/src/breadcrumb/tests/breadcrumb-rtl.tsx
+++ b/packages/html/src/breadcrumb/tests/breadcrumb-rtl.tsx
@@ -24,34 +24,34 @@ root.render(
 
                     <BreadcrumbContainer collapsing="wrap">
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink disabled icontext>
                                 <Icon icon="clock" />
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink>
                                 <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink>
                                 <span className="test"></span>
                                 <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink icon>
                                 <Icon icon="clock" />
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink disabled>
                                 <BreadcrumbItemText text="Fifth item"></BreadcrumbItemText>
                             </BreadcrumbLink>
@@ -72,34 +72,34 @@ root.render(
 
                     <BreadcrumbContainer collapsing="wrap">
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink disabled icontext>
                                 <Icon icon="clock" />
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink>
                                 <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink>
                                 <span className="test"></span>
                                 <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink icon>
                                 <Icon icon="clock" />
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink disabled>
                                 <BreadcrumbItemText text="Fifth item"></BreadcrumbItemText>
                             </BreadcrumbLink>
@@ -120,34 +120,34 @@ root.render(
 
                     <BreadcrumbContainer collapsing="wrap">
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink disabled icontext>
                                 <Icon icon="clock" />
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink>
                                 <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink>
                                 <span className="test"></span>
                                 <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink icon>
                                 <Icon icon="clock" />
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink disabled>
                                 <BreadcrumbItemText text="Fifth item"></BreadcrumbItemText>
                             </BreadcrumbLink>
@@ -164,19 +164,19 @@ root.render(
                             <BreadcrumbLink root icon>
                                 <Icon icon="home" />
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
                             <BreadcrumbLink disabled>
@@ -194,19 +194,19 @@ root.render(
                             <BreadcrumbLink root icon focus>
                                 <Icon icon="home" />
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink focus>
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
                             <BreadcrumbLink disabled>
@@ -224,19 +224,19 @@ root.render(
                             <BreadcrumbLink root icon hover>
                                 <Icon icon="home" />
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink hover>
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
                             <BreadcrumbLink disabled>
@@ -254,20 +254,20 @@ root.render(
                             <BreadcrumbLink root icon hover>
                                 <Icon icon="home" />
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink icontext>
                                 <Icon icon="cloud" />
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink icon>
                                 <Icon icon="camera" />
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
                             <BreadcrumbLink disabled>
@@ -286,19 +286,19 @@ root.render(
                             <BreadcrumbLink root icon>
                                 <Icon icon="home" />
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
                             <BreadcrumbLink disabled>
@@ -332,13 +332,13 @@ root.render(
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem hidden>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
                             <BreadcrumbLink disabled>
diff --git a/packages/html/src/breadcrumb/tests/breadcrumb.tsx b/packages/html/src/breadcrumb/tests/breadcrumb.tsx
index 3aa67204269..24c6b9b8fe4 100644
--- a/packages/html/src/breadcrumb/tests/breadcrumb.tsx
+++ b/packages/html/src/breadcrumb/tests/breadcrumb.tsx
@@ -24,34 +24,34 @@ root.render(
 
                     <BreadcrumbContainer collapsing="wrap">
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink disabled icontext>
                                 <Icon icon="clock" />
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
                                 <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
                                 <span className="test"></span>
                                 <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink icon>
                                 <Icon icon="clock" />
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink disabled>
                                 <BreadcrumbItemText text="Fifth item"></BreadcrumbItemText>
                             </BreadcrumbLink>
@@ -72,34 +72,34 @@ root.render(
 
                     <BreadcrumbContainer collapsing="wrap">
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink disabled icontext>
                                 <Icon icon="clock" />
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
                                 <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
                                 <span className="test"></span>
                                 <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink icon>
                                 <Icon icon="clock" />
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink disabled>
                                 <BreadcrumbItemText text="Fifth item"></BreadcrumbItemText>
                             </BreadcrumbLink>
@@ -120,34 +120,34 @@ root.render(
 
                     <BreadcrumbContainer collapsing="wrap">
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink disabled icontext>
                                 <Icon icon="clock" />
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
                                 <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
                                 <span className="test"></span>
                                 <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink icon>
                                 <Icon icon="clock" />
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink disabled>
                                 <BreadcrumbItemText text="Fifth item"></BreadcrumbItemText>
                             </BreadcrumbLink>
@@ -164,19 +164,19 @@ root.render(
                             <BreadcrumbLink root icon>
                                 <Icon icon="home" />
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
                             <BreadcrumbLink disabled>
@@ -194,19 +194,19 @@ root.render(
                             <BreadcrumbLink root icon focus>
                                 <Icon icon="home" />
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink focus>
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
                             <BreadcrumbLink disabled>
@@ -224,19 +224,19 @@ root.render(
                             <BreadcrumbLink root icon hover>
                                 <Icon icon="home" />
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink hover>
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
                             <BreadcrumbLink disabled>
@@ -254,20 +254,20 @@ root.render(
                             <BreadcrumbLink root icon hover>
                                 <Icon icon="home" />
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink icontext>
                                 <Icon icon="cloud" />
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink icon>
                                 <Icon icon="camera" />
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
                             <BreadcrumbLink disabled>
@@ -286,19 +286,19 @@ root.render(
                             <BreadcrumbLink root icon>
                                 <Icon icon="home" />
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
                             <BreadcrumbLink disabled>
@@ -325,20 +325,20 @@ root.render(
                             <BreadcrumbLink root icon>
                                 <Icon icon="home" />
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon" icon="chevron-right" />
-                            <Icon className="k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon" icon="chevron-right" size="xsmall" />
+                            <Icon className="k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem hidden>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="First item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem hidden>
                             <BreadcrumbLink>
                                 <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                         </BreadcrumbItem>
                         <BreadcrumbItem last>
                             <BreadcrumbLink disabled>
diff --git a/packages/html/src/chip/chip.spec.tsx b/packages/html/src/chip/chip.spec.tsx
index f49ada7412f..d3fa3c39ce3 100644
--- a/packages/html/src/chip/chip.spec.tsx
+++ b/packages/html/src/chip/chip.spec.tsx
@@ -91,7 +91,7 @@ export const Chip = (
                 }),
             )}
         >
-            {icon && <Icon className="k-chip-icon" icon={icon} /> }
+            {icon && <Icon className="k-chip-icon" icon={icon} size="small" /> }
             {showAvatar && (
                 <Avatar className="k-chip-avatar" type="image" >
                     <img src="/packages/html/assets/avatar.jpg" />
diff --git a/packages/html/src/dropzone/tests/dropzone.tsx b/packages/html/src/dropzone/tests/dropzone.tsx
index d6a21aab013..699baf26aa7 100644
--- a/packages/html/src/dropzone/tests/dropzone.tsx
+++ b/packages/html/src/dropzone/tests/dropzone.tsx
@@ -13,7 +13,7 @@ root.render(
                 <p>External dropzone</p>
                 <div className="k-external-dropzone">
                     <div className="k-dropzone-inner">
-                        <Icon icon="upload" className="k-dropzone-icon" />
+                        <Icon icon="upload" className="k-dropzone-icon" size="xxxlarge" />
                         <span className="k-dropzone-hint">Drag and drop files here to upload</span>
                         <span className="k-dropzone-note"> Only JPEG, PNG and SVG files are allowed.</span>
                     </div>
@@ -25,7 +25,7 @@ root.render(
                 <p>External dropzone - hover dragging files</p>
                 <div className="k-external-dropzone k-external-dropzone-hover">
                     <div className="k-dropzone-inner">
-                        <Icon icon="upload" className="k-dropzone-icon" />
+                        <Icon icon="upload" className="k-dropzone-icon" size="xxxlarge" />
                         <span className="k-dropzone-hint">Drag and drop files here to upload</span>
                         <span className="k-dropzone-note"> Only JPEG, PNG and SVG files are allowed.</span>
                     </div>
@@ -37,7 +37,7 @@ root.render(
                 <p>External dropzone</p>
                 <div className="k-external-dropzone" style={{ height: "400px" }}>
                     <div className="k-dropzone-inner">
-                        <Icon icon="upload" className="k-dropzone-icon" />
+                        <Icon icon="upload" className="k-dropzone-icon" size="xxxlarge" />
                         <span className="k-dropzone-hint">Drag and drop files here to upload</span>
                         <span className="k-dropzone-note"> Only JPEG, PNG and SVG files are allowed.</span>
                     </div>
diff --git a/packages/html/src/filemanager/tests/filemanager-contextmenu.tsx b/packages/html/src/filemanager/tests/filemanager-contextmenu.tsx
index f53e4f6acb6..dae729b3a11 100644
--- a/packages/html/src/filemanager/tests/filemanager-contextmenu.tsx
+++ b/packages/html/src/filemanager/tests/filemanager-contextmenu.tsx
@@ -60,11 +60,11 @@ root.render(
                         <div className="k-widget k-listview k-selectable k-filemanager-listview">
                             <div className="k-listview-content k-d-flex k-flex-row k-flex-wrap">
                                 <div className="k-listview-item">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="folder" /></span>
+                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="folder" size="xxxlarge"/></span>
                                     <span className="k-file-name">Folder</span>
                                 </div>
                                 <div className="k-listview-item">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="file-image" /></span>
+                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="file-image" size="xxxlarge" /></span>
                                     <span className="k-file-name">file.png</span>
                                 </div>
                             </div>
diff --git a/packages/html/src/filemanager/tests/filemanager-drag-hint.tsx b/packages/html/src/filemanager/tests/filemanager-drag-hint.tsx
index a098d42ca13..70c99f94df8 100644
--- a/packages/html/src/filemanager/tests/filemanager-drag-hint.tsx
+++ b/packages/html/src/filemanager/tests/filemanager-drag-hint.tsx
@@ -57,11 +57,11 @@ root.render(
                         <div className="k-widget k-listview k-selectable k-filemanager-listview">
                             <div className="k-listview-content k-d-flex k-flex-row k-flex-wrap">
                                 <div className="k-listview-item">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="folder" /></span>
+                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="folder" size="xxxlarge" /></span>
                                     <span className="k-file-name">Folder</span>
                                 </div>
                                 <div className="k-listview-item k-selected">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="file-image" /></span>
+                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="file-image" size="xxxlarge" /></span>
                                     <span className="k-file-name">file.png</span>
                                 </div>
                             </div>
diff --git a/packages/html/src/filemanager/tests/filemanager-listview.tsx b/packages/html/src/filemanager/tests/filemanager-listview.tsx
index fa4eaf7c773..18de3046a81 100644
--- a/packages/html/src/filemanager/tests/filemanager-listview.tsx
+++ b/packages/html/src/filemanager/tests/filemanager-listview.tsx
@@ -52,11 +52,11 @@ root.render(
                         <div className="k-widget k-listview k-selectable k-filemanager-listview">
                             <div className="k-listview-content k-d-flex k-flex-row k-flex-wrap">
                                 <div className="k-listview-item">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="folder" /></span>
+                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="folder" size="xxxlarge" /></span>
                                     <span className="k-file-name">Folder</span>
                                 </div>
                                 <div className="k-listview-item">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="file-image" /></span>
+                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="file-image" size="xxxlarge" /></span>
                                     <span className="k-file-name">file.png</span>
                                 </div>
                             </div>
@@ -112,11 +112,11 @@ root.render(
                         <div className="k-widget k-listview k-selectable k-filemanager-listview">
                             <div className="k-listview-content k-d-flex k-flex-row k-flex-wrap">
                                 <div className="k-listview-item">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="folder" /></span>
+                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="folder" size="xxxlarge" /></span>
                                     <span className="k-file-name">Folder</span>
                                 </div>
                                 <div className="k-listview-item">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="file-image" /></span>
+                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="file-image" size="xxxlarge" /></span>
                                     <span className="k-file-name">file.png</span>
                                 </div>
                             </div>
diff --git a/packages/html/src/filemanager/tests/filemanager-preview.tsx b/packages/html/src/filemanager/tests/filemanager-preview.tsx
index 25cb0c9c0ea..464fa7d6675 100644
--- a/packages/html/src/filemanager/tests/filemanager-preview.tsx
+++ b/packages/html/src/filemanager/tests/filemanager-preview.tsx
@@ -117,7 +117,7 @@ root.render(
                     {/* Preview */}
                     <div className="k-filemanager-preview">
                         <div className="k-file-info">
-                            <span className="k-file-preview"><Icon className="k-file-icon" icon="file-image" /></span>
+                            <span className="k-file-preview"><Icon className="k-file-icon" icon="file-image" size="xxxlarge" /></span>
                             <span className="k-file-name k-single-file-selected">file.png</span>
                             <dl className="k-file-meta">
                                 <dt className="k-file-meta-label">Type: </dt>
@@ -247,7 +247,7 @@ root.render(
                     {/* Preview */}
                     <div className="k-filemanager-preview" style={{ width: "234px" }}>
                         <div className="k-file-info">
-                            <span className="k-file-preview"><Icon className="k-file-icon" icon="none" /></span>
+                            <span className="k-file-preview"><Icon className="k-file-icon" icon="none" size="xxxlarge" /></span>
                             <span className="k-file-name k-no-file-selected">No File Selected</span>
                         </div>
                     </div>
@@ -358,7 +358,7 @@ root.render(
                     {/* Preview */}
                     <div className="k-filemanager-preview">
                         <div className="k-file-info">
-                            <span className="k-file-preview"><Icon className="k-file-icon" icon="file" /></span>
+                            <span className="k-file-preview"><Icon className="k-file-icon" icon="file" size="xxxlarge" /></span>
                             <span className="k-file-name k-multiple-files-selected">3 items</span>
                         </div>
                     </div>
diff --git a/packages/html/src/map/tests/map.tsx b/packages/html/src/map/tests/map.tsx
index d4bc93d6d93..a68cbae8c0f 100644
--- a/packages/html/src/map/tests/map.tsx
+++ b/packages/html/src/map/tests/map.tsx
@@ -23,7 +23,7 @@ root.render(
                     <div className="km-scroll-header"></div>
                     <div className="km-scroll-container" style={{ transformOrigin: "left top 0px" }}>
                         <div className="k-layer" style={{ zIndex: "1000" }}>
-                            <Icon className="k-marker" icon="map-marker-target" style={{ zIndex: "1000", left: "500px", top: "300px" }} />
+                            <Icon className="k-marker" icon="map-marker-target" size="xxlarge" style={{ zIndex: "1000", left: "500px", top: "300px" }} />
                         </div>
                         <div className="k-layer"></div>
                     </div>
diff --git a/packages/html/src/pdf-viewer/tests/pdf-viewer-blank-page-blazor.tsx b/packages/html/src/pdf-viewer/tests/pdf-viewer-blank-page-blazor.tsx
index 5ada4e7d67a..bae2b892eae 100644
--- a/packages/html/src/pdf-viewer/tests/pdf-viewer-blank-page-blazor.tsx
+++ b/packages/html/src/pdf-viewer/tests/pdf-viewer-blank-page-blazor.tsx
@@ -31,7 +31,7 @@ root.render(
                 <div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
                     <div className="k-pdf-viewer-pages">
                         <div className="k-page k-blank-page">
-                            <Icon icon="folder-open"></Icon>
+                            <Icon icon="folder-open" size="xxxlarge"></Icon>
                             <Upload async empty></Upload>
                         </div>
                     </div>
diff --git a/packages/html/src/pdf-viewer/tests/pdf-viewer-blank-page.tsx b/packages/html/src/pdf-viewer/tests/pdf-viewer-blank-page.tsx
index e7f0d830f7b..0e818c5f64a 100644
--- a/packages/html/src/pdf-viewer/tests/pdf-viewer-blank-page.tsx
+++ b/packages/html/src/pdf-viewer/tests/pdf-viewer-blank-page.tsx
@@ -36,7 +36,7 @@ root.render(
                         <div className="k-page k-blank-page">
                             <div className="k-external-dropzone">
                                 <div className="k-dropzone-inner">
-                                    <Icon icon="upload" className="k-dropzone-icon" />
+                                    <Icon icon="upload" className="k-dropzone-icon" size="xxxlarge" />
                                     <span className="k-dropzone-hint">Drag and drop files here to upload</span>
                                 </div>
                             </div>
diff --git a/packages/html/src/rating/tests/rating.tsx b/packages/html/src/rating/tests/rating.tsx
index fe5d351362f..c1f5f72d4c1 100644
--- a/packages/html/src/rating/tests/rating.tsx
+++ b/packages/html/src/rating/tests/rating.tsx
@@ -18,22 +18,22 @@ root.render(
                 <span className="k-rating k-widget">
                     <span className="k-rating-container">
                         <span className="k-rating-item k-hover">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-hover">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-hover">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                             <span className="k-rating-precision-part" style={{ width: `calc( --var() )` }}>
-                                <Icon icon="star"></Icon>
+                                <Icon icon="star" size="xlarge"></Icon>
                             </span>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                     </span>
                 </span>
@@ -42,19 +42,19 @@ root.render(
                 <span className="k-rating k-widget">
                     <span className="k-rating-container">
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-hover">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                     </span>
                 </span>
@@ -65,19 +65,19 @@ root.render(
                 <span className="k-rating k-widget k-focus">
                     <span className="k-rating-container">
                         <span className="k-rating-item k-selected">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-selected">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-selected k-focus">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                     </span>
                 </span>
@@ -86,19 +86,19 @@ root.render(
                 <span className="k-rating k-widget k-focus">
                     <span className="k-rating-container">
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-selected k-focus">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                     </span>
                 </span>
@@ -109,19 +109,19 @@ root.render(
                 <span className="k-rating k-widget">
                     <span className="k-rating-container">
                         <span className="k-rating-item k-selected">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-selected">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-selected">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                     </span>
                 </span>
@@ -130,19 +130,19 @@ root.render(
                 <span className="k-rating k-widget">
                     <span className="k-rating-container">
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-selected">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                     </span>
                 </span>
@@ -153,19 +153,19 @@ root.render(
                 <span className="k-rating k-widget">
                     <span className="k-rating-container">
                         <span className="k-rating-item k-selected k-hover">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-selected k-hover">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-selected k-hover">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                     </span>
                 </span>
@@ -174,19 +174,19 @@ root.render(
                 <span className="k-rating k-widget">
                     <span className="k-rating-container">
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-selected k-hover">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                     </span>
                 </span>
@@ -197,19 +197,19 @@ root.render(
                 <span className="k-rating k-widget">
                     <span className="k-rating-container">
                         <span className="k-rating-item k-selected">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                     </span>
                     <span className="k-rating-label">
@@ -221,22 +221,22 @@ root.render(
                 <span className="k-rating k-widget">
                     <span className="k-rating-container">
                         <span className="k-rating-item k-selected">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-selected">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                             <span className="k-rating-precision-part" style={{ clipPath: "inset(0px 50% 0px 0px)" }}>
-                                <Icon icon="star"></Icon>
+                                <Icon icon="star" size="xlarge"></Icon>
                             </span>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                     </span>
                     <span className="k-rating-label">
@@ -251,19 +251,19 @@ root.render(
                     <span className="k-rating k-widget k-focus">
                         <span className="k-rating-container">
                             <span className="k-rating-item k-selected">
-                                <Icon icon="star"></Icon>
+                                <Icon icon="star" size="xlarge"></Icon>
                             </span>
                             <span className="k-rating-item k-selected">
-                                <Icon icon="star"></Icon>
+                                <Icon icon="star" size="xlarge"></Icon>
                             </span>
                             <span className="k-rating-item k-selected k-focus">
-                                <Icon icon="star"></Icon>
+                                <Icon icon="star" size="xlarge"></Icon>
                             </span>
                             <span className="k-rating-item">
-                                <Icon icon="star-outline"></Icon>
+                                <Icon icon="star-outline" size="xlarge"></Icon>
                             </span>
                             <span className="k-rating-item">
-                                <Icon icon="star-outline"></Icon>
+                                <Icon icon="star-outline" size="xlarge"></Icon>
                             </span>
                         </span>
                     </span>
@@ -274,19 +274,19 @@ root.render(
                     <span className="k-rating k-widget k-focus">
                         <span className="k-rating-container">
                             <span className="k-rating-item">
-                                <Icon icon="star-outline"></Icon>
+                                <Icon icon="star-outline" size="xlarge"></Icon>
                             </span>
                             <span className="k-rating-item k-selected k-focus">
-                                <Icon icon="star"></Icon>
+                                <Icon icon="star" size="xlarge"></Icon>
                             </span>
                             <span className="k-rating-item">
-                                <Icon icon="star-outline"></Icon>
+                                <Icon icon="star-outline" size="xlarge"></Icon>
                             </span>
                             <span className="k-rating-item">
-                                <Icon icon="star-outline"></Icon>
+                                <Icon icon="star-outline" size="xlarge"></Icon>
                             </span>
                             <span className="k-rating-item">
-                                <Icon icon="star-outline"></Icon>
+                                <Icon icon="star-outline" size="xlarge"></Icon>
                             </span>
                         </span>
                     </span>
@@ -365,19 +365,19 @@ root.render(
                 <span className="k-rating k-widget k-readonly">
                     <span className="k-rating-container">
                         <span className="k-rating-item k-selected">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-selected">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                     </span>
                 </span>
@@ -386,19 +386,19 @@ root.render(
                 <span className="k-rating k-widget k-readonly">
                     <span className="k-rating-container">
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item k-selected">
-                            <Icon icon="star"></Icon>
+                            <Icon icon="star" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                         <span className="k-rating-item">
-                            <Icon icon="star-outline"></Icon>
+                            <Icon icon="star-outline" size="xlarge"></Icon>
                         </span>
                     </span>
                 </span>
diff --git a/packages/html/src/scrollview/tests/scrollview-angular.tsx b/packages/html/src/scrollview/tests/scrollview-angular.tsx
index 678f68695b9..14930b160f9 100644
--- a/packages/html/src/scrollview/tests/scrollview-angular.tsx
+++ b/packages/html/src/scrollview/tests/scrollview-angular.tsx
@@ -35,10 +35,10 @@ root.render(
                 </ul>
                 <div className="k-scrollview-elements">
                     <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left"></Icon>
+                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
                     </a>
                     <a className="k-scrollview-next">
-                        <Icon icon="chevron-right"></Icon>
+                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
                     </a>
                     <div className="k-scrollview-nav-wrap">
                         <ul className="k-scrollview-nav">
@@ -60,10 +60,10 @@ root.render(
                 </ul>
                 <div className="k-scrollview-elements">
                     <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left"></Icon>
+                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
                     </a>
                     <a className="k-scrollview-next">
-                        <Icon icon="chevron-right"></Icon>
+                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
                     </a>
                     <div className="k-scrollview-nav-wrap">
                         <ul className="k-scrollview-nav">
@@ -89,10 +89,10 @@ root.render(
                 </ul>
                 <div className="k-scrollview-elements">
                     <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left"></Icon>
+                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
                     </a>
                     <a className="k-scrollview-next">
-                        <Icon icon="chevron-right"></Icon>
+                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
                     </a>
                     <div className="k-scrollview-nav-wrap">
                         <ul className="k-scrollview-nav">
diff --git a/packages/html/src/scrollview/tests/scrollview-blazor.tsx b/packages/html/src/scrollview/tests/scrollview-blazor.tsx
index d4f7e285e06..01fd6821f4a 100644
--- a/packages/html/src/scrollview/tests/scrollview-blazor.tsx
+++ b/packages/html/src/scrollview/tests/scrollview-blazor.tsx
@@ -37,10 +37,10 @@ root.render(
                 </div>
                 <div className="k-scrollview-elements">
                     <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left"></Icon>
+                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
                     </a>
                     <a className="k-scrollview-next">
-                        <Icon icon="chevron-right"></Icon>
+                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
                     </a>
                     <div className="k-scrollview-nav-wrap">
                         <ul className="k-scrollview-nav">
@@ -68,10 +68,10 @@ root.render(
                 </div>
                 <div className="k-scrollview-elements">
                     <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left"></Icon>
+                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
                     </a>
                     <a className="k-scrollview-next">
-                        <Icon icon="chevron-right"></Icon>
+                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
                     </a>
                     <div className="k-scrollview-nav-wrap">
                         <ul className="k-scrollview-nav">
@@ -101,10 +101,10 @@ root.render(
                 </div>
                 <div className="k-scrollview-elements">
                     <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left"></Icon>
+                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
                     </a>
                     <a className="k-scrollview-next">
-                        <Icon icon="chevron-right"></Icon>
+                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
                     </a>
                     <div className="k-scrollview-nav-wrap">
                         <ul className="k-scrollview-nav">
diff --git a/packages/html/src/scrollview/tests/scrollview.tsx b/packages/html/src/scrollview/tests/scrollview.tsx
index 8ed851d7b18..270694e6135 100644
--- a/packages/html/src/scrollview/tests/scrollview.tsx
+++ b/packages/html/src/scrollview/tests/scrollview.tsx
@@ -38,10 +38,10 @@ root.render(
                 </div>
                 <div className="k-scrollview-elements">
                     <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left"></Icon>
+                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
                     </a>
                     <a className="k-scrollview-next">
-                        <Icon icon="chevron-right"></Icon>
+                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
                     </a>
                     <div className="k-scrollview-nav-wrap">
                         <ul className="k-scrollview-nav">
@@ -66,10 +66,10 @@ root.render(
                 </div>
                 <div className="k-scrollview-elements">
                     <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left"></Icon>
+                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
                     </a>
                     <a className="k-scrollview-next">
-                        <Icon icon="chevron-right"></Icon>
+                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
                     </a>
                     <div className="k-scrollview-nav-wrap">
                         <ul className="k-scrollview-nav">
@@ -98,10 +98,10 @@ root.render(
                 </div>
                 <div className="k-scrollview-elements">
                     <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left"></Icon>
+                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
                     </a>
                     <a className="k-scrollview-next">
-                        <Icon icon="chevron-right"></Icon>
+                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
                     </a>
                     <div className="k-scrollview-nav-wrap">
                         <ul className="k-scrollview-nav">
@@ -132,10 +132,10 @@ root.render(
                 </div>
                 <div className="k-scrollview-elements">
                     <a className="k-scrollview-prev">
-                        <Icon icon="chevron-left"></Icon>
+                        <Icon icon="chevron-left" size="xxxlarge"></Icon>
                     </a>
                     <a className="k-scrollview-next">
-                        <Icon icon="chevron-right"></Icon>
+                        <Icon icon="chevron-right" size="xxxlarge"></Icon>
                     </a>
                     <div className="k-scrollview-nav-wrap">
                         <ul className="k-scrollview-nav">
diff --git a/packages/html/src/splitter/tests/splitter.tsx b/packages/html/src/splitter/tests/splitter.tsx
index 50192d8765e..adac6cdfc51 100644
--- a/packages/html/src/splitter/tests/splitter.tsx
+++ b/packages/html/src/splitter/tests/splitter.tsx
@@ -35,7 +35,7 @@ root.render(
                         </div>
                         <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "1" }}>
                             <div className="k-collapse-prev">
-                                <Icon icon="caret-alt-left"></Icon>
+                                <Icon icon="caret-alt-left" size="xsmall"></Icon>
                             </div>
                             <div className="k-resize-handle"></div>
                             <Icon />
@@ -44,34 +44,34 @@ root.render(
                             <Icon />
                             <div className="k-resize-handle"></div>
                             <div className="k-collapse-next">
-                                <Icon icon="caret-alt-right"></Icon>
+                                <Icon icon="caret-alt-right" size="xsmall"></Icon>
                             </div>
                         </div>
                         <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "5" }}>
                             <div className="k-collapse-prev">
-                                <Icon icon="caret-alt-left"></Icon>
+                                <Icon icon="caret-alt-left" size="xsmall"></Icon>
                             </div>
                             <div className="k-resize-handle"></div>
                             <div className="k-collapse-next">
-                                <Icon icon="caret-alt-right"></Icon>
+                                <Icon icon="caret-alt-right" size="xsmall"></Icon>
                             </div>
                         </div>
                         <div className="k-splitbar k-hover k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "7" }}>
                             <div className="k-collapse-prev">
-                                <Icon icon="caret-alt-left"></Icon>
+                                <Icon icon="caret-alt-left" size="xsmall"></Icon>
                             </div>
                             <div className="k-resize-handle"></div>
                             <div className="k-collapse-next">
-                                <Icon icon="caret-alt-right"></Icon>
+                                <Icon icon="caret-alt-right" size="xsmall"></Icon>
                             </div>
                         </div>
                         <div className="k-splitbar k-focus k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "9" }}>
                             <div className="k-collapse-prev">
-                                <Icon icon="caret-alt-left"></Icon>
+                                <Icon icon="caret-alt-left" size="xsmall"></Icon>
                             </div>
                             <div className="k-resize-handle"></div>
                             <div className="k-collapse-next">
-                                <Icon icon="caret-alt-right"></Icon>
+                                <Icon icon="caret-alt-right" size="xsmall"></Icon>
                             </div>
                         </div>
                     </div>
diff --git a/packages/html/src/upload/upload-file-multiple.tsx b/packages/html/src/upload/upload-file-multiple.tsx
index 23fd90e2b8c..fdac6cba1d0 100644
--- a/packages/html/src/upload/upload-file-multiple.tsx
+++ b/packages/html/src/upload/upload-file-multiple.tsx
@@ -43,7 +43,7 @@ export const UploadFileMultiple = (
                     }
                 )} value={progress} label={false} />
                 <span className="k-file-icon-wrapper">
-                    <Icon className="k-file-icon" icon="copy"></Icon>
+                    <Icon className="k-file-icon" icon="copy" size="xxlarge"></Icon>
                 </span>
                 <div className="k-multiple-files-wrapper">
                     {props.children}
diff --git a/packages/html/src/upload/upload-file.tsx b/packages/html/src/upload/upload-file.tsx
index 791838ca66a..73779b0fb17 100644
--- a/packages/html/src/upload/upload-file.tsx
+++ b/packages/html/src/upload/upload-file.tsx
@@ -49,7 +49,7 @@ export const UploadFile = (
                     }
                 )} value={progress} label={false} />
                 <span className="k-file-icon-wrapper">
-                    <Icon className="k-file-icon" icon={icon}></Icon>
+                    <Icon className="k-file-icon" icon={icon} size="xxlarge"></Icon>
                     {state && <span className="k-file-state">{state}</span>}
                 </span>
                 <UploadFileInfo name={name} size={size} validationMsg={validationMsg}></UploadFileInfo>