@postal-music/icons 0.1.0

package/src/icons/navigation/ListIcon.web.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+interface ListIconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+
+export const ListIcon = React.forwardRef<SVGSVGElement, ListIconProps>(
+  ({ size = 18, color = "currentColor", ...props }, ref) => (
+    <svg
+      ref={ref}
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3 9.75C3.41421 9.75 3.75 9.41421 3.75 9C3.75 8.58579 3.41421 8.25 3 8.25C2.58579 8.25 2.25 8.58579 2.25 9C2.25 9.41421 2.58579 9.75 3 9.75ZM3 5.25C3.41421 5.25 3.75 4.91421 3.75 4.5C3.75 4.08579 3.41421 3.75 3 3.75C2.58579 3.75 2.25 4.08579 2.25 4.5C2.25 4.91421 2.58579 5.25 3 5.25ZM3 14.25C3.41421 14.25 3.75 13.9142 3.75 13.5C3.75 13.0858 3.41421 12.75 3 12.75C2.58579 12.75 2.25 13.0858 2.25 13.5C2.25 13.9142 2.58579 14.25 3 14.25Z"
+        fill={color}
+      />
+      <path
+        d="M15.75 9L6.75 9M15.75 4.5L6.75 4.5M15.75 13.5L6.75 13.5M3.75 9C3.75 9.41421 3.41421 9.75 3 9.75C2.58579 9.75 2.25 9.41421 2.25 9C2.25 8.58579 2.58579 8.25 3 8.25C3.41421 8.25 3.75 8.58579 3.75 9ZM3.75 4.5C3.75 4.91421 3.41421 5.25 3 5.25C2.58579 5.25 2.25 4.91421 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75C3.41421 3.75 3.75 4.08579 3.75 4.5ZM3.75 13.5C3.75 13.9142 3.41421 14.25 3 14.25C2.58579 14.25 2.25 13.9142 2.25 13.5C2.25 13.0858 2.58579 12.75 3 12.75C3.41421 12.75 3.75 13.0858 3.75 13.5Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
+);

package/src/icons/navigation/MenuIcon.native.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface MenuIconProps {
+  width?: number;
+  height?: number;
+}
+
+const MenuIcon = ({ width = 18, height = 18 }: MenuIconProps) => (
+  <Svg width={width} height={height} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M2.25 9H15.75M2.25 4.5H15.75M2.25 13.5H15.75"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+MenuIcon.displayName = 'MenuIcon';
+
+export { MenuIcon };
+export default MenuIcon;

package/src/icons/navigation/MenuIcon.web.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+interface MenuIconProps extends React.SVGProps<SVGSVGElement> {}
+
+const MenuIcon = React.forwardRef<SVGSVGElement, MenuIconProps>(
+  ({ width = 18, height = 18, ...props }, ref) => (
+    <svg
+      ref={ref}
+      width={width}
+      height={height}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M2.25 9H15.75M2.25 4.5H15.75M2.25 13.5H15.75"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
+);
+
+MenuIcon.displayName = "MenuIcon";
+
+export default MenuIcon;

package/src/icons/navigation/Rows01Icon.native.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Rows01IconProps {
+  size?: number;
+  fill?: string;
+}
+
+const Rows01Icon: React.FC<Rows01IconProps> = ({ size = 16, fill = 'none' }) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill={fill}>
+    <Path
+      d="M11.8667 6.66667C12.6134 6.66667 12.9868 6.66667 13.272 6.52134C13.5229 6.39351 13.7268 6.18954 13.8547 5.93865C14 5.65344 14 5.28007 14 4.53333V4.13333C14 3.3866 14 3.01323 13.8547 2.72801C13.7268 2.47713 13.5229 2.27316 13.272 2.14533C12.9868 2 12.6134 2 11.8667 2L4.13333 2C3.3866 2 3.01323 2 2.72801 2.14532C2.47713 2.27316 2.27316 2.47713 2.14532 2.72801C2 3.01323 2 3.3866 2 4.13333L2 4.53333C2 5.28007 2 5.65344 2.14532 5.93865C2.27316 6.18954 2.47713 6.39351 2.72801 6.52134C3.01323 6.66667 3.3866 6.66667 4.13333 6.66667L11.8667 6.66667Z"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M11.8667 14C12.6134 14 12.9868 14 13.272 13.8547C13.5229 13.7268 13.7268 13.5229 13.8547 13.272C14 12.9868 14 12.6134 14 11.8667V11.4667C14 10.7199 14 10.3466 13.8547 10.0613C13.7268 9.81046 13.5229 9.60649 13.272 9.47866C12.9868 9.33333 12.6134 9.33333 11.8667 9.33333L4.13333 9.33333C3.3866 9.33333 3.01323 9.33333 2.72801 9.47866C2.47713 9.60649 2.27316 9.81046 2.14532 10.0613C2 10.3466 2 10.7199 2 11.4667L2 11.8667C2 12.6134 2 12.9868 2.14532 13.272C2.27316 13.5229 2.47713 13.7268 2.72801 13.8547C3.01323 14 3.3866 14 4.13333 14H11.8667Z"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { Rows01Icon };
+export default Rows01Icon;

package/src/icons/navigation/Rows01Icon.web.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+interface Rows01IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+const Rows01Icon: React.FC<Rows01IconProps> = ({
+  size = 16,
+  fill = "none",
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill={fill}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M11.8667 6.66667C12.6134 6.66667 12.9868 6.66667 13.272 6.52134C13.5229 6.39351 13.7268 6.18954 13.8547 5.93865C14 5.65344 14 5.28007 14 4.53333V4.13333C14 3.3866 14 3.01323 13.8547 2.72801C13.7268 2.47713 13.5229 2.27316 13.272 2.14533C12.9868 2 12.6134 2 11.8667 2L4.13333 2C3.3866 2 3.01323 2 2.72801 2.14532C2.47713 2.27316 2.27316 2.47713 2.14532 2.72801C2 3.01323 2 3.3866 2 4.13333L2 4.53333C2 5.28007 2 5.65344 2.14532 5.93865C2.27316 6.18954 2.47713 6.39351 2.72801 6.52134C3.01323 6.66667 3.3866 6.66667 4.13333 6.66667L11.8667 6.66667Z"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.8667 14C12.6134 14 12.9868 14 13.272 13.8547C13.5229 13.7268 13.7268 13.5229 13.8547 13.272C14 12.9868 14 12.6134 14 11.8667V11.4667C14 10.7199 14 10.3466 13.8547 10.0613C13.7268 9.81046 13.5229 9.60649 13.272 9.47866C12.9868 9.33333 12.6134 9.33333 11.8667 9.33333L4.13333 9.33333C3.3866 9.33333 3.01323 9.33333 2.72801 9.47866C2.47713 9.60649 2.27316 9.81046 2.14532 10.0613C2 10.3466 2 10.7199 2 11.4667L2 11.8667C2 12.6134 2 12.9868 2.14532 13.272C2.27316 13.5229 2.47713 13.7268 2.72801 13.8547C3.01323 14 3.3866 14 4.13333 14H11.8667Z"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Rows01Icon;

package/src/icons/navigation/Rows03Icon.native.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type Rows03IconProps = {
+  size?: number;
+  strokeWidth?: number;
+};
+
+const Rows03Icon: React.FC<Rows03IconProps> = ({ size = 24, strokeWidth = 2 }) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <Path d="M3 9H21M3 15H21M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z" />
+    </Svg>
+  );
+};
+
+export { Rows03Icon };
+export default Rows03Icon;

package/src/icons/navigation/Rows03Icon.web.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import React from "react";
+
+type IconProps = {
+  className?: string;
+  size?: number;
+  strokeWidth?: number;
+};
+
+const Rows03Icon: React.FC<IconProps> = ({
+  className,
+  size = 24,
+  strokeWidth = 2,
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      role="img"
+      aria-hidden="true"
+    >
+      <path d="M3 9H21M3 15H21M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z" />
+    </svg>
+  );
+};
+
+export default Rows03Icon;

package/src/icons/navigation/SearchIcon.native.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface SearchIconProps {
+  size?: number;
+  strokeWidth?: string;
+  color?: string;
+}
+
+const SearchIcon: React.FC<SearchIconProps> = ({ size = 18, color = '#000000', strokeWidth = '1.5' }) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M15.75 15.75L11.2501 11.25M12.75 7.5C12.75 10.3995 10.3995 12.75 7.5 12.75C4.6005 12.75 2.25 10.3995 2.25 7.5C2.25 4.6005 4.6005 2.25 7.5 2.25C10.3995 2.25 12.75 4.6005 12.75 7.5Z"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { SearchIcon };
+export default SearchIcon;

package/src/icons/navigation/SearchIcon.web.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  strokeWidth?: string;
+  color?: string;
+}
+
+const SearchIcon: 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"
+  >
+    <path
+      d="M15.75 15.75L11.2501 11.25M12.75 7.5C12.75 10.3995 10.3995 12.75 7.5 12.75C4.6005 12.75 2.25 10.3995 2.25 7.5C2.25 4.6005 4.6005 2.25 7.5 2.25C10.3995 2.25 12.75 4.6005 12.75 7.5Z"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default SearchIcon;

package/src/icons/navigation/SidebarMenuIcon.native.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface SidebarMenuIconProps {
+  size?: number;
+  color?: string;
+}
+
+const SidebarMenuIcon: React.FC<SidebarMenuIconProps> = ({ size = 24, color = '#000000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M3 12H15M3 6H21M3 18H21"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { SidebarMenuIcon };
+export default SidebarMenuIcon;

package/src/icons/navigation/SidebarMenuIcon.web.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const SidebarMenuIcon: React.FC<IconProps> = ({ size = 24, color = "currentColor" }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3 12H15M3 6H21M3 18H21"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default SidebarMenuIcon;

package/src/icons/navigation/SortIcon.native.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface SortIconProps {
+  strokeWidth?: number;
+}
+
+const SortIcon: React.FC<SortIconProps> = ({ strokeWidth = 1.5 }) => (
+  <Svg width={14} height={14} viewBox="0 0 14 14" fill="none">
+    <Path
+      d="M3.5 7H10.5M1.75 3.5H12.25M5.25 10.5H8.75"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { SortIcon };
+export default SortIcon;

package/src/icons/navigation/SortIcon.web.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  className?: string;
+  strokeWidth?: number;
+}
+
+const SortIcon: React.FC<IconProps> = ({
+  className,
+  strokeWidth = 1.5,
+  ...props
+}) => (
+  <svg
+    width={14}
+    height={14}
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M3.5 7H10.5M1.75 3.5H12.25M5.25 10.5H8.75"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default SortIcon;

package/src/icons/navigation/index.ts

@@ -0,0 +1,13 @@
+export { default as AlignLeftIcon } from './AlignLeftIcon';
+export { default as DotgridIcon } from './DotgridIcon';
+export { default as FilterIcon } from './FilterIcon';
+export { default as Grid01Icon } from './Grid01Icon';
+export { GridIcon } from './GridIcon';
+export { HomeIcon } from './HomeIcon';
+export { ListIcon } from './ListIcon';
+export { default as MenuIcon } from './MenuIcon';
+export { default as Rows01Icon } from './Rows01Icon';
+export { default as Rows03Icon } from './Rows03Icon';
+export { default as SearchIcon } from './SearchIcon';
+export { default as SidebarMenuIcon } from './SidebarMenuIcon';
+export { default as SortIcon } from './SortIcon';

package/src/icons/security/EyeIcon.native.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface EyeIconProps {
+  width?: number;
+  height?: number;
+}
+
+const EyeIcon = ({ width = 18, height = 18 }: EyeIconProps) => (
+  <Svg width={width} height={height} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M1.81509 9.53488C1.71295 9.37315 1.66188 9.29229 1.63329 9.16756C1.61182 9.07387 1.61182 8.92613 1.63329 8.83244C1.66188 8.70771 1.71295 8.62685 1.81509 8.46512C2.65915 7.12863 5.17155 3.75 9.0003 3.75C12.8291 3.75 15.3415 7.12863 16.1855 8.46512C16.2877 8.62685 16.3387 8.70771 16.3673 8.83244C16.3888 8.92613 16.3888 9.07387 16.3673 9.16756C16.3387 9.29229 16.2877 9.37315 16.1855 9.53488C15.3415 10.8714 12.8291 14.25 9.0003 14.25C5.17155 14.25 2.65915 10.8714 1.81509 9.53488Z"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M9.0003 11.25C10.2429 11.25 11.2503 10.2426 11.2503 9C11.2503 7.75736 10.2429 6.75 9.0003 6.75C7.75766 6.75 6.7503 7.75736 6.7503 9C6.7503 10.2426 7.75766 11.25 9.0003 11.25Z"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { EyeIcon };
+export default EyeIcon;

package/src/icons/security/EyeIcon.web.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+interface EyeIconProps extends SVGProps<SVGSVGElement> {
+  /** Tailwind or custom classes to style the icon */
+  className?: string;
+}
+
+const EyeIcon = React.forwardRef<SVGSVGElement, EyeIconProps>(
+  ({ className = "text-gray-900", width = 18, height = 18, ...props }, ref) => (
+    <svg
+      ref={ref}
+      width={width}
+      height={height}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M1.81509 9.53488C1.71295 9.37315 1.66188 9.29229 1.63329 9.16756C1.61182 9.07387 1.61182 8.92613 1.63329 8.83244C1.66188 8.70771 1.71295 8.62685 1.81509 8.46512C2.65915 7.12863 5.17155 3.75 9.0003 3.75C12.8291 3.75 15.3415 7.12863 16.1855 8.46512C16.2877 8.62685 16.3387 8.70771 16.3673 8.83244C16.3888 8.92613 16.3888 9.07387 16.3673 9.16756C16.3387 9.29229 16.2877 9.37315 16.1855 9.53488C15.3415 10.8714 12.8291 14.25 9.0003 14.25C5.17155 14.25 2.65915 10.8714 1.81509 9.53488Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.0003 11.25C10.2429 11.25 11.2503 10.2426 11.2503 9C11.2503 7.75736 10.2429 6.75 9.0003 6.75C7.75766 6.75 6.7503 7.75736 6.7503 9C6.7503 10.2426 7.75766 11.25 9.0003 11.25Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
+);
+
+export default EyeIcon;

package/src/icons/security/Lock03Icon.native.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Lock03IconProps {
+  size?: number | string;
+  strokeColor?: string;
+}
+
+const Lock03Icon: React.FC<Lock03IconProps> = ({
+  size = 16,
+  strokeColor = '#000000',
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <Path
+      d="M11.3346 7.33333V5.33333C11.3346 3.49238 9.84225 2 8.0013 2C6.16035 2 4.66797 3.49238 4.66797 5.33333V7.33333M5.86797 14H10.1346C11.2547 14 11.8148 14 12.2426 13.782C12.6189 13.5903 12.9249 13.2843 13.1166 12.908C13.3346 12.4802 13.3346 11.9201 13.3346 10.8V10.5333C13.3346 9.41323 13.3346 8.85318 13.1166 8.42535C12.9249 8.04903 12.6189 7.74307 12.2426 7.55132C11.8148 7.33333 11.2547 7.33333 10.1346 7.33333H5.86797C4.74786 7.33333 4.18781 7.33333 3.75999 7.55132C3.38366 7.74307 3.0777 8.04903 2.88596 8.42535C2.66797 8.85318 2.66797 9.41323 2.66797 10.5333V10.8C2.66797 11.9201 2.66797 12.4802 2.88596 12.908C3.0777 13.2843 3.38366 13.5903 3.75999 13.782C4.18781 14 4.74786 14 5.86797 14Z"
+      stroke={strokeColor}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { Lock03Icon };
+export default Lock03Icon;

package/src/icons/security/Lock03Icon.web.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface Lock03IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+  strokeColor?: string;
+}
+
+const Lock03Icon: React.FC<Lock03IconProps> = ({
+  size = 16,
+  strokeColor = "currentColor",
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M11.3346 7.33333V5.33333C11.3346 3.49238 9.84225 2 8.0013 2C6.16035 2 4.66797 3.49238 4.66797 5.33333V7.33333M5.86797 14H10.1346C11.2547 14 11.8148 14 12.2426 13.782C12.6189 13.5903 12.9249 13.2843 13.1166 12.908C13.3346 12.4802 13.3346 11.9201 13.3346 10.8V10.5333C13.3346 9.41323 13.3346 8.85318 13.1166 8.42535C12.9249 8.04903 12.6189 7.74307 12.2426 7.55132C11.8148 7.33333 11.2547 7.33333 10.1346 7.33333H5.86797C4.74786 7.33333 4.18781 7.33333 3.75999 7.55132C3.38366 7.74307 3.0777 8.04903 2.88596 8.42535C2.66797 8.85318 2.66797 9.41323 2.66797 10.5333V10.8C2.66797 11.9201 2.66797 12.4802 2.88596 12.908C3.0777 13.2843 3.38366 13.5903 3.75999 13.782C4.18781 14 4.74786 14 5.86797 14Z"
+      stroke={strokeColor}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Lock03Icon;

package/src/icons/security/LockIcon.native.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface LockIconProps {
+  size?: number;
+  color?: string;
+}
+
+const LockIcon: React.FC<LockIconProps> = ({ size = 18, color = '#000000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M12.75 7.5V6C12.75 3.92893 11.0711 2.25 9 2.25C6.92893 2.25 5.25 3.92893 5.25 6V7.5M9 10.875V12.375M6.6 15.75H11.4C12.6601 15.75 13.2902 15.75 13.7715 15.5048C14.1948 15.289 14.539 14.9448 14.7548 14.5215C15 14.0402 15 13.4101 15 12.15V11.1C15 9.83988 15 9.20982 14.7548 8.72852C14.539 8.30516 14.1948 7.96095 13.7715 7.74524C13.2902 7.5 12.6601 7.5 11.4 7.5H6.6C5.33988 7.5 4.70982 7.5 4.22852 7.74524C3.80516 7.96095 3.46095 8.30516 3.24524 8.72852C3 9.20982 3 9.83988 3 11.1V12.15C3 13.4101 3 14.0402 3.24524 14.5215C3.46095 14.9448 3.80516 15.289 4.22852 15.5048C4.70982 15.75 5.33988 15.75 6.6 15.75Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { LockIcon };
+export default LockIcon;

package/src/icons/security/LockIcon.web.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const LockIcon: React.FC<IconProps> = ({ size = 18, color = "currentColor" }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.75 7.5V6C12.75 3.92893 11.0711 2.25 9 2.25C6.92893 2.25 5.25 3.92893 5.25 6V7.5M9 10.875V12.375M6.6 15.75H11.4C12.6601 15.75 13.2902 15.75 13.7715 15.5048C14.1948 15.289 14.539 14.9448 14.7548 14.5215C15 14.0402 15 13.4101 15 12.15V11.1C15 9.83988 15 9.20982 14.7548 8.72852C14.539 8.30516 14.1948 7.96095 13.7715 7.74524C13.2902 7.5 12.6601 7.5 11.4 7.5H6.6C5.33988 7.5 4.70982 7.5 4.22852 7.74524C3.80516 7.96095 3.46095 8.30516 3.24524 8.72852C3 9.20982 3 9.83988 3 11.1V12.15C3 13.4101 3 14.0402 3.24524 14.5215C3.46095 14.9448 3.80516 15.289 4.22852 15.5048C4.70982 15.75 5.33988 15.75 6.6 15.75Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default LockIcon;

package/src/icons/security/LockUnlocked03Icon.native.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface LockUnlocked03IconProps {
+  size?: number | string;
+  strokeColor?: string;
+}
+
+const LockUnlocked03Icon: React.FC<LockUnlocked03IconProps> = ({
+  size = 16,
+  strokeColor = '#000000',
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <Path
+      d="M4.66797 7.33333V5.33333C4.66797 3.49238 6.16035 2 8.0013 2C9.61394 2 10.9591 3.14517 11.268 4.66667M5.86797 14H10.1346C11.2547 14 11.8148 14 12.2426 13.782C12.6189 13.5903 12.9249 13.2843 13.1166 12.908C13.3346 12.4802 13.3346 11.9201 13.3346 10.8V10.5333C13.3346 9.41323 13.3346 8.85318 13.1166 8.42535C12.9249 8.04903 12.6189 7.74307 12.2426 7.55132C11.8148 7.33333 11.2547 7.33333 10.1346 7.33333H5.86797C4.74786 7.33333 4.18781 7.33333 3.75999 7.55132C3.38366 7.74307 3.0777 8.04903 2.88596 8.42535C2.66797 8.85318 2.66797 9.41323 2.66797 10.5333V10.8C2.66797 11.9201 2.66797 12.4802 2.88596 12.908C3.0777 13.2843 3.38366 13.5903 3.75999 13.782C4.18781 14 4.74786 14 5.86797 14Z"
+      stroke={strokeColor}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { LockUnlocked03Icon };
+export default LockUnlocked03Icon;

package/src/icons/security/LockUnlocked03Icon.web.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface LockUnlocked03IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+  strokeColor?: string;
+}
+
+const LockUnlocked03Icon: React.FC<LockUnlocked03IconProps> = ({
+  size = 16,
+  strokeColor = "currentColor",
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M4.66797 7.33333V5.33333C4.66797 3.49238 6.16035 2 8.0013 2C9.61394 2 10.9591 3.14517 11.268 4.66667M5.86797 14H10.1346C11.2547 14 11.8148 14 12.2426 13.782C12.6189 13.5903 12.9249 13.2843 13.1166 12.908C13.3346 12.4802 13.3346 11.9201 13.3346 10.8V10.5333C13.3346 9.41323 13.3346 8.85318 13.1166 8.42535C12.9249 8.04903 12.6189 7.74307 12.2426 7.55132C11.8148 7.33333 11.2547 7.33333 10.1346 7.33333H5.86797C4.74786 7.33333 4.18781 7.33333 3.75999 7.55132C3.38366 7.74307 3.0777 8.04903 2.88596 8.42535C2.66797 8.85318 2.66797 9.41323 2.66797 10.5333V10.8C2.66797 11.9201 2.66797 12.4802 2.88596 12.908C3.0777 13.2843 3.38366 13.5903 3.75999 13.782C4.18781 14 4.74786 14 5.86797 14Z"
+      stroke={strokeColor}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default LockUnlocked03Icon;

package/src/icons/security/PasswordInputIcon.native.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface PasswordInputIconProps {
+  size?: number;
+}
+
+export const PasswordInputIcon = ({ size = 18 }: PasswordInputIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M16.5 8.25V6.15C16.5 5.30992 16.5 4.88988 16.3365 4.56901C16.1927 4.28677 15.9632 4.0573 15.681 3.91349C15.3601 3.75 14.9401 3.75 14.1 3.75H3.9C3.05992 3.75 2.63988 3.75 2.31901 3.91349C2.03677 4.0573 1.8073 4.28677 1.66349 4.56901C1.5 4.88988 1.5 5.30992 1.5 6.15V8.85C1.5 9.69008 1.5 10.1101 1.66349 10.431C1.8073 10.7132 2.03677 10.9427 2.31901 11.0865C2.63988 11.25 3.05992 11.25 3.9 11.25H8.25M9 7.5H9.00375M12.75 7.5H12.7538M5.25 7.5H5.25375M14.4375 12.75V11.4375C14.4375 10.7126 13.8499 10.125 13.125 10.125C12.4001 10.125 11.8125 10.7126 11.8125 11.4375V12.75M9.1875 7.5C9.1875 7.60355 9.10355 7.6875 9 7.6875C8.89645 7.6875 8.8125 7.60355 8.8125 7.5C8.8125 7.39645 8.89645 7.3125 9 7.3125C9.10355 7.3125 9.1875 7.39645 9.1875 7.5ZM12.9375 7.5C12.9375 7.60355 12.8536 7.6875 12.75 7.6875C12.6464 7.6875 12.5625 7.60355 12.5625 7.5C12.5625 7.39645 12.6464 7.3125 12.75 7.3125C12.8536 7.3125 12.9375 7.39645 12.9375 7.5ZM5.4375 7.5C5.4375 7.60355 5.35355 7.6875 5.25 7.6875C5.14645 7.6875 5.0625 7.60355 5.0625 7.5C5.0625 7.39645 5.14645 7.3125 5.25 7.3125C5.35355 7.3125 5.4375 7.39645 5.4375 7.5ZM11.7 15.75H14.55C14.97 15.75 15.1801 15.75 15.3405 15.6683C15.4816 15.5963 15.5963 15.4816 15.6683 15.3405C15.75 15.1801 15.75 14.97 15.75 14.55V13.95C15.75 13.53 15.75 13.3199 15.6683 13.1595C15.5963 13.0184 15.4816 12.9037 15.3405 12.8317C15.1801 12.75 14.97 12.75 14.55 12.75H11.7C11.28 12.75 11.0699 12.75 10.9095 12.8317C10.7684 12.9037 10.6537 13.0184 10.5817 13.1595C10.5 13.3199 10.5 13.53 10.5 13.95V14.55C10.5 14.97 10.5 15.1801 10.5817 15.3405C10.6537 15.4816 10.7684 15.5963 10.9095 15.6683C11.0699 15.75 11.28 15.75 11.7 15.75Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default PasswordInputIcon;