feat: add new icons (#2429)

* feat: add new icons * chore: update snaps * Create twenty-beds-double.md
razorpay · Nov 28, 2024 · 778e388 · 778e388
1 parent 5f6bdb5
commit 778e388
Show file tree

Hide file tree

Showing 22 changed files with 495 additions and 1 deletion.
diff --git a/.changeset/twenty-beds-double.md b/.changeset/twenty-beds-double.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": minor
+---
+
+feat(blade): add new icons - IndiaFlag, MagicKonnect, WorldWide
diff --git a/packages/blade/scripts/icons.json b/packages/blade/scripts/icons.json
@@ -1,5 +1,11 @@
 [
   {
-    "signal": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4.42501 22C3.97501 22 3.66251 21.7958 3.48751 21.3875C3.31251 20.9791 3.38334 20.6166 3.70001 20.3L20.3 3.69998C20.6167 3.38331 20.9792 3.31248 21.3875 3.48748C21.7958 3.66248 22 3.97498 22 4.42498V20.5C22 20.9166 21.8542 21.2708 21.5625 21.5625C21.2708 21.8541 20.9167 22 20.5 22H4.42501ZM6.82501 20H20V6.84998L6.82501 20Z\" fill=\"#192839\"/>\n</svg>\n"
+    "india-flag": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 5.86364C1 4.28209 2.27682 3 3.85185 3H20.1481C21.7232 3 23 4.28209 23 5.86364V18.1364C23 19.7179 21.7232 21 20.1481 21H3.85185C2.27682 21 1 19.7179 1 18.1364V5.86364ZM21.3322 8.11364V5.86332C21.3322 5.2307 20.8214 4.71786 20.1914 4.71786L3.81366 4.71786C3.18364 4.71786 2.67292 5.2307 2.67292 5.86332L2.67292 8.11364H21.3322ZM2.67292 9.75V14.25H10.2357C9.57335 13.7256 9.14815 12.9127 9.14815 12C9.14815 11.0873 9.57335 10.2744 10.2357 9.75H2.67292ZM13.7643 9.75C14.4267 10.2744 14.8519 11.0873 14.8519 12C14.8519 12.9127 14.4267 13.7256 13.7643 14.25H21.3322V9.75H13.7643ZM21.3322 15.8864H2.67292L2.67292 18.136C2.67292 18.7687 3.18364 19.2815 3.81365 19.2815L20.1914 19.2815C20.8214 19.2815 21.3322 18.7687 21.3322 18.136V15.8864ZM12 10.7727C11.325 10.7727 10.7778 11.3222 10.7778 12C10.7778 12.6778 11.325 13.2273 12 13.2273C12.675 13.2273 13.2222 12.6778 13.2222 12C13.2222 11.3222 12.675 10.7727 12 10.7727Z\" fill=\"#101828\"/>\n</svg>\n"
+  },
+  {
+    "Worldwide": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 5.86364C1 4.28209 2.27682 3 3.85185 3H20.1481C21.7232 3 23 4.28209 23 5.86364V18.1364C23 19.7179 21.7232 21 20.1481 21H3.85185C2.27682 21 1 19.7179 1 18.1364V5.86364ZM21.3322 7.90909V5.86332C21.3322 5.2307 20.8214 4.71786 20.1914 4.71786L3.81366 4.71786C3.18364 4.71786 2.67292 5.2307 2.67292 5.86332L2.67292 7.90909L6.2963 7.90909C6.74631 7.90909 7.11111 8.2754 7.11111 8.72727C7.11111 9.17914 6.74631 9.54545 6.2963 9.54545H2.67292V14.4545H6.2963C6.74631 14.4545 7.11111 14.8209 7.11111 15.2727C7.11111 15.7246 6.74631 16.0909 6.2963 16.0909H2.67292L2.67292 18.136C2.67292 18.7687 3.18364 19.2815 3.81365 19.2815L20.1914 19.2815C20.8214 19.2815 21.3322 18.7687 21.3322 18.136V16.0909H17.7037C17.2537 16.0909 16.8889 15.7246 16.8889 15.2727C16.8889 14.8209 17.2537 14.4545 17.7037 14.4545H21.3322V9.54545H17.7037C17.2537 9.54545 16.8889 9.17914 16.8889 8.72727C16.8889 8.2754 17.2537 7.90909 17.7037 7.90909L21.3322 7.90909ZM8.42419 11.1818H9.45118C9.55385 10.3622 9.78681 9.56751 10.1383 8.82738C9.28286 9.33461 8.65041 10.1808 8.42419 11.1818ZM12 8.83215C11.539 9.54279 11.2312 10.3434 11.0972 11.1818H12.903C12.7689 10.3434 12.461 9.54281 12 8.83215ZM12.903 12.8182C12.7689 13.6566 12.461 14.4572 12 15.1679C11.539 14.4572 11.2312 13.6566 11.0972 12.8182H12.903ZM9.45118 12.8182H8.42419C8.65041 13.8192 9.28286 14.6654 10.1383 15.1726C9.78681 14.4325 9.55385 13.6378 9.45118 12.8182ZM13.8618 15.1726C14.2133 14.4325 14.4463 13.6378 14.549 12.8182H15.5758C15.3496 13.8192 14.7172 14.6653 13.8618 15.1726ZM15.5758 11.1818H14.549C14.4463 10.3622 14.2133 9.56754 13.8618 8.82744C14.7172 9.33467 15.3496 10.1808 15.5758 11.1818ZM6.7037 12C6.7037 9.06285 9.07494 6.68182 12 6.68182C14.9251 6.68182 17.2963 9.06285 17.2963 12C17.2963 14.9372 14.9251 17.3182 12 17.3182C9.07494 17.3182 6.7037 14.9372 6.7037 12Z\" fill=\"#192839\"/>\n</svg>\n"
+  },
+  {
+    "magic-konnect": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.0014 9.56575L10.4838 11.439L13.4463 9.55535L11.5089 16.6624L13.4763 16.664L16.3383 6.16663L11.0014 9.56575Z\" fill=\"#192839\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.81432 13.6766L6.99993 16.6644H11.0326L12.6825 10.586L7.81432 13.6766Z\" fill=\"#192839\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.05906 21.9832C3.01983 21.9944 2.9778 22 2.93858 22C2.8181 22 2.69761 21.9468 2.61636 21.8487C2.50989 21.7198 2.49027 21.5377 2.56592 21.3892L4.2947 18.0185C2.81249 16.2645 1.99994 14.0454 1.99994 11.7422C1.99994 6.37097 6.37091 2 11.7422 2C17.1134 2 21.4844 6.36817 21.4844 11.7394C21.4844 17.1107 17.1134 21.4816 11.7422 21.4816C10.33 21.4816 8.97108 21.1874 7.69621 20.6046L3.05906 21.9832ZM6.83214 17.7283L6.27789 18.809L7.85477 18.3402L8.57986 18.6717C9.57477 19.1265 10.6321 19.3563 11.7422 19.3563C15.9396 19.3563 19.359 15.9369 19.359 11.7394C19.359 7.54278 15.9404 4.12538 11.7422 4.12538C7.54473 4.12538 4.12532 7.54479 4.12532 11.7422C4.12532 13.5436 4.76033 15.2766 5.91807 16.6467L6.83214 17.7283Z\" fill=\"#192839\"/>\n</svg>\n"
   }
 ]
diff --git a/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.native.test.tsx b/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.native.test.tsx
@@ -0,0 +1,11 @@
+import IndiaFlagIcon from '.';
+import renderWithTheme from '~utils/testing/renderWithTheme.native';
+
+describe('<IndiaFlagIcon />', () => {
+  it('should render IndiaFlagIcon', () => {
+    const renderTree = renderWithTheme(
+      <IndiaFlagIcon color="feedback.icon.neutral.intense" size="large" />,
+    ).toJSON();
+    expect(renderTree).toMatchSnapshot();
+  });
+});
diff --git a/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.tsx b/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.tsx
@@ -0,0 +1,20 @@
+import { Svg, Path } from '../_Svg';
+import type { IconComponent } from '..';
+import useIconProps from '../useIconProps';
+
+const IndiaFlagIcon: IconComponent = ({ size, color, ...styledProps }) => {
+  const { height, width, iconColor } = useIconProps({ size, color });
+
+  return (
+    <Svg {...styledProps} width={width} height={height} viewBox="0 0 24 24" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1 5.86364C1 4.28209 2.27682 3 3.85185 3H20.1481C21.7232 3 23 4.28209 23 5.86364V18.1364C23 19.7179 21.7232 21 20.1481 21H3.85185C2.27682 21 1 19.7179 1 18.1364V5.86364ZM21.3322 8.11364V5.86332C21.3322 5.2307 20.8214 4.71786 20.1914 4.71786L3.81366 4.71786C3.18364 4.71786 2.67292 5.2307 2.67292 5.86332L2.67292 8.11364H21.3322ZM2.67292 9.75V14.25H10.2357C9.57335 13.7256 9.14815 12.9127 9.14815 12C9.14815 11.0873 9.57335 10.2744 10.2357 9.75H2.67292ZM13.7643 9.75C14.4267 10.2744 14.8519 11.0873 14.8519 12C14.8519 12.9127 14.4267 13.7256 13.7643 14.25H21.3322V9.75H13.7643ZM21.3322 15.8864H2.67292L2.67292 18.136C2.67292 18.7687 3.18364 19.2815 3.81365 19.2815L20.1914 19.2815C20.8214 19.2815 21.3322 18.7687 21.3322 18.136V15.8864ZM12 10.7727C11.325 10.7727 10.7778 11.3222 10.7778 12C10.7778 12.6778 11.325 13.2273 12 13.2273C12.675 13.2273 13.2222 12.6778 13.2222 12C13.2222 11.3222 12.675 10.7727 12 10.7727Z"
+        fill={iconColor}
+      />
+    </Svg>
+  );
+};
+
+export default IndiaFlagIcon;
diff --git a/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.web.test.tsx b/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.web.test.tsx
@@ -0,0 +1,11 @@
+import IndiaFlagIcon from './';
+import renderWithTheme from '~utils/testing/renderWithTheme.web';
+
+describe('<IndiaFlagIcon />', () => {
+  it('should render IndiaFlagIcon', () => {
+    const { container } = renderWithTheme(
+      <IndiaFlagIcon color="feedback.icon.neutral.intense" size="large" />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/...blade/src/components/Icons/IndiaFlagIcon/__snapshots__/IndiaFlagIcon.native.test.tsx.snap b/...blade/src/components/Icons/IndiaFlagIcon/__snapshots__/IndiaFlagIcon.native.test.tsx.snap
@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<IndiaFlagIcon /> should render IndiaFlagIcon 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RNSVGSvgView
+    accessibilityElementsHidden={true}
+    align="xMidYMid"
+    bbHeight="20px"
+    bbWidth="20px"
+    data-blade-component="icon"
+    fill="none"
+    focusable={false}
+    height="20px"
+    importantForAccessibility="no-hide-descendants"
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        [
+          {},
+        ],
+        {
+          "flex": 0,
+          "height": 20,
+          "width": 20,
+        },
+      ]
+    }
+    vbHeight={24}
+    vbWidth={24}
+    width="20px"
+  >
+    <RNSVGGroup
+      fill={null}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    >
+      <RNSVGPath
+        clipRule={0}
+        d="M1 5.86364C1 4.28209 2.27682 3 3.85185 3H20.1481C21.7232 3 23 4.28209 23 5.86364V18.1364C23 19.7179 21.7232 21 20.1481 21H3.85185C2.27682 21 1 19.7179 1 18.1364V5.86364ZM21.3322 8.11364V5.86332C21.3322 5.2307 20.8214 4.71786 20.1914 4.71786L3.81366 4.71786C3.18364 4.71786 2.67292 5.2307 2.67292 5.86332L2.67292 8.11364H21.3322ZM2.67292 9.75V14.25H10.2357C9.57335 13.7256 9.14815 12.9127 9.14815 12C9.14815 11.0873 9.57335 10.2744 10.2357 9.75H2.67292ZM13.7643 9.75C14.4267 10.2744 14.8519 11.0873 14.8519 12C14.8519 12.9127 14.4267 13.7256 13.7643 14.25H21.3322V9.75H13.7643ZM21.3322 15.8864H2.67292L2.67292 18.136C2.67292 18.7687 3.18364 19.2815 3.81365 19.2815L20.1914 19.2815C20.8214 19.2815 21.3322 18.7687 21.3322 18.136V15.8864ZM12 10.7727C11.325 10.7727 10.7778 11.3222 10.7778 12C10.7778 12.6778 11.325 13.2273 12 13.2273C12.675 13.2273 13.2222 12.6778 13.2222 12C13.2222 11.3222 12.675 10.7727 12 10.7727Z"
+        fill={
+          {
+            "payload": 4280563015,
+            "type": 0,
+          }
+        }
+        fillRule={0}
+        propList={
+          [
+            "fill",
+            "fillRule",
+          ]
+        }
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+</View>
+`;
diff --git a/...es/blade/src/components/Icons/IndiaFlagIcon/__snapshots__/IndiaFlagIcon.web.test.tsx.snap b/...es/blade/src/components/Icons/IndiaFlagIcon/__snapshots__/IndiaFlagIcon.web.test.tsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<IndiaFlagIcon /> should render IndiaFlagIcon 1`] = `
+<div>
+  <svg
+    aria-hidden="true"
+    class="Svgweb__StyledSvg-vcmjs8-0"
+    data-blade-component="icon"
+    fill="none"
+    height="20px"
+    viewBox="0 0 24 24"
+    width="20px"
+  >
+    <path
+      clip-rule="evenodd"
+      d="M1 5.86364C1 4.28209 2.27682 3 3.85185 3H20.1481C21.7232 3 23 4.28209 23 5.86364V18.1364C23 19.7179 21.7232 21 20.1481 21H3.85185C2.27682 21 1 19.7179 1 18.1364V5.86364ZM21.3322 8.11364V5.86332C21.3322 5.2307 20.8214 4.71786 20.1914 4.71786L3.81366 4.71786C3.18364 4.71786 2.67292 5.2307 2.67292 5.86332L2.67292 8.11364H21.3322ZM2.67292 9.75V14.25H10.2357C9.57335 13.7256 9.14815 12.9127 9.14815 12C9.14815 11.0873 9.57335 10.2744 10.2357 9.75H2.67292ZM13.7643 9.75C14.4267 10.2744 14.8519 11.0873 14.8519 12C14.8519 12.9127 14.4267 13.7256 13.7643 14.25H21.3322V9.75H13.7643ZM21.3322 15.8864H2.67292L2.67292 18.136C2.67292 18.7687 3.18364 19.2815 3.81365 19.2815L20.1914 19.2815C20.8214 19.2815 21.3322 18.7687 21.3322 18.136V15.8864ZM12 10.7727C11.325 10.7727 10.7778 11.3222 10.7778 12C10.7778 12.6778 11.325 13.2273 12 13.2273C12.675 13.2273 13.2222 12.6778 13.2222 12C13.2222 11.3222 12.675 10.7727 12 10.7727Z"
+      data-blade-component="svg-path"
+      fill="hsla(211, 33%, 21%, 1)"
+      fill-rule="evenodd"
+    />
+  </svg>
+</div>
+`;
diff --git a/packages/blade/src/components/Icons/IndiaFlagIcon/index.ts b/packages/blade/src/components/Icons/IndiaFlagIcon/index.ts
@@ -0,0 +1 @@
+export { default } from './IndiaFlagIcon';
diff --git a/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.native.test.tsx b/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.native.test.tsx
@@ -0,0 +1,11 @@
+import MagicKonnectIcon from '.';
+import renderWithTheme from '~utils/testing/renderWithTheme.native';
+
+describe('<MagicKonnectIcon />', () => {
+  it('should render MagicKonnectIcon', () => {
+    const renderTree = renderWithTheme(
+      <MagicKonnectIcon color="feedback.icon.neutral.intense" size="large" />,
+    ).toJSON();
+    expect(renderTree).toMatchSnapshot();
+  });
+});
diff --git a/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.tsx b/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.tsx
@@ -0,0 +1,32 @@
+import { Svg, Path } from '../_Svg';
+import type { IconComponent } from '..';
+import useIconProps from '../useIconProps';
+
+const MagicKonnectIcon: IconComponent = ({ size, color, ...styledProps }) => {
+  const { height, width, iconColor } = useIconProps({ size, color });
+
+  return (
+    <Svg {...styledProps} width={width} height={height} viewBox="0 0 24 24" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.0014 9.56575L10.4838 11.439L13.4463 9.55535L11.5089 16.6624L13.4763 16.664L16.3383 6.16663L11.0014 9.56575Z"
+        fill={iconColor}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.81432 13.6766L6.99993 16.6644H11.0326L12.6825 10.586L7.81432 13.6766Z"
+        fill={iconColor}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.05906 21.9832C3.01983 21.9944 2.9778 22 2.93858 22C2.8181 22 2.69761 21.9468 2.61636 21.8487C2.50989 21.7198 2.49027 21.5377 2.56592 21.3892L4.2947 18.0185C2.81249 16.2645 1.99994 14.0454 1.99994 11.7422C1.99994 6.37097 6.37091 2 11.7422 2C17.1134 2 21.4844 6.36817 21.4844 11.7394C21.4844 17.1107 17.1134 21.4816 11.7422 21.4816C10.33 21.4816 8.97108 21.1874 7.69621 20.6046L3.05906 21.9832ZM6.83214 17.7283L6.27789 18.809L7.85477 18.3402L8.57986 18.6717C9.57477 19.1265 10.6321 19.3563 11.7422 19.3563C15.9396 19.3563 19.359 15.9369 19.359 11.7394C19.359 7.54278 15.9404 4.12538 11.7422 4.12538C7.54473 4.12538 4.12532 7.54479 4.12532 11.7422C4.12532 13.5436 4.76033 15.2766 5.91807 16.6467L6.83214 17.7283Z"
+        fill={iconColor}
+      />
+    </Svg>
+  );
+};
+
+export default MagicKonnectIcon;
diff --git a/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.web.test.tsx b/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.web.test.tsx
@@ -0,0 +1,11 @@
+import MagicKonnectIcon from './';
+import renderWithTheme from '~utils/testing/renderWithTheme.web';
+
+describe('<MagicKonnectIcon />', () => {
+  it('should render MagicKonnectIcon', () => {
+    const { container } = renderWithTheme(
+      <MagicKonnectIcon color="feedback.icon.neutral.intense" size="large" />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/...src/components/Icons/MagicKonnectIcon/__snapshots__/MagicKonnectIcon.native.test.tsx.snap b/...src/components/Icons/MagicKonnectIcon/__snapshots__/MagicKonnectIcon.native.test.tsx.snap
@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<MagicKonnectIcon /> should render MagicKonnectIcon 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RNSVGSvgView
+    accessibilityElementsHidden={true}
+    align="xMidYMid"
+    bbHeight="20px"
+    bbWidth="20px"
+    data-blade-component="icon"
+    fill="none"
+    focusable={false}
+    height="20px"
+    importantForAccessibility="no-hide-descendants"
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        [
+          {},
+        ],
+        {
+          "flex": 0,
+          "height": 20,
+          "width": 20,
+        },
+      ]
+    }
+    vbHeight={24}
+    vbWidth={24}
+    width="20px"
+  >
+    <RNSVGGroup
+      fill={null}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    >
+      <RNSVGPath
+        clipRule={0}
+        d="M11.0014 9.56575L10.4838 11.439L13.4463 9.55535L11.5089 16.6624L13.4763 16.664L16.3383 6.16663L11.0014 9.56575Z"
+        fill={
+          {
+            "payload": 4280563015,
+            "type": 0,
+          }
+        }
+        fillRule={0}
+        propList={
+          [
+            "fill",
+            "fillRule",
+          ]
+        }
+      />
+      <RNSVGPath
+        clipRule={0}
+        d="M7.81432 13.6766L6.99993 16.6644H11.0326L12.6825 10.586L7.81432 13.6766Z"
+        fill={
+          {
+            "payload": 4280563015,
+            "type": 0,
+          }
+        }
+        fillRule={0}
+        propList={
+          [
+            "fill",
+            "fillRule",
+          ]
+        }
+      />
+      <RNSVGPath
+        clipRule={0}
+        d="M3.05906 21.9832C3.01983 21.9944 2.9778 22 2.93858 22C2.8181 22 2.69761 21.9468 2.61636 21.8487C2.50989 21.7198 2.49027 21.5377 2.56592 21.3892L4.2947 18.0185C2.81249 16.2645 1.99994 14.0454 1.99994 11.7422C1.99994 6.37097 6.37091 2 11.7422 2C17.1134 2 21.4844 6.36817 21.4844 11.7394C21.4844 17.1107 17.1134 21.4816 11.7422 21.4816C10.33 21.4816 8.97108 21.1874 7.69621 20.6046L3.05906 21.9832ZM6.83214 17.7283L6.27789 18.809L7.85477 18.3402L8.57986 18.6717C9.57477 19.1265 10.6321 19.3563 11.7422 19.3563C15.9396 19.3563 19.359 15.9369 19.359 11.7394C19.359 7.54278 15.9404 4.12538 11.7422 4.12538C7.54473 4.12538 4.12532 7.54479 4.12532 11.7422C4.12532 13.5436 4.76033 15.2766 5.91807 16.6467L6.83214 17.7283Z"
+        fill={
+          {
+            "payload": 4280563015,
+            "type": 0,
+          }
+        }
+        fillRule={0}
+        propList={
+          [
+            "fill",
+            "fillRule",
+          ]
+        }
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+</View>
+`;
diff --git a/...de/src/components/Icons/MagicKonnectIcon/__snapshots__/MagicKonnectIcon.web.test.tsx.snap b/...de/src/components/Icons/MagicKonnectIcon/__snapshots__/MagicKonnectIcon.web.test.tsx.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<MagicKonnectIcon /> should render MagicKonnectIcon 1`] = `
+<div>
+  <svg
+    aria-hidden="true"
+    class="Svgweb__StyledSvg-vcmjs8-0"
+    data-blade-component="icon"
+    fill="none"
+    height="20px"
+    viewBox="0 0 24 24"
+    width="20px"
+  >
+    <path
+      clip-rule="evenodd"
+      d="M11.0014 9.56575L10.4838 11.439L13.4463 9.55535L11.5089 16.6624L13.4763 16.664L16.3383 6.16663L11.0014 9.56575Z"
+      data-blade-component="svg-path"
+      fill="hsla(211, 33%, 21%, 1)"
+      fill-rule="evenodd"
+    />
+    <path
+      clip-rule="evenodd"
+      d="M7.81432 13.6766L6.99993 16.6644H11.0326L12.6825 10.586L7.81432 13.6766Z"
+      data-blade-component="svg-path"
+      fill="hsla(211, 33%, 21%, 1)"
+      fill-rule="evenodd"
+    />
+    <path
+      clip-rule="evenodd"
+      d="M3.05906 21.9832C3.01983 21.9944 2.9778 22 2.93858 22C2.8181 22 2.69761 21.9468 2.61636 21.8487C2.50989 21.7198 2.49027 21.5377 2.56592 21.3892L4.2947 18.0185C2.81249 16.2645 1.99994 14.0454 1.99994 11.7422C1.99994 6.37097 6.37091 2 11.7422 2C17.1134 2 21.4844 6.36817 21.4844 11.7394C21.4844 17.1107 17.1134 21.4816 11.7422 21.4816C10.33 21.4816 8.97108 21.1874 7.69621 20.6046L3.05906 21.9832ZM6.83214 17.7283L6.27789 18.809L7.85477 18.3402L8.57986 18.6717C9.57477 19.1265 10.6321 19.3563 11.7422 19.3563C15.9396 19.3563 19.359 15.9369 19.359 11.7394C19.359 7.54278 15.9404 4.12538 11.7422 4.12538C7.54473 4.12538 4.12532 7.54479 4.12532 11.7422C4.12532 13.5436 4.76033 15.2766 5.91807 16.6467L6.83214 17.7283Z"
+      data-blade-component="svg-path"
+      fill="hsla(211, 33%, 21%, 1)"
+      fill-rule="evenodd"
+    />
+  </svg>
+</div>
+`;
diff --git a/packages/blade/src/components/Icons/MagicKonnectIcon/index.ts b/packages/blade/src/components/Icons/MagicKonnectIcon/index.ts
@@ -0,0 +1 @@
+export { default } from './MagicKonnectIcon';
diff --git a/packages/blade/src/components/Icons/WorldwideIcon/WorldwideIcon.native.test.tsx b/packages/blade/src/components/Icons/WorldwideIcon/WorldwideIcon.native.test.tsx
@@ -0,0 +1,11 @@
+import WorldwideIcon from '.';
+import renderWithTheme from '~utils/testing/renderWithTheme.native';
+
+describe('<WorldwideIcon />', () => {
+  it('should render WorldwideIcon', () => {
+    const renderTree = renderWithTheme(
+      <WorldwideIcon color="feedback.icon.neutral.intense" size="large" />,
+    ).toJSON();
+    expect(renderTree).toMatchSnapshot();
+  });
+});