diff --git a/extensions/support-page/renderer.tsx b/extensions/support-page/renderer.tsx
index 0901061e79..87142c79da 100644
--- a/extensions/support-page/renderer.tsx
+++ b/extensions/support-page/renderer.tsx
@@ -22,7 +22,7 @@ export default class SupportPageRendererExtension extends LensRendererExtension
           className="flex align-center gaps hover-highlight"
           onClick={() => Navigation.navigate(supportPageURL())}
         >
-          <Component.Icon material="help" xs/>
+          <Component.Icon material="help" smallest />
         </div>
       )
     }
diff --git a/src/renderer/components/cluster-manager/bottom-bar.tsx b/src/renderer/components/cluster-manager/bottom-bar.tsx
index 1b464dd00f..fe7876f397 100644
--- a/src/renderer/components/cluster-manager/bottom-bar.tsx
+++ b/src/renderer/components/cluster-manager/bottom-bar.tsx
@@ -14,7 +14,7 @@ export class BottomBar extends React.Component {
     return (
       <div className="BottomBar flex gaps">
         <div id="current-workspace" className="flex gaps align-center hover-highlight">
-          <Icon xs material="layers"/>
+          <Icon smallest material="layers"/>
           <span className="workspace-name">{currentWorkspace.name}</span>
         </div>
         <WorkspaceMenu
diff --git a/src/renderer/components/icon/icon.scss b/src/renderer/components/icon/icon.scss
index 761afc22c4..253423bd4c 100644
--- a/src/renderer/components/icon/icon.scss
+++ b/src/renderer/components/icon/icon.scss
@@ -1,7 +1,7 @@
 .Icon {
   --size: 21px;
   --small-size: 18px;
-  --extra-small-size: 16px;
+  --smallest-size: 16px;
   --big-size: 32px;
   --color-active: #{$iconActiveColor};
   --bgc-active: #{$iconActiveBackground};
@@ -22,10 +22,10 @@
   width: var(--size);
   height: var(--size);
 
-  &.xs {
-    font-size: var(--extra-small-size);
-    width: var(--extra-small-size);
-    height: var(--extra-small-size);
+  &.smallest {
+    font-size: var(--smallest-size);
+    width: var(--smallest-size);
+    height: var(--smallest-size);
   }
 
   &.small {
diff --git a/src/renderer/components/icon/icon.tsx b/src/renderer/components/icon/icon.tsx
index 45e0d04a21..8fc86e6301 100644
--- a/src/renderer/components/icon/icon.tsx
+++ b/src/renderer/components/icon/icon.tsx
@@ -15,7 +15,7 @@ export interface IconProps extends React.HTMLAttributes<any>, TooltipDecoratorPr
   href?: string;              // render icon as hyperlink
   size?: string | number;     // icon-size
   small?: boolean;            // pre-defined icon-size
-  xs?: boolean;            // pre-defined icon-size
+  smallest?: boolean;            // pre-defined icon-size
   big?: boolean;              // pre-defined icon-size
   active?: boolean;           // apply active-state styles
   interactive?: boolean;      // indicates that icon is interactive and highlight it on focus/hover
@@ -64,7 +64,7 @@ export class Icon extends React.PureComponent<IconProps> {
     const { isInteractive } = this;
     const {
       // skip passing props to icon's html element
-      className, href, link, material, svg, size, xs, small, big,
+      className, href, link, material, svg, size, smallest, small, big,
       disabled, sticker, active, focusable, children,
       interactive: _interactive,
       onClick: _onClick,
@@ -76,7 +76,7 @@ export class Icon extends React.PureComponent<IconProps> {
     const iconProps: Partial<IconProps> = {
       className: cssNames("Icon", className,
         { svg, material, interactive: isInteractive, disabled, sticker, active, focusable },
-        !size ? { xs, small, big } : {}
+        !size ? { smallest, small, big } : {}
       ),
       onClick: isInteractive ? this.onClick : undefined,
       onKeyDown: isInteractive ? this.onKeyDown : undefined,