@webstudio-is/icons 0.2.0 → 0.4.0

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";

package/src/github.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const GithubIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <title>GitHub</title>
+        <path
+          d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+GithubIcon.displayName = "GithubIcon";

package/src/google.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const GoogleIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <title>Google</title>
+        <path
+          d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+GoogleIcon.displayName = "GoogleIcon";

package/src/index.stories.tsx

@@ -0,0 +1,56 @@
+import * as icons from "./index";
+import * as legacyIcons from "./legacy";
+
+export const Icons = () => {
+  return (
+    <>
+      <div style={{ display: "flex", flexWrap: "wrap" }}>
+        {Object.entries(icons).map(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ([name, Icon]: [string, any]) => {
+            if (name.endsWith("Icon") === false) {
+              return null;
+            }
+            return (
+              <div
+                key={name}
+                style={{
+                  width: 150,
+                  height: 100,
+                  margin: 5,
+                  padding: 5,
+                  border: "solid 1px #f5f5f5",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <Icon width="32" height="32" />
+                <div
+                  style={{
+                    marginTop: 16,
+                    fontFamily: "Arial",
+                    textAlign: "center",
+                    wordWrap: "break-word",
+                    width: "100%",
+                    fontSize: "$fontSize$4",
+                    color: "#5a5a5a",
+                  }}
+                >
+                  {name.replace(/Icon$/, "")}
+                  {name in legacyIcons && " (legacy)"}
+                </div>
+              </div>
+            );
+          }
+        )}
+      </div>
+    </>
+  );
+};
+
+export default {
+  title: "All Icons",
+  component: Icons,
+};

package/{lib/cjs/index.d.ts → src/index.ts}

@@ -1,5 +1,5 @@
 export * from "./legacy";
-export * from "./gen";
+export * from "./__generated__";
 export * from "./list-nested";
 export * from "./brush";
 export * from "./form";
@@ -91,4 +91,3 @@ export * from "./text-underline";
 export * from "./text-uppercase";
 export * from "./text-direction-ltr";
 export * from "./text-direction-rtl";
-//# sourceMappingURL=index.d.ts.map

package/src/justify-content-center.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const JustifyContentCenterIcon = 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="M12.7999 4.79999V19.2H11.1999V4.79999H12.7999ZM16.5999 15.8H14.3999V8.19999H16.5999V15.8ZM7.3999 15.8H9.5999V8.19999H7.3999V15.8Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+JustifyContentCenterIcon.displayName = "JustifyContentCenterIcon";

package/src/justify-content-end.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const JustifyContentEndIcon = 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="M12 16.8H15.2V19.2H16.8V4.79999H15.2V7.19999H12V16.8Z"
+          fill={color}
+        />
+        <path d="M7.19995 16.8H10.4V7.19999H7.19995V16.8Z" fill={color} />
+      </svg>
+    );
+  }
+);
+JustifyContentEndIcon.displayName = "JustifyContentEndIcon";

package/src/justify-content-space-around.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const JustifyContentSpaceAroundIcon = 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="M7.9999 19.2V4.79999H6.3999V19.2H7.9999Z" fill={color} />
+      <path d="M17.5999 19.2V4.79999H15.9999V19.2H17.5999Z" fill={color} />
+      <path d="M15.1999 16.8H12.7999V7.19999H15.1999V16.8Z" fill={color} />
+      <path d="M8.7999 16.8H11.1999V7.19999H8.7999V16.8Z" fill={color} />
+    </svg>
+  );
+});
+JustifyContentSpaceAroundIcon.displayName = "JustifyContentSpaceAroundIcon";

package/src/justify-content-space-between.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const JustifyContentSpaceBetweenIcon = 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="M11.1999 7.19999H7.9999V4.79999H6.3999V19.2H7.9999V16.8H11.1999V7.19999ZM12.7999 16.8H15.9999V19.2H17.5999V4.79999H15.9999V7.19999H12.7999V16.8Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+JustifyContentSpaceBetweenIcon.displayName = "JustifyContentSpaceBetweenIcon";

package/src/justify-content-start.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const JustifyContentStartIcon = 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="M10.9999 7.19999H8.79995V4.79999H7.19995V19.2H8.79995V16.8H10.9999V7.19999Z"
+        fill={color}
+      />
+      <path d="M16.8 7.19999H13.6V16.8H16.8V7.19999Z" fill={color} />
+    </svg>
+  );
+});
+JustifyContentStartIcon.displayName = "JustifyContentStartIcon";

package/src/justify-items-center.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+// @todo this is just a copy of justifyContent icons for now
+export const JustifyItemsCenterIcon = 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="M12.7999 4.79999V19.2H11.1999V4.79999H12.7999ZM16.5999 15.8H14.3999V8.19999H16.5999V15.8ZM7.3999 15.8H9.5999V8.19999H7.3999V15.8Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+JustifyItemsCenterIcon.displayName = "JustifyItemsCenterIcon";

package/src/justify-items-end.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+// @todo this is just a copy of justifyContent icons for now
+export const JustifyItemsEndIcon = 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="M12 16.8H15.2V19.2H16.8V4.79999H15.2V7.19999H12V16.8Z"
+          fill={color}
+        />
+        <path d="M7.19995 16.8H10.4V7.19999H7.19995V16.8Z" fill={color} />
+      </svg>
+    );
+  }
+);
+JustifyItemsEndIcon.displayName = "JustifyItemsEndIcon";