diff --git a/apps/builder/app/builder/features/style-panel/sections/size/size.tsx b/apps/builder/app/builder/features/style-panel/sections/size/size.tsx
index 74d7b213ebd2..082842d96ae1 100644
--- a/apps/builder/app/builder/features/style-panel/sections/size/size.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/size/size.tsx
@@ -15,10 +15,10 @@ import {
 import { PositionControl, SelectControl, TextControl } from "../../controls";
 import {
   EyeOpenIcon,
-  EyeClosedIcon,
-  ScrollIcon,
   AutoScrollIcon,
   EllipsesIcon,
+  CropIcon,
+  EyeClosedIcon,
 } from "@webstudio-is/icons";
 import { StyleSection } from "../../shared/style-section";
 import { ToggleGroupControl } from "../../controls/toggle-group/toggle-group-control";
@@ -124,18 +124,17 @@ export const Section = () => {
               value: "visible",
             },
             {
-              child: <EyeClosedIcon />,
+              child: <CropIcon />,
               description:
-                "Content that exceeds the container's size is clipped and hidden without scrollbars.",
-              value: "hidden",
+                "Content that exceeds the container's size is clipped without scrollbars.",
+              value: "clip",
             },
             {
-              child: <ScrollIcon />,
+              child: <EyeClosedIcon />,
               description:
-                "Scrollbars are added to the container, allowing users to scroll and view the exceeding content.",
-              value: "scroll",
+                "Content that exceeds the container's size is hidden without scrollbars.",
+              value: "hidden",
             },
-
             {
               child: <AutoScrollIcon />,
               description:
diff --git a/packages/icons/icons/crop.svg b/packages/icons/icons/crop.svg
new file mode 100644
index 000000000000..3b823212ec88
--- /dev/null
+++ b/packages/icons/icons/crop.svg
@@ -0,0 +1,14 @@
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M4.16666 1.5V10.8333C4.16666 11.187 4.30714 11.5261 4.55719 11.7761C4.80724 12.0262 5.14638 12.1667 5.5 12.1667H14.8333M12.1667 14.8333V5.50001C12.1667 5.14638 12.0262 4.80724 11.7761 4.5572C11.5261 4.30715 11.187 4.16667 10.8333 4.16667H1.5"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
diff --git a/packages/icons/icons/scroll.svg b/packages/icons/icons/scroll.svg
deleted file mode 100644
index 25777929ba43..000000000000
--- a/packages/icons/icons/scroll.svg
+++ /dev/null
@@ -1,44 +0,0 @@
-<svg
-  width="16"
-  height="16"
-  viewBox="0 0 16 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M8 4L8 8"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M6 6L8 4L10 6"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M8 12L8 8"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M10 10L8 12L6 10"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M2 14V8V2"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M14.0034 14V8V2"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
diff --git a/packages/icons/src/__generated__/components.tsx b/packages/icons/src/__generated__/components.tsx
index d4103dd8e236..85139186056a 100644
--- a/packages/icons/src/__generated__/components.tsx
+++ b/packages/icons/src/__generated__/components.tsx
@@ -1855,6 +1855,30 @@ export const CopyIcon: IconComponent = forwardRef(
 );
 CopyIcon.displayName = "CopyIcon";
 
+export const CropIcon: IconComponent = forwardRef(
+  ({ fill = "none", size = 16, ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        width={size}
+        height={size}
+        fill={fill}
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M4.167 1.5v9.333A1.333 1.333 0 0 0 5.5 12.167h9.333m-2.666 2.666V5.5a1.333 1.333 0 0 0-1.334-1.333H1.5"
+        />
+      </svg>
+    );
+  }
+);
+CropIcon.displayName = "CropIcon";
+
 export const DashedBorderIcon: IconComponent = forwardRef(
   ({ fill = "none", size = 16, ...props }, forwardedRef) => {
     return (
@@ -4126,30 +4150,6 @@ export const ResourceIcon: IconComponent = forwardRef(
 );
 ResourceIcon.displayName = "ResourceIcon";
 
-export const ScrollIcon: IconComponent = forwardRef(
-  ({ fill = "none", size = 16, ...props }, forwardedRef) => {
-    return (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 16 16"
-        width={size}
-        height={size}
-        fill={fill}
-        {...props}
-        ref={forwardedRef}
-      >
-        <path
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M8 4v4M6 6l2-2 2 2M8 12V8M10 10l-2 2-2-2M2 14V2M14.003 14V2"
-        />
-      </svg>
-    );
-  }
-);
-ScrollIcon.displayName = "ScrollIcon";
-
 export const SearchIcon: IconComponent = forwardRef(
   ({ fill = "none", size = 16, ...props }, forwardedRef) => {
     return (
diff --git a/packages/icons/src/__generated__/svg.ts b/packages/icons/src/__generated__/svg.ts
index c9d4cdb72dad..506b399bb5f1 100644
--- a/packages/icons/src/__generated__/svg.ts
+++ b/packages/icons/src/__generated__/svg.ts
@@ -138,6 +138,8 @@ export const ContentIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none"
 
 export const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.214 5.5H6.786c-.71 0-1.286.576-1.286 1.286v6.428c0 .71.576 1.286 1.286 1.286h6.428c.71 0 1.286-.576 1.286-1.286V6.786c0-.71-.576-1.286-1.286-1.286Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.786 10.5A1.29 1.29 0 0 1 1.5 9.214V2.786A1.29 1.29 0 0 1 2.786 1.5h6.428A1.29 1.29 0 0 1 10.5 2.786"/></svg>`;
 
+export const CropIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.167 1.5v9.333A1.333 1.333 0 0 0 5.5 12.167h9.333m-2.666 2.666V5.5a1.333 1.333 0 0 0-1.334-1.333H1.5"/></svg>`;
+
 export const DashedBorderIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.714 8H2M8.857 8H7.143M14 8h-1.714"/></svg>`;
 
 export const DescriptionIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.333 3.135a.47.47 0 0 0-.802-.332L4.275 5.058a.933.933 0 0 1-.664.275H2A.667.667 0 0 0 1.333 6v4a.667.667 0 0 0 .667.667h1.61a.934.934 0 0 1 .665.275l2.256 2.256a.47.47 0 0 0 .802-.333v-9.73ZM10.667 6a3.333 3.333 0 0 1 0 4M12.91 12.243a6 6 0 0 0 0-8.486"/></svg>`;
@@ -306,8 +308,6 @@ export const ResetIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1
 
 export const ResourceIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.667 5.333h4M4.667 8H10M14 8.75V3.5A1.5 1.5 0 0 0 12.5 2h-9A1.5 1.5 0 0 0 2 3.5v9.252c0 .69.56 1.25 1.25 1.25v0H6"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.45 14.5h-.7a1.75 1.75 0 1 1 0-3.5h.7M12.55 11h.7a1.75 1.75 0 1 1 0 3.5h-.7M10.1 12.75h2.8"/></svg>`;
 
-export const ScrollIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 4v4M6 6l2-2 2 2M8 12V8M10 10l-2 2-2-2M2 14V2M14.003 14V2"/></svg>`;
-
 export const SearchIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.333 12.667A5.333 5.333 0 1 0 7.333 2a5.333 5.333 0 0 0 0 10.667ZM14 14l-2.867-2.867"/></svg>`;
 
 export const SectionLinkIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.667 14.667H12a1.333 1.333 0 0 0 1.333-1.334V4.667L10 1.333H4a1.333 1.333 0 0 0-1.333 1.334v2.666"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.333 1.333V4a1.333 1.333 0 0 0 1.334 1.333h2.666M2 10h4"/></svg>`;