@transferwise/icons 3.5.1 → 3.7.0

package/build/components/invite.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface InviteIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Invite: React.FunctionComponent<InviteIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Invite filled /> is now deprecated, please use <InviteFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-invite ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'invite-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M9.417 7.714h1.726V6a1.714 1.714 0 1 0-1.726 1.714Zm3.44 0V6a1.714 1.714 0 1 1 1.726 1.714h-1.726Zm4.684 0A3.429 3.429 0 0 0 12 3.732a3.429 3.429 0 0 0-5.542 3.982H3.861A.861.861 0 0 0 3 8.576v3.848c0 .476.386.862.861.862h.425v7.281c0 .476.385.862.861.862h13.706a.861.861 0 0 0 .861-.862v-7.281h.425a.861.861 0 0 0 .861-.862V8.576a.861.861 0 0 0-.861-.862H17.54ZM14.587 9.43h4.699v2.142H4.714V9.43h9.873ZM6 13.286h12v6.428h-5.143v-6.428h-1.714v6.428H6v-6.428Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/jar.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface JarIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Jar: React.FunctionComponent<JarIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Jar filled /> is now deprecated, please use <JarFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-jar ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'jar-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M6.004 1.714a.861.861 0 0 0-.861.862v2.991c0 .453.349.824.792.859v.826L4.739 8.988c-.295.429-.453.938-.453 1.459v9.267a2.571 2.571 0 0 0 2.571 2.572h10.286a2.571 2.571 0 0 0 2.571-2.572v-9.267c0-.521-.158-1.03-.454-1.46l-1.195-1.735v-.826a.862.862 0 0 0 .792-.859V2.576a.861.861 0 0 0-.861-.862H6.004ZM16.351 6.43H7.649v1.089a.861.861 0 0 1-.152.488L6.151 9.96a.857.857 0 0 0-.151.487v9.267c0 .474.384.858.857.858h10.286a.857.857 0 0 0 .857-.858v-9.267a.857.857 0 0 0-.151-.487l-1.346-1.954a.861.861 0 0 1-.152-.488v-1.09ZM6.857 4.714V3.43h10.286v1.285H6.857Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/keep.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface KeepIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Keep: React.FunctionComponent<KeepIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Keep filled /> is now deprecated, please use <KeepFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-keep ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'keep-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path d="M21.429 11.143h-9.515C11.486 8.7 9.386 6.857 6.857 6.857 4.03 6.857 1.714 9.172 1.714 12c0 2.829 2.315 5.143 5.143 5.143 2.529 0 4.672-1.843 5.057-4.286h5.229v3.429h1.714v-3.429h1.715v3.429h1.714V12a.86.86 0 0 0-.857-.857ZM6.857 15.43A3.439 3.439 0 0 1 3.43 12a3.439 3.439 0 0 1 3.428-3.428A3.439 3.439 0 0 1 10.286 12a3.439 3.439 0 0 1-3.429 3.429Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/klarna.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface KlarnaIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Klarna: React.FunctionComponent<KlarnaIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Klarna filled /> is now deprecated, please use <KlarnaFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-klarna ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'klarna-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M5.829 3H1.714v18H5.83V3Zm13.885 13.588c-1.286 0-2.314 1.028-2.314 2.357 0 1.286 1.028 2.357 2.314 2.357s2.314-1.028 2.314-2.357c0-1.329-1.028-2.357-2.314-2.357ZM11.83 13.2c2.7-2.657 4.2-6.3 4.2-10.2h-3.986c0 3.343-1.543 6.386-4.157 8.357l-1.586 1.2L12.428 21h5.058l-5.658-7.8Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/leaf.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface LeafIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Leaf: React.FunctionComponent<LeafIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Leaf filled /> is now deprecated, please use <LeafFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-leaf ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'leaf-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path d="M18 16.936c3.686-3.686 4.5-9.772 3.428-13.714-.085-.3-.385-.6-.685-.643-3.9-1.072-9.986-.257-13.629 3.428-3.128 3.129-4.157 7.586-2.871 12.6l-2.1 2.1 1.2 1.2 2.1-2.1c4.928 1.286 9.386.3 12.557-2.871ZM8.271 7.25c3.043-3.043 7.543-3.6 10.543-3.257l-13.2 13.2c-.6-3.086-.385-6.9 2.657-9.943ZM6.814 18.393l13.2-13.2c.343 3-.214 7.5-3.257 10.543-3.043 3.043-6.857 3.257-9.943 2.657Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/lightning-bolt.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface LightningBoltIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const LightningBolt: React.FunctionComponent<LightningBoltIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<LightningBolt filled /> is now deprecated, please use <LightningBoltFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-lightning-bolt ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'lightning-bolt-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path d="M20.486 9.043a.847.847 0 0 0-.772-.514H14.4l3.471-5.528a.875.875 0 0 0 .043-.858c-.171-.257-.428-.428-.728-.428h-6.043c-.3 0-.557.171-.729.428L3.557 13.286a.778.778 0 0 0 0 .857c.171.258.429.429.729.429h5.785l-1.5 6.643a.813.813 0 0 0 .472.943c.128.043.257.085.385.085a.771.771 0 0 0 .643-.3l10.286-12a.862.862 0 0 0 .129-.9Zm-9.472 9.172L12 13.843a.896.896 0 0 0-.171-.728c-.172-.214-.43-.3-.686-.3H5.828l5.786-9.429H15.6l-3.471 5.529a.875.875 0 0 0-.043.857c.171.257.428.429.728.429h5.014l-6.814 8.014Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/lightning.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface LightningIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Lightning: React.FunctionComponent<LightningIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Lightning filled /> is now deprecated, please use <LightningFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-lightning ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'lightning-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path d="M20.486 9.043a.847.847 0 0 0-.772-.514H14.4l3.471-5.528a.875.875 0 0 0 .043-.858c-.171-.257-.428-.428-.728-.428h-6.043c-.3 0-.557.171-.729.428L3.557 13.286a.778.778 0 0 0 0 .857c.171.258.429.429.729.429h5.785l-1.5 6.643a.813.813 0 0 0 .472.943c.128.043.257.085.385.085a.771.771 0 0 0 .643-.3l10.286-12a.862.862 0 0 0 .129-.9Zm-9.472 9.172L12 13.843a.896.896 0 0 0-.171-.728c-.172-.214-.43-.3-.686-.3H5.828l5.786-9.429H15.6l-3.471 5.529a.875.875 0 0 0-.043.857c.171.257.428.429.728.429h5.014l-6.814 8.014Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/limit.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface LimitIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Limit: React.FunctionComponent<LimitIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Limit filled /> is now deprecated, please use <LimitFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-limit ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'limit-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path d="M12 3C6.343 3 1.714 7.629 1.714 13.286c0 3.085 1.115 5.785 3.086 7.328a.907.907 0 0 0 1.157-.043L7.5 19.03l-1.2-1.2-.943.942c-1.2-1.285-1.886-3.214-1.886-5.485 0-4.715 3.858-8.572 8.572-8.572 2.057 0 3.943.729 5.4 1.929l-5.015 4.971c-.128-.043-.3-.043-.428-.043a1.72 1.72 0 0 0-1.714 1.715A1.72 1.72 0 0 0 12 15a1.72 1.72 0 0 0 1.714-1.714c0-.172-.043-.3-.043-.429l4.972-4.971a8.475 8.475 0 0 1 1.928 5.4c0 2.228-.685 4.2-1.885 5.485l-.943-.942-1.2 1.2 1.543 1.542a.846.846 0 0 0 .6.258c.171 0 .385-.043.514-.172 1.971-1.586 3.086-4.286 3.086-7.371C22.286 7.629 17.657 3 12 3Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/link.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface LinkIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Link: React.FunctionComponent<LinkIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Link filled /> is now deprecated, please use <LinkFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-link ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'link-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M14.571 10.284V12c0 2.828-2.314 5.143-5.143 5.143-2.828 0-5.142-2.315-5.142-5.143V6.856c0-2.829 2.314-5.143 5.143-5.143 2.485 0 4.628 1.714 5.1 4.114l-1.672.343c-.3-1.543-1.8-2.743-3.428-2.743a3.439 3.439 0 0 0-3.43 3.429v5.143a3.439 3.439 0 0 0 3.43 3.428A3.439 3.439 0 0 0 12.857 12v-1.715h1.714ZM9.428 12c0-2.828 2.315-5.143 5.143-5.143 2.829 0 5.143 2.315 5.143 5.143v5.143c0 2.829-2.314 5.143-5.143 5.143-2.485 0-4.671-1.714-5.143-4.114l1.715-.343c.3 1.586 1.757 2.743 3.428 2.743A3.439 3.439 0 0 0 18 17.143V12a3.439 3.439 0 0 0-3.429-3.428A3.439 3.439 0 0 0 11.143 12v1.715H9.428V12Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/linkedin.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface LinkedinIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Linkedin: React.FunctionComponent<LinkedinIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Linkedin filled /> is now deprecated, please use <LinkedinFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-linkedin ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'linkedin-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path d="M19.243 19.243H16.2v-4.757c0-1.157 0-2.614-1.586-2.614s-1.843 1.243-1.843 2.529v4.842H9.73V9.43h2.914v1.329h.043a3.197 3.197 0 0 1 2.871-1.586c3.086 0 3.643 2.014 3.643 4.671l.043 5.4ZM6.3 8.101a1.738 1.738 0 0 1-1.757-1.758c0-.985.771-1.757 1.757-1.757.986 0 1.757.772 1.757 1.757 0 .943-.771 1.758-1.757 1.758Zm1.5 11.142H4.757V9.43H7.8v9.814ZM20.743 1.715H3.214c-.814 0-1.5.643-1.5 1.5v17.614c0 .814.686 1.5 1.5 1.5h17.529c.814 0 1.5-.643 1.543-1.5V3.215c0-.857-.686-1.5-1.543-1.5Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/list.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface ListIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const List: React.FunctionComponent<ListIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<List filled /> is now deprecated, please use <ListFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-list ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'list-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M6.429 6.001a1.714 1.714 0 1 1-3.429 0 1.714 1.714 0 0 1 3.429 0Zm1.714.858H21V5.145H8.143v1.714Zm0 6H21v-1.714H8.143v1.714Zm12.857 6H8.143v-1.715H21v1.715ZM4.714 13.716a1.714 1.714 0 1 0 0-3.429 1.714 1.714 0 0 0 0 3.429ZM6.43 18a1.714 1.714 0 1 1-3.429 0 1.714 1.714 0 0 1 3.429 0Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/location-marker.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface LocationMarkerIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const LocationMarker: React.FunctionComponent<LocationMarkerIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<LocationMarker filled /> is now deprecated, please use <LocationMarkerFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-location-marker ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'location-marker-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M5.143 10.677c0-4.185 3.083-7.141 6.857-7.141s6.857 2.956 6.857 7.14c0 .962-.348 2.012-.95 3.095-.6 1.078-1.422 2.136-2.295 3.099-1.362 1.502-2.806 2.723-3.612 3.366-.806-.643-2.25-1.864-3.612-3.366-.873-.963-1.694-2.02-2.294-3.099-.603-1.083-.951-2.133-.951-3.094ZM12 1.822c-4.747 0-8.571 3.75-8.571 8.855 0 1.36.486 2.702 1.167 3.927.684 1.231 1.597 2.397 2.522 3.418a33.584 33.584 0 0 0 4.364 3.982.86.86 0 0 0 1.036 0 33.587 33.587 0 0 0 4.364-3.982c.926-1.02 1.838-2.187 2.522-3.418.682-1.225 1.168-2.568 1.168-3.927 0-5.105-3.825-8.855-8.572-8.855ZM9.964 10.66a2.036 2.036 0 1 1 4.072 0 2.036 2.036 0 0 1-4.072 0ZM12 6.91a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/lock.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface LockIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Lock: React.FunctionComponent<LockIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Lock filled /> is now deprecated, please use <LockFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-lock ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'lock-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M17.143 8.57h2.571a.86.86 0 0 1 .857.857v10.286A2.579 2.579 0 0 1 18 22.284H6a2.579 2.579 0 0 1-2.572-2.571V9.427a.86.86 0 0 1 .858-.857h2.571V6.856c0-2.829 2.314-5.143 5.143-5.143 2.829 0 5.143 2.314 5.143 5.143V8.57ZM12 3.427A3.439 3.439 0 0 0 8.57 6.856V8.57h6.857V6.856A3.439 3.439 0 0 0 12 3.427Zm6 17.143a.86.86 0 0 0 .857-.857v-9.429H5.143v9.429A.86.86 0 0 0 6 20.57h12Zm-6.857-1.716v-2.83c-.515-.256-.858-.813-.858-1.456A1.72 1.72 0 0 1 12 12.854a1.72 1.72 0 0 1 1.714 1.714c0 .6-.343 1.157-.857 1.457v2.829h-1.714Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};