@postal-music/icons 0.1.0

package/src/icons/actions/TrashIcon.native.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface TrashIconProps {
+  size?: number;
+  color?: string;
+}
+
+const TrashIcon: React.FC<TrashIconProps> = ({ size = 20, color = '#000000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+    <Path
+      d="M13.3333 5.0013V4.33464C13.3333 3.40121 13.3333 2.9345 13.1517 2.57798C12.9919 2.26438 12.7369 2.00941 12.4233 1.84962C12.0668 1.66797 11.6001 1.66797 10.6667 1.66797H9.33333C8.39991 1.66797 7.9332 1.66797 7.57668 1.84962C7.26308 2.00941 7.00811 2.26438 6.84832 2.57798C6.66667 2.9345 6.66667 3.40121 6.66667 4.33464V5.0013M8.33333 9.58464V13.7513M11.6667 9.58464V13.7513M2.5 5.0013H17.5M15.8333 5.0013V14.3346C15.8333 15.7348 15.8333 16.4348 15.5608 16.9696C15.3212 17.44 14.9387 17.8225 14.4683 18.0622C13.9335 18.3346 13.2335 18.3346 11.8333 18.3346H8.16667C6.76654 18.3346 6.06647 18.3346 5.53169 18.0622C5.06129 17.8225 4.67883 17.44 4.43915 16.9696C4.16667 16.4348 4.16667 15.7348 4.16667 14.3346V5.0013"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { TrashIcon };
+export default TrashIcon;

package/src/icons/actions/TrashIcon.web.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const TrashIcon: React.FC<IconProps> = ({ size = 20, color = "currentColor" }) => (
+  <svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M13.3333 5.0013V4.33464C13.3333 3.40121 13.3333 2.9345 13.1517 2.57798C12.9919 2.26438 12.7369 2.00941 12.4233 1.84962C12.0668 1.66797 11.6001 1.66797 10.6667 1.66797H9.33333C8.39991 1.66797 7.9332 1.66797 7.57668 1.84962C7.26308 2.00941 7.00811 2.26438 6.84832 2.57798C6.66667 2.9345 6.66667 3.40121 6.66667 4.33464V5.0013M8.33333 9.58464V13.7513M11.6667 9.58464V13.7513M2.5 5.0013H17.5M15.8333 5.0013V14.3346C15.8333 15.7348 15.8333 16.4348 15.5608 16.9696C15.3212 17.44 14.9387 17.8225 14.4683 18.0622C13.9335 18.3346 13.2335 18.3346 11.8333 18.3346H8.16667C6.76654 18.3346 6.06647 18.3346 5.53169 18.0622C5.06129 17.8225 4.67883 17.44 4.43915 16.9696C4.16667 16.4348 4.16667 15.7348 4.16667 14.3346V5.0013"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      vectorEffect="non-scaling-stroke"
+
+    />
+  </svg>
+);
+
+export default TrashIcon;

package/src/icons/actions/XIcon.native.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface XIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const XIcon: React.FC<XIconProps> = ({ size = 16, strokeWidth = 1, color = '#000000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <Path
+      d="M11.3327 4.66797L4.66602 11.3346M4.66602 4.66797L11.3327 11.3346"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { XIcon };
+export default XIcon;

package/src/icons/actions/XIcon.web.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const XIcon: React.FC<IconProps> = ({ size = 16, strokeWidth = 1, color = "currentColor" }) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M11.3327 4.66797L4.66602 11.3346M4.66602 4.66797L11.3327 11.3346"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default XIcon;

package/src/icons/actions/index.ts

@@ -0,0 +1,22 @@
+export { default as CheckIcon } from './CheckIcon';
+export { default as Copy02Icon } from './Copy02Icon';
+export { Copy06Icon } from './Copy06Icon';
+export { default as CopyIcon } from './CopyIcon';
+export { default as Expand01Icon } from './Expand01Icon';
+export { default as LogoutIcon } from './LogoutIcon';
+export { default as MinCircleIcon } from './MinCircleIcon';
+export { default as MinimiseIcon } from './MinimiseIcon';
+export { default as MinusIcon } from './MinusIcon';
+export { default as MoreOptionsIcon } from './MoreOptionsIcon';
+export { default as MoveIcon } from './MoveIcon';
+export { default as PencilIcon } from './PencilIcon';
+export { default as PlusCircleIcon } from './PlusCircleIcon';
+export { default as PlusIcon } from './PlusIcon';
+export { RefreshIcon } from './RefreshIcon';
+export { default as ResetIcon } from './ResetIcon';
+export { default as SettingsIcon } from './SettingsIcon';
+export { default as SlidersIcon } from './SlidersIcon';
+export { default as SmallMagnifyIcon } from './SmallMagnifyIcon';
+export { default as Trash02Icon } from './Trash02Icon';
+export { default as TrashIcon } from './TrashIcon';
+export { default as XIcon } from './XIcon';

package/src/icons/alerts/AlertTriangleIcon.native.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type AlertTriangleIconProps = {
+  size?: number | string;
+  stroke?: string;
+  strokeWidth?: number | string;
+};
+
+const AlertTriangleIcon = ({
+  size = 18,
+  stroke = '#FF0000',
+  strokeWidth = 1.5,
+}: AlertTriangleIconProps) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    stroke={stroke}
+    strokeWidth={strokeWidth}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <Path d="M8.99982 6.7492V9.7492M8.99982 12.7492H9.00732M7.9613 2.91799L1.79264 13.573C1.45049 14.1639 1.27941 14.4594 1.30469 14.702C1.32675 14.9135 1.43758 15.1057 1.60959 15.2308C1.80681 15.3742 2.14826 15.3742 2.83115 15.3742H15.1685C15.8514 15.3742 16.1928 15.3742 16.39 15.2308C16.5621 15.1057 16.6729 14.9135 16.6949 14.702C16.7202 14.4594 16.5491 14.1639 16.207 13.573L10.0383 2.91799C9.6974 2.32911 9.52694 2.03468 9.30454 1.93579C9.11055 1.84953 8.88908 1.84953 8.69509 1.93579C8.47269 2.03468 8.30223 2.32912 7.9613 2.91799Z" />
+  </Svg>
+);
+
+AlertTriangleIcon.displayName = 'AlertTriangleIcon';
+
+export { AlertTriangleIcon };
+export default AlertTriangleIcon;

package/src/icons/alerts/AlertTriangleIcon.web.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+
+type AlertTriangleIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+  stroke?: string;
+  strokeWidth?: number | string;
+  title?: string;
+};
+
+const AlertTriangleIcon = React.forwardRef<
+  SVGSVGElement,
+  AlertTriangleIconProps
+>(
+  (
+    {
+      size = 18,
+      stroke = "#FF0000",
+      strokeWidth = 1.5,
+      className,
+      title,
+      ...rest
+    },
+    ref,
+  ) => (
+    <svg
+      ref={ref}
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role={title ? "img" : "presentation"}
+      aria-label={title}
+      className={className}
+      {...rest}
+    >
+      {title ? <title>{title}</title> : null}
+      <path d="M8.99982 6.7492V9.7492M8.99982 12.7492H9.00732M7.9613 2.91799L1.79264 13.573C1.45049 14.1639 1.27941 14.4594 1.30469 14.702C1.32675 14.9135 1.43758 15.1057 1.60959 15.2308C1.80681 15.3742 2.14826 15.3742 2.83115 15.3742H15.1685C15.8514 15.3742 16.1928 15.3742 16.39 15.2308C16.5621 15.1057 16.6729 14.9135 16.6949 14.702C16.7202 14.4594 16.5491 14.1639 16.207 13.573L10.0383 2.91799C9.6974 2.32911 9.52694 2.03468 9.30454 1.93579C9.11055 1.84953 8.88908 1.84953 8.69509 1.93579C8.47269 2.03468 8.30223 2.32912 7.9613 2.91799Z" />
+    </svg>
+  ),
+);
+
+AlertTriangleIcon.displayName = "AlertTriangleIcon";
+
+export default AlertTriangleIcon;

package/src/icons/alerts/BellIcon.native.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface BellIconProps {
+  size?: number | string;
+}
+
+const BellIcon = ({ size = 18 }: BellIconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+      <Path
+        d="M10.4996 15.75H7.49959M13.4996 6C13.4996 4.80653 13.0255 3.66193 12.1816 2.81802C11.3377 1.97411 10.1931 1.5 8.99959 1.5C7.80611 1.5 6.66152 1.97411 5.81761 2.81802C4.97369 3.66193 4.49959 4.80653 4.49959 6C4.49959 8.31764 3.91494 9.90447 3.26184 10.9541C2.71093 11.8394 2.43548 12.2821 2.44558 12.4056C2.45676 12.5423 2.48573 12.5944 2.59592 12.6762C2.69543 12.75 3.14403 12.75 4.04123 12.75H13.9579C14.8551 12.75 15.3037 12.75 15.4033 12.6762C15.5134 12.5944 15.5424 12.5423 15.5536 12.4056C15.5637 12.2821 15.2882 11.8394 14.7373 10.9541C14.0842 9.90447 13.4996 8.31764 13.4996 6Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { BellIcon };
+export default BellIcon;

package/src/icons/alerts/BellIcon.web.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+interface BellIconProps {
+  size?: number | string;
+  className?: string;
+}
+
+export default function BellIcon({ size = 18, className }: BellIconProps) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.4996 15.75H7.49959M13.4996 6C13.4996 4.80653 13.0255 3.66193 12.1816 2.81802C11.3377 1.97411 10.1931 1.5 8.99959 1.5C7.80611 1.5 6.66152 1.97411 5.81761 2.81802C4.97369 3.66193 4.49959 4.80653 4.49959 6C4.49959 8.31764 3.91494 9.90447 3.26184 10.9541C2.71093 11.8394 2.43548 12.2821 2.44558 12.4056C2.45676 12.5423 2.48573 12.5944 2.59592 12.6762C2.69543 12.75 3.14403 12.75 4.04123 12.75H13.9579C14.8551 12.75 15.3037 12.75 15.4033 12.6762C15.5134 12.5944 15.5424 12.5423 15.5536 12.4056C15.5637 12.2821 15.2882 11.8394 14.7373 10.9541C14.0842 9.90447 13.4996 8.31764 13.4996 6Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/alerts/CheckCircleIcon.native.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type CheckCircleIconProps = {
+  size?: number;
+  strokeWidth?: number;
+};
+
+const CheckCircleIcon = ({ size = 13, strokeWidth = 1.5 }: CheckCircleIconProps) => {
+  if (size <= 0) return null;
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 13 13" fill="none">
+      <Path
+        d="M4.06266 6.4987L5.68766 8.1237L8.93766 4.8737M11.9168 6.4987C11.9168 9.49024 9.49171 11.9154 6.50016 11.9154C3.50862 11.9154 1.0835 9.49024 1.0835 6.4987C1.0835 3.50716 3.50862 1.08203 6.50016 1.08203C9.49171 1.08203 11.9168 3.50716 11.9168 6.4987Z"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+CheckCircleIcon.displayName = 'CheckCircleIcon';
+
+export { CheckCircleIcon };
+export default CheckCircleIcon;

package/src/icons/alerts/CheckCircleIcon.web.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+
+type CheckIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number;
+  title?: string;
+  strokeWidth?: number;
+};
+
+const CheckCircleIcon = React.forwardRef<SVGSVGElement, CheckIconProps>(
+  (
+    { size = 13, className, title = "Check icon", strokeWidth = 1.5, ...rest },
+    ref,
+  ) => {
+    if (size <= 0) return null;
+
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 13 13"
+        fill="none"
+        role="img"
+        aria-label={title}
+        focusable={false}
+        className={className}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        {title ? <title>{title}</title> : null}
+        <path
+          d="M4.06266 6.4987L5.68766 8.1237L8.93766 4.8737M11.9168 6.4987C11.9168 9.49024 9.49171 11.9154 6.50016 11.9154C3.50862 11.9154 1.0835 9.49024 1.0835 6.4987C1.0835 3.50716 3.50862 1.08203 6.50016 1.08203C9.49171 1.08203 11.9168 3.50716 11.9168 6.4987Z"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  },
+);
+
+CheckCircleIcon.displayName = "CheckCircleIcon";
+export default CheckCircleIcon;

package/src/icons/alerts/InfoCircleIcon.native.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Svg, { Path, G, Defs, ClipPath, Rect } from 'react-native-svg';
+
+interface InfoCircleIconProps {
+  size?: number | string;
+  strokeColor?: string;
+}
+
+const InfoCircleIcon: React.FC<InfoCircleIconProps> = ({
+  size = 18,
+  strokeColor = '#000000',
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <G clipPath="url(#infoCircleClip)">
+      <Path
+        d="M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z"
+        stroke={strokeColor}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="infoCircleClip">
+        <Rect width="18" height="18" fill="white" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export { InfoCircleIcon };
+export default InfoCircleIcon;

package/src/icons/alerts/InfoCircleIcon.web.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+interface InfoCircleIconProps extends React.SVGProps<SVGSVGElement> {
+  /** The size of the icon (width and height) */
+  size?: number | string;
+  /** Stroke color */
+  strokeColor?: string;
+}
+
+const InfoCircleIcon: React.FC<InfoCircleIconProps> = ({
+  size = 18,
+  strokeColor = "currentColor",
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#infoCircleClip)">
+      <path
+        d="M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z"
+        stroke={strokeColor}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="infoCircleClip">
+        <rect width="18" height="18" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default InfoCircleIcon;

package/src/icons/alerts/InfoIcon.native.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Svg, { Path, G, Defs, ClipPath, Rect } from 'react-native-svg';
+
+interface InfoIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const InfoIcon: React.FC<InfoIconProps> = ({ size = 18, color = '#000000', strokeWidth = 1.5 }) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <G clipPath="url(#clip0_info)">
+      <Path
+        d="M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="clip0_info">
+        <Rect width="18" height="18" fill="white" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export { InfoIcon };
+export default InfoIcon;

package/src/icons/alerts/InfoIcon.web.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const InfoIcon: React.FC<IconProps> = ({ size = 18, color = "currentColor", strokeWidth = 1.5 }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_info)">
+      <path
+        d="M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z"
+        stroke={color}
+            strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_info">
+        <rect width="18" height="18" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default InfoIcon;

package/src/icons/alerts/InfoSquareIcon.native.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface InfoSquareIconProps {
+  size?: number | string;
+  strokeColor?: string;
+}
+
+const InfoSquareIcon: React.FC<InfoSquareIconProps> = ({
+  size = 18,
+  strokeColor = '#000000',
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M9 12V9M9 6H9.0075M5.85 15.75H12.15C13.4101 15.75 14.0402 15.75 14.5215 15.5048C14.9448 15.289 15.289 14.9448 15.5048 14.5215C15.75 14.0402 15.75 13.4101 15.75 12.15V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.289 3.05516 14.9448 2.71095 14.5215 2.49524C14.0402 2.25 13.4101 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V12.15C2.25 13.4101 2.25 14.0402 2.49524 14.5215C2.71095 14.9448 3.05516 15.289 3.47852 15.5048C3.95982 15.75 4.58988 15.75 5.85 15.75Z"
+      stroke={strokeColor}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { InfoSquareIcon };
+export default InfoSquareIcon;

package/src/icons/alerts/InfoSquareIcon.web.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface InfoSquareIconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+  strokeColor?: string;
+}
+
+const InfoSquareIcon: React.FC<InfoSquareIconProps> = ({
+  size = 18,
+  strokeColor = "currentColor",
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M9 12V9M9 6H9.0075M5.85 15.75H12.15C13.4101 15.75 14.0402 15.75 14.5215 15.5048C14.9448 15.289 15.289 14.9448 15.5048 14.5215C15.75 14.0402 15.75 13.4101 15.75 12.15V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.289 3.05516 14.9448 2.71095 14.5215 2.49524C14.0402 2.25 13.4101 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V12.15C2.25 13.4101 2.25 14.0402 2.49524 14.5215C2.71095 14.9448 3.05516 15.289 3.47852 15.5048C3.95982 15.75 4.58988 15.75 5.85 15.75Z"
+      stroke={strokeColor}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default InfoSquareIcon;

package/src/icons/alerts/SlashCircleIcon.native.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Svg, { Path, G, Defs, ClipPath, Rect } from 'react-native-svg';
+
+type SlashCircleProps = {
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+};
+
+export const SlashCircleIcon: React.FC<SlashCircleProps> = ({
+  size = 16,
+  color = '#000000',
+  strokeWidth = 1.25,
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke={color}
+    strokeWidth={strokeWidth}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <G clipPath="url(#clip0_6138_11730)">
+      <Path d="M3.28683 3.28732L12.7135 12.714M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z" />
+    </G>
+    <Defs>
+      <ClipPath id="clip0_6138_11730">
+        <Rect width="16" height="16" fill="white" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export default SlashCircleIcon;

package/src/icons/alerts/SlashCircleIcon.web.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+type SlashCircleProps = {
+  size?: number | string;
+  className?: string;
+  color?: string;
+  strokeWidth?: number | string;
+};
+
+export const SlashCircleIcon: React.FC<SlashCircleProps> = ({
+  size = 16,
+  className = "",
+  color = "currentColor",
+  strokeWidth = 1.25,
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+    stroke={color}
+    strokeWidth={strokeWidth}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_6138_11730)">
+      <path
+        d="M3.28683 3.28732L12.7135 12.714M14.6668 8.00065C14.6668 11.6826 11.6821 14.6673 8.00016 14.6673C4.31826 14.6673 1.3335 11.6826 1.3335 8.00065C1.3335 4.31875 4.31826 1.33398 8.00016 1.33398C11.6821 1.33398 14.6668 4.31875 14.6668 8.00065Z"
+        // No fill needed, stroke comes from parent <svg>
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_6138_11730">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+// Usage Example
+/*
+<SlashCircleIcon size={24} color="#444" strokeWidth={2} className="my-2" />
+*/

package/src/icons/alerts/XCircleIcon.native.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type XCircleIconProps = {
+  size?: number;
+  strokeWidth?: number;
+};
+
+const XCircleIcon = ({ size = 16, strokeWidth = 1.5 }: XCircleIconProps) => {
+  if (size <= 0) return null;
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d="M10.0002 5.99967L6.00016 9.99967M6.00016 5.99967L10.0002 9.99967M14.6668 7.99967C14.6668 11.6816 11.6821 14.6663 8.00016 14.6663C4.31826 14.6663 1.3335 11.6816 1.3335 7.99967C1.3335 4.31778 4.31826 1.33301 8.00016 1.33301C11.6821 1.33301 14.6668 4.31778 14.6668 7.99967Z"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+XCircleIcon.displayName = 'XCircleIcon';
+
+export { XCircleIcon };
+export default XCircleIcon;