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..884620cae261 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,
 } from "@webstudio-is/icons";
 import { StyleSection } from "../../shared/style-section";
 import { ToggleGroupControl } from "../../controls/toggle-group/toggle-group-control";
@@ -124,10 +124,10 @@ 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",
+              value: "clip",
             },
             {
               child: <ScrollIcon />,
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/src/__generated__/components.tsx b/packages/icons/src/__generated__/components.tsx
index 09c7a84d1761..f0f1335786b6 100644
--- a/packages/icons/src/__generated__/components.tsx
+++ b/packages/icons/src/__generated__/components.tsx
@@ -1831,6 +1831,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 (
diff --git a/packages/icons/src/__generated__/svg.ts b/packages/icons/src/__generated__/svg.ts
index f18a24277666..7f2d32270213 100644
--- a/packages/icons/src/__generated__/svg.ts
+++ b/packages/icons/src/__generated__/svg.ts
@@ -136,6 +136,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>`;