Sync icons (#567)

* a

* Create perfect-queens-kneel.md

.changeset/perfect-queens-kneel.md

@@ -0,0 +1,5 @@
+---
+"@status-im/icons": patch
+---
+
+Sync icons

packages/icons/src/bridge-blur-icon.tsx

@@ -0,0 +1,77 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgBridgeBlurIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <g clipPath="url(#bridge-blur-icon_svg__a)">
+        <mask
+          id="bridge-blur-icon_svg__c"
+          width={20}
+          height={20}
+          x={0}
+          y={0}
+          maskUnits="userSpaceOnUse"
+          style={{
+            maskType: 'alpha',
+          }}
+        >
+          <path
+            fill="url(#bridge-blur-icon_svg__b)"
+            stroke={props.color}
+            d="M-.5-.5h19v19h-19z"
+            transform="matrix(0 -1 -1 0 19 19)"
+          />
+        </mask>
+        <g mask="url(#bridge-blur-icon_svg__c)">
+          <path
+            fill={props.color}
+            fillRule="evenodd"
+            d="M4.99 10.098 4.5 10l-.49-.099v-.002l.001-.004.003-.014a3.446 3.446 0 0 1 .054-.224 8.6 8.6 0 0 1 1.075-2.43C6.015 5.887 7.528 4.5 10 4.5c2.473 0 3.986 1.387 4.857 2.728a8.602 8.602 0 0 1 1.129 2.653l.003.014v.004l.001.002-.49.099-.49.098-.002-.008-.008-.034a7.103 7.103 0 0 0-.199-.672 7.598 7.598 0 0 0-.783-1.612C13.265 6.612 12.028 5.5 10 5.5c-2.027 0-3.264 1.113-4.018 2.273a7.6 7.6 0 0 0-.99 2.318l-.002.007Z"
+            clipRule="evenodd"
+          />
+        </g>
+        <circle
+          cx={4.5}
+          cy={12.5}
+          r={2.5}
+          stroke={props.color}
+          strokeWidth={1.2}
+        />
+        <circle
+          cx={15.5}
+          cy={12.5}
+          r={2.5}
+          stroke={props.color}
+          strokeWidth={1.2}
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="bridge-blur-icon_svg__b"
+          x1={13}
+          x2={15.5}
+          y1={4.5}
+          y2={8}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={props.color} stopOpacity={0} />
+          <stop offset={1} stopColor={props.color} />
+        </linearGradient>
+        <clipPath id="bridge-blur-icon_svg__a">
+          <path fill="#fff" d="M0 0h20v20H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+export default SvgBridgeBlurIcon

packages/icons/src/index.ts

@@ -33,6 +33,7 @@ export { default as BanUserIcon } from './ban-user-icon'
 export { default as BlockIcon } from './block-icon'
 export { default as BoldIcon } from './bold-icon'
 export { default as BrazilIcon } from './brazil-icon'
+export { default as BridgeBlurIcon } from './bridge-blur-icon'
 export { default as BridgeIcon } from './bridge-icon'
 export { default as BrowserIcon } from './browser-icon'
 export { default as BulletIcon } from './bullet-icon'
@@ -268,6 +269,7 @@ export { default as QrCodeIcon } from './qr-code-icon'
 export { default as QuillPenIcon } from './quill-pen-icon'
 export { default as RaribleIcon } from './rarible-icon'
 export { default as ReactionIcon } from './reaction-icon'
+export { default as ReceiveBlurIcon } from './receive-blur-icon'
 export { default as ReceiveIcon } from './receive-icon'
 export { default as RecentIcon } from './recent-icon'
 export { default as RedditIcon } from './reddit-icon'
@@ -277,6 +279,7 @@ export { default as RemoveIcon } from './remove-icon'
 export { default as RemoveUserIcon } from './remove-user-icon'
 export { default as ReorderIcon } from './reorder-icon'
 export { default as ReplyIcon } from './reply-icon'
+export { default as ReportingIcon } from './reporting-icon'
 export { default as RevealIcon } from './reveal-icon'
 export { default as RevealWhitelistIcon } from './reveal-whitelist-icon'
 export { default as RevereIcon } from './revere-icon'
@@ -293,6 +296,7 @@ export { default as ScanIcon } from './scan-icon'
 export { default as SearchIcon } from './search-icon'
 export { default as SeedIcon } from './seed-icon'
 export { default as SendAudioIcon } from './send-audio-icon'
+export { default as SendBlurIcon } from './send-blur-icon'
 export { default as SendIcon } from './send-icon'
 export { default as SettingsIcon } from './settings-icon'
 export { default as ShareIcon } from './share-icon'
@@ -315,6 +319,7 @@ export { default as StrikethroughIcon } from './strikethrough-icon'
 export { default as SubscriptIcon } from './subscript-icon'
 export { default as SuperareIcon } from './superare-icon'
 export { default as SuperscriptIcon } from './superscript-icon'
+export { default as SwapBlurIcon } from './swap-blur-icon'
 export { default as SwapIcon } from './swap-icon'
 export { default as SwitchIcon } from './switch-icon'
 export { default as SymbolsIcon } from './symbols-icon'

packages/icons/src/receive-blur-icon.tsx

@@ -0,0 +1,57 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgReceiveBlurIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <mask
+        id="receive-blur-icon_svg__b"
+        width={14}
+        height={17}
+        x={3}
+        y={2}
+        maskUnits="userSpaceOnUse"
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path
+          fill="url(#receive-blur-icon_svg__a)"
+          d="M0 0h13v17H0z"
+          transform="matrix(-1 0 0 1 16.5 2)"
+        />
+      </mask>
+      <g mask="url(#receive-blur-icon_svg__b)">
+        <path
+          fill={props.color}
+          fillRule="evenodd"
+          d="M9.4 13.147 4.904 9.06l-.807.888 5.5 5 .404.367.403-.367 5.5-5-.807-.888-4.497 4.088V2.5H9.4v10.647Z"
+          clipRule="evenodd"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="receive-blur-icon_svg__a"
+          x1={6.5}
+          x2={6.5}
+          y1={0.708}
+          y2={8.5}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={props.color} stopOpacity={0} />
+          <stop offset={1} stopColor={props.color} />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+})
+
+export default SvgReceiveBlurIcon

packages/icons/src/reporting-icon.tsx

@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgReportingIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M2.6 8c0-.755.628-1.6 2.012-2.292C5.96 5.034 7.864 4.6 10 4.6c.579 0 1.14.032 1.679.092L6.624 11.01a9.685 9.685 0 0 1-2.012-.718C3.228 9.6 2.6 8.755 2.6 8ZM1.4 8c0-1.454 1.164-2.61 2.675-3.365C5.623 3.86 7.718 3.4 10 3.4c2.283 0 4.378.461 5.926 1.235C17.437 5.39 18.6 6.545 18.6 8v4.078c0 .44 0 .765-.201 1.247a2.549 2.549 0 0 1-.27.509c-.096.135-.198.234-.282.318l-.011.01C16.807 15.175 14.54 16.6 10 16.6c-4.54 0-6.807-1.425-7.835-2.438l-.011-.01c-.085-.084-.186-.183-.282-.318a2.55 2.55 0 0 1-.27-.509c-.202-.482-.202-.807-.202-1.247V8Zm16 2.384a6.668 6.668 0 0 1-1.474.981C14.378 12.14 12.283 12.6 10 12.6c-.83 0-1.636-.061-2.4-.176v2.817c.705.1 1.501.159 2.4.159 4.268 0 6.218-1.329 6.994-2.093.097-.095.128-.128.158-.17.03-.04.07-.11.14-.275.105-.251.108-.368.108-.806v-1.672Zm-11 4.628c-1.86-.452-2.882-1.201-3.393-1.705a1.318 1.318 0 0 1-.158-.17c-.03-.04-.071-.11-.14-.275-.105-.251-.109-.368-.109-.806v-1.672c.42.377.924.706 1.475.981.68.34 1.465.62 2.325.826v2.821Zm1.558-3.749 2.13-2.663h7.184c-.247.582-.857 1.179-1.883 1.692C14.04 10.966 12.137 11.4 10 11.4c-.71 0-1.395-.048-2.042-.137ZM17.272 7.4H11.05l1.99-2.488c.892.192 1.688.465 2.35.796 1.026.513 1.636 1.11 1.883 1.692Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgReportingIcon

packages/icons/src/send-blur-icon.tsx

@@ -0,0 +1,57 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgSendBlurIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <mask
+        id="send-blur-icon_svg__b"
+        width={14}
+        height={17}
+        x={3}
+        y={1}
+        maskUnits="userSpaceOnUse"
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path
+          fill="url(#send-blur-icon_svg__a)"
+          d="M16.5 18h13v17h-13z"
+          transform="rotate(-180 16.5 18)"
+        />
+      </mask>
+      <g mask="url(#send-blur-icon_svg__b)">
+        <path
+          fill={props.color}
+          fillRule="evenodd"
+          d="m9.4 6.857-4.496 4.087-.807-.888 5.5-5 .404-.367.403.367 5.5 5-.807.888L10.6 6.856V17.5H9.4V6.857Z"
+          clipRule="evenodd"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="send-blur-icon_svg__a"
+          x1={23}
+          x2={23}
+          y1={18.708}
+          y2={26.5}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={props.color} stopOpacity={0} />
+          <stop offset={1} stopColor={props.color} />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+})
+
+export default SvgSendBlurIcon

packages/icons/src/swap-blur-icon.tsx

@@ -0,0 +1,85 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgSwapBlurIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <mask
+        id="swap-blur-icon_svg__b"
+        width={9}
+        height={16}
+        x={9}
+        y={3}
+        maskUnits="userSpaceOnUse"
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill="url(#swap-blur-icon_svg__a)" d="M9 3h9v16H9V3Z" />
+      </mask>
+      <g mask="url(#swap-blur-icon_svg__b)">
+        <path
+          fill={props.color}
+          fillRule="evenodd"
+          d="m14.1 14.178 3.005-2.63.79.904-4 3.5-.395.346-.395-.346-4-3.5.79-.903 3.005 2.63V3.5h1.2v10.678Z"
+          clipRule="evenodd"
+        />
+      </g>
+      <mask
+        id="swap-blur-icon_svg__d"
+        width={9}
+        height={16}
+        x={2}
+        y={1}
+        maskUnits="userSpaceOnUse"
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill="url(#swap-blur-icon_svg__c)" d="M11 17H2V1h9v16Z" />
+      </mask>
+      <g mask="url(#swap-blur-icon_svg__d)">
+        <path
+          fill={props.color}
+          fillRule="evenodd"
+          d="m5.9 5.822-3.005 2.63-.79-.903 4-3.5.395-.346.395.345 4 3.5-.79.904L7.1 5.822V16.5H5.9V5.822Z"
+          clipRule="evenodd"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="swap-blur-icon_svg__a"
+          x1={13.5}
+          x2={13.5}
+          y1={3.645}
+          y2={10.742}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={props.color} stopOpacity={0} />
+          <stop offset={1} stopColor={props.color} />
+        </linearGradient>
+        <linearGradient
+          id="swap-blur-icon_svg__c"
+          x1={6.5}
+          x2={6.5}
+          y1={16.355}
+          y2={9.258}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={props.color} stopOpacity={0} />
+          <stop offset={1} stopColor={props.color} />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+})
+
+export default SvgSwapBlurIcon

packages/icons/src/swap-icon.tsx

@@ -15,14 +15,14 @@ const SvgSwapIcon = createIcon(props => {
       <path
         fill={props.color}
         fillRule="evenodd"
-        d="m13.452 10.895 3.5-4 .346-.395-.346-.395-3.5-4-.903.79L15.703 6.5l-3.154 3.605.903.79Zm-6.903-1.79-3.5 4-.346.395.345.395 3.5 4 .904-.79L4.297 13.5l3.155-3.605-.903-.79Z"
+        d="m10.895 7.549-4-3.5-.395-.347-.395.346-4 3.5.79.904L6.5 5.297l3.605 3.155.79-.903Zm-1.79 4.902 4 3.5.395.347.395-.346 4-3.5-.79-.903-3.605 3.154-3.605-3.154-.79.902Z"
         clipRule="evenodd"
       />
       <mask
         id="swap-icon_svg__b"
-        width={12}
+        width={3}
-        height={3}
+        height={13}
-        x={4}
+        x={5}
         y={5}
         maskUnits="userSpaceOnUse"
         style={{
@@ -31,40 +31,36 @@ const SvgSwapIcon = createIcon(props => {
       >
         <path
           fill="url(#swap-icon_svg__a)"
-          d="M4 7.5h2v12H4z"
+          d="M7.5 17h2v12h-2z"
-          transform="rotate(-90 4 7.5)"
+          transform="rotate(180 7.5 17)"
         />
       </mask>
       <g mask="url(#swap-icon_svg__b)">
-        <path stroke={props.color} strokeWidth={1.2} d="M4.5 6.5H16" />
+        <path stroke={props.color} strokeWidth={1.2} d="M6.5 16.5V5" />
       </g>
       <mask
         id="swap-icon_svg__d"
-        width={12}
+        width={3}
-        height={3}
+        height={13}
-        x={4}
+        x={12}
-        y={12}
+        y={3}
         maskUnits="userSpaceOnUse"
         style={{
           maskType: 'alpha',
         }}
       >
-        <path
+        <path fill="url(#swap-icon_svg__c)" d="M12.5 3h2v12h-2z" />
-          fill="url(#swap-icon_svg__c)"
-          d="M16 12.5h2v12h-2z"
-          transform="rotate(90 16 12.5)"
-        />
       </mask>
       <g mask="url(#swap-icon_svg__d)">
-        <path stroke={props.color} strokeWidth={1.2} d="M15.5 13.5H4" />
+        <path stroke={props.color} strokeWidth={1.2} d="M13.5 3.5V15" />
       </g>
       <defs>
         <linearGradient
           id="swap-icon_svg__a"
-          x1={5}
+          x1={8.5}
-          x2={5}
+          x2={8.5}
-          y1={8}
+          y1={17.5}
-          y2={13.5}
+          y2={23}
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={props.color} stopOpacity={0} />
@@ -72,10 +68,10 @@ const SvgSwapIcon = createIcon(props => {
         </linearGradient>
         <linearGradient
           id="swap-icon_svg__c"
-          x1={17}
+          x1={13.5}
-          x2={17}
+          x2={13.5}
-          y1={13}
+          y1={3.5}
-          y2={18.5}
+          y2={9}
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={props.color} stopOpacity={0} />

packages/icons/svg/bridge-blur-icon.svg

@@ -0,0 +1,52 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  fill="none"
+  viewBox="0 0 20 20"
+>
+  <g clip-path="url(#clip0_7508_131)">
+    <mask
+      id="mask0_7508_131"
+      width="20"
+      height="20"
+      x="0"
+      y="0"
+      maskUnits="userSpaceOnUse"
+      style="mask-type: alpha"
+    >
+      <path
+        fill="url(#paint0_linear_7508_131)"
+        stroke="#647084"
+        d="M-.5-.5h19v19h-19z"
+        transform="matrix(0 -1 -1 0 19 19)"
+      />
+    </mask>
+    <g mask="url(#mask0_7508_131)">
+      <path
+        fill="#09101C"
+        fill-rule="evenodd"
+        d="M4.99 10.098 4.5 10l-.49-.099v-.002l.001-.004.003-.014a3.446 3.446 0 0 1 .054-.224 8.6 8.6 0 0 1 1.075-2.43C6.015 5.887 7.528 4.5 10 4.5c2.473 0 3.986 1.387 4.857 2.728a8.602 8.602 0 0 1 1.129 2.653l.003.014v.004l.001.002-.49.099-.49.098-.002-.008-.008-.034a7.103 7.103 0 0 0-.199-.672 7.598 7.598 0 0 0-.783-1.612C13.265 6.612 12.028 5.5 10 5.5c-2.027 0-3.264 1.113-4.018 2.273a7.6 7.6 0 0 0-.99 2.318l-.002.007Z"
+        clip-rule="evenodd"
+      />
+    </g>
+    <circle cx="4.5" cy="12.5" r="2.5" stroke="#09101C" stroke-width="1.2" />
+    <circle cx="15.5" cy="12.5" r="2.5" stroke="#09101C" stroke-width="1.2" />
+  </g>
+  <defs>
+    <linearGradient
+      id="paint0_linear_7508_131"
+      x1="13"
+      x2="15.5"
+      y1="4.5"
+      y2="8"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#09101C" stop-opacity="0" />
+      <stop offset="1" stop-color="#09101C" />
+    </linearGradient>
+    <clipPath id="clip0_7508_131">
+      <path fill="#fff" d="M0 0h20v20H0z" />
+    </clipPath>
+  </defs>
+</svg>

packages/icons/svg/bridge-icon.svg

@@ -22,7 +22,7 @@
       />
     </mask>
     <g mask="url(#mask0_7419_55)">
-      <path stroke="#000" d="M4.5 10s1-5 5.5-5 5.5 5 5.5 5" />
+      <path stroke="#09101C" d="M4.5 10s1-5 5.5-5 5.5 5 5.5 5" />
     </g>
     <circle cx="4.5" cy="12.5" r="2.5" stroke="#09101C" stroke-width="1.2" />
     <circle cx="15.5" cy="12.5" r="2.5" stroke="#09101C" stroke-width="1.2" />

packages/icons/svg/receive-blur-icon.svg

@@ -0,0 +1,44 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  fill="none"
+  viewBox="0 0 20 20"
+>
+  <mask
+    id="mask0_7508_128"
+    width="14"
+    height="17"
+    x="3"
+    y="2"
+    maskUnits="userSpaceOnUse"
+    style="mask-type: alpha"
+  >
+    <path
+      fill="url(#paint0_linear_7508_128)"
+      d="M0 0h13v17H0z"
+      transform="matrix(-1 0 0 1 16.5 2)"
+    />
+  </mask>
+  <g mask="url(#mask0_7508_128)">
+    <path
+      fill="#09101C"
+      fill-rule="evenodd"
+      d="M9.4 13.147 4.904 9.06l-.807.888 5.5 5 .404.367.403-.367 5.5-5-.807-.888-4.497 4.088V2.5H9.4v10.647Z"
+      clip-rule="evenodd"
+    />
+  </g>
+  <defs>
+    <linearGradient
+      id="paint0_linear_7508_128"
+      x1="6.5"
+      x2="6.5"
+      y1=".708"
+      y2="8.5"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#09101C" stop-opacity="0" />
+      <stop offset="1" stop-color="#09101C" />
+    </linearGradient>
+  </defs>
+</svg>

packages/icons/svg/reporting-icon.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  fill="none"
+  viewBox="0 0 20 20"
+>
+  <path
+    fill="#09101C"
+    fill-rule="evenodd"
+    d="M2.6 8c0-.755.628-1.6 2.012-2.292C5.96 5.034 7.864 4.6 10 4.6c.579 0 1.14.032 1.679.092L6.624 11.01a9.685 9.685 0 0 1-2.012-.718C3.228 9.6 2.6 8.755 2.6 8ZM1.4 8c0-1.454 1.164-2.61 2.675-3.365C5.623 3.86 7.718 3.4 10 3.4c2.283 0 4.378.461 5.926 1.235C17.437 5.39 18.6 6.545 18.6 8v4.078c0 .44 0 .765-.201 1.247a2.549 2.549 0 0 1-.27.509c-.096.135-.198.234-.282.318l-.011.01C16.807 15.175 14.54 16.6 10 16.6c-4.54 0-6.807-1.425-7.835-2.438l-.011-.01c-.085-.084-.186-.183-.282-.318a2.55 2.55 0 0 1-.27-.509c-.202-.482-.202-.807-.202-1.247V8Zm16 2.384a6.668 6.668 0 0 1-1.474.981C14.378 12.14 12.283 12.6 10 12.6c-.83 0-1.636-.061-2.4-.176v2.817c.705.1 1.501.159 2.4.159 4.268 0 6.218-1.329 6.994-2.093.097-.095.128-.128.158-.17.03-.04.07-.11.14-.275.105-.251.108-.368.108-.806v-1.672Zm-11 4.628c-1.86-.452-2.882-1.201-3.393-1.705a1.318 1.318 0 0 1-.158-.17c-.03-.04-.071-.11-.14-.275-.105-.251-.109-.368-.109-.806v-1.672c.42.377.924.706 1.475.981.68.34 1.465.62 2.325.826v2.821Zm1.558-3.749 2.13-2.663h7.184c-.247.582-.857 1.179-1.883 1.692C14.04 10.966 12.137 11.4 10 11.4c-.71 0-1.395-.048-2.042-.137ZM17.272 7.4H11.05l1.99-2.488c.892.192 1.688.465 2.35.796 1.026.513 1.636 1.11 1.883 1.692Z"
+    clip-rule="evenodd"
+  />
+</svg>

packages/icons/svg/send-blur-icon.svg

@@ -0,0 +1,44 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  fill="none"
+  viewBox="0 0 20 20"
+>
+  <mask
+    id="mask0_7508_129"
+    width="14"
+    height="17"
+    x="3"
+    y="1"
+    maskUnits="userSpaceOnUse"
+    style="mask-type: alpha"
+  >
+    <path
+      fill="url(#paint0_linear_7508_129)"
+      d="M16.5 18h13v17h-13z"
+      transform="rotate(-180 16.5 18)"
+    />
+  </mask>
+  <g mask="url(#mask0_7508_129)">
+    <path
+      fill="#09101C"
+      fill-rule="evenodd"
+      d="m9.4 6.857-4.496 4.087-.807-.888 5.5-5 .404-.367.403.367 5.5 5-.807.888L10.6 6.856V17.5H9.4V6.857Z"
+      clip-rule="evenodd"
+    />
+  </g>
+  <defs>
+    <linearGradient
+      id="paint0_linear_7508_129"
+      x1="23"
+      x2="23"
+      y1="18.708"
+      y2="26.5"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#09101C" stop-opacity="0" />
+      <stop offset="1" stop-color="#09101C" />
+    </linearGradient>
+  </defs>
+</svg>

packages/icons/svg/swap-blur-icon.svg

@@ -0,0 +1,70 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  fill="none"
+  viewBox="0 0 20 20"
+>
+  <mask
+    id="mask0_7508_130"
+    width="9"
+    height="16"
+    x="9"
+    y="3"
+    maskUnits="userSpaceOnUse"
+    style="mask-type: alpha"
+  >
+    <path fill="url(#paint0_linear_7508_130)" d="M9 3h9v16H9V3Z" />
+  </mask>
+  <g mask="url(#mask0_7508_130)">
+    <path
+      fill="#09101C"
+      fill-rule="evenodd"
+      d="m14.1 14.178 3.005-2.63.79.904-4 3.5-.395.346-.395-.346-4-3.5.79-.903 3.005 2.63V3.5h1.2v10.678Z"
+      clip-rule="evenodd"
+    />
+  </g>
+  <mask
+    id="mask1_7508_130"
+    width="9"
+    height="16"
+    x="2"
+    y="1"
+    maskUnits="userSpaceOnUse"
+    style="mask-type: alpha"
+  >
+    <path fill="url(#paint1_linear_7508_130)" d="M11 17H2V1h9v16Z" />
+  </mask>
+  <g mask="url(#mask1_7508_130)">
+    <path
+      fill="#09101C"
+      fill-rule="evenodd"
+      d="m5.9 5.822-3.005 2.63-.79-.903 4-3.5.395-.346.395.345 4 3.5-.79.904L7.1 5.822V16.5H5.9V5.822Z"
+      clip-rule="evenodd"
+    />
+  </g>
+  <defs>
+    <linearGradient
+      id="paint0_linear_7508_130"
+      x1="13.5"
+      x2="13.5"
+      y1="3.645"
+      y2="10.742"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#09101C" stop-opacity="0" />
+      <stop offset="1" stop-color="#09101C" />
+    </linearGradient>
+    <linearGradient
+      id="paint1_linear_7508_130"
+      x1="6.5"
+      x2="6.5"
+      y1="16.355"
+      y2="9.258"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#09101C" stop-opacity="0" />
+      <stop offset="1" stop-color="#09101C" />
+    </linearGradient>
+  </defs>
+</svg>

packages/icons/svg/swap-icon.svg

@@ -8,52 +8,48 @@
   <path
     fill="#09101C"
     fill-rule="evenodd"
-    d="m13.452 10.895 3.5-4 .346-.395-.346-.395-3.5-4-.903.79L15.703 6.5l-3.154 3.605.903.79Zm-6.903-1.79-3.5 4-.346.395.345.395 3.5 4 .904-.79L4.297 13.5l3.155-3.605-.903-.79Z"
+    d="m10.895 7.549-4-3.5-.395-.347-.395.346-4 3.5.79.904L6.5 5.297l3.605 3.155.79-.903Zm-1.79 4.902 4 3.5.395.347.395-.346 4-3.5-.79-.903-3.605 3.154-3.605-3.154-.79.902Z"
     clip-rule="evenodd"
   />
   <mask
     id="mask0_347_91"
-    width="12"
+    width="3"
-    height="3"
+    height="13"
-    x="4"
+    x="5"
     y="5"
     maskUnits="userSpaceOnUse"
     style="mask-type: alpha"
   >
     <path
       fill="url(#paint0_linear_347_91)"
-      d="M4 7.5h2v12H4z"
+      d="M7.5 17h2v12h-2z"
-      transform="rotate(-90 4 7.5)"
+      transform="rotate(180 7.5 17)"
     />
   </mask>
   <g mask="url(#mask0_347_91)">
-    <path stroke="#09101C" stroke-width="1.2" d="M4.5 6.5H16" />
+    <path stroke="#09101C" stroke-width="1.2" d="M6.5 16.5V5" />
   </g>
   <mask
     id="mask1_347_91"
-    width="12"
+    width="3"
-    height="3"
+    height="13"
-    x="4"
+    x="12"
-    y="12"
+    y="3"
     maskUnits="userSpaceOnUse"
     style="mask-type: alpha"
   >
-    <path
+    <path fill="url(#paint1_linear_347_91)" d="M12.5 3h2v12h-2z" />
-      fill="url(#paint1_linear_347_91)"
-      d="M16 12.5h2v12h-2z"
-      transform="rotate(90 16 12.5)"
-    />
   </mask>
   <g mask="url(#mask1_347_91)">
-    <path stroke="#09101C" stroke-width="1.2" d="M15.5 13.5H4" />
+    <path stroke="#09101C" stroke-width="1.2" d="M13.5 3.5V15" />
   </g>
   <defs>
     <linearGradient
       id="paint0_linear_347_91"
-      x1="5"
+      x1="8.5"
-      x2="5"
+      x2="8.5"
-      y1="8"
+      y1="17.5"
-      y2="13.5"
+      y2="23"
       gradientUnits="userSpaceOnUse"
     >
       <stop stop-color="#09101C" stop-opacity="0" />
@@ -61,10 +57,10 @@
     </linearGradient>
     <linearGradient
       id="paint1_linear_347_91"
-      x1="17"
+      x1="13.5"
-      x2="17"
+      x2="13.5"
-      y1="13"
+      y1="3.5"
-      y2="18.5"
+      y2="9"
       gradientUnits="userSpaceOnUse"
     >
       <stop stop-color="#09101C" stop-opacity="0" />