@icons-library/cropwise 1.0.0

package/src/design/DateFrom.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DateFrom: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 18 20"
+    fill="none"
+    {...props}
+  >
+    <path fillRule="evenodd" clipRule="evenodd" d="M2 20C0.9 20 0 19.1 0 18V4C0 2.9 0.9 2 2 2H3V0H5V2H13V0H15V2H16C17.11 2 17.99 2.9 17.99 4L17.9943 9H16V8H2V18H16V17H17.9986L18 18C18 19.1 17.11 20 16 20H2ZM16 4H2V6H16V4Z" fill="currentColor"/>
+<path d="M9 12H14.01V9L18 13L14.01 17V14H9V12Z" fill="currentColor"/>
+  </svg>
+);
+
+DateFrom.displayName = "DateFrom";
+export default DateFrom;

package/src/design/DateTo.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DateTo: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 18 20"
+    fill="none"
+    {...props}
+  >
+    <path fillRule="evenodd" clipRule="evenodd" d="M16 20C17.1 20 18 19.1 18 18V4C18 2.9 17.1 2 16 2H15V0H13V2H5V0H3V2H2C0.89 2 0.01 2.9 0.01 4L0.00571429 9H2V8H16V18H2V17H0.00142857L0 18C0 19.1 0.89 20 2 20H16ZM2 4H16V6H2V4Z" fill="currentColor"/>
+<path d="M0 12H5.01V9L9 13L5.01 17V14H0V12Z" fill="currentColor"/>
+  </svg>
+);
+
+DateTo.displayName = "DateTo";
+export default DateTo;

package/src/design/Delete.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const Delete: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 14 18"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" fillRule="evenodd" clipRule="evenodd" d="M9.5 0H4.5L3.5 1H0V3H14V1H10.5L9.5 0ZM11 6V16H3V6H11ZM1 4H13V16C13 17.1 12.1 18 11 18H3C1.9 18 1 17.1 1 16V4Z" fill="currentColor"/>
+  </svg>
+);
+
+Delete.displayName = "Delete";
+export default Delete;

package/src/design/DirectionEast.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DirectionEast: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 12 16"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M6 0L0 15.4021L0.568 16L6 13.4737L11.432 16L12 15.4021L6 0Z" fill="currentColor"/>
+  </svg>
+);
+
+DirectionEast.displayName = "DirectionEast";
+export default DirectionEast;

package/src/design/DirectionNorth.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DirectionNorth: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 12 16"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M6 0L0 15.4021L0.568 16L6 13.4737L11.432 16L12 15.4021L6 0Z" fill="currentColor"/>
+  </svg>
+);
+
+DirectionNorth.displayName = "DirectionNorth";
+export default DirectionNorth;

package/src/design/DirectionNortheast.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DirectionNortheast: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 12 16"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M6 0L0 15.4021L0.568 16L6 13.4737L11.432 16L12 15.4021L6 0Z" fill="currentColor"/>
+  </svg>
+);
+
+DirectionNortheast.displayName = "DirectionNortheast";
+export default DirectionNortheast;

package/src/design/DirectionNorthwest.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DirectionNorthwest: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 12 16"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M6 0L0 15.4021L0.568 16L6 13.4737L11.432 16L12 15.4021L6 0Z" fill="currentColor"/>
+  </svg>
+);
+
+DirectionNorthwest.displayName = "DirectionNorthwest";
+export default DirectionNorthwest;

package/src/design/DirectionSouth.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DirectionSouth: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 12 16"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M6 0L0 15.4021L0.568 16L6 13.4737L11.432 16L12 15.4021L6 0Z" fill="currentColor"/>
+  </svg>
+);
+
+DirectionSouth.displayName = "DirectionSouth";
+export default DirectionSouth;

package/src/design/DirectionSoutheast.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DirectionSoutheast: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 12 16"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M6 0L0 15.4021L0.568 16L6 13.4737L11.432 16L12 15.4021L6 0Z" fill="currentColor"/>
+  </svg>
+);
+
+DirectionSoutheast.displayName = "DirectionSoutheast";
+export default DirectionSoutheast;

package/src/design/DirectionSouthwest.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DirectionSouthwest: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 12 16"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M6 0L0 15.4021L0.568 16L6 13.4737L11.432 16L12 15.4021L6 0Z" fill="currentColor"/>
+  </svg>
+);
+
+DirectionSouthwest.displayName = "DirectionSouthwest";
+export default DirectionSouthwest;

package/src/design/DirectionWest.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DirectionWest: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 12 16"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M6 0L0 15.4021L0.568 16L6 13.4737L11.432 16L12 15.4021L6 0Z" fill="currentColor"/>
+  </svg>
+);
+
+DirectionWest.displayName = "DirectionWest";
+export default DirectionWest;

package/src/design/Done.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const Done: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 17.6 13.4"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M5.6 10.6L1.4 6.4L0 7.8L5.6 13.4L17.6 1.4L16.2 0L5.6 10.6Z" fill="currentColor"/>
+  </svg>
+);
+
+Done.displayName = "Done";
+export default Done;

package/src/design/DoneAll.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DoneAll: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 23.25 13.4102"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" fillRule="evenodd" clipRule="evenodd" d="M21.83 0L11.25 10.58L7.07 6.41L5.66 7.82L11.25 13.41L23.25 1.41L21.83 0ZM17.59 1.41L16.18 0L9.84 6.34L11.25 7.75L17.59 1.41ZM5.59 13.4102L0 7.82016L1.42 6.41016L7 12.0002L5.59 13.4102Z" fill="currentColor"/>
+  </svg>
+);
+
+DoneAll.displayName = "DoneAll";
+export default DoneAll;

package/src/design/DoubleArrow.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DoubleArrow: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 16.5 14"
+    fill="none"
+    {...props}
+  >
+    <path d="M0 0H4.5L9.5 7L4.5 14H0L5 7L0 0Z" fill="currentColor"/>
+<path d="M7 0H11.5L16.5 7L11.5 14H7L12 7L7 0Z" fill="currentColor"/>
+  </svg>
+);
+
+DoubleArrow.displayName = "DoubleArrow";
+export default DoubleArrow;

package/src/design/DownloadPdf.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DownloadPdf: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 16 20"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" fillRule="evenodd" clipRule="evenodd" d="M10 0H2C0.9 0 0.01 0.9 0.01 2L0 18C0 19.1 0.89 20 1.99 20H14C15.1 20 16 19.1 16 18V6L10 0ZM2 18V2H9V7H14V18H2ZM10 14V11C10 10.45 9.55 10 9 10H7V15H9C9.55 15 10 14.55 10 14ZM8 11H9V14H8V11ZM12 13H13V12H12V11H13V10H11V15H12V13ZM4 13H5C5.55 13 6 12.55 6 12V11C6 10.45 5.55 10 5 10H3V15H4V13ZM4 11H5V12H4V11Z" fill="currentColor"/>
+  </svg>
+);
+
+DownloadPdf.displayName = "DownloadPdf";
+export default DownloadPdf;

package/src/design/DownloadXls.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DownloadXls: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 16 20"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" fillRule="evenodd" clipRule="evenodd" d="M10 0H2C0.9 0 0.01 0.9 0.01 2L0 18C0 19.1 0.89 20 1.99 20H14C15.1 20 16 19.1 16 18V6L10 0ZM2 18V2H9V7H14V18H2ZM5 10L4.5 11.25L4 10H3L4 12.5L3 15H4L4.5 13.75L5 15H6L5 12.5L6 10H5ZM11 10C10.4477 10 10 10.4477 10 11V13H12V14H10V15H12C12.5523 15 13 14.5523 13 14V12H11V11H13V10H11ZM7 14V10H8V14H9V15H8C7.44772 15 7 14.5523 7 14Z" fill="currentColor"/>
+  </svg>
+);
+
+DownloadXls.displayName = "DownloadXls";
+export default DownloadXls;

package/src/design/DragHandle.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DragHandle: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 16 6"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" fillRule="evenodd" clipRule="evenodd" d="M0 0H16V2H0V0ZM16 6H0V4H16V6Z" fill="currentColor"/>
+  </svg>
+);
+
+DragHandle.displayName = "DragHandle";
+export default DragHandle;

package/src/design/DragIndicator.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DragIndicator: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 10 16"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" fillRule="evenodd" clipRule="evenodd" d="M2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM0 8C0 6.9 0.9 6 2 6C3.1 6 4 6.9 4 8C4 9.1 3.1 10 2 10C0.9 10 0 9.1 0 8ZM2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16ZM10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM6 14C6 12.9 6.9 12 8 12C9.1 12 10 12.9 10 14C10 15.1 9.1 16 8 16C6.9 16 6 15.1 6 14Z" fill="currentColor"/>
+  </svg>
+);
+
+DragIndicator.displayName = "DragIndicator";
+export default DragIndicator;

package/src/design/Draw.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const Draw: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 21.0025 19"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M2.5 6C3.54 6 4.84 4.5 6.75 4.5C8.27 4.5 9.5 5.73 9.5 7.25C9.5 9.29 7.51 10.4 5.59 11.47C3.42 12.67 2 13.57 2 15C2 16.1 2.9 17 4 17V19C1.79 19 0 17.21 0 15C0 12.29 2.56 10.86 4.62 9.72C6.04 8.93 7.5 8.12 7.5 7.25C7.5 6.84 7.16 6.5 6.75 6.5C5.5 6.5 4.25 8 2.5 8C1.12 8 0 6.88 0 5.5C0 3.45 2.17 0.83 3 0L4.41 1.41C3.41 2.42 2 4.43 2 5.5C2 5.78 2.22 6 2.5 6ZM6 19H9.75L17.81 10.94L14.06 7.19L6 15.25V19ZM8 16.08L14.06 10.02L14.98 10.94L8.92 17H8V16.08ZM18.37 4.29C17.98 3.9 17.35 3.9 16.96 4.29L15.13 6.12L18.88 9.87L20.71 8.04C21.1 7.65 21.1 7.02 20.71 6.63L18.37 4.29Z" fill="currentColor"/>
+  </svg>
+);
+
+Draw.displayName = "Draw";
+export default Draw;

package/src/design/DriveFileMove.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DriveFileMove: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 20 16"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M18 2H10L8 0H2C0.9 0 0 0.9 0 2V14C0 15.1 0.9 16 2 16H18C19.1 16 20 15.1 20 14V4C20 2.9 19.1 2 18 2ZM18 14H2V2H7.17L9.17 4H18V14ZM10.16 8H6V10H10.16L8.57 11.59L9.99 13L14 9.01L9.99 5L8.58 6.41L10.16 8Z" fill="currentColor"/>
+  </svg>
+);
+
+DriveFileMove.displayName = "DriveFileMove";
+export default DriveFileMove;

package/src/design/DriveFolderUpload.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const DriveFolderUpload: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 20 16"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M18 2H10L8 0H2C0.9 0 0.00999999 0.9 0.00999999 2L0 14C0 15.1 0.9 16 2 16H18C19.1 16 20 15.1 20 14V4C20 2.9 19.1 2 18 2ZM18 14H2V2H7.17L9.17 4H18V14ZM7.41 10.42L9 8.84V13H11V8.84L12.59 10.43L14 9.01L10.01 5L6 9.01L7.41 10.42Z" fill="currentColor"/>
+  </svg>
+);
+
+DriveFolderUpload.displayName = "DriveFolderUpload";
+export default DriveFolderUpload;

package/src/design/EditNote.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const EditNote: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 18.1325 15"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M0 4H11V6H0V4ZM0 2H11V0H0V2ZM0 10H7V8H0V10ZM15.01 6.87L15.72 6.16C16.11 5.77 16.74 5.77 17.13 6.16L17.84 6.87C18.23 7.26 18.23 7.89 17.84 8.28L17.13 8.99L15.01 6.87ZM14.3 7.58L9 12.88V15H11.12L16.42 9.7L14.3 7.58Z" fill="currentColor"/>
+  </svg>
+);
+
+EditNote.displayName = "EditNote";
+export default EditNote;

package/src/design/EditOff.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const EditOff: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 19.8 19.8"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M12.67 6.21L13.59 7.13L12.48 8.24L13.89 9.65L16.41 7.13L12.66 3.38L10.14 5.9L11.55 7.31L12.67 6.21ZM19.32 4.23C19.71 3.84 19.71 3.21 19.32 2.82L16.98 0.48C16.78 0.28 16.53 0.19 16.27 0.19C16.01 0.19 15.76 0.29 15.57 0.48L13.74 2.31L17.49 6.06L19.32 4.23ZM1.42 0L0 1.41L7.32 8.73L1.61 14.44V18.19H5.36L11.07 12.48L18.39 19.8L19.8 18.39L1.42 0ZM4.53 16.19H3.61V15.27L8.74 10.14L9.66 11.06L4.53 16.19Z" fill="currentColor"/>
+  </svg>
+);
+
+EditOff.displayName = "EditOff";
+export default EditOff;

package/src/design/Email.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const Email: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 20 16"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" fillRule="evenodd" clipRule="evenodd" d="M20 2C20 0.9 19.1 0 18 0H2C0.9 0 0 0.9 0 2V14C0 15.1 0.9 16 2 16H18C19.1 16 20 15.1 20 14V2ZM18 2L10 7L2 2H18ZM10 9L2 4V14H18V4L10 9Z" fill="currentColor"/>
+  </svg>
+);
+
+Email.displayName = "Email";
+export default Email;

package/src/design/Facebook.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const Facebook: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 20 19.95"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M20 10C20 4.48 15.52 0 10 0C4.48 0 0 4.48 0 10C0 14.84 3.44 18.87 8 19.8V13H6V10H8V7.5C8 5.57 9.57 4 11.5 4H14V7H12C11.45 7 11 7.45 11 8V10H14V13H11V19.95C16.05 19.45 20 15.19 20 10Z" fill="currentColor"/>
+  </svg>
+);
+
+Facebook.displayName = "Facebook";
+export default Facebook;

package/src/design/FastForward.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const FastForward: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 17.5 12"
+    fill="none"
+    {...props}
+  >
+    <path id="Vector" fillRule="evenodd" clipRule="evenodd" d="M8.5 6L0 12V0L8.5 6ZM9 12L17.5 6L9 0V12ZM5.03 5.99938L2 3.85938V8.13938L5.03 5.99938ZM14.03 5.99938L11 3.85938V8.13938L14.03 5.99938Z" fill="currentColor"/>
+  </svg>
+);
+
+FastForward.displayName = "FastForward";
+export default FastForward;

package/src/design/FastRewind.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const FastRewind: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 17.5 12"
+    fill="none"
+    {...props}
+  >
+    <path id="Vector" fillRule="evenodd" clipRule="evenodd" d="M0 6L8.5 0V12L0 6ZM17.5 0L9 6L17.5 12V0ZM3.46973 5.99938L6.49973 8.13938V3.85938L3.46973 5.99938ZM12.4697 5.99938L15.4997 8.13938V3.85938L12.4697 5.99938Z" fill="currentColor"/>
+  </svg>
+);
+
+FastRewind.displayName = "FastRewind";
+export default FastRewind;

package/src/design/Filter.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const Filter: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" fillRule="evenodd" clipRule="evenodd" d="M14 6H12V0H14V2H18V4H14V6ZM0 4V2H10V4H0ZM0 16V14H6V16H0ZM10 18V16H18V14H10V12H8V18H10ZM4 8V6H6V12H4V10H0V8H4ZM18 10V8H8V10H18Z" fill="currentColor"/>
+  </svg>
+);
+
+Filter.displayName = "Filter";
+export default Filter;

package/src/design/FilterAlt.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const FilterAlt: React.FC<IconProps> = ({ size = 24, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 15.9132 16"
+    fill="none"
+    {...props}
+  >
+    <path id="vector" d="M2.9616 2H12.9616L7.9516 8.3L2.9616 2ZM0.211604 1.61C2.2316 4.2 5.9616 9 5.9616 9V15C5.9616 15.55 6.4116 16 6.9616 16H8.9616C9.5116 16 9.9616 15.55 9.9616 15V9C9.9616 9 13.6816 4.2 15.7016 1.61C16.2116 0.95 15.7416 0 14.9116 0H1.0016C0.171604 0 -0.298396 0.95 0.211604 1.61Z" fill="currentColor"/>
+  </svg>
+);
+
+FilterAlt.displayName = "FilterAlt";
+export default FilterAlt;