@westpac/ui 0.1.0 → 0.2.0

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

@@ -1,16 +1,40 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function EftposIcon({ 'aria-label': ariaLabel = 'Eftpos', copyrightYear = '2020', ...props }: IconProps) {
+export function EftposIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Eftpos',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M14,18 L14,22 L16,22 L16,18 L18,18 L18,23 C18,23.5522847 17.5522847,24 17,24 L7,24 C6.44771525,24 6,23.5522847 6,23 L6,18 L14,18 Z M6,0 L18,0 C19.1045695,-2.02906125e-16 20,0.8954305 20,2 L20,14 C20,15.1045695 19.1045695,16 18,16 L6,16 C4.8954305,16 4,15.1045695 4,14 L4,2 C4,0.8954305 4.8954305,2.02906125e-16 6,0 Z M6,2 L6,8 L18,8 L18,2 L6,2 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2 2C2 0.89543 2.89543 0 4 0H20C21.1046 0 22 0.895431 22 2V16C22 17.1046 21.1046 18 20 18H4C2.89543 18 2 17.1046 2 16V2ZM20 2H4V8H20V2ZM17.25 14L15 11L12.75 14H17.25Z"
+            fill="currentColor"
+          />
+          <path
+            d="M14 19H6V23C6 23.5523 6.44771 24 7 24H17C17.5523 24 18 23.5523 18 23V19H16V22H14V19Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path d="M12.75 14L15 11L17.25 14H12.75Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4 0C2.89543 0 2 0.89543 2 2V16C2 17.1046 2.89543 18 4 18H6V23C6 23.5523 6.44771 24 7 24H17C17.5523 24 18 23.5523 18 23V18H20C21.1046 18 22 17.1046 22 16V2C22 0.895431 21.1046 0 20 0H4ZM20 2H4V8H20V2ZM16 22V18H14V22H16ZM4 10H20V16H4V10ZM12 18H8V22H12V18Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/email-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 EmailIcon({ 'aria-label': ariaLabel = 'Email', copyrightYear = '2020', ...props }: IconProps) {
+export function EmailIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Email',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M2,2 L22,2 C23.1045695,2 24,2.8954305 24,4 L24,20 C24,21.1045695 23.1045695,22 22,22 L2,22 C0.8954305,22 -1.64108609e-15,21.1045695 -1.77635684e-15,20 L-1.77635684e-15,4 C-1.91162759e-15,2.8954305 0.8954305,2 2,2 Z M22,9 L22,6 L12,12 L2,6 L2,9 L12,15 L22,9 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 2H22C23.1046 2 24 2.89543 24 4V20C24 21.1046 23.1046 22 22 22H2C0.89543 22 0 21.1046 0 20V4C0 2.89543 0.89543 2 2 2ZM2 6.40625V8.68443L12 14.139L22 8.68443V6.40625L12 11.8608L2 6.40625Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 2H22C23.1046 2 24 2.89543 24 4V20C24 21.1046 23.1046 22 22 22H2C0.89543 22 0 21.1046 0 20V4C0 2.89543 0.89543 2 2 2ZM2 4H22V6.40633L12 11.8609L2 6.40633V4ZM2 8.68451V20H22V8.68451L12 14.1391L2 8.68451Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

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

@@ -1,16 +1,35 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function ErrorIcon({ 'aria-label': ariaLabel = 'Error', copyrightYear = '2020', ...props }: IconProps) {
+export function ErrorIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Error',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M24,12 C24,18.627 18.62775,24 12,24 C5.37225,24 0,18.627 0,12 C0,5.373 5.37225,0 12,0 C18.62775,0 24,5.373 24,12 Z M12,2 C6.47714286,2 2,6.47714286 2,12 C2,17.5228571 6.47714286,22 12,22 C17.5228571,22 22,17.5228571 22,12 C22,6.47714286 17.5228571,2 12,2 Z M11,14 L11,6 L13,6 L13,14 L11,14 Z M11,18 L11,16 L13,16 L13,18 L11,18 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M24 12C24 18.627 18.6278 24 12 24C5.37225 24 0 18.627 0 12C0 5.373 5.37225 0 12 0C18.6278 0 24 5.373 24 12ZM13 14V6H11V14H13ZM13 16V18H11V16H13Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M13 14V6H11V14H13Z" fill="currentColor" />
+          <path d="M13 16V18H11V16H13Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12 24C18.6278 24 24 18.627 24 12C24 5.373 18.6278 0 12 0C5.37225 0 0 5.373 0 12C0 18.627 5.37225 24 12 24ZM2 12C2 6.47714 6.47714 2 12 2C17.5229 2 22 6.47714 22 12C22 17.5229 17.5229 22 12 22C6.47714 22 2 17.5229 2 12Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/excel-file-icon.tsx

@@ -1,16 +1,37 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function ExcelFileIcon({ 'aria-label': ariaLabel = 'Excel File', copyrightYear = '2020', ...props }: IconProps) {
+export function ExcelFileIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Excel File',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M4,0 L16,0 L22,6 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,2.02906125e-16 4,0 L4,0 Z M4,2 L4,22 L20,22 L20,6 L16,6 L16,2 L4,2 Z M14.2810673,8 L17.5044473,8 L13.6414231,13.68275 L18,20 L14.6546379,20 L12,16.0955 L10.8053367,17.8535 L12.2485388,17.8535 L12.2485388,20 L6,20 L10.3593393,13.68275 L6.49555273,8 L9.71893266,8 L12,11.30525 L14.2810673,8 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 2C2 0.89543 2.89543 0 4 0H16L22 6V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2ZM16 2L20 6H16V2ZM14.2811 8L12 11.3053L9.71893 8H6.49555L10.3593 13.6828L6 20H12.2485V17.8535H10.8053L12 16.0955L14.6546 20H18L13.6414 13.6828L17.5044 8H14.2811Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M12 11.3053L14.2811 8H17.5044L13.6414 13.6828L18 20H14.6546L12 16.0955L10.8053 17.8535H12.2485V20H6L10.3593 13.6828L6.49555 8H9.71893L12 11.3053Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2 2C2 0.89543 2.89543 0 4 0H16L22 6V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2ZM4 2H16V6H20V22H4V2Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -3,13 +3,16 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function ExitIcon({ 'aria-label': ariaLabel = 'Exit', copyrightYear = '2020', ...props }: IconProps) {
+export function ExitIcon({ 'aria-label': ariaLabel = 'Exit', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
+        d="M0 12C0 5.373 5.37225 0 12 0V2C6.47714 2 2 6.47714 2 12C2 17.5229 6.47714 22 12 22C17.5229 22 22 17.5229 22 12H24C24 18.627 18.6278 24 12 24C5.37225 24 0 18.627 0 12Z"
+        fill="currentColor"
+      />
+      <path
+        d="M22.0144 8V3.41682L12.4142 13.017L11 11.6028L20.6028 2H16.0144V0H24.0144V8H22.0144Z"
         fill="currentColor"
-        fillRule="evenodd"
-        d="M22.0144284,3.41682007 L12.4142136,13.0170349 L11,11.6028214 L20.6028214,2 L16.0144284,2 L16.0144284,0 L24.0144284,0 L24.0144284,8 L22.0144284,8 L22.0144284,3.41682007 Z M12,0 L12,2 C6.47714286,2 2,6.47714286 2,12 C2,17.5228571 6.47714286,22 12,22 C17.5228571,22 22,17.5228571 22,12 L24,12 C24,18.627 18.62775,24 12,24 C5.37225,24 0,18.627 0,12 C0,5.373 5.37225,0 12,0 Z"
       />
     </Icon>
   );

package/src/components/icon/components/expand-less-icon.tsx

@@ -5,12 +5,12 @@ import { type IconProps } from '../icon.types.js';
 
 export function ExpandLessIcon({
   'aria-label': ariaLabel = 'Expand Less',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <polygon fill="currentColor" fillRule="evenodd" points="12 9.824 18.588 16.412 20 15 12 7 4 15 5.412 16.412" />
+      <path d="M12 9.82435L18.5878 16.4121L20 15L12 7L4 15L5.41218 16.4122L12 9.82435Z" fill="currentColor" />
     </Icon>
   );
 }

package/src/components/icon/components/expand-more-icon.tsx

@@ -5,12 +5,12 @@ import { type IconProps } from '../icon.types.js';
 
 export function ExpandMoreIcon({
   'aria-label': ariaLabel = 'Expand More',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <polygon fill="currentColor" fillRule="evenodd" points="12 13.588 5.412 7 4 8.412 12 16.412 20 8.412 18.588 7" />
+      <path d="M12 13.5879L5.41218 7.00006L4 8.41223L12 16.4122L20 8.41218L18.5878 7L12 13.5879Z" fill="currentColor" />
     </Icon>
   );
 }

package/src/components/icon/components/face-happy-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 FaceHappyIcon({ 'aria-label': ariaLabel = 'Face Happy', copyrightYear = '2020', ...props }: IconProps) {
+export function FaceHappyIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Face Happy',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M24,12 C24,18.627 18.62775,24 12,24 C5.37225,24 0,18.627 0,12 C0,5.373 5.37225,0 12,0 C18.62775,0 24,5.373 24,12 Z M12,2 C6.47714286,2 2,6.47714286 2,12 C2,17.5228571 6.47714286,22 12,22 C17.5228571,22 22,17.5228571 22,12 C22,6.47714286 17.5228571,2 12,2 Z M5,16.0142014 L5,16.0142014 L6.72414236,15 C7.767498,16.7698831 9.6933545,17.9573958 11.8965695,17.9573958 C14.0997844,17.9573958 16.0256409,16.7698831 17.0689965,15 L18.7931389,16.0142014 C17.4019981,18.3740455 14.8341894,19.9573958 11.8965695,19.9573958 C8.95894951,19.9573958 6.39114084,18.3740455 5,16.0142014 Z M15,8.25 C15,9.07875 15.67125,9.75 16.5,9.75 C17.32875,9.75 18,9.07875 18,8.25 C18,7.42125 17.32875,6.75 16.5,6.75 C15.67125,6.75 15,7.42125 15,8.25 M6,8.25 C6,7.42125 6.67125,6.75 7.5,6.75 C8.32875,6.75 9,7.42125 9,8.25 C9,9.07875 8.32875,9.75 7.5,9.75 C6.67125,9.75 6,9.07875 6,8.25"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 24C18.6278 24 24 18.627 24 12C24 5.373 18.6278 0 12 0C5.37225 0 0 5.373 0 12C0 18.627 5.37225 24 12 24ZM11.8966 19.9574C8.95895 19.9574 6.39114 18.374 5 16.0142L6.72414 15C7.7675 16.7699 9.69335 17.9574 11.8966 17.9574C14.0998 17.9574 16.0256 16.7699 17.069 15L18.7931 16.0142C17.402 18.374 14.8342 19.9574 11.8966 19.9574ZM15 8.25C15 9.07875 15.6713 9.75 16.5 9.75C17.3288 9.75 18 9.07875 18 8.25C18 7.42125 17.3288 6.75 16.5 6.75C15.6713 6.75 15 7.42125 15 8.25ZM7.5 6.75C6.67125 6.75 6 7.42125 6 8.25C6 9.07875 6.67125 9.75 7.5 9.75C8.32875 9.75 9 9.07875 9 8.25C9 7.42125 8.32875 6.75 7.5 6.75Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M24 12C24 18.627 18.6278 24 12 24C5.37225 24 0 18.627 0 12C0 5.373 5.37225 0 12 0C18.6278 0 24 5.373 24 12ZM12 2C6.47714 2 2 6.47714 2 12C2 17.5229 6.47714 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47714 17.5229 2 12 2ZM11.8966 19.9574C8.95895 19.9574 6.39114 18.374 5 16.0142L6.72414 15C7.7675 16.7699 9.69335 17.9574 11.8966 17.9574C14.0998 17.9574 16.0256 16.7699 17.069 15L18.7931 16.0142C17.402 18.374 14.8342 19.9574 11.8966 19.9574ZM15 8.25C15 9.07875 15.6713 9.75 16.5 9.75C17.3288 9.75 18 9.07875 18 8.25C18 7.42125 17.3288 6.75 16.5 6.75C15.6713 6.75 15 7.42125 15 8.25ZM7.5 6.75C6.67125 6.75 6 7.42125 6 8.25C6 9.07875 6.67125 9.75 7.5 9.75C8.32875 9.75 9 9.07875 9 8.25C9 7.42125 8.32875 6.75 7.5 6.75Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

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

@@ -1,16 +1,37 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function FacebookIcon({ 'aria-label': ariaLabel = 'Facebook', copyrightYear = '2020', ...props }: IconProps) {
+export function FacebookIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Facebook',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M2,0 L22,0 C23.1045695,-2.02906125e-16 24,0.8954305 24,2 L24,22 C24,23.1045695 23.1045695,24 22,24 L2,24 C0.8954305,24 1.3527075e-16,23.1045695 0,22 L0,2 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L2,0 Z M20.7142857,9.14285714 L16.4285714,9.14285714 L16.4285714,7 C16.4285714,6.07642857 16.5514286,5.57 17.5,5.57142857 L20.7142857,5.57142857 L20.7142857,2 L16.7828571,2 C13.3885714,2 12.1428571,3.42857143 12.1428571,6.64285714 L12.1428571,9.14285714 L10,9.14285714 L10,12 L12.1428571,12 L12.1428571,22 L16.4285714,22 L16.4285714,12 L20,12 L20.7142857,9.14285714 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM16.6429 9.71429H20.0714L19.5 12H16.6429V20H13.2143V12H11.5V9.71429H13.2143V7.71429C13.2143 5.14286 14.2109 4 16.9263 4H20.0714V6.85714H17.5C16.7411 6.856 16.6429 7.26114 16.6429 8V9.71429Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path
+            d="M16.6429 9.71429H20.0714L19.5 12H16.6429V20H13.2143V12H11.5V9.71429H13.2143V7.71429C13.2143 5.14286 14.2109 4 16.9263 4H20.0714V6.85714H17.5C16.7411 6.856 16.6429 7.26114 16.6429 8V9.71429Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2ZM2 2H22V22H2V2Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

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

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function FavoriteIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Favorite',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          d="M12 23L10.26 21.4174C4.08 15.8185 0 12.1259 0 7.59401C0 3.90136 2.904 1 6.6 1C8.688 1 10.692 1.97112 12 3.50572C13.308 1.97112 15.312 1 17.4 1C21.096 1 24 3.90136 24 7.59401C24 12.1259 19.92 15.8185 13.74 21.4294L12 23Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10.26 21.4174L12 23L13.74 21.4294L13.7874 21.3864C19.9408 15.7996 24 12.1143 24 7.59401C24 3.90136 21.096 1 17.4 1C16.0016 1 14.6408 1.43561 13.5016 2.18436C12.9398 2.55357 12.432 2.99892 12 3.50572C11.568 2.99892 11.0602 2.55357 10.4984 2.18436C9.35919 1.43561 7.99844 1 6.6 1C2.904 1 0 3.90136 0 7.59401C0 12.1222 4.07331 15.8125 10.2448 21.4037L10.26 21.4174ZM12.3956 19.9487C12.3963 19.948 12.397 19.9474 12.3977 19.9468C15.5274 17.1053 17.9624 14.8906 19.6395 12.8407C21.2941 10.8183 22 9.20241 22 7.59401C22 5.00765 19.9931 3 17.4 3C15.9169 3 14.4627 3.69955 13.5221 4.80308L12 6.58891L10.4779 4.80308C9.5373 3.69955 8.08311 3 6.6 3C4.00686 3 2 5.00764 2 7.59401C2 9.20238 2.70594 10.8182 4.36004 12.8387C6.03705 14.8871 8.47254 17.0993 11.6028 19.9353L11.6057 19.9379L12.0051 20.3011L12.3956 19.9487Z"
+          fill="currentColor"
+        />
+      )}
+    </Icon>
+  );
+}

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

@@ -3,14 +3,16 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function FilterIcon({ 'aria-label': ariaLabel = 'Filter', copyrightYear = '2020', ...props }: IconProps) {
+export function FilterIcon({ 'aria-label': ariaLabel = 'Filter', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M2,12 L2,10 L4,10 L4,12 L2,12 Z M2,16 L2,14 L4,14 L4,16 L2,16 Z M2,8 L2,6 L4,6 L4,8 L2,8 Z M6,12 L6,10 L22,10 L22,12 L6,12 Z M6,16 L6,14 L22,14 L22,16 L6,16 Z M6,6 L22,6 L22,8 L6,8 L6,6 Z M16,18 L22,18 L19,21 L16,18 Z"
-      />
+      <path d="M4 8H2V6H4V8Z" fill="currentColor" />
+      <path d="M2 12H4V10H2V12Z" fill="currentColor" />
+      <path d="M2 16H4V14H2V16Z" fill="currentColor" />
+      <path d="M6 12H22V10H6V12Z" fill="currentColor" />
+      <path d="M22 16H6V14H22V16Z" fill="currentColor" />
+      <path d="M6 6V8H22V6H6Z" fill="currentColor" />
+      <path d="M19 21L16 18H22L19 21Z" fill="currentColor" />
     </Icon>
   );
 }

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

@@ -1,20 +1,63 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
 export function FingerprintIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Fingerprint',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M15.2452008,23.9699311 C13.3415488,23.4431343 12.0839842,22.7324518 10.7695209,21.4421031 C9.08009938,19.7647488 8.15161172,17.5319571 8.15161172,15.1448276 C8.15161172,13.128635 9.865476,11.4916256 11.9703309,11.4916256 C14.0751859,11.4916256 15.7890501,13.128635 15.7890501,15.1448276 C15.7890501,16.310142 16.8076746,17.2610837 18.0708235,17.2610837 C19.3339725,17.2610837 20.3525969,16.310142 20.3525969,15.1448276 C20.3525969,10.7887822 16.5926717,7.24729064 11.9585083,7.24729064 C8.66455553,7.24729064 5.65561228,9.08009972 4.3035135,11.9114156 C3.85459564,12.8437834 3.62353291,13.9406002 3.62353291,15.1448276 C3.62353291,16.5035435 3.82095577,17.7947957 4.40383065,19.3491466 C4.55801258,19.7500196 4.35580234,20.1977708 3.9591154,20.3349775 C3.56273512,20.4874315 3.11343448,20.2796903 2.97270327,19.8887302 C2.3857201,18.3194487 2.09840975,16.7614565 2.09840975,15.1448276 C2.09840975,13.7032432 2.37479458,12.3881374 2.91960918,11.2379745 C4.52272447,7.87504847 8.0744351,5.69852217 11.9585083,5.69852217 C17.4344468,5.69852217 21.8895428,9.92620323 21.8895428,15.1330049 C21.8895428,17.1491975 20.1756785,18.7862069 18.0708235,18.7862069 C15.9659686,18.7862069 14.2521043,17.1491975 14.2521043,15.1330049 C14.2521043,13.9676905 13.2334799,13.0167488 11.9703309,13.0167488 C10.707182,13.0167488 9.68855754,13.9676905 9.68855754,15.1330049 C9.68855754,17.1111287 10.4525945,18.9562932 11.8467881,20.3389647 C12.9536273,21.4341529 14.0052857,22.0304282 15.6325705,22.4805523 C16.0433544,22.5870518 16.2825782,23.0128702 16.1751504,23.4110713 C16.10017,23.7559809 15.7870889,24 15.446193,24 C15.3871178,24 15.3215088,23.9890652 15.2452008,23.9699311 Z M14.0580187,20.4817689 C12.2476626,19.2546147 11.1663901,17.2607084 11.1663901,15.1448276 C11.1663901,14.715851 11.5058864,14.3763547 11.934863,14.3763547 C12.3638396,14.3763547 12.7033359,14.715851 12.7033359,15.1448276 C12.7033359,16.7559563 13.5279366,18.2718577 14.9189155,19.2067786 C15.7253537,19.7519763 16.6710589,20.0157635 17.8225477,20.0157635 C18.1358491,20.0157635 18.60117,19.9737554 19.0198126,19.9005017 C19.4380485,19.8230506 19.8363993,20.1028446 19.9121938,20.5273142 C19.9896448,20.9455501 19.7098508,21.3439009 19.286693,21.4194473 C18.7419789,21.5245676 18.2162926,21.564532 17.8225477,21.564532 C16.3788255,21.564532 15.1030374,21.1987036 14.0580187,20.4817689 Z M9.34570039,23.7517241 C9.13729082,23.7517241 8.93767779,23.668552 8.80650904,23.5224426 C7.67216381,22.3880973 7.14773141,21.7114104 6.40088685,20.3626258 C5.57189943,18.8848656 5.1368334,17.08289 5.1368334,15.1448276 C5.1368334,11.5330947 8.22156712,8.59507389 12.0057989,8.59507389 C15.7900307,8.59507389 18.8747644,11.5330947 18.8747644,15.1448276 C18.8747644,15.5738042 18.5352681,15.9133005 18.1062915,15.9133005 C17.6773149,15.9133005 17.3378186,15.5738042 17.3378186,15.1448276 C17.3378186,12.3836767 14.9480883,10.1320197 12.0057989,10.1320197 C9.06350952,10.1320197 6.67377921,12.3836767 6.67377921,15.1448276 C6.67377921,16.8201822 7.04583598,18.3619855 7.75090606,19.6103135 C8.42130815,20.8149422 8.8509643,21.3609245 9.91171015,22.4354927 C10.2013655,22.740393 10.2013655,23.2142868 9.90243055,23.5282652 C9.74258611,23.6735784 9.54722166,23.7517241 9.34570039,23.7517241 Z M1.51240817,9.3436088 C1.16082907,9.09903204 1.08058459,8.62228542 1.32701381,8.26805263 C2.51491291,6.58819532 4.02694155,5.26932003 5.82399619,4.3468324 C9.59225071,2.40270109 14.4054504,2.39598343 18.1754561,4.33484356 C19.9766441,5.25945342 21.4871851,6.56798597 22.6713876,8.23066906 C22.9205255,8.57323366 22.8387851,9.06367608 22.487367,9.30814082 C22.1342524,9.55378575 21.6575058,9.47354127 21.4142009,9.12376638 C20.3654553,7.65552257 19.0388769,6.50464997 17.4697815,5.70266779 C14.1243584,3.98915838 9.84593625,3.99243185 6.51848445,5.7143295 C4.94525801,6.52407841 3.61602962,7.68349348 2.57159573,9.14414287 C2.44745565,9.361388 2.21528381,9.4817734 1.95653783,9.4817734 C1.80154047,9.4817734 1.64935119,9.43494593 1.51240817,9.3436088 Z M18.8747644,3.27487685 C18.7482608,3.27487685 18.6235774,3.24270048 18.5215703,3.18422125 C16.276614,2.02666565 14.3418192,1.53694581 12.0176216,1.53694581 C9.69601158,1.53694581 7.50432578,2.09001552 5.51686391,3.18253454 C5.14876443,3.38192176 4.68898713,3.24586521 4.47252546,2.87461179 C4.27202395,2.50445514 4.41087066,2.03046119 4.7802863,1.83036115 C7.01156446,0.618753123 9.45337557,0 12.0176216,0 C14.5626231,0 16.7894371,0.561642557 19.2285019,1.8170453 C19.6098658,2.01535456 19.7529399,2.4779606 19.5535791,2.84581128 C19.419777,3.11341553 19.1605891,3.27487685 18.8747644,3.27487685 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M18.5216 3.18422C18.6236 3.2427 18.7483 3.27488 18.8748 3.27488C19.1606 3.27488 19.4198 3.11342 19.5536 2.84581C19.7529 2.47796 19.6099 2.01535 19.2285 1.81705C16.7894 0.561643 14.5626 0 12.0176 0C9.45338 0 7.01157 0.618753 4.78029 1.83036C4.41088 2.03046 4.27203 2.50446 4.47253 2.87461C4.689 3.24587 5.14877 3.38192 5.51687 3.18253C7.50433 2.09002 9.69602 1.53695 12.0176 1.53695C14.3418 1.53695 16.2766 2.02667 18.5216 3.18422Z"
+            fill="currentColor"
+          />
+          <path
+            d="M1.51242 9.34361C1.16084 9.09903 1.08059 8.62228 1.32702 8.26805C2.51492 6.58819 4.02695 5.26932 5.824 4.34683C9.59226 2.4027 14.4055 2.39598 18.1755 4.33484C19.9767 5.25945 21.4872 6.56799 22.6714 8.23067C22.9205 8.57323 22.8388 9.06368 22.4874 9.30814C22.1343 9.55379 21.6575 9.47354 21.4142 9.12377C20.3655 7.65552 19.0389 6.50465 17.4698 5.70267C14.1244 3.98916 9.84595 3.99243 6.51849 5.71433C4.94527 6.52408 3.61604 7.68349 2.5716 9.14414C2.44746 9.36139 2.21529 9.48177 1.95655 9.48177C1.80155 9.48177 1.64936 9.43495 1.51242 9.34361Z"
+            fill="currentColor"
+          />
+          <path
+            d="M15.2452 23.9699C13.3416 23.4431 12.084 22.7325 10.7695 21.4421C9.08011 19.7647 8.15162 17.532 8.15162 15.1448C8.15162 13.1286 9.86549 11.4916 11.9703 11.4916C14.0752 11.4916 15.7891 13.1286 15.7891 15.1448C15.7891 16.3101 16.8077 17.2611 18.0708 17.2611C19.334 17.2611 20.3526 16.3101 20.3526 15.1448C20.3526 10.7888 16.5927 7.24729 11.9585 7.24729C8.66456 7.24729 5.65562 9.0801 4.30352 11.9114C3.8546 12.8438 3.62354 13.9406 3.62354 15.1448C3.62354 16.5035 3.82096 17.7948 4.40384 19.3491C4.55802 19.75 4.35581 20.1978 3.95912 20.335C3.56274 20.4874 3.11344 20.2797 2.97271 19.8887C2.38573 18.3194 2.09842 16.7615 2.09842 15.1448C2.09842 13.7032 2.3748 12.3881 2.91962 11.238C4.52273 7.87505 8.07444 5.69852 11.9585 5.69852C17.4345 5.69852 21.8896 9.9262 21.8896 15.133C21.8896 17.1492 20.1757 18.7862 18.0708 18.7862C15.966 18.7862 14.2521 17.1492 14.2521 15.133C14.2521 13.9677 13.2335 13.0167 11.9703 13.0167C10.7072 13.0167 9.68857 13.9677 9.68857 15.133C9.68857 17.1111 10.4526 18.9563 11.8468 20.339C12.9536 21.4342 14.0053 22.0304 15.6326 22.4806C16.0434 22.5871 16.2826 23.0129 16.1752 23.4111C16.1002 23.756 15.7871 24 15.4462 24C15.3871 24 15.3215 23.9891 15.2452 23.9699Z"
+            fill="currentColor"
+          />
+          <path
+            d="M14.058 20.4818C12.2477 19.2546 11.1664 17.2607 11.1664 15.1448C11.1664 14.7159 11.5059 14.3764 11.9349 14.3764C12.3638 14.3764 12.7033 14.7159 12.7033 15.1448C12.7033 16.756 13.5279 18.2719 14.9189 19.2068C15.7254 19.752 16.6711 20.0158 17.8226 20.0158C18.1359 20.0158 18.6012 19.9738 19.0198 19.9005C19.4381 19.8231 19.8364 20.1028 19.9122 20.5273C19.9897 20.9456 19.7099 21.3439 19.2867 21.4194C18.742 21.5246 18.2163 21.5645 17.8226 21.5645C16.3788 21.5645 15.103 21.1987 14.058 20.4818Z"
+            fill="currentColor"
+          />
+          <path
+            d="M8.80652 23.5224C8.93769 23.6686 9.1373 23.7517 9.34571 23.7517C9.54723 23.7517 9.74259 23.6736 9.90244 23.5283C10.2014 23.2143 10.2014 22.7404 9.91172 22.4355C8.85097 21.3609 8.42132 20.8149 7.75091 19.6103C7.04584 18.362 6.67379 16.8202 6.67379 15.1448C6.67379 12.3837 9.06352 10.132 12.0058 10.132C14.9481 10.132 17.3378 12.3837 17.3378 15.1448C17.3378 15.5738 17.6773 15.9133 18.1063 15.9133C18.5353 15.9133 18.8748 15.5738 18.8748 15.1448C18.8748 11.5331 15.79 8.59507 12.0058 8.59507C8.22158 8.59507 5.13684 11.5331 5.13684 15.1448C5.13684 17.0829 5.57191 18.8849 6.4009 20.3626C7.14774 21.7114 7.67217 22.3881 8.80652 23.5224Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            d="M18.5215 3.18422C18.6236 3.2427 18.7482 3.27488 18.8747 3.27488C19.1606 3.27488 19.4198 3.11342 19.5536 2.84581C19.7529 2.47796 19.6098 2.01535 19.2285 1.81705C16.7894 0.561643 14.5626 0 12.0176 0C9.45335 0 7.01154 0.618753 4.78026 1.83036C4.41085 2.03046 4.272 2.50446 4.4725 2.87461C4.68897 3.24587 5.14874 3.38192 5.51684 3.18253C7.5043 2.09002 9.69599 1.53695 12.0176 1.53695C14.3418 1.53695 16.2766 2.02667 18.5215 3.18422Z"
+            fill="currentColor"
+          />
+          <path
+            d="M1.51239 9.34361C1.16081 9.09903 1.08056 8.62228 1.32699 8.26805C2.51489 6.58819 4.02692 5.26932 5.82397 4.34683C9.59223 2.4027 14.4054 2.39598 18.1754 4.33484C19.9766 5.25945 21.4872 6.56799 22.6714 8.23067C22.9205 8.57323 22.8388 9.06368 22.4873 9.30814C22.1342 9.55379 21.6575 9.47354 21.4142 9.12377C20.3654 7.65552 19.0389 6.50465 17.4698 5.70267C14.1243 3.98916 9.84591 3.99243 6.51846 5.71433C4.94524 6.52408 3.61601 7.68349 2.57157 9.14414C2.44743 9.36139 2.21526 9.48177 1.95652 9.48177C1.80152 9.48177 1.64933 9.43495 1.51239 9.34361Z"
+            fill="currentColor"
+          />
+          <path
+            d="M15.2452 23.9699C13.3415 23.4431 12.084 22.7325 10.7695 21.4421C9.08008 19.7647 8.15159 17.532 8.15159 15.1448C8.15159 13.1286 9.86545 11.4916 11.9703 11.4916C14.0752 11.4916 15.789 13.1286 15.789 15.1448C15.789 16.3101 16.8077 17.2611 18.0708 17.2611C19.334 17.2611 20.3526 16.3101 20.3526 15.1448C20.3526 10.7888 16.5927 7.24729 11.9585 7.24729C8.66453 7.24729 5.65559 9.0801 4.30349 11.9114C3.85457 12.8438 3.62351 13.9406 3.62351 15.1448C3.62351 16.5035 3.82093 17.7948 4.40381 19.3491C4.55799 19.75 4.35578 20.1978 3.95909 20.335C3.56271 20.4874 3.11341 20.2797 2.97268 19.8887C2.3857 18.3194 2.09839 16.7615 2.09839 15.1448C2.09839 13.7032 2.37477 12.3881 2.91959 11.238C4.5227 7.87505 8.07441 5.69852 11.9585 5.69852C17.4344 5.69852 21.8895 9.9262 21.8895 15.133C21.8895 17.1492 20.1757 18.7862 18.0708 18.7862C15.9659 18.7862 14.2521 17.1492 14.2521 15.133C14.2521 13.9677 13.2335 13.0167 11.9703 13.0167C10.7072 13.0167 9.68854 13.9677 9.68854 15.133C9.68854 17.1111 10.4526 18.9563 11.8468 20.339C12.9536 21.4342 14.0053 22.0304 15.6325 22.4806C16.0433 22.5871 16.2826 23.0129 16.1751 23.4111C16.1001 23.756 15.7871 24 15.4462 24C15.3871 24 15.3215 23.9891 15.2452 23.9699Z"
+            fill="currentColor"
+          />
+          <path
+            d="M14.058 20.4818C12.2476 19.2546 11.1664 17.2607 11.1664 15.1448C11.1664 14.7159 11.5059 14.3764 11.9348 14.3764C12.3638 14.3764 12.7033 14.7159 12.7033 15.1448C12.7033 16.756 13.5279 18.2719 14.9189 19.2068C15.7253 19.752 16.671 20.0158 17.8225 20.0158C18.1358 20.0158 18.6011 19.9738 19.0198 19.9005C19.438 19.8231 19.8364 20.1028 19.9122 20.5273C19.9896 20.9456 19.7098 21.3439 19.2867 21.4194C18.742 21.5246 18.2163 21.5645 17.8225 21.5645C16.3788 21.5645 15.103 21.1987 14.058 20.4818Z"
+            fill="currentColor"
+          />
+          <path
+            d="M8.80649 23.5224C8.93766 23.6686 9.13727 23.7517 9.34568 23.7517C9.5472 23.7517 9.74256 23.6736 9.90241 23.5283C10.2013 23.2143 10.2013 22.7404 9.91169 22.4355C8.85094 21.3609 8.42129 20.8149 7.75088 19.6103C7.04581 18.362 6.67376 16.8202 6.67376 15.1448C6.67376 12.3837 9.06349 10.132 12.0058 10.132C14.9481 10.132 17.3378 12.3837 17.3378 15.1448C17.3378 15.5738 17.6773 15.9133 18.1063 15.9133C18.5352 15.9133 18.8747 15.5738 18.8747 15.1448C18.8747 11.5331 15.79 8.59507 12.0058 8.59507C8.22155 8.59507 5.13681 11.5331 5.13681 15.1448C5.13681 17.0829 5.57188 18.8849 6.40087 20.3626C7.14771 21.7114 7.67214 22.3881 8.80649 23.5224Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/first-aid-case-icon.tsx

@@ -0,0 +1,34 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function FirstAidCaseIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'First Aid Case',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16 4H22C23.11 4 24 4.89 24 6V22C24 23.11 23.11 24 22 24H2C0.89 24 0 23.11 0 22L0.00999999 6C0.00999999 4.89 0.89 4 2 4H8V2C8 0.89 8.89 0 10 0H14C15.11 0 16 0.89 16 2V4ZM10 4H14V2H10V4ZM11 10H13V13H16V15H13V18H11V15H8V13H11V10Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M11 10H13V13H16V15H13V18H11V15H8V13H11V10Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M22 4H16V2C16 0.89 15.11 0 14 0H10C8.89 0 8 0.89 8 2V4H2C0.89 4 0.00999999 4.89 0.00999999 6L0 22C0 23.11 0.89 24 2 24H22C23.11 24 24 23.11 24 22V6C24 4.89 23.11 4 22 4ZM14 4H10V2H14V4ZM2 6H22V22H2V6Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/first-aid-icon.tsx

@@ -0,0 +1,34 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function FirstAidIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'First Aid',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16 6H22C23.11 6 24 6.89 24 8V20C24 21.11 23.11 22 22 22H2C0.89 22 0 21.11 0 20L0.00999999 8C0.00999999 6.89 0.89 6 2 6H8V4C8 2.89 8.89 2 10 2H14C15.11 2 16 2.89 16 4V6ZM10 6H14V4H10V6ZM11 10H13V13H16V15H13V18H11V15H8V13H11V10Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M11 10H13V13H16V15H13V18H11V15H8V13H11V10Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M22 6H16V4C16 2.89 15.11 2 14 2H10C8.89 2 8 2.89 8 4V6H2C0.89 6 0.00999999 6.89 0.00999999 8L0 20C0 21.11 0.89 22 2 22H22C23.11 22 24 21.11 24 20V8C24 6.89 23.11 6 22 6ZM14 6H10V4H14V6ZM2 8H22V20H2V8Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/future-clock-icon.tsx

@@ -5,16 +5,16 @@ import { type IconProps } from '../icon.types.js';
 
 export function FutureClockIcon({
   'aria-label': ariaLabel = 'Future Clock',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
+        d="M20 16.5L24 12H21C21 6.20101 16.299 1.5 10.5 1.5C4.70101 1.5 0 6.20101 0 12C0 17.799 4.70101 22.5 10.5 22.5C13.0572 22.5 15.4009 21.5859 17.2221 20.0665L15.9417 18.53C14.4674 19.76 12.5701 20.5 10.5 20.5C5.80558 20.5 2 16.6944 2 12C2 7.30558 5.80558 3.5 10.5 3.5C15.1944 3.5 19 7.30558 19 12H16L20 16.5Z"
         fill="currentColor"
-        fillRule="evenodd"
-        d="M24,12 L20,16.5 L16,12 L19,12 C19,7.30557963 15.1944204,3.5 10.5,3.5 C5.80557963,3.5 2,7.30557963 2,12 C2,16.6944204 5.80557963,20.5 10.5,20.5 C12.5701131,20.5 14.4673847,19.7599774 15.9417031,18.5300437 L17.2221038,20.0665245 C15.4008869,21.5858544 13.0571985,22.5 10.5,22.5 C4.70101013,22.5 0,17.7989899 0,12 C0,6.20101013 4.70101013,1.5 10.5,1.5 C16.2989899,1.5 21,6.20101013 21,12 L24,12 Z M11.0012419,12.8457833 L15.1999998,15.268433 L14.1993789,17.0004838 L9,14 L9,6 L11.0012419,6 L11.0012419,12.8457833 Z"
       />
+      <path d="M15.2 15.2684L11.0012 12.8458V6H9V14L14.1994 17.0005L15.2 15.2684Z" fill="currentColor" />
     </Icon>
   );
 }

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

@@ -3,14 +3,25 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function GelIcon({ 'aria-label': ariaLabel = 'GEL', copyrightYear = '2020', ...props }: IconProps) {
+export function GelIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Gel',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="nonzero"
-        d="M11.998.034c5.797 0 10.496 4.697 10.496 10.491 0 8.673-8.083 12.257-10.496 13.464v-2.973c-5.797 0-10.496-4.697-10.496-10.49C1.502 4.73 6.202.033 11.998.033zM7.209 7.601c-1.881 0-3.282 1.286-3.282 3.193v.07c0 1.872 1.156 3.193 3.282 3.193 2.022 0 3.063-1.198 3.063-2.79v-.77h-2.94v1.25h1.173c-.036.5-.368.945-1.243.945-1.085 0-1.462-.787-1.462-1.802v-.07c0-1.128.534-1.81 1.418-1.81.665 0 1.042.306 1.129.892h1.777c-.123-1.627-1.436-2.3-2.915-2.3zm7.912.097h-4.323v6.254h4.463V12.57h-2.678v-1.137h2.022v-1.277h-2.022V9.08h2.538V7.698zm2.486 0h-1.803v6.254h4.166v-1.39h-2.363V7.697z"
-      />
+      {look === 'filled' ? (
+        <path
+          d="M11.998 0.033959C17.795 0.033959 22.494 4.73096 22.494 10.525C22.494 19.198 14.411 22.782 11.998 23.989V21.016C6.20101 21.016 1.50201 16.319 1.50201 10.526C1.50201 4.72996 6.20201 0.032959 11.998 0.032959V0.033959ZM7.20901 7.60096C5.32801 7.60096 3.92701 8.88696 3.92701 10.794V10.864C3.92701 12.736 5.08301 14.057 7.20901 14.057C9.23101 14.057 10.272 12.859 10.272 11.267V10.497H7.33201V11.747H8.50501C8.46901 12.247 8.13701 12.692 7.26201 12.692C6.17701 12.692 5.80001 11.905 5.80001 10.89V10.82C5.80001 9.69196 6.33401 9.00996 7.21801 9.00996C7.88301 9.00996 8.26001 9.31596 8.34701 9.90196H10.124C10.001 8.27496 8.68801 7.60196 7.20901 7.60196V7.60096ZM15.121 7.69796H10.798V13.952H15.261V12.57H12.583V11.433H14.605V10.156H12.583V9.07996H15.121V7.69796ZM17.607 7.69796H15.804V13.952H19.97V12.562H17.607V7.69696V7.69796Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          d="M11.998 0.033959C17.795 0.033959 22.494 4.73096 22.494 10.525C22.494 19.198 14.411 22.782 11.998 23.989V21.016C6.20095 21.016 1.50195 16.319 1.50195 10.526C1.50195 4.72996 6.20195 0.032959 11.998 0.032959V0.033959ZM7.20895 7.60096C5.32795 7.60096 3.92695 8.88696 3.92695 10.794V10.864C3.92695 12.736 5.08295 14.057 7.20895 14.057C9.23095 14.057 10.272 12.859 10.272 11.267V10.497H7.33195V11.747H8.50495C8.46895 12.247 8.13695 12.692 7.26195 12.692C6.17695 12.692 5.79995 11.905 5.79995 10.89V10.82C5.79995 9.69196 6.33395 9.00996 7.21795 9.00996C7.88295 9.00996 8.25995 9.31596 8.34695 9.90196H10.124C10.001 8.27496 8.68795 7.60196 7.20895 7.60196V7.60096ZM15.121 7.69796H10.798V13.952H15.261V12.57H12.583V11.433H14.605V10.156H12.583V9.07996H15.121V7.69796ZM17.607 7.69796H15.804V13.952H19.97V12.562H17.607V7.69696V7.69796Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/generic-file-icon.tsx

@@ -4,17 +4,28 @@ import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
 export function GenericFileIcon({
+  look = 'filled',
   'aria-label': ariaLabel = 'Generic File',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M4,0 L16,0 L22,6 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,2.02906125e-16 4,0 L4,0 Z M4,2 L4,22 L20,22 L20,6 L16,6 L16,2 L4,2 Z M6,12 L18,12 L18,10 L6,10 L6,12 Z M6,16 L18,16 L18,14 L6,14 L6,16 Z M6,20 L18,20 L18,18 L6,18 L6,20 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 2C2 0.89543 2.89543 0 4 0H16L22 6V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2ZM16 2L20 6H16V2ZM6 12H18V10H6V12ZM18 16H6V14H18V16ZM6 20H18V18H6V20Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 2C2 0.89543 2.89543 0 4 0H16L22 6V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2ZM4 2H16V6H20V22H4V2ZM18 12H6V10H18V12ZM6 16H18V14H6V16ZM18 20H6V18H18V20Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }