@westpac/ui 0.1.0 → 0.2.0

package/src/components/icon/components/stg-logo-icon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function STGLogoIcon({
+  'aria-label': ariaLabel = 'St.George',
+  copyrightYear = '2023',
+  viewBox = '0 0 170 51',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} viewBox={viewBox} {...props}>
+      <path
+        d="M165.952 32.2529C165.583 30.0189 164.705 28.8399 162.749 28.8399C160.198 28.8399 159.46 31.0109 159.404 32.2529H165.952ZM169.723 37.0319C168.588 40.8179 166.18 42.4329 162.861 42.4329C158.24 42.4329 155.378 38.9569 155.378 33.9899C155.378 29.1809 158.41 25.5189 162.861 25.5189C167.851 25.5189 170.263 30.1109 169.977 35.0459H159.404C159.516 37.8399 160.765 39.1109 163.005 39.1109C164.186 39.1109 165.201 38.5299 165.76 37.8299C166.129 37.3459 166.711 37.0319 167.368 37.0319H169.723ZM149.374 33.7803C149.374 31.1733 148.553 28.8453 145.944 28.8453C143.676 28.8453 142.684 31.0163 142.684 33.4083C142.684 35.7043 143.478 38.2173 145.944 38.2173C148.24 38.2173 149.374 36.0773 149.374 33.7803ZM150.666 27.1683C151.357 26.1363 152.24 25.5173 153.202 25.5173V40.9803C153.202 43.6183 152.352 48.0873 145.603 48.0873C142.712 48.0873 139.339 46.5973 139.141 42.9343H141.794C142.525 42.9343 143.167 43.3243 143.52 43.9063C144.079 44.8083 145.053 45.1373 146.143 45.1373C148.383 45.1373 149.403 43.4643 149.374 41.1663V39.0553H149.318C148.439 40.7323 146.682 41.5393 144.923 41.5393C140.529 41.5393 138.658 37.9143 138.658 33.5073C138.658 28.6563 141.512 25.5173 145.916 25.5173C147.826 25.5173 149.444 26.1083 150.666 27.1683ZM131.452 34.4204V41.9954H127.424V25.5154C127.424 25.5154 128.812 25.3124 130.232 27.5294C130.906 26.6874 132.673 25.5154 134.923 25.5154C137.641 25.5154 139.098 26.8494 139.098 26.8494C139.098 26.8494 138.547 27.6714 138.077 28.6224C137.62 29.5484 137.242 30.5504 137.242 30.5504C137.242 30.5504 136.247 29.6294 135.038 29.6294C133.829 29.6294 131.452 30.6534 131.452 34.4204ZM117.766 25.5186C122.387 25.5186 125.364 28.8696 125.364 33.9916C125.364 39.0806 122.387 42.4306 117.766 42.4306C113.174 42.4306 110.198 39.0806 110.198 33.9916C110.198 28.8696 113.174 25.5186 117.766 25.5186ZM117.766 39.1126C120.515 39.1126 121.338 36.5356 121.338 33.9916C121.338 31.4146 120.515 28.8386 117.766 28.8386C115.045 28.8386 114.223 31.4146 114.223 33.9916C114.223 36.5356 115.045 39.1126 117.766 39.1126ZM104.103 32.2529C103.734 30.0189 102.856 28.8399 100.899 28.8399C98.3479 28.8399 97.6099 31.0109 97.5539 32.2529H104.103ZM107.874 37.0319C106.74 40.8179 104.331 42.4329 101.013 42.4329C96.3909 42.4329 93.5279 38.9569 93.5279 33.9899C93.5279 29.1809 96.5609 25.5189 101.013 25.5189C106.002 25.5189 108.413 30.1109 108.127 35.0459H97.5539C97.6659 37.8399 98.9149 39.1109 101.154 39.1109C102.336 39.1109 103.352 38.5299 103.911 37.8299C104.279 37.3459 104.862 37.0319 105.519 37.0319H107.874ZM87.6624 33.7803C87.6624 31.1733 86.8424 28.8453 84.2324 28.8453C81.9654 28.8453 80.9724 31.0163 80.9724 33.4083C80.9724 35.7043 81.7664 38.2173 84.2324 38.2173C86.5294 38.2173 87.6624 36.0773 87.6624 33.7803ZM88.9554 27.1683C89.6464 26.1363 90.5294 25.5173 91.4904 25.5173V40.9803C91.4904 43.6183 90.6414 48.0873 83.8924 48.0873C81.0024 48.0873 77.6284 46.5973 77.4294 42.9343H80.0834C80.8164 42.9343 81.4574 43.3243 81.8084 43.9063C82.3674 44.8083 83.3414 45.1373 84.4324 45.1373C86.6724 45.1373 87.6914 43.4643 87.6624 41.1663V39.0553H87.6074C86.7284 40.7323 84.9704 41.5393 83.2134 41.5393C78.8184 41.5393 76.9474 37.9143 76.9474 33.5073C76.9474 28.6563 79.8024 25.5173 84.2054 25.5173C86.1154 25.5173 87.7344 26.1083 88.9554 27.1683ZM76.2786 40.2178C76.2786 41.4408 75.2826 42.4338 74.0506 42.4338C72.8236 42.4338 71.8266 41.4408 71.8266 40.2178C71.8266 38.9948 72.8236 38.0028 74.0506 38.0028C75.2826 38.0028 76.2786 38.9948 76.2786 40.2178ZM56.8763 30.6397C56.1053 30.6397 55.4383 30.2097 55.0983 29.5777C54.6473 28.7267 53.7083 28.4677 52.6233 28.4677C51.7153 28.4677 50.3833 28.6537 50.3833 29.9557C50.3833 31.5387 52.6503 31.7547 54.9473 32.3457C57.3013 32.9357 59.5973 33.8677 59.5973 36.8477C59.5973 41.0677 56.2513 42.4327 52.9063 42.4327C49.5043 42.4327 46.1883 41.0357 46.0163 36.7837H49.8443C49.8723 38.7077 51.3463 39.4847 52.9363 39.4847C54.0973 39.4847 55.5703 38.9877 55.5703 37.4357C55.5703 36.1007 53.8983 35.6367 51.0063 34.9527C48.6823 34.3947 46.3553 33.4937 46.3553 30.6697C46.3553 26.5737 49.5893 25.5187 52.7343 25.5187C55.9393 25.5187 58.8893 26.6987 59.1993 30.6397H56.8763ZM67.1038 25.9531H70.0528V26.8981C70.0528 28.0051 69.1508 28.9011 68.0398 28.9011H67.1038V36.8481C67.1038 38.3361 67.4448 38.7091 68.8048 38.7091C69.2308 38.7091 69.6268 38.6771 70.0528 38.5851V42.0281C69.3718 42.1531 68.4948 42.1831 67.6998 42.1831C65.2328 42.1831 63.0788 41.5621 63.0788 38.3651V28.9011H60.6398V27.9561C60.6398 26.8491 61.5418 25.9531 62.6528 25.9531H63.0788V21.1411H65.0898C66.2038 21.1411 67.1038 22.0401 67.1038 23.1441V25.9531Z"
+        fill="#E30000"
+      />
+      <path
+        d="M40.473 39.2979C42.295 42.2189 45.602 44.3369 48.91 44.8159C54.789 45.5609 60.397 42.7349 66.268 44.9109C69.025 45.9049 71.338 47.5469 72.797 49.9269C71.637 49.4059 70.815 49.0249 69.307 48.5469C66.736 47.7429 64.526 48.0179 61.949 48.4609C56.983 49.1709 52.01 50.7869 47.236 48.4709C43.569 46.7339 41.376 43.0769 40.473 39.2979Z"
+        fill="#FFCD00"
+      />
+      <path
+        d="M34.139 16.4717C34.49 18.0487 34.164 19.5247 33.906 21.4327C33.684 23.0757 34.207 24.6037 35.698 25.0757C36.93 25.4647 39.681 25.3707 41.625 27.0297C42.207 27.6097 42.385 27.7617 42.502 28.6397C42.577 29.1817 42.498 29.8047 42.385 30.2817C41.887 31.7267 41.393 33.0077 40.565 34.0387C39.239 35.5797 37.869 36.9157 36.106 37.4997C32.783 38.6027 30.799 35.3057 28.23 33.8567C27.082 33.2477 25.752 32.8117 24.67 33.9417C22.928 35.6177 23.201 38.2657 24.09 40.1687C25.887 43.6367 29.578 46.7797 32.174 49.3197C27.533 50.5307 22.895 51.7427 18.237 50.4367C16.084 49.8307 14.059 47.1187 13.125 45.0197C11.556 41.5867 10.516 33.4967 2.38098 27.8147C6.40998 28.3017 8.04098 28.7037 10.66 26.9577C11.237 26.5457 11.41 25.8297 11.369 25.1897C10.971 22.4657 8.73898 21.0117 7.18298 19.1137C8.28098 19.5157 9.39098 19.8017 10.618 19.9497C12.355 20.1577 13.871 19.7917 15.305 18.9417C20.037 16.1287 14.584 9.6547 14.584 9.6547C14.584 9.6547 19.578 13.2127 22.705 12.7247C23.768 12.4777 24.479 12.1647 25.045 11.2027C26.412 8.8867 27.652 6.5037 28.66 4.0807C28.508 6.3267 28.143 8.6427 28.74 10.7517C29.313 12.7577 31.067 13.1587 32.662 14.2747C33.321 14.7137 33.856 15.2007 34.139 16.4717Z"
+        fill="#78BE20"
+      />
+      <path
+        d="M25.5145 19.3711C24.7105 20.5051 24.9415 22.1431 26.3455 22.3051C27.1995 22.3421 28.2425 21.9171 28.5455 21.0201C28.8505 20.1301 28.4475 19.3551 27.7775 18.7671C27.0315 18.3021 26.0565 18.6031 25.5145 19.3711Z"
+        fill="white"
+      />
+      <path
+        d="M7.32448 21.2559C8.43548 21.8809 9.64348 22.7259 10.6015 23.7069C11.6705 24.8039 13.1115 27.5109 11.2795 29.5859C10.5745 30.3749 9.41848 30.7469 8.31448 30.7889C6.66048 30.8979 4.48248 30.2679 3.26648 29.3559C3.53348 29.3509 7.25248 30.0559 9.03348 29.1529C9.59748 28.8679 10.2585 28.1099 9.85248 26.5339C9.32448 24.4729 7.38148 22.9319 4.13548 20.8689C3.75548 20.6269 3.48848 20.1629 3.33048 19.6299C3.33048 19.6299 5.29948 20.1159 7.32448 21.2559ZM10.8411 21.8252C11.9761 22.8732 13.5221 23.0572 14.7771 22.2002C16.1121 21.2922 16.0691 19.0262 15.7811 17.7012C14.9831 14.0212 12.9801 10.8162 10.3101 9.2732C11.6351 12.1272 13.2521 15.1972 13.7771 18.2752C13.9001 18.9952 13.9941 19.8022 13.7181 20.3632C13.0601 21.7202 10.5081 20.8342 9.23008 20.1692C9.70708 20.7752 10.8411 21.8252 10.8411 21.8252ZM19.3192 12.9766C21.5922 12.7056 21.6292 10.5446 21.9462 8.8576C22.2342 7.3306 22.9262 5.8826 23.9842 4.5556C24.7582 3.5816 25.2022 3.2126 25.8792 2.3906C27.3972 0.5466 28.4312 -0.000400543 28.4312 -0.000400543C28.4312 -0.000400543 25.1192 5.2936 24.4202 7.9176C23.7952 10.2466 24.4982 12.9746 21.9382 14.4856C19.7442 15.6496 17.5802 14.6466 16.0652 13.3966C15.2292 12.6866 14.7542 11.9806 14.4712 10.8566C15.9182 11.8026 17.2542 13.2246 19.3192 12.9766ZM28.1165 12.3535C29.0725 13.3945 30.3245 13.7145 31.5175 14.5195C32.6155 15.2595 33.3165 16.0085 33.7005 17.1965C34.2015 18.8975 33.3685 20.7045 33.4745 22.5395C33.6425 25.5615 35.7435 25.4365 38.4825 25.5325C40.0665 25.5895 42.9295 26.9025 42.6135 29.2555C42.4845 30.2255 42.3375 30.8645 41.7065 31.5145C41.0475 32.0565 40.2385 32.2675 39.6055 31.7875C40.9335 31.3455 41.3735 30.8665 41.4885 29.5155C41.5545 28.7715 41.0785 28.0295 40.8105 27.7875C40.2695 27.2975 39.4935 26.6255 37.5435 26.6865C36.0355 26.7305 34.7825 26.7565 33.3775 25.7655C32.6645 25.2615 32.4025 24.8165 32.0125 24.0695C31.1275 22.1665 32.2735 19.9775 32.0545 18.0745C31.9515 17.1185 30.8775 16.0415 29.9705 15.4495C28.5215 14.5005 26.9765 14.0285 26.0665 12.3615C24.7675 9.9775 25.8785 6.9575 27.4515 4.5685C27.3905 7.2265 26.1815 10.2595 28.1165 12.3535ZM29.0731 21.6358C29.9311 20.6108 29.4971 19.2728 28.2911 18.7118C27.6431 18.3948 26.8161 18.3548 26.0521 18.5348C25.8211 18.5888 25.2401 18.6998 24.9711 19.2308C25.2561 19.1398 25.8131 18.9878 26.2391 18.9738C26.9081 18.9598 27.0861 19.2348 27.0861 19.2348C27.0861 19.2348 26.2061 19.4748 25.9561 20.2388C25.7461 20.8768 25.9971 21.5658 26.4731 21.8758C27.1721 22.5578 28.4351 22.4018 29.0731 21.6358ZM16.7093 21.0801C17.6453 19.7901 18.5983 18.5921 19.7033 17.5671C19.6213 18.6901 19.0843 19.7461 18.6483 20.7711C16.1563 25.9881 14.0843 29.5381 13.2933 36.4381C12.5353 43.0571 14.0543 46.3141 15.0743 47.8421C15.4203 48.3821 15.1473 49.4951 14.6153 50.1271C13.9053 50.9761 12.1703 49.9931 12.1703 49.9931C12.1703 49.9931 11.8553 49.1501 11.5633 48.3651C10.9453 46.1581 10.5583 43.9791 10.4593 41.5991C10.1393 34.3511 12.2093 27.2991 16.7093 21.0801ZM32.598 30.6113C35.027 32.4373 37.615 33.4523 40.195 34.4633C39.864 35.4573 39.62 35.5933 38.881 36.2723C37.094 35.7703 35.223 34.9663 33.941 33.7443C32.247 32.2203 30.989 30.9263 30.371 28.7163C31.262 29.1903 31.786 30.0043 32.598 30.6113ZM27.0526 32.3545C29.6246 32.7845 30.5976 34.3705 32.3086 35.9925C33.7016 37.1735 35.2516 38.0865 37.1666 37.6685C36.8476 39.2015 35.0706 39.5195 33.4536 39.2825C30.7856 38.8585 30.2226 36.7575 28.4626 34.9265C27.2786 33.6755 25.0836 33.8525 23.7846 35.4895C22.0356 37.6095 23.7796 41.1995 25.1936 42.9105C26.6746 44.7025 27.9606 45.9665 29.4556 47.4475C29.4556 47.4475 31.5426 49.4825 32.6936 50.9155C28.5156 48.7925 25.6706 46.9555 22.7306 43.2585C21.3306 41.4985 21.0546 39.9825 20.9686 38.1455C21.0356 36.4785 21.1956 35.2485 22.3296 33.8795C23.5606 32.3925 25.2086 32.0425 27.1856 32.3755"
+        fill="#004833"
+      />
+      <path
+        d="M38.2327 29.1084C37.6977 29.2864 37.2807 29.8694 37.3987 30.3774C37.6467 30.9594 38.3437 31.0674 38.9217 30.6514C39.1077 30.4754 39.2677 30.2004 39.3297 29.9614C39.3357 29.5184 39.0337 29.1764 38.5457 29.0054C38.4397 29.0384 38.3387 29.0734 38.2327 29.1084Z"
+        fill="white"
+      />
+      <path
+        d="M38.7523 28.582C39.0743 28.577 39.4003 28.734 39.6113 28.933C39.9513 29.249 39.8223 29.853 39.4513 30.199C38.9753 30.578 38.4333 30.65 37.9983 30.24C37.6953 29.895 37.6813 29.352 38.0333 28.904C38.2013 28.693 38.4153 28.586 38.7523 28.582ZM9.25418 33.8545C9.88118 35.0325 10.1292 35.6545 9.92018 37.1815C9.79318 38.1015 9.12518 38.6235 8.51718 39.0175C8.51718 39.0175 9.08018 37.0285 8.30418 35.4835C7.06318 33.0115 6.06218 33.1445 1.12518 31.2935C0.631177 31.1085 -0.00982339 30.3455 0.000176607 30.2265C0.0101766 30.1065 3.97318 30.7905 6.00018 31.3795C7.13518 31.7085 8.68518 32.7805 9.25418 33.8545Z"
+        fill="#004833"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/stopwatch-icon.tsx

@@ -1,16 +1,38 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function StopwatchIcon({ 'aria-label': ariaLabel = 'Stopwatch', copyrightYear = '2020', ...props }: IconProps) {
+export function StopwatchIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Stopwatch',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M18.6181506,6.50316976 L20.1213203,5 L21.5355339,6.41421356 L19.9788158,7.9709317 C21.2474477,9.64720474 22,11.7357184 22,14 C22,19.5228475 17.5228475,24 12,24 C6.4771525,24 2,19.5228475 2,14 C2,8.4771525 6.4771525,4 12,4 C14.5378379,4 16.854872,4.94537379 18.6181506,6.50316976 L18.6181506,6.50316976 Z M12,22 C16.418278,22 20,18.418278 20,14 C20,9.581722 16.418278,6 12,6 C7.581722,6 4,9.581722 4,14 C4,18.418278 7.581722,22 12,22 Z M8,0 L16,0 L16,2 L8,2 L8,0 Z M11,8 L13,8 L13,16 L11,16 L11,8 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path d="M16 0H8V2H16V0Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M18.6182 6.50317L20.1213 5L21.5355 6.41421L19.9788 7.97093C21.2474 9.64721 22 11.7357 22 14C22 19.5228 17.5228 24 12 24C6.47715 24 2 19.5228 2 14C2 8.47715 6.47715 4 12 4C14.5378 4 16.8549 4.94537 18.6182 6.50317ZM13 8V16H11V8H13Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path d="M8 0H16V2H8V0Z" fill="currentColor" />
+          <path d="M13 16V8H11V16H13Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M20.1213 5L18.6182 6.50317C16.8549 4.94537 14.5378 4 12 4C6.47715 4 2 8.47715 2 14C2 19.5228 6.47715 24 12 24C17.5228 24 22 19.5228 22 14C22 11.7357 21.2474 9.64721 19.9788 7.97093L21.5355 6.41421L20.1213 5ZM20 14C20 18.4183 16.4183 22 12 22C7.58172 22 4 18.4183 4 14C4 9.58172 7.58172 6 12 6C16.4183 6 20 9.58172 20 14Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/stroller-icon.tsx

@@ -0,0 +1,59 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function StrollerIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Stroller',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M15.6513 9.37651L21.9396 3.05707C20.2185 1.3445 17.9571 0.281287 15.5404 0.0484215C13.1774 -0.179268 10.8086 0.400638 8.81954 1.69078L15.6513 9.37651Z"
+            fill="currentColor"
+          />
+          <path
+            d="M7.20841 1.38673C6.45277 0.536029 5.35061 1.62098e-05 4.12326 1.62098e-05C1.88687 1.62098e-05 0.066146 1.77966 0 4.00002H2.00176C2.06652 2.88458 2.99159 2.00002 4.12326 2.00002C4.92037 2.00002 5.61497 2.43887 5.97864 3.08815V16C5.97864 17.1046 6.87407 18 7.97864 18H19.7518C20.6146 18 21.0724 16.9806 20.4992 16.3357L7.21128 1.38673H7.20841Z"
+            fill="currentColor"
+          />
+          <path
+            d="M9.97864 21.5C9.97864 22.8807 8.85935 24 7.47864 24C6.09793 24 4.97864 22.8807 4.97864 21.5C4.97864 20.1193 6.09793 19 7.47864 19C8.85935 19 9.97864 20.1193 9.97864 21.5Z"
+            fill="currentColor"
+          />
+          <path
+            d="M22.4786 21.5C22.4786 22.8807 21.3594 24 19.9786 24C18.5979 24 17.4786 22.8807 17.4786 21.5C17.4786 20.1193 18.5979 19 19.9786 19C21.3594 19 22.4786 20.1193 22.4786 21.5Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M21.9396 3.05707L15.6513 9.37651L8.81954 1.69078C9.40147 1.31332 10.0159 0.996663 10.6532 0.743233C12.1941 0.13044 13.8687 -0.112653 15.5404 0.0484215C17.2849 0.216515 18.9485 0.817267 20.3863 1.78261C20.9403 2.15459 21.4609 2.58071 21.9396 3.05707ZM18.9428 3.23322L15.7334 6.45852L12.0894 2.35894C13.1372 2.04438 14.2437 1.93274 15.3486 2.0392C16.6298 2.16265 17.857 2.57437 18.9428 3.23322Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.97864 3.08815V16C5.97864 17.1046 6.87407 18 7.97864 18H19.7518C20.6146 18 21.0724 16.9806 20.4992 16.3357L7.21128 1.38673H7.20841C6.45277 0.536029 5.35061 1.62159e-05 4.12326 1.62159e-05C1.88687 1.62159e-05 0.066146 1.77966 0 4.00002H2.00176C2.06652 2.88458 2.99159 2.00002 4.12326 2.00002C4.92037 2.00002 5.61497 2.43887 5.97864 3.08815ZM17.525 16L7.97864 5.26041V16H17.525Z"
+            fill="currentColor"
+          />
+          <path
+            d="M9.97864 21.5C9.97864 22.8807 8.85935 24 7.47864 24C6.09793 24 4.97864 22.8807 4.97864 21.5C4.97864 20.1193 6.09793 19 7.47864 19C8.85935 19 9.97864 20.1193 9.97864 21.5Z"
+            fill="currentColor"
+          />
+          <path
+            d="M22.4786 21.5C22.4786 22.8807 21.3594 24 19.9786 24C18.5979 24 17.4786 22.8807 17.4786 21.5C17.4786 20.1193 18.5979 19 19.9786 19C21.3594 19 22.4786 20.1193 22.4786 21.5Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/success-icon.tsx

@@ -1,16 +1,53 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function SuccessIcon({ 'aria-label': ariaLabel = 'Success', copyrightYear = '2020', ...props }: IconProps) {
+export function SuccessIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Success',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="nonzero"
-        d="M12 0c6.628 0 12 5.373 12 12s-5.372 12-12 12S0 18.627 0 12 5.372 0 12 0zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm6.064 4.137l1.4 1.399L8.6 18.4l-4.964-4.965 1.4-1.4L8.6 15.6l9.464-9.463z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <g clipPath="url(#clip0_2741_3411)">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M24 12C24 5.373 18.628 0 12 0C5.372 0 0 5.373 0 12C0 18.627 5.372 24 12 24C18.628 24 24 18.627 24 12ZM9.99519 14.5891L17.2923 7.29199L18.7023 8.71199L9.99519 17.4191L5.28809 12.712L6.69809 11.302L9.99519 14.5891Z"
+              fill="currentColor"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_2741_3411">
+              <rect width="24" height="24" fill="currentColor" />
+            </clipPath>
+          </defs>
+        </Fragment>
+      ) : (
+        <Fragment>
+          <g clipPath="url(#clip0_2741_3410)">
+            <path
+              d="M9.99519 14.5891L17.2923 7.29199L18.7023 8.71199L9.99519 17.4191L5.28809 12.712L6.69809 11.302L9.99519 14.5891Z"
+              fill="currentColor"
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M24 12C24 5.373 18.628 0 12 0C5.372 0 0 5.373 0 12C0 18.627 5.372 24 12 24C18.628 24 24 18.627 24 12ZM2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12Z"
+              fill="currentColor"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_2741_3410">
+              <rect width="24" height="24" fill="currentColor" />
+            </clipPath>
+          </defs>
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/super-icon.tsx

@@ -3,14 +3,29 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function SuperIcon({ 'aria-label': ariaLabel = 'Super', copyrightYear = '2020', ...props }: IconProps) {
+export function SuperIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Super',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M3.53466187,12.00015 L2.57142857,12.00015 C1.38987861,12.00015 1,12.75 1,13.5 C1,19.293 5.93758571,24 12.0056571,24 C18.0745143,24 23,19.2615064 23,13.5 C23,12.75 22.6083687,12.00015 21.4285714,12.00015 L20.4653381,12.00015 C20.4882799,11.6707392 20.5,11.3371409 20.5,11 C20.5,4.92486775 16.0009665,1.8189894e-12 12,0 C7.99903353,-1.81943589e-12 3.5,4.92486775 3.5,11 C3.5,11.3371409 3.51172012,11.6707392 3.53466187,12.00015 L3.53466187,12.00015 Z M5.53995504,12 C5.51357894,11.6722891 5.5,11.3386771 5.5,11 C5.5,6.24348282 8.96383884,2 12,2 C15.0361612,2 18.5,6.24348282 18.5,11 C18.5,11.3386771 18.4864211,11.6722891 18.460045,12 L5.53995504,12 L5.53995504,12 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.57143 12.0001H3.53466C3.51172 11.6707 3.5 11.3371 3.5 11C3.5 4.92487 7.99903 0 12 0C16.001 0 20.5 4.92487 20.5 11C20.5 11.3371 20.4883 11.6707 20.4653 12.0001H21.4286C22.6084 12.0001 23 12.75 23 13.5C23 19.2615 18.0745 24 12.0057 24C5.93759 24 1 19.293 1 13.5C1 12.75 1.38988 12.0001 2.57143 12.0001ZM5.5 11C5.5 11.3387 5.51358 11.6723 5.53996 12H18.46C18.4864 11.6723 18.5 11.3387 18.5 11C18.5 6.24348 15.0362 2 12 2C8.96384 2 5.5 6.24348 5.5 11Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M20.4653 12H21.4286C22.6084 12 23 12.7499 23 13.4999C23 19.2614 18.0745 23.9999 12.0057 23.9999C5.93759 23.9999 1 19.2929 1 13.4999C1 12.7499 1.38988 12 2.57143 12H3.53465C3.51172 11.6706 3.5 11.3371 3.5 11C3.5 4.92487 7.99903 0 12 0C16.001 0 20.5 4.92487 20.5 11C20.5 11.3371 20.4883 11.6706 20.4653 12ZM5.5 11C5.5 11.3387 5.51358 11.6723 5.53996 12H18.46C18.4864 11.6723 18.5 11.3387 18.5 11C18.5 6.24348 15.0362 2 12 2C8.96384 2 5.5 6.24348 5.5 11ZM12.0057 21.9999C7.13622 21.9999 3.28959 18.3794 3.01562 14H20.9842C20.7093 18.3576 16.8683 21.9999 12.0057 21.9999Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/switch-icon.tsx

@@ -3,13 +3,14 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function SwitchIcon({ 'aria-label': ariaLabel = 'Switch', copyrightYear = '2020', ...props }: IconProps) {
+export function SwitchIcon({ 'aria-label': ariaLabel = 'Switch', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
-        fill="currentColor"
         fillRule="evenodd"
-        d="M8,0 L2,5.985 L6,5.985 L6,14 L10,14 L10,5.985 L14,5.985 L8,0 Z M14,10 L14,18.015 L10,18.015 L16,24 L22,18.015 L18,18.015 L18,10 L14,10 Z"
+        clipRule="evenodd"
+        d="M2 5.985L8 0L14 5.985H10V14H6V5.985H2ZM14 18.015V10H18V18.015H22L16 24L10 18.015H14Z"
+        fill="currentColor"
       />
     </Icon>
   );

package/src/components/icon/components/tablet-icon.tsx

@@ -3,13 +3,14 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function TabletIcon({ 'aria-label': ariaLabel = 'Tablet', copyrightYear = '2020', ...props }: IconProps) {
+export function TabletIcon({ 'aria-label': ariaLabel = 'Tablet', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
-        fill="currentColor"
         fillRule="evenodd"
-        d="M4,1.77635684e-15 L20,1.77635684e-15 C21.1045695,1.57345071e-15 22,0.8954305 22,2 L22,22 C22,23.1045695 21.1045695,24 20,24 L4,24 C2.8954305,24 2,23.1045695 2,22 L2,2 L2,2 C2,0.8954305 2.8954305,1.97926296e-15 4,1.77635684e-15 L4,1.77635684e-15 Z M4,2 L4,18 L20,18 L20,2 L4,2 Z M12,22.5 C12.8284271,22.5 13.5,21.8284271 13.5,21 C13.5,20.1715729 12.8284271,19.5 12,19.5 C11.1715729,19.5 10.5,20.1715729 10.5,21 C10.5,21.8284271 11.1715729,22.5 12,22.5 Z"
+        clipRule="evenodd"
+        d="M2 2C2 0.89543 2.89543 0 4 0H20C21.1046 0 22 0.895431 22 2V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2ZM4 2H20V18H4V2ZM12 22.5C12.8284 22.5 13.5 21.8284 13.5 21C13.5 20.1716 12.8284 19.5 12 19.5C11.1716 19.5 10.5 20.1716 10.5 21C10.5 21.8284 11.1716 22.5 12 22.5Z"
+        fill="currentColor"
       />
     </Icon>
   );

package/src/components/icon/components/tag-icon.tsx

@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TagIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Tag',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0 10.4853C0 11.0157 0.210714 11.5244 0.585787 11.8995L12.0208 23.3345C12.8019 24.1156 14.0682 24.1156 14.8492 23.3345L23.3345 14.8492C24.1156 14.0682 24.1156 12.8019 23.3345 12.0208L11.8995 0.585787C11.5244 0.210714 11.0157 0 10.4853 0H2C0.895431 0 0 0.895428 0 2V10.4853ZM6.33168 3.85705C7.01509 4.54046 7.01509 5.6485 6.33168 6.33192C5.64826 7.01534 4.54022 7.01534 3.8568 6.33192C3.17338 5.6485 3.17338 4.54046 3.8568 3.85705C4.54022 3.17363 5.64826 3.17363 6.33168 3.85705Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M6.33156 6.33156C7.01498 5.64814 7.01498 4.5401 6.33156 3.85668C5.64814 3.17327 4.5401 3.17327 3.85668 3.85668C3.17327 4.5401 3.17327 5.64814 3.85668 6.33156C4.5401 7.01498 5.64814 7.01498 6.33156 6.33156Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0.585786 11.8995C0.210713 11.5244 2.10732e-08 11.0157 2.10734e-07 10.4853L0 2C1.68587e-07 0.895428 0.895431 -2.95028e-07 2 2.10734e-07L10.4853 0C11.0157 3.37175e-07 11.5244 0.210714 11.8995 0.585787L23.3345 12.0208C24.1156 12.8019 24.1156 14.0682 23.3345 14.8492L14.8492 23.3345C14.0682 24.1156 12.8019 24.1156 12.0208 23.3345L0.585786 11.8995ZM10.4853 2L21.9203 13.435L13.435 21.9203L2 10.4853L2 2L10.4853 2Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/takeout-coffee-icon.tsx

@@ -0,0 +1,41 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TakeoutCoffeeIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Takeout Coffee',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path d="M3 2H5L8 0H16L19 2H21L22 4H2L3 2Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3 5L5.01 22.23C5.13 23.23 5.97 24 7 24H17C18.03 24 18.87 23.23 18.99 22.23L21 5H3ZM12 20C10.34 20 9 18.66 9 17C9 15 12 11.6 12 11.6C12 11.6 15 15 15 17C15 18.66 13.66 20 12 20Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path d="M3 2H5L8 0H16L19 2H21L22 4H2L3 2Z" fill="currentColor" />
+          <path
+            d="M12 19.9996C10.34 19.9996 9 18.6596 9 16.9996C9 14.9996 12 11.5996 12 11.5996C12 11.5996 15 14.9996 15 16.9996C15 18.6596 13.66 19.9996 12 19.9996Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M18.99 22.23C18.87 23.23 18.03 24 17 24H7C5.97 24 5.13 23.23 5.01 22.23L3 5H21L18.99 22.23ZM6.99575 21.9917L5.24688 7H18.7531L17.0042 21.9917C17.0039 21.994 17.0032 21.9969 17.0032 21.9969L17.0025 21.9988L17.0018 22L17 22H7L6.99825 22L6.99754 21.9988L6.99678 21.9969C6.99678 21.9969 6.99608 21.994 6.99575 21.9917Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/takeout-food-icon.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TakeoutFoodIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Takeout Food',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16 2H8L3 7L3.15322 8.14916L1.41421 6.41016L0 7.82437L3.58835 11.4127L4.99996 22H19L20.4116 11.4127L24 7.82437L22.5858 6.41016L20.8468 8.14917L21 7L16 2ZM5.41771 10.0001H18.5823L18.8869 7.71535L15.1716 4H8.82843L5.11308 7.71535L5.41771 10.0001Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8 2H16L21 7L20.8468 8.14917L22.5858 6.41016L24 7.82437L20.4116 11.4127L19 22H4.99996L3.58835 11.4127L0 7.82437L1.41421 6.41016L3.15322 8.14916L3 7L8 2ZM5.68437 12.0001L6.751 20H17.2489L18.3156 12.0001H5.68437ZM18.5823 10.0001H5.41771L5.11308 7.71535L8.82843 4H15.1716L18.8869 7.71535L18.5823 10.0001Z"
+          fill="currentColor"
+        />
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/telephone-icon.tsx

@@ -3,13 +3,14 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function TelephoneIcon({ 'aria-label': ariaLabel = 'Telephone', copyrightYear = '2020', ...props }: IconProps) {
+export function TelephoneIcon({ 'aria-label': ariaLabel = 'Telephone', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
-        fill="currentColor"
         fillRule="evenodd"
-        d="M5.90003732,0 C5.72003732,0 5.53703732,0.0585 5.38403732,0.177 L3.66878732,1.497 L8.42303732,7.719 L10.1367873,6.40125 L10.1367873,6.39975 C10.5275373,6.099 10.5642873,5.56275 10.2897873,5.2035 L10.2912873,5.199 L6.56828732,0.33 C6.40028732,0.1125 6.15278732,0 5.90003732,0 L5.90003732,0 Z M17.7860373,15.55875 C17.6052873,15.55875 17.4230373,15.6165 17.2692873,15.73425 L15.5577873,17.05575 L20.2055373,23.1405 L21.9170373,21.82425 L21.9185373,21.82125 C22.3092873,21.51825 22.3467873,20.98425 22.0715373,20.625 L22.0715373,20.62125 L18.4505373,15.88875 C18.2862873,15.67125 18.0372873,15.55875 17.7860373,15.55875 L17.7860373,15.55875 Z M7.95578732,8.07975 C7.07303732,8.75775 7.68203732,9.97575 8.39828732,11.15175 C9.41528732,12.828 10.6445373,14.3565 11.7335373,15.51825 C12.9950373,16.86225 13.8027873,17.64075 14.4905373,17.64075 C14.7012873,17.64075 14.9015373,17.568 15.0987873,17.41575 L19.7352873,23.48625 C19.4300373,23.7315 18.7257873,24 17.6997873,24 C15.3327873,24 11.2542873,22.56675 6.43553732,16.09275 C-0.124712677,7.287 2.27153732,2.7555 3.19703732,1.85925 L7.95578732,8.07975 Z"
+        clipRule="evenodd"
+        d="M5.90004 0C5.72004 0 5.53704 0.0585 5.38404 0.177L3.66879 1.497L8.42304 7.719L10.1368 6.40125V6.39975C10.5275 6.099 10.5643 5.56275 10.2898 5.2035L10.2913 5.199L6.56829 0.33C6.40029 0.1125 6.15279 0 5.90004 0ZM17.786 15.5588C17.6053 15.5588 17.423 15.6165 17.2693 15.7343L15.5578 17.0557L20.2055 23.1405L21.917 21.8242L21.9185 21.8213C22.3093 21.5182 22.3468 20.9842 22.0715 20.625V20.6213L18.4505 15.8888C18.2863 15.6713 18.0373 15.5588 17.786 15.5588ZM8.39829 11.1517C7.68204 9.97575 7.07304 8.75775 7.95579 8.07975L3.19704 1.85925C2.27154 2.7555 -0.124712 7.287 6.43554 16.0927C11.2543 22.5667 15.3328 24 17.6998 24C18.7258 24 19.43 23.7315 19.7353 23.4862L15.0988 17.4158C14.9015 17.568 14.7013 17.6407 14.4905 17.6407C13.8028 17.6407 12.995 16.8623 11.7335 15.5183C10.6445 14.3565 9.41529 12.828 8.39829 11.1517Z"
+        fill="currentColor"
       />
     </Icon>
   );

package/src/components/icon/components/thumb-down-icon.tsx

@@ -1,16 +1,34 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function ThumbDownIcon({ 'aria-label': ariaLabel = 'Thumb Down', copyrightYear = '2020', ...props }: IconProps) {
+export function ThumbDownIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Thumb Down',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M16,4 L7,4 C6.17,4 5.46,4.5 5.16,5.22 L2.14,12.27 C2.05,12.5 2,13.5 2,14 C2,15.5 2.5,16 4,16 L10,16 L9.36,21.57 L9.33,21.89 C9.33,22.3 9.5,22.68 9.77,22.95 L10.83,24 L17.42,17.41 C17.78,17.05 18,16.55 18,16 L18,6 C18,4.9 17.1,4 16,4 Z M20,4 L20,16 L24,16 L24,4 L20,4 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7 4H16C17.1 4 18 4.9 18 6V16C18 16.55 17.78 17.05 17.42 17.41L10.83 24L9.77 22.95C9.5 22.68 9.33 22.3 9.33 21.89L9.36 21.57L10 16H4C2.5 16 2 15.5 2 14C2 13.5 2.05 12.5 2.14 12.27L5.16 5.22C5.46 4.5 6.17 4 7 4ZM20 16V4H24V16H20Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10 16L9.36 21.57L9.33 21.89C9.33 22.1163 9.38178 22.3334 9.47358 22.528C9.52714 22.6415 9.59431 22.7473 9.67276 22.8428C9.70349 22.8801 9.73595 22.9159 9.77 22.95L10.83 24L17.42 17.41C17.78 17.05 18 16.55 18 16V6C18 4.9 17.1 4 16 4H7C6.17 4 5.46 4.5 5.16 5.22L2.14 12.27C2.05 12.5 2 13.5 2 14C2 15.5 2.5 16 4 16H10ZM4.05774 12.8724L7.00165 6H16V16L15.9999 16.0016L11.4954 20.5062L12.243 14H4C4 13.8005 4.01059 13.472 4.03142 13.1726C4.0399 13.0508 4.04904 12.9491 4.05774 12.8724Z"
+            fill="currentColor"
+          />
+          <path d="M20 16V4H24V16H20Z" fill="currentColor" />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/thumb-up-icon.tsx

@@ -1,17 +1,34 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function ThumbUpIcon({ 'aria-label': ariaLabel = 'Thumb Up', copyrightYear = '2020', ...props }: IconProps) {
+export function ThumbUpIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Thumb Up',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M14,0 L5,0 C4.17,0 3.46,0.5 3.16,1.22 L0.14,8.27 C0.05,8.5 0,9.5 0,10 C7.34788079e-17,11.5 0.5,12 2,12 L8,12 L7.36,17.57 L7.33,17.89 C7.33,18.3 7.5,18.68 7.77,18.95 L8.83,20 L15.42,13.41 C15.78,13.05 16,12.55 16,12 L16,2 C16,0.9 15.1,0 14,0 Z M18,0 L18,12 L22,12 L22,0 L18,0 Z"
-        transform="rotate(180 11 10)"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17 20H8C6.9 20 6 19.1 6 18V8C6 7.45 6.22 6.95 6.58 6.59L13.17 0L14.23 1.05C14.5 1.32 14.67 1.7 14.67 2.11L14.64 2.43L14 8H20C21.5 8 22 8.5 22 10C22 10.5 21.95 11.5 21.86 11.73L18.84 18.78C18.54 19.5 17.83 20 17 20ZM4 8V20H0V8H4Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M14 8L14.64 2.43L14.67 2.11C14.67 1.88372 14.6182 1.66657 14.5264 1.47201C14.4729 1.35851 14.4057 1.2527 14.3272 1.15724C14.2965 1.11985 14.2641 1.08405 14.23 1.05L13.17 0L6.58 6.59C6.22 6.95 6 7.45 6 8V18C6 19.1 6.9 20 8 20H17C17.83 20 18.54 19.5 18.84 18.78L21.86 11.73C21.95 11.5 22 10.5 22 10C22 8.5 21.5 8 20 8H14ZM19.9423 11.1276L16.9984 18H8V8L8.00007 7.99836L12.5046 3.49382L11.757 10H20C20 10.1995 19.9894 10.528 19.9686 10.8274C19.9601 10.9492 19.951 11.0509 19.9423 11.1276Z"
+            fill="currentColor"
+          />
+          <path d="M4 8V20H0V8H4Z" fill="currentColor" />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/tick-circle-icon.tsx

@@ -1,16 +1,53 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function TickCircleIcon({ 'aria-label': ariaLabel = 'Tick', copyrightYear = '2021', ...props }: IconProps) {
+export function TickCircleIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Tick Circle',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M12 0c6.628 0 12 5.373 12 12s-5.372 12-12 12S0 18.627 0 12 5.372 0 12 0zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm6.064 4.137l1.4 1.399L8.6 18.4l-4.964-4.965 1.4-1.4L8.6 15.6l9.464-9.463z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <g clipPath="url(#clip0_2741_3297)">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M24 12C24 5.373 18.628 0 12 0C5.372 0 0 5.373 0 12C0 18.627 5.372 24 12 24C18.628 24 24 18.627 24 12ZM9.99519 14.5891L17.2923 7.29199L18.7023 8.71199L9.99519 17.4191L5.28809 12.712L6.69809 11.302L9.99519 14.5891Z"
+              fill="currentColor"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_2741_3297">
+              <rect width="24" height="24" fill="currentColor" />
+            </clipPath>
+          </defs>
+        </Fragment>
+      ) : (
+        <Fragment>
+          <g clipPath="url(#clip0_2741_3296)">
+            <path
+              d="M9.99519 14.5891L17.2923 7.29199L18.7023 8.71199L9.99519 17.4191L5.28809 12.712L6.69809 11.302L9.99519 14.5891Z"
+              fill="currentColor"
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M24 12C24 5.373 18.628 0 12 0C5.372 0 0 5.373 0 12C0 18.627 5.372 24 12 24C18.628 24 24 18.627 24 12ZM2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12Z"
+              fill="currentColor"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_2741_3296">
+              <rect width="24" height="24" fill="currentColor" />
+            </clipPath>
+          </defs>
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/tick-icon.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function TickIcon({ 'aria-label': ariaLabel = 'Tick', copyrightYear = '2020', ...props }: IconProps) {
+export function TickIcon({ 'aria-label': ariaLabel = 'Tick', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <polygon fill="currentColor" fillRule="evenodd" points="8.6 15.6 4.4 11.4 3 12.8 8.6 18.4 20.6 6.4 19.2 5" />
+      <path d="M8.6 15.6L4.4 11.4L3 12.8L8.6 18.4L20.6 6.4L19.2 5L8.6 15.6Z" fill="currentColor" />
     </Icon>
   );
 }