@webstudio-is/icons 0.3.0 → 0.4.0

package/src/cloud.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const CloudIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width={16}
+        height={16}
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M3.433 11.4A2.333 2.333 0 014.57 7.473a2.918 2.918 0 115.705-1.222 2.917 2.917 0 11.058 5.832h-5.25a2.333 2.333 0 01-1.65-.683z"
+          stroke={color}
+          strokeWidth={1.25}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+);
+
+CloudIcon.displayName = "CloudIcon";

package/src/copy.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const CopyIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M5.6 5.6V3.92C5.6 3.24794 5.6 2.91191 5.73079 2.65521C5.84584 2.42942 6.02942 2.24584 6.25521 2.13079C6.51191 2 6.84794 2 7.52 2H12.08C12.7521 2 13.0881 2 13.3448 2.13079C13.5706 2.24584 13.7542 2.42942 13.8692 2.65521C14 2.91191 14 3.24794 14 3.92V8.48C14 9.15206 14 9.4881 13.8692 9.74479C13.7542 9.97058 13.5706 10.1542 13.3448 10.2692C13.0881 10.4 12.7521 10.4 12.08 10.4H10.4M3.92 14H8.48C9.15206 14 9.48809 14 9.74479 13.8692C9.97058 13.7542 10.1542 13.5706 10.2692 13.3448C10.4 13.0881 10.4 12.7521 10.4 12.08V7.52C10.4 6.84794 10.4 6.51191 10.2692 6.25521C10.1542 6.02942 9.97058 5.84584 9.74479 5.73079C9.48809 5.6 9.15206 5.6 8.48 5.6H3.92C3.24794 5.6 2.91191 5.6 2.65521 5.73079C2.42942 5.84584 2.24584 6.02942 2.13079 6.25521C2 6.51191 2 6.84794 2 7.52V12.08C2 12.7521 2 13.0881 2.13079 13.3448C2.24584 13.5706 2.42942 13.7542 2.65521 13.8692C2.91191 14 3.24794 14 3.92 14Z"
+          stroke={color}
+          strokeWidth="1.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+);
+
+CopyIcon.displayName = "CopyIcon";

package/src/cross-circled-filled.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const CrossCircledFilledIcon = React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = "currentColor", ...props }, forwardedRef) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14 8C14 8.78793 13.8448 9.56815 13.5433 10.2961C13.2417 11.0241 12.7998 11.6855 12.2426 12.2426C11.6855 12.7998 11.0241 13.2417 10.2961 13.5433C9.56815 13.8448 8.78793 14 8 14C7.21207 14 6.43185 13.8448 5.7039 13.5433C4.97595 13.2417 4.31451 12.7998 3.75736 12.2426C3.20021 11.6855 2.75825 11.0241 2.45672 10.2961C2.15519 9.56815 2 8.78793 2 8C2 6.4087 2.63214 4.88258 3.75736 3.75736C4.88258 2.63214 6.4087 2 8 2C9.5913 2 11.1174 2.63214 12.2426 3.75736C13.3679 4.88258 14 6.4087 14 8ZM6.42426 5.57574C6.18995 5.34142 5.81005 5.34142 5.57574 5.57574C5.34142 5.81005 5.34142 6.18995 5.57574 6.42426L7.15147 8L5.57574 9.57574C5.34142 9.81005 5.34142 10.1899 5.57574 10.4243C5.81005 10.6586 6.18995 10.6586 6.42426 10.4243L8 8.84853L9.57574 10.4243C9.81005 10.6586 10.1899 10.6586 10.4243 10.4243C10.6586 10.1899 10.6586 9.81005 10.4243 9.57574L8.84853 8L10.4243 6.42426C10.6586 6.18995 10.6586 5.81005 10.4243 5.57574C10.1899 5.34142 9.81005 5.34142 9.57574 5.57574L8 7.15147L6.42426 5.57574Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+
+CrossCircledFilledIcon.displayName = "CrossCircledFilled";

package/src/cross-large.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const CrossLargeIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeWidth="1.6"
+          d="M13 3 7.99998 8.00002m0 0L3 13m4.99998-4.99998L3 3.00008m4.99998 4.99994L13 13"
+        />
+      </svg>
+    );
+  }
+);
+CrossLargeIcon.displayName = "CrossLargeIcon";

package/src/cross-small.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const CrossSmallIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeWidth="1.4"
+          d="M11 5 7.99999 8.00001m0 0L5 11m2.99999-2.99999L5 5.00005m2.99999 2.99996L11 11"
+        />
+      </svg>
+    );
+  }
+);
+CrossSmallIcon.displayName = "CrossSmallIcon";

package/src/cross.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const CrossIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M13 3L7.99998 8.00002M7.99998 8.00002L3 13M7.99998 8.00002L3 3.00008M7.99998 8.00002L13 13"
+          stroke={color}
+          strokeWidth="1.6"
+          strokeLinecap="round"
+        />
+      </svg>
+    );
+  }
+);
+
+CrossIcon.displayName = "Cross";

package/src/devices.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const DevicesIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="15"
+        height="15"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill={color}
+          d="M22.265 9.51L17.265 9.5C16.715 9.5 16.265 9.95 16.265 10.5V19.5C16.265 20.05 16.715 20.5 17.265 20.5H22.265C22.815 20.5 23.265 20.05 23.265 19.5V10.5C23.265 9.95 22.815 9.51 22.265 9.51ZM22.265 19.5H17.265V10.5H19.5H22.265V19.5ZM20.265 1.5H2.26499C1.15499 1.5 0.264988 2.39 0.264988 3.5V15.5C0.264988 16.6 1.15499 17.5 2.26499 17.5H10.5V19.5H7.26499V20.5H15.265V19.5H12.5V17.5H15.265V16.5H1.26499V2.5H21.265V8.5H22.265V3.5C22.265 2.39 21.365 1.5 20.265 1.5Z"
+        />
+      </svg>
+    );
+  }
+);
+
+DevicesIcon.displayName = "DevicesIcon";

package/src/ellipses.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const EllipsesIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <circle cx="2.5" cy="8" r="1.5" fill={color} />
+        <circle cx="8" cy="8" r="1.5" fill={color} />
+        <circle cx="13.5" cy="8" r="1.5" fill={color} />
+      </svg>
+    );
+  }
+);
+EllipsesIcon.displayName = "EllipsesIcon";

package/src/external-link.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const ExternalLinkIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        fill={color}
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill={color}
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.7 3.7h2.294a.7.7 0 1 0 0-1.4H3.5a1.2 1.2 0 0 0-1.2 1.2v9a1.2 1.2 0 0 0 1.2 1.2h9a1.2 1.2 0 0 0 1.2-1.2V9.993a.7.7 0 1 0-1.4 0V12.3H3.7V3.7ZM8.813 3a.7.7 0 0 1 .7-.7H13a.7.7 0 0 1 .7.7v3.49a.7.7 0 1 1-1.4 0v-1.8L8.495 8.495a.7.7 0 1 1-.99-.99L11.31 3.7H9.513a.7.7 0 0 1-.7-.7Z"
+        />
+      </svg>
+    );
+  }
+);
+
+ExternalLinkIcon.displayName = "ExternalLinkIcon";

package/src/flex-direction-column-reverse.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const FlexDirectionColumnReverseIcon = React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = "currentColor", ...props }, forwardedRef) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+      style={{ transform: "rotate(180deg)" }}
+    >
+      <path
+        d="M11.1667 6L11.1667 15.8881L8.175 12.9794L7 14.125L12 19L17 14.125L15.825 12.9794L12.8333 15.8881L12.8333 6L11.1667 6Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+FlexDirectionColumnReverseIcon.displayName = "FlexDirectionColumnReverseIcon";

package/src/flex-direction-column.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const FlexDirectionColumnIcon = React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = "currentColor", ...props }, forwardedRef) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+    >
+      <path
+        d="M11.1667 6L11.1667 15.8881L8.175 12.9794L7 14.125L12 19L17 14.125L15.825 12.9794L12.8333 15.8881L12.8333 6L11.1667 6Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+FlexDirectionColumnIcon.displayName = "FlexDirectionColumnIcon";

package/src/flex-direction-row-reverse.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const FlexDirectionRowReverseIcon = React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = "currentColor", ...props }, forwardedRef) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+      style={{ transform: "rotate(180deg)" }}
+    >
+      <path
+        d="M5 12.8334L14.8881 12.8334L11.9794 15.825L13.125 17L18 12L13.125 7.00003L11.9794 8.17503L14.8881 11.1667L5 11.1667V12.8334Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+FlexDirectionRowReverseIcon.displayName = "FlexDirectionRowReverseIcon";

package/src/flex-direction-row.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const FlexDirectionRowIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M5 12.8334L14.8881 12.8334L11.9794 15.825L13.125 17L18 12L13.125 7.00003L11.9794 8.17503L14.8881 11.1667L5 11.1667V12.8334Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+FlexDirectionRowIcon.displayName = "FlexDirectionRowIcon";

package/src/flex-sizing-grow.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const FlexSizingGrowIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill={color}
+          d="M10.7641 5.54038c-.2539-.25384-.6654-.25384-.91928 0-.25384.25384-.25384.6654 0 .91924l.91928-.91924ZM12.3044 8l.4597.45962c.2538-.25384.2538-.6654 0-.91924L12.3044 8ZM9.84482 9.54038c-.25384.25384-.25384.66542 0 .91922.25388.2539.66538.2539.91928 0l-.91928-.91922ZM7.80469 7.35c-.35899 0-.65.29101-.65.65 0 .35899.29101.65.65.65v-1.3Zm2.04013-.89038 1.99998 2 .9193-.91924-2-2-.91928.91924Zm1.99998 1.08076-1.99998 2 .91928.91922 2-1.99998-.9193-.91924ZM7.80469 8.65h4.49971v-1.3H7.80469v1.3Z"
+        />
+        <path
+          fill={color}
+          d="m3.69531 8-.45962-.45962c-.25384.25384-.25384.6654 0 .91924L3.69531 8Zm2.45962-1.54038c.25384-.25384.25384-.6654 0-.91924-.25384-.25384-.6654-.25384-.91924 0l.91924.91924Zm-.91924 3.99998c.25384.2539.6654.2539.91924 0 .25384-.2538.25384-.66538 0-.91922l-.91924.91922ZM8.19556 8.65c.35898 0 .65-.29101.65-.65 0-.35899-.29102-.65-.65-.65v1.3Zm-4.04063-.19038 2-2-.91924-.91924-2 2 .91924.91924Zm-.91924 0 2 1.99998.91924-.91922-2-2-.91924.91924Zm.45962.19038h4.50025v-1.3H3.69531v1.3Z"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeWidth="1.4"
+          d="M1.5 2.5v11m13-11v11"
+        />
+      </svg>
+    );
+  }
+);
+FlexSizingGrowIcon.displayName = "FlexSizingGrowIcon";

package/src/flex-sizing-shrink.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const FlexSizingShrinkIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeWidth="1.4"
+          d="M7.95312 2.5v11"
+        />
+        <path
+          fill={color}
+          d="m5.42188 8 .51745.47143c.2434-.26716.2434-.6757 0-.94286L5.42188 8ZM3.0823 9.52857c-.26036.28578-.23976.72853.04602.98883.28578.2604.72852.2398.98888-.046l-1.0349-.94283Zm1.0349-4c-.26036-.28578-.7031-.30638-.98888-.04602-.28578.26036-.30638.7031-.04602.98888l1.0349-.94286ZM1.32188 7.3c-.386604 0-.700005.3134-.700005.7 0 .3866.313401.7.700005.7V7.3Zm3.58255.22857-1.82213 2 1.0349.94283 1.82213-1.99997-1.0349-.94286Zm1.0349 0-1.82213-2-1.0349.94286 1.82212 2 1.03491-.94286ZM5.42188 7.3h-4.1v1.4h4.1V7.3Zm6.41672 3.1776c.2638.2827.7068.2979.9894.0341.2826-.2638.2979-.70672.0341-.98934l-1.0235.95524ZM10.4836 8l-.51173-.47764c-.25103.26895-.25103.68633 0 .95528L10.4836 8Zm2.3785-1.52236c.2638-.28262.2485-.72557-.0341-.98937-.2826-.26379-.7256-.24853-.9894.03409l1.0235.95528ZM14.6836 8.7c.3866 0 .7-.3134.7-.7 0-.3866-.3134-.7-.7-.7v1.4Zm-1.8215.82236-1.8668-2-1.02343.95528 1.86673 1.99996 1.0235-.95524Zm-1.8668-1.04472 1.8668-2-1.0235-.95528-1.86673 2 1.02343.95528ZM14.6836 7.3h-4.2v1.4h4.2V7.3Z"
+        />
+      </svg>
+    );
+  }
+);
+FlexSizingShrinkIcon.displayName = "FlexSizingGrowIcon";

package/src/flex-wrap-no-wrap.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const FlexWrapNowrapIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M13 9H11V15H13V9ZM19 9H17V15H19V9ZM7 9H5V15H7V9ZM4 8V16H8V8H4ZM14 8V16H10V8H14ZM20 8V16H16V8H20Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+FlexWrapNowrapIcon.displayName = "FlexWrapNowrapIcon";

package/src/flex-wrap-wrap-reverse.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const FlexWrapWrapReverseIcon = React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = "currentColor", ...props }, forwardedRef) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+      style={{ transform: "rotate(180deg)" }}
+    >
+      <path d="M16 13H20V20H16V13Z" fill={color} />
+      <path d="M4 13H8V20H4V13Z" fill={color} />
+      <path d="M10 13H14V20H10V13Z" fill={color} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13 5H11V10H13V5ZM19 5H17V10H19V5ZM7 5H5V10H7V5ZM19 14H17V19H19V14ZM7 14H5V19H7V14ZM13 14H11V19H13V14ZM8 4V11H4V4H8ZM10 4V11H14V4H10ZM16 4V11H20V4H16ZM16 13V20H20V13H16ZM8 13V20H4V13H8ZM10 13V20H14V13H10Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+FlexWrapWrapReverseIcon.displayName = "FlexWrapWrapReverseIcon";

package/src/flex-wrap-wrap.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const FlexWrapWrapIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path d="M16 13H20V20H16V13Z" fill={color} />
+        <path d="M4 13H8V20H4V13Z" fill={color} />
+        <path d="M10 13H14V20H10V13Z" fill={color} />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M13 5H11V10H13V5ZM19 5H17V10H19V5ZM7 5H5V10H7V5ZM19 14H17V19H19V14ZM7 14H5V19H7V14ZM13 14H11V19H13V14ZM8 4V11H4V4H8ZM10 4V11H14V4H10ZM16 4V11H20V4H16ZM16 13V20H20V13H16ZM8 13V20H4V13H8ZM10 13V20H14V13H10Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+FlexWrapWrapIcon.displayName = "FlexWrapWrapIcon";

package/src/form.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const FormIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="15"
+        height="15"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill={color}
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M13 11H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h9v7zM4 9h7V6H4v3zm11 11H4c-1.1 0-2-.9-2-2v-3c0-1.1.9-2 2-2h11v7zM4 18h9v-3H4v3zm18-9h-2l2-5h-7v7h2v9l5-11zM4.75 17.25h1.5v-1.5h-1.5v1.5zm0-9h1.5v-1.5h-1.5v1.5z"
+        />
+      </svg>
+    );
+  }
+);
+
+FormIcon.displayName = "FormIcon";

package/src/gap-column.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const ColumnGapIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M14.4704 6H13.4407L13.4407 18L14.4704 18L14.4704 6Z"
+          fill={color}
+        />
+        <path d="M14.4704 6H17.5593V7H14.4704L14.4704 6Z" fill={color} />
+        <path
+          d="M14.4704 17L17.5593 17V18L14.4704 18L14.4704 17Z"
+          fill={color}
+        />
+        <path
+          d="M6.44074 6L10.5296 6L10.5296 18L6.44073 18L6.44073 17L9.5 17L9.5 7L6.44074 7L6.44074 6Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+ColumnGapIcon.displayName = "ColumnGapIcon";

package/src/gap-row.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const RowGapIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+        style={{ transform: "rotate(90deg)" }}
+      >
+        <path
+          d="M14.4704 6H13.4407L13.4407 18L14.4704 18L14.4704 6Z"
+          fill={color}
+        />
+        <path d="M14.4704 6H17.5593V7H14.4704L14.4704 6Z" fill={color} />
+        <path
+          d="M14.4704 17L17.5593 17V18L14.4704 18L14.4704 17Z"
+          fill={color}
+        />
+        <path
+          d="M6.44074 6L10.5296 6L10.5296 18L6.44073 18L6.44073 17L9.5 17L9.5 7L6.44074 7L6.44074 6Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+RowGapIcon.displayName = "RowGapIcon";

package/src/gear.tsx

@@ -0,0 +1,43 @@
+import { cssVars } from "@webstudio-is/css-vars";
+import * as React from "react";
+import { IconProps } from "./types";
+
+const fillVar = cssVars.define("fill");
+
+export const gearIconCssVars = ({ fill }: { fill: string }) => ({
+  [fillVar]: fill,
+});
+
+export const GearIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width={16}
+        height={16}
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M9.117 2.878c-.284-1.17-1.95-1.17-2.234 0a1.149 1.149 0 01-1.714.71c-1.03-.627-2.207.551-1.58 1.58a1.15 1.15 0 01-.711 1.715c-1.17.284-1.17 1.95 0 2.234a1.15 1.15 0 01.71 1.714c-.627 1.03.551 2.207 1.58 1.58a1.148 1.148 0 011.715.711c.284 1.17 1.95 1.17 2.234 0a1.15 1.15 0 011.714-.71c1.03.627 2.207-.551 1.58-1.58a1.148 1.148 0 01.711-1.715c1.17-.284 1.17-1.95 0-2.234a1.15 1.15 0 01-.71-1.714c.627-1.03-.551-2.207-1.58-1.58a1.15 1.15 0 01-1.715-.711z"
+          stroke={color}
+          strokeWidth={1.25}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ fill: cssVars.use(fillVar, "none") }}
+        />
+        <circle
+          cx={8}
+          cy={7.99988}
+          r={1.875}
+          stroke={color}
+          strokeWidth={1.25}
+        />
+      </svg>
+    );
+  }
+);
+
+GearIcon.displayName = "GearIcon";