@webstudio-is/icons 0.3.0 → 0.15.0

package/src/align-items-baseline.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignItemsBaselineIcon = 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="M10 6H8V15H10V6ZM7 5V16H11V5H7Z"
+        fill={color}
+      />
+      <path d="M7 12H11V18H7V12Z" fill={color} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 13H8V17H10V13ZM7 12V18H11V12H7Z"
+        fill={color}
+      />
+      <path d="M13 12H16V15H13V12Z" fill={color} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15 13H14V14H15V13ZM13 12V15H16V12H13Z"
+        fill={color}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 8H14V15H16V8ZM13 7V16H17V7H13Z"
+        fill={color}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20 13H4V11.5H20V13Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+AlignItemsBaselineIcon.displayName = "AlignItemsBaselineIcon";

package/src/align-items-center.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignItemsCenterIcon = 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="M10.4 11H12.8V5L15 5V11H20V12.6H15V19H12.8V12.6H10.4V17H8.2V12.6H4V11H8.2V7H10.4V11Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+AlignItemsCenterIcon.displayName = "AlignItemsCenterIcon";

package/src/align-items-end.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignItemsEndIcon = 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="M16 16H19.2V17.6H4.80005V16H8.00005V9.59999H11.2V16H12.8V6.39999H16V16Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+AlignItemsEndIcon.displayName = "AlignItemsEndIcon";

package/src/align-items-start.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignItemsStartIcon = 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.8 7.99999H11.2V14.4H8.00005V7.99999H4.80005V6.39999H19.2V7.99999H16V17.6H12.8V7.99999Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+AlignItemsStartIcon.displayName = "AlignItemsStartIcon";

package/src/align-items-stretch.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignItemsStretchIcon = 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="M16 16H19.2V17.6H4.80005V16H8.00005V7.99999H4.80005V6.39999H19.2V7.99999H16V16ZM12.8 16V7.99999H11.2V16H12.8Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+AlignItemsStretchIcon.displayName = "AlignItemsStretchIcon";

package/src/align-self-baseline.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignSelfBaselineIcon = 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}
+      >
+        <mask id="a" fill="#fff">
+          <rect width="3" height="10" x="6.5" y="3" rx=".8" />
+        </mask>
+        <rect
+          width="3"
+          height="10"
+          x="6.5"
+          y="3"
+          stroke={color}
+          strokeWidth="2"
+          mask="url(#a)"
+          rx=".8"
+        />
+        <rect
+          width="3"
+          height="5.73926"
+          x="6.5"
+          y="7.25977"
+          fill={color}
+          rx=".8"
+        />
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M1.5 7.95c0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7 0 .3866-.3439.7-.7682.7H2.26818c-.42425 0-.76818-.3134-.76818-.7Z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  }
+);
+AlignSelfBaselineIcon.displayName = "AlignSelfBaselineIcon";

package/src/align-self-center.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignSelfCenterIcon = 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}
+      >
+        <rect width="3" height="10" x="6.5" y="3" fill={color} rx=".8" />
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M1.5 7.95c0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7 0 .3866-.3439.7-.7682.7H2.26818c-.42425 0-.76818-.3134-.76818-.7Z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  }
+);
+AlignSelfCenterIcon.displayName = "AlignSelfCenterIcon";

package/src/align-self-end.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignSelfEndIcon = 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}
+          fillRule="evenodd"
+          d="M14.5 14.2004c0 .3866-.3439.7-.7682.7H2.26818c-.42425 0-.76818-.3134-.76818-.7 0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7Z"
+          clipRule="evenodd"
+        />
+        <rect
+          width="3"
+          height="9"
+          x="9.5"
+          y="12.4004"
+          fill={color}
+          rx=".8"
+          transform="rotate(-180 9.5 12.4004)"
+        />
+      </svg>
+    );
+  }
+);
+AlignSelfEndIcon.displayName = "AlignSelfEndIcon";

package/src/align-self-start.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignSelfStartIcon = 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}
+          fillRule="evenodd"
+          d="M1.5 1.79961c0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7 0 .3866-.3439.7-.7682.7H2.26818c-.42425 0-.76818-.3134-.76818-.7Z"
+          clipRule="evenodd"
+        />
+        <rect width="3" height="9" x="6.5" y="3.59961" fill={color} rx=".8" />
+      </svg>
+    );
+  }
+);
+AlignSelfStartIcon.displayName = "AlignSelfStartIcon";

package/src/align-self-stretch.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AlignSelfStretchIcon = 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}
+          fillRule="evenodd"
+          d="M14.5 14.2004c0 .3866-.3439.7-.7682.7H2.26818c-.42425 0-.76818-.3134-.76818-.7 0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7Z"
+          clipRule="evenodd"
+        />
+        <rect
+          width="3"
+          height="9"
+          x="9.5"
+          y="12.5"
+          fill={color}
+          rx=".8"
+          transform="rotate(-180 9.5 12.5)"
+        />
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M14.5 1.8c0 .3866-.3439.7-.7682.7H2.26818C1.84393 2.5 1.5 2.1866 1.5 1.8c0-.3866.34393-.7.76818-.7H13.7318c.4243 0 .7682.3134.7682.7Z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  }
+);
+AlignSelfStretchIcon.displayName = "AlignSelfStretchIcon";

package/src/aspect-ratio.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const AspectRatioIcon = 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="M10.85 10.503a.625.625 0 100-1.25v1.25zM4.975 3.378a.625.625 0 10-1.25 0h1.25zm-.072 6.394l.275-.561-.275.561zm-.443-.426l.552-.292-.552.292zm6.39-.093H5.972v1.25h4.878v-1.25zM4.975 8.32V3.38h-1.25v4.94h1.25zm.997.934c-.294 0-.478 0-.617-.01a.524.524 0 01-.177-.032l-.55 1.123c.21.102.423.138.63.154.198.016.44.015.714.015v-1.25zM3.725 8.32c0 .262 0 .498.016.693.017.203.056.418.167.627l1.104-.585c0-.001-.004-.008-.009-.028a.803.803 0 01-.017-.12 7.858 7.858 0 01-.011-.587h-1.25zm1.453.892a.37.37 0 01-.166-.157l-1.104.585c.16.303.414.545.72.695l.55-1.123z"
+          fill={color}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4.349 6.067c.345 0 .625-.28.625-.625V3.466l1.428 1.429a.625.625 0 10.884-.884L4.791 1.515a.625.625 0 00-.884 0L1.412 4.011a.625.625 0 10.884.884l1.428-1.429v1.976c0 .345.28.625.625.625zM7.769 9.878c0 .345.28.625.625.625h1.975l-1.428 1.429a.625.625 0 10.884.883l2.495-2.495a.625.625 0 000-.883L9.825 6.94a.625.625 0 10-.884.884l1.428 1.428H8.394a.625.625 0 00-.625.625z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+AspectRatioIcon.displayName = "AspectRatioIcon";

package/src/body.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const BodyIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="15"
+        height="15"
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M1 3.96833H14M2.51667 14H12.4833C13.321 14 14 13.321 14 12.4833V2.51667C14 1.67903 13.321 1 12.4833 1H2.51667C1.67903 1 1 1.67903 1 2.51667V12.4833C1 13.321 1.67903 14 2.51667 14Z"
+          stroke={color}
+          strokeWidth="1.15"
+        />
+      </svg>
+    );
+  }
+);
+
+BodyIcon.displayName = "BodyIcon";

package/src/brush.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const BrushIcon = 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="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37-1.34-1.34a.9959.9959 0 0 0-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z"
+        />
+      </svg>
+    );
+  }
+);
+
+BrushIcon.displayName = "BrushIcon";

package/src/chevron-double-down.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const ChevronDoubleDownIcon = 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 2L8 7L3 2M13 9L8 14L3 9"
+          stroke={color}
+          strokeWidth="1.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+);
+
+ChevronDoubleDownIcon.displayName = "ChevronDoubleDownIcon";

package/src/chevron-double-left.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const ChevronDoubleLeftIcon = 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="M14 13L9 8L14 3M7 13L2 8L7 3"
+          stroke={color}
+          strokeWidth="1.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+);
+
+ChevronDoubleLeftIcon.displayName = "ChevronDoubleLeftIcon";

package/src/chevron-double-right.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const ChevronDoubleRightIcon = 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="M2 3L7 8L2 13M9 3L14 8L9 13"
+        stroke={color}
+        strokeWidth="1.3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+});
+
+ChevronDoubleRightIcon.displayName = "ChevronDoubleRightIcon";

package/src/chevron-double-up.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const ChevronDoubleUpIcon = 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 14L8 9L13 14M3 7L8 2L13 7"
+          stroke={color}
+          strokeWidth="1.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+);
+
+ChevronDoubleUpIcon.displayName = "ChevronDoubleUpIcon";

package/src/chevron-down.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const ChevronDownIcon = 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="M4.04008 6.28383C4.29431 6.03037 4.70587 6.031 4.95932 6.28523L7.99985 9.33506L11.0404 6.28523C11.2938 6.031 11.7054 6.03037 11.9596 6.28383C12.2139 6.53728 12.2145 6.94884 11.961 7.20306L8.46017 10.7146C8.33822 10.837 8.17259 10.9057 7.99985 10.9057C7.82712 10.9057 7.66149 10.837 7.53953 10.7146L4.03868 7.20306C3.78523 6.94884 3.78585 6.53728 4.04008 6.28383Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+ChevronDownIcon.displayName = "ChevronDownIcon";

package/src/chevron-left.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const ChevronLeftIcon = 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="M9.7162 4.04011C9.96966 4.29434 9.96903 4.7059 9.7148 4.95935L6.66497 7.99988L9.7148 11.0404C9.96903 11.2939 9.96966 11.7054 9.7162 11.9597C9.46275 12.2139 9.05119 12.2145 8.79697 11.9611L5.28541 8.4602C5.16308 8.33825 5.09432 8.17262 5.09432 7.99988C5.09432 7.82715 5.16308 7.66152 5.28541 7.53956L8.79697 4.03871C9.05119 3.78526 9.46275 3.78588 9.7162 4.04011Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+ChevronLeftIcon.displayName = "ChevronLeftIcon";

package/src/chevron-right.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const ChevronRightIcon = 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="M6.2838 11.9599C6.03034 11.7057 6.03097 11.2941 6.2852 11.0407L9.33503 8.00013L6.2852 4.95959C6.03097 4.70614 6.03034 4.29458 6.2838 4.04036C6.53725 3.78613 6.94881 3.7855 7.20303 4.03895L10.7146 7.5398C10.8369 7.66176 10.9057 7.82739 10.9057 8.00013C10.9057 8.17286 10.8369 8.33849 10.7146 8.46045L7.20303 11.9613C6.94881 12.2148 6.53725 12.2141 6.2838 11.9599Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+ChevronRightIcon.displayName = "ChevronRightIcon";

package/src/chevron-up.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const ChevronUpIcon = 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="M11.9599 9.71617C11.7057 9.96963 11.2941 9.969 11.0407 9.71477L8.00015 6.66494L4.95962 9.71477C4.70616 9.969 4.29461 9.96963 4.04038 9.71617C3.78615 9.46272 3.78552 9.05116 4.03897 8.79694L7.53983 5.28538C7.66178 5.16305 7.82741 5.09429 8.00015 5.09429C8.17288 5.09429 8.33851 5.16305 8.46047 5.28538L11.9613 8.79694C12.2148 9.05116 12.2141 9.46272 11.9599 9.71617Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+ChevronUpIcon.displayName = "ChevronUpIcon";