From a39a707a217d92a7bc64e79657d30daadc62c3ca Mon Sep 17 00:00:00 2001
From: Melanie Boeckmann <melanie.bockmann@gmail.com>
Date: Mon, 17 Feb 2025 12:11:15 -0800
Subject: [PATCH 01/13] feat: add new gcds icon font

---
 packages/web/src/components.d.ts              |  30 +-
 .../src/components/gcds-icon/gcds-icon.scss   | 648 +++++++++++-------
 .../src/components/gcds-icon/gcds-icon.tsx    |  72 +-
 .../web/src/components/gcds-icon/i18n/i18n.js |  10 +
 .../web/src/components/gcds-icon/readme.md    |   2 +-
 .../gcds-icon/test/gcds-icon.e2e.ts           |   4 +-
 .../gcds-icon/test/gcds-icon.spec.ts          |  50 +-
 7 files changed, 525 insertions(+), 291 deletions(-)
 create mode 100644 packages/web/src/components/gcds-icon/i18n/i18n.js

diff --git a/packages/web/src/components.d.ts b/packages/web/src/components.d.ts
index 5e9c4e3ee..ed8aa13d8 100644
--- a/packages/web/src/components.d.ts
+++ b/packages/web/src/components.d.ts
@@ -590,7 +590,20 @@ export namespace Components {
         /**
           * Name of the icon.
          */
-        "name": string;
+        "name": | 'checkmark-circle'
+    | 'chevron-down'
+    | 'chevron-left'
+    | 'chevron-right'
+    | 'chevron-up'
+    | 'close'
+    | 'download'
+    | 'email'
+    | 'exclamation-circle'
+    | 'external'
+    | 'info-circle'
+    | 'phone'
+    | 'search'
+    | 'warning-triangle';
         /**
           * Defines the size of the icon.
          */
@@ -2413,7 +2426,20 @@ declare namespace LocalJSX {
         /**
           * Name of the icon.
          */
-        "name": string;
+        "name": | 'checkmark-circle'
+    | 'chevron-down'
+    | 'chevron-left'
+    | 'chevron-right'
+    | 'chevron-up'
+    | 'close'
+    | 'download'
+    | 'email'
+    | 'exclamation-circle'
+    | 'external'
+    | 'info-circle'
+    | 'phone'
+    | 'search'
+    | 'warning-triangle';
         /**
           * Defines the size of the icon.
          */
diff --git a/packages/web/src/components/gcds-icon/gcds-icon.scss b/packages/web/src/components/gcds-icon/gcds-icon.scss
index a7ee11731..7fe3ec9ec 100644
--- a/packages/web/src/components/gcds-icon/gcds-icon.scss
+++ b/packages/web/src/components/gcds-icon/gcds-icon.scss
@@ -1,336 +1,466 @@
-@use '../../../../../node_modules/@fortawesome/fontawesome-free/css/all.min.css';
+@layer reset, default, names, fixedWidth, margin, size;
 
-:host .gcds-icon {
-  font-family: var(--gcds-icon-font-family);
-  font-size: inherit;
-  line-height: inherit;
-  color: inherit;
+@layer reset {
+  :host {
+    display: inline-block;
 
-  /* Margin left */
-  &.ml-0 {
-    margin-inline-start: var(--gcds-icon-margin-0);
-  }
-
-  &.ml-25 {
-    margin-inline-start: var(--gcds-icon-margin-25);
-  }
-
-  &.ml-50 {
-    margin-inline-start: var(--gcds-icon-margin-50);
-  }
-
-  &.ml-75 {
-    margin-inline-start: var(--gcds-icon-margin-75);
-  }
-
-  &.ml-100 {
-    margin-inline-start: var(--gcds-icon-margin-100);
-  }
-
-  &.ml-125 {
-    margin-inline-start: var(--gcds-icon-margin-125);
-  }
-
-  &.ml-150 {
-    margin-inline-start: var(--gcds-icon-margin-150);
-  }
-
-  &.ml-175 {
-    margin-inline-start: var(--gcds-icon-margin-175);
-  }
-
-  &.ml-200 {
-    margin-inline-start: var(--gcds-icon-margin-200);
-  }
-
-  &.ml-225 {
-    margin-inline-start: var(--gcds-icon-margin-225);
-  }
-
-  &.ml-250 {
-    margin-inline-start: var(--gcds-icon-margin-250);
+    :host .gcds-icon {
+      font-size: inherit;
+      line-height: inherit;
+      color: inherit;
+    }
   }
+}
 
-  &.ml-300 {
-    margin-inline-start: var(--gcds-icon-margin-300);
+@layer default {
+  :host .gcds-icon {
+    font-family: var(--gcds-icon-font-family) !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
+}
 
-  &.ml-350 {
-    margin-inline-start: var(--gcds-icon-margin-350);
-  }
+@layer names {
+  :host .gcds-icon {
+    &-checkmark-circle:before {
+      content: "\e908";
+    }
 
-  &.ml-400 {
-    margin-inline-start: var(--gcds-icon-margin-400);
-  }
+    &-chevron-down:before {
+      content: "\e900";
+    }
 
-  &.ml-450 {
-    margin-inline-start: var(--gcds-icon-margin-450);
-  }
+    &-chevron-left:before {
+      content: "\e901";
+    }
 
-  &.ml-500 {
-    margin-inline-start: var(--gcds-icon-margin-500);
-  }
+    &-chevron-right:before {
+      content: "\e902";
+    }
 
-  &.ml-550 {
-    margin-inline-start: var(--gcds-icon-margin-550);
-  }
+    &-chevron-up:before {
+      content: "\e903";
+    }
 
-  &.ml-600 {
-    margin-inline-start: var(--gcds-icon-margin-600);
-  }
+    &-close:before {
+      content: "\e90b";
+    }
 
-  &.ml-650 {
-    margin-inline-start: var(--gcds-icon-margin-650);
-  }
+    &-download:before {
+      content: "\e906";
+    }
 
-  &.ml-700 {
-    margin-inline-start: var(--gcds-icon-margin-700);
-  }
+    &-email:before {
+      content: "\e905";
+    }
 
-  &.ml-750 {
-    margin-inline-start: var(--gcds-icon-margin-750);
-  }
+    &-exclamation-circle:before {
+      content: "\e909";
+    }
 
-  &.ml-800 {
-    margin-inline-start: var(--gcds-icon-margin-800);
-  }
+    &-external:before {
+      content: "\e904";
+    }
 
-  &.ml-850 {
-    margin-inline-start: var(--gcds-icon-margin-850);
-  }
+    &-info-circle:before {
+      content: "\e90a";
+    }
 
-  &.ml-900 {
-    margin-inline-start: var(--gcds-icon-margin-900);
-  }
+    &-phone:before {
+      content: "\e90c";
+    }
 
-  &.ml-950 {
-    margin-inline-start: var(--gcds-icon-margin-950);
-  }
+    &-search:before {
+      content: "\e907";
+    }
 
-  &.ml-1000 {
-    margin-inline-start: var(--gcds-icon-margin-1000);
+    &-warning-triangle:before {
+      content: "\e90d";
+    }
   }
+}
 
-  &.ml-1050 {
-    margin-inline-start: var(--gcds-icon-margin-1050);
-  }
+// TODO: Will be removed in separate pull request
+@layer fixedWidth {
+  :host .gcds-icon {
+    &.fixed-width {
+      text-align: center;
+    }
 
-  &.ml-1100 {
-    margin-inline-start: var(--gcds-icon-margin-1100);
-  }
+    &.size-text-small.fixed-width {
+      width: calc(var(--gcds-icon-fixed-width-text-small) * 1em);
+    }
 
-  &.ml-1150 {
-    margin-inline-start: var(--gcds-icon-margin-1150);
-  }
+    &.size-text.fixed-width {
+      width: calc(var(--gcds-icon-fixed-width-text) * 1em);
+    }
 
-  &.ml-1200 {
-    margin-inline-start: var(--gcds-icon-margin-1200);
-  }
+    &.size-h6.fixed-width {
+      width: calc(var(--gcds-icon-fixed-width-h6) * 1em);
+    }
 
-  &.ml-1250 {
-    margin-inline-start: var(--gcds-icon-margin-1250);
-  }
+    &.size-h5.fixed-width {
+      width: calc(var(--gcds-icon-fixed-width-h5) * 1em);
+    }
 
-  /* Margin right */
-  &.mr-0 {
-    margin-inline-end: var(--gcds-icon-margin-0);
-  }
+    &.size-h4.fixed-width {
+      width: calc(var(--gcds-icon-fixed-width-h4) * 1em);
+    }
 
-  &.mr-25 {
-    margin-inline-end: var(--gcds-icon-margin-25);
-  }
+    &.size-h3.fixed-width {
+      width: calc(var(--gcds-icon-fixed-width-h3) * 1em);
+    }
 
-  &.mr-50 {
-    margin-inline-end: var(--gcds-icon-margin-50);
-  }
+    &.size-h2.fixed-width {
+      width: calc(var(--gcds-icon-fixed-width-h2) * 1em);
+    }
 
-  &.mr-75 {
-    margin-inline-end: var(--gcds-icon-margin-75);
+    &.size-h1.fixed-width {
+      width: calc(var(--gcds-icon-fixed-width-h1) * 1em);
+    }
   }
+}
 
-  &.mr-100 {
-    margin-inline-end: var(--gcds-icon-margin-100);
-  }
+@layer margin {
+  :host .gcds-icon {
+    /* Margin left */
+    &.ml-0 {
+      margin-inline-start: var(--gcds-icon-margin-0);
+    }
 
-  &.mr-125 {
-    margin-inline-end: var(--gcds-icon-margin-125);
-  }
+    &.ml-25 {
+      margin-inline-start: var(--gcds-icon-margin-25);
+    }
 
-  &.mr-150 {
-    margin-inline-end: var(--gcds-icon-margin-150);
-  }
+    &.ml-50 {
+      margin-inline-start: var(--gcds-icon-margin-50);
+    }
 
-  &.mr-175 {
-    margin-inline-end: var(--gcds-icon-margin-175);
-  }
+    &.ml-75 {
+      margin-inline-start: var(--gcds-icon-margin-75);
+    }
 
-  &.mr-200 {
-    margin-inline-end: var(--gcds-icon-margin-200);
-  }
+    &.ml-100 {
+      margin-inline-start: var(--gcds-icon-margin-100);
+    }
 
-  &.mr-225 {
-    margin-inline-end: var(--gcds-icon-margin-225);
-  }
+    &.ml-125 {
+      margin-inline-start: var(--gcds-icon-margin-125);
+    }
 
-  &.mr-250 {
-    margin-inline-end: var(--gcds-icon-margin-250);
-  }
+    &.ml-150 {
+      margin-inline-start: var(--gcds-icon-margin-150);
+    }
+
+    &.ml-175 {
+      margin-inline-start: var(--gcds-icon-margin-175);
+    }
+
+    &.ml-200 {
+      margin-inline-start: var(--gcds-icon-margin-200);
+    }
+
+    &.ml-225 {
+      margin-inline-start: var(--gcds-icon-margin-225);
+    }
+
+    &.ml-250 {
+      margin-inline-start: var(--gcds-icon-margin-250);
+    }
+
+    &.ml-300 {
+      margin-inline-start: var(--gcds-icon-margin-300);
+    }
+
+    &.ml-350 {
+      margin-inline-start: var(--gcds-icon-margin-350);
+    }
+
+    &.ml-400 {
+      margin-inline-start: var(--gcds-icon-margin-400);
+    }
+
+    &.ml-450 {
+      margin-inline-start: var(--gcds-icon-margin-450);
+    }
+
+    &.ml-500 {
+      margin-inline-start: var(--gcds-icon-margin-500);
+    }
+
+    &.ml-550 {
+      margin-inline-start: var(--gcds-icon-margin-550);
+    }
+
+    &.ml-600 {
+      margin-inline-start: var(--gcds-icon-margin-600);
+    }
+
+    &.ml-650 {
+      margin-inline-start: var(--gcds-icon-margin-650);
+    }
+
+    &.ml-700 {
+      margin-inline-start: var(--gcds-icon-margin-700);
+    }
+
+    &.ml-750 {
+      margin-inline-start: var(--gcds-icon-margin-750);
+    }
+
+    &.ml-800 {
+      margin-inline-start: var(--gcds-icon-margin-800);
+    }
+
+    &.ml-850 {
+      margin-inline-start: var(--gcds-icon-margin-850);
+    }
+
+    &.ml-900 {
+      margin-inline-start: var(--gcds-icon-margin-900);
+    }
+
+    &.ml-950 {
+      margin-inline-start: var(--gcds-icon-margin-950);
+    }
+
+    &.ml-1000 {
+      margin-inline-start: var(--gcds-icon-margin-1000);
+    }
 
-  &.mr-300 {
-    margin-inline-end: var(--gcds-icon-margin-300);
-  }
+    &.ml-1050 {
+      margin-inline-start: var(--gcds-icon-margin-1050);
+    }
 
-  &.mr-350 {
-    margin-inline-end: var(--gcds-icon-margin-350);
-  }
+    &.ml-1100 {
+      margin-inline-start: var(--gcds-icon-margin-1100);
+    }
 
-  &.mr-400 {
-    margin-inline-end: var(--gcds-icon-margin-400);
-  }
+    &.ml-1150 {
+      margin-inline-start: var(--gcds-icon-margin-1150);
+    }
 
-  &.mr-450 {
-    margin-inline-end: var(--gcds-icon-margin-450);
-  }
+    &.ml-1200 {
+      margin-inline-start: var(--gcds-icon-margin-1200);
+    }
 
-  &.mr-500 {
-    margin-inline-end: var(--gcds-icon-margin-500);
-  }
+    &.ml-1250 {
+      margin-inline-start: var(--gcds-icon-margin-1250);
+    }
 
-  &.mr-550 {
-    margin-inline-end: var(--gcds-icon-margin-550);
-  }
+    /* Margin right */
+    &.mr-0 {
+      margin-inline-end: var(--gcds-icon-margin-0);
+    }
 
-  &.mr-600 {
-    margin-inline-end: var(--gcds-icon-margin-600);
-  }
+    &.mr-25 {
+      margin-inline-end: var(--gcds-icon-margin-25);
+    }
 
-  &.mr-650 {
-    margin-inline-end: var(--gcds-icon-margin-650);
-  }
+    &.mr-50 {
+      margin-inline-end: var(--gcds-icon-margin-50);
+    }
 
-  &.mr-700 {
-    margin-inline-end: var(--gcds-icon-margin-700);
-  }
+    &.mr-75 {
+      margin-inline-end: var(--gcds-icon-margin-75);
+    }
 
-  &.mr-750 {
-    margin-inline-end: var(--gcds-icon-margin-750);
-  }
+    &.mr-100 {
+      margin-inline-end: var(--gcds-icon-margin-100);
+    }
 
-  &.mr-800 {
-    margin-inline-end: var(--gcds-icon-margin-800);
-  }
+    &.mr-125 {
+      margin-inline-end: var(--gcds-icon-margin-125);
+    }
 
-  &.mr-850 {
-    margin-inline-end: var(--gcds-icon-margin-850);
-  }
+    &.mr-150 {
+      margin-inline-end: var(--gcds-icon-margin-150);
+    }
 
-  &.mr-900 {
-    margin-inline-end: var(--gcds-icon-margin-900);
-  }
+    &.mr-175 {
+      margin-inline-end: var(--gcds-icon-margin-175);
+    }
 
-  &.mr-950 {
-    margin-inline-end: var(--gcds-icon-margin-950);
-  }
+    &.mr-200 {
+      margin-inline-end: var(--gcds-icon-margin-200);
+    }
 
-  &.mr-1000 {
-    margin-inline-end: var(--gcds-icon-margin-1000);
-  }
+    &.mr-225 {
+      margin-inline-end: var(--gcds-icon-margin-225);
+    }
 
-  &.mr-1050 {
-    margin-inline-end: var(--gcds-icon-margin-1050);
-  }
+    &.mr-250 {
+      margin-inline-end: var(--gcds-icon-margin-250);
+    }
 
-  &.mr-1100 {
-    margin-inline-end: var(--gcds-icon-margin-1100);
-  }
+    &.mr-300 {
+      margin-inline-end: var(--gcds-icon-margin-300);
+    }
 
-  &.mr-1150 {
-    margin-inline-end: var(--gcds-icon-margin-1150);
-  }
+    &.mr-350 {
+      margin-inline-end: var(--gcds-icon-margin-350);
+    }
 
-  &.mr-1200 {
-    margin-inline-end: var(--gcds-icon-margin-1200);
-  }
+    &.mr-400 {
+      margin-inline-end: var(--gcds-icon-margin-400);
+    }
 
-  &.mr-1250 {
-    margin-inline-end: var(--gcds-icon-margin-1250);
-  }
+    &.mr-450 {
+      margin-inline-end: var(--gcds-icon-margin-450);
+    }
 
-  /* Fixed width */
-  &.fixed-width {
-    text-align: center;
-  }
+    &.mr-500 {
+      margin-inline-end: var(--gcds-icon-margin-500);
+    }
 
-  &.size-text-small.fixed-width {
-    width: calc(var(--gcds-icon-fixed-width-text-small) * 1em);
-  }
+    &.mr-550 {
+      margin-inline-end: var(--gcds-icon-margin-550);
+    }
 
-  &.size-text.fixed-width {
-    width: calc(var(--gcds-icon-fixed-width-text) * 1em);
-  }
+    &.mr-600 {
+      margin-inline-end: var(--gcds-icon-margin-600);
+    }
 
-  &.size-h6.fixed-width {
-    width: calc(var(--gcds-icon-fixed-width-h6) * 1em);
-  }
+    &.mr-650 {
+      margin-inline-end: var(--gcds-icon-margin-650);
+    }
 
-  &.size-h5.fixed-width {
-    width: calc(var(--gcds-icon-fixed-width-h5) * 1em);
-  }
+    &.mr-700 {
+      margin-inline-end: var(--gcds-icon-margin-700);
+    }
 
-  &.size-h4.fixed-width {
-    width: calc(var(--gcds-icon-fixed-width-h4) * 1em);
-  }
+    &.mr-750 {
+      margin-inline-end: var(--gcds-icon-margin-750);
+    }
 
-  &.size-h3.fixed-width {
-    width: calc(var(--gcds-icon-fixed-width-h3) * 1em);
-  }
+    &.mr-800 {
+      margin-inline-end: var(--gcds-icon-margin-800);
+    }
 
-  &.size-h2.fixed-width {
-    width: calc(var(--gcds-icon-fixed-width-h2) * 1em);
-  }
+    &.mr-850 {
+      margin-inline-end: var(--gcds-icon-margin-850);
+    }
 
-  &.size-h1.fixed-width {
-    width: calc(var(--gcds-icon-fixed-width-h1) * 1em);
-  }
+    &.mr-900 {
+      margin-inline-end: var(--gcds-icon-margin-900);
+    }
 
-  /* Size */
-  &.size-text-small {
-    font-size: var(--gcds-icon-font-size-text-small);
-    line-height: var(--gcds-icon-line-height-text-small);
-  }
+    &.mr-950 {
+      margin-inline-end: var(--gcds-icon-margin-950);
+    }
 
-  &.size-text {
-    font-size: var(--gcds-icon-font-size-text);
-    line-height: var(--gcds-icon-line-height-text);
-  }
+    &.mr-1000 {
+      margin-inline-end: var(--gcds-icon-margin-1000);
+    }
 
-  &.size-h6 {
-    font-size: var(--gcds-icon-font-size-h6);
-    line-height: var(--gcds-icon-line-height-h6);
-  }
+    &.mr-1050 {
+      margin-inline-end: var(--gcds-icon-margin-1050);
+    }
 
-  &.size-h5 {
-    font-size: var(--gcds-icon-font-size-h5);
-    line-height: var(--gcds-icon-line-height-h5);
-  }
+    &.mr-1100 {
+      margin-inline-end: var(--gcds-icon-margin-1100);
+    }
 
-  &.size-h4 {
-    font-size: var(--gcds-icon-font-size-h4);
-    line-height: var(--gcds-icon-line-height-h4);
-  }
+    &.mr-1150 {
+      margin-inline-end: var(--gcds-icon-margin-1150);
+    }
 
-  &.size-h3 {
-    font-size: var(--gcds-icon-font-size-h3);
-    line-height: var(--gcds-icon-line-height-h3);
-  }
+    &.mr-1200 {
+      margin-inline-end: var(--gcds-icon-margin-1200);
+    }
 
-  &.size-h2 {
-    font-size: var(--gcds-icon-font-size-h2);
-    line-height: var(--gcds-icon-line-height-h2);
+    &.mr-1250 {
+      margin-inline-end: var(--gcds-icon-margin-1250);
+    }
   }
+}
 
-  &.size-h1 {
-    font-size: var(--gcds-icon-font-size-h1);
-    line-height: var(--gcds-icon-line-height-h1);
+@layer size {
+  :host .gcds-icon {
+    &.size-text-small {
+      font-size: var(--gcds-icon-font-size-text-small);
+      line-height: var(--gcds-icon-line-height-text-small);
+
+      @media only screen and (width < 48em) {
+        font-size: var(--gcds-icon-font-size-text-small-mobile);
+        line-height: var(--gcds-icon-line-height-text-small-mobile);
+      }
+    }
+
+    &.size-text {
+      font-size: var(--gcds-icon-font-size-text);
+      line-height: var(--gcds-icon-line-height-text);
+
+      @media only screen and (width < 48em) {
+        font-size: var(--gcds-icon-font-size-text-mobile);
+        line-height: var(--gcds-icon-line-height-text-mobile);
+      }
+    }
+
+    &.size-h6 {
+      font-size: var(--gcds-icon-font-size-h6);
+      line-height: var(--gcds-icon-line-height-h6);
+
+      @media only screen and (width < 48em) {
+        font-size: var(--gcds-icon-font-size-h6-mobile);
+        line-height: var(--gcds-icon-line-height-h6-mobile);
+      }
+    }
+
+    &.size-h5 {
+      font-size: var(--gcds-icon-font-size-h5);
+      line-height: var(--gcds-icon-line-height-h5);
+
+      @media only screen and (width < 48em) {
+        font-size: var(--gcds-icon-font-size-h5-mobile);
+        line-height: var(--gcds-icon-line-height-h5-mobile);
+      }
+    }
+
+    &.size-h4 {
+      font-size: var(--gcds-icon-font-size-h4);
+      line-height: var(--gcds-icon-line-height-h4);
+
+      @media only screen and (width < 48em) {
+        font-size: var(--gcds-icon-font-size-h4-mobile);
+        line-height: var(--gcds-icon-line-height-h4-mobile);
+      }
+    }
+
+    &.size-h3 {
+      font-size: var(--gcds-icon-font-size-h3);
+      line-height: var(--gcds-icon-line-height-h3);
+
+      @media only screen and (width < 48em) {
+        font-size: var(--gcds-icon-font-size-h3-mobile);
+        line-height: var(--gcds-icon-line-height-h3-mobile);
+      }
+    }
+
+    &.size-h2 {
+      font-size: var(--gcds-icon-font-size-h2);
+      line-height: var(--gcds-icon-line-height-h2);
+
+      @media only screen and (width < 48em) {
+        font-size: var(--gcds-icon-font-size-h2-mobile);
+        line-height: var(--gcds-icon-line-height-h2-mobile);
+      }
+    }
+
+    &.size-h1 {
+      font-size: var(--gcds-icon-font-size-h1);
+      line-height: var(--gcds-icon-line-height-h1);
+
+      @media only screen and (width < 48em) {
+        font-size: var(--gcds-icon-font-size-h1-mobile);
+        line-height: var(--gcds-icon-line-height-h1-mobile);
+      }
+    }
   }
 }
diff --git a/packages/web/src/components/gcds-icon/gcds-icon.tsx b/packages/web/src/components/gcds-icon/gcds-icon.tsx
index 9cc4b04d1..9583fda6d 100644
--- a/packages/web/src/components/gcds-icon/gcds-icon.tsx
+++ b/packages/web/src/components/gcds-icon/gcds-icon.tsx
@@ -1,5 +1,6 @@
-import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { Component, Element, Host, Watch, Prop, h } from '@stencil/core';
 import { SpacingValues } from '../../utils/types/spacing';
+import i18n from './i18n/i18n';
 
 @Component({
   tag: 'gcds-icon',
@@ -13,6 +14,7 @@ export class GcdsIcon {
    * Props
    */
 
+  // TODO: Will be removed in separate pull request
   /**
    * Style of the icon. 'regular' icons are outlined. Some icons have 'solid' variation.
    */
@@ -36,8 +38,47 @@ export class GcdsIcon {
   /**
    * Name of the icon.
    */
-  @Prop() name!: string;
+  @Prop({ mutable: true }) name!:
+    | 'checkmark-circle'
+    | 'chevron-down'
+    | 'chevron-left'
+    | 'chevron-right'
+    | 'chevron-up'
+    | 'close'
+    | 'download'
+    | 'email'
+    | 'exclamation-circle'
+    | 'external'
+    | 'info-circle'
+    | 'phone'
+    | 'search'
+    | 'warning-triangle';
 
+  @Watch('name')
+  validateName(newValue: string) {
+    const values = [
+      'checkmark-circle',
+      'chevron-down',
+      'chevron-left',
+      'chevron-right',
+      'chevron-up',
+      'close',
+      'download',
+      'email',
+      'exclamation-circle',
+      'external',
+      'info-circle',
+      'phone',
+      'search',
+      'warning-triangle',
+    ];
+
+    if (!values.includes(newValue)) {
+      console.error(`${i18n['en'].nameError} | ${i18n['fr'].nameError}`);
+    }
+  }
+
+  // TODO: Will be removed in separate pull request
   /**
    * If the icon should render as a fixed-width square, or their natural width.
    */
@@ -57,6 +98,31 @@ export class GcdsIcon {
     | 'h2'
     | 'h1' = 'text';
 
+  @Watch('size')
+  validateSize(newValue: string) {
+    const values = [
+      'inherit',
+      'text-small',
+      'text',
+      'h6',
+      'h5',
+      'h4',
+      'h3',
+      'h2',
+      'h1',
+    ];
+
+    if (!values.includes(newValue)) {
+      this.size = 'text';
+    }
+  }
+
+  componentWillLoad() {
+    // Validate attributes and set defaults
+    this.validateName(this.name);
+    this.validateSize(this.size);
+  }
+
   render() {
     const {
       iconStyle,
@@ -72,7 +138,7 @@ export class GcdsIcon {
       <Host>
         <span
           class={`
-            gcds-icon fa fa-${iconStyle} fa-${name}
+            gcds-icon gcds-icon-${name}
             ${marginLeft ? `ml-${marginLeft}` : ''}
             ${marginRight ? `mr-${marginRight}` : ''}
             ${size ? `size-${size}` : ''}
diff --git a/packages/web/src/components/gcds-icon/i18n/i18n.js b/packages/web/src/components/gcds-icon/i18n/i18n.js
new file mode 100644
index 000000000..1f4a31878
--- /dev/null
+++ b/packages/web/src/components/gcds-icon/i18n/i18n.js
@@ -0,0 +1,10 @@
+const I18N = {
+  en: {
+    nameError: 'gcds-icon: Invalid name.',
+  },
+  fr: {
+    nameError: 'gcds-icon: Nom invalide.',
+  },
+};
+
+export default I18N;
diff --git a/packages/web/src/components/gcds-icon/readme.md b/packages/web/src/components/gcds-icon/readme.md
index 1a59fe7f2..ecb2b4ab4 100644
--- a/packages/web/src/components/gcds-icon/readme.md
+++ b/packages/web/src/components/gcds-icon/readme.md
@@ -14,7 +14,7 @@
 | `label`             | `label`        | Add icon description.                                                               | `string`                                                                                                                                                                                                                                                                               | `undefined` |
 | `marginLeft`        | `margin-left`  | Add margin to the left of the icon                                                  | `"0" \| "25" \| "50" \| "75" \| "100" \| "125" \| "150" \| "175" \| "200" \| "225" \| "250" \| "300" \| "350" \| "400" \| "450" \| "500" \| "550" \| "600" \| "650" \| "700" \| "750" \| "800" \| "850" \| "900" \| "950" \| "1000" \| "1050" \| "1100" \| "1150" \| "1200" \| "1250"` | `undefined` |
 | `marginRight`       | `margin-right` | Add margin to the right of the icon                                                 | `"0" \| "25" \| "50" \| "75" \| "100" \| "125" \| "150" \| "175" \| "200" \| "225" \| "250" \| "300" \| "350" \| "400" \| "450" \| "500" \| "550" \| "600" \| "650" \| "700" \| "750" \| "800" \| "850" \| "900" \| "950" \| "1000" \| "1050" \| "1100" \| "1150" \| "1200" \| "1250"` | `undefined` |
-| `name` _(required)_ | `name`         | Name of the icon.                                                                   | `string`                                                                                                                                                                                                                                                                               | `undefined` |
+| `name` _(required)_ | `name`         | Name of the icon.                                                                   | `"checkmark-circle" \| "chevron-down" \| "chevron-left" \| "chevron-right" \| "chevron-up" \| "close" \| "download" \| "email" \| "exclamation-circle" \| "external" \| "info-circle" \| "phone" \| "search" \| "warning-triangle"`                                                    | `undefined` |
 | `size`              | `size`         | Defines the size of the icon.                                                       | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "inherit" \| "text" \| "text-small"`                                                                                                                                                                                                  | `'text'`    |
 
 
diff --git a/packages/web/src/components/gcds-icon/test/gcds-icon.e2e.ts b/packages/web/src/components/gcds-icon/test/gcds-icon.e2e.ts
index efe17dabb..747362467 100644
--- a/packages/web/src/components/gcds-icon/test/gcds-icon.e2e.ts
+++ b/packages/web/src/components/gcds-icon/test/gcds-icon.e2e.ts
@@ -4,7 +4,7 @@ const { AxePuppeteer } = require('@axe-core/puppeteer');
 describe('gcds-icon', () => {
   it('renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<gcds-icon name="angle-down"></gcds-icon>');
+    await page.setContent('<gcds-icon name="close"></gcds-icon>');
 
     const element = await page.find('gcds-icon');
     expect(element).toHaveClass('hydrated');
@@ -23,7 +23,7 @@ describe('gcds-banner a11y tests', () => {
   it('colour contrast', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <gcds-icon name="angle-down"></gcds-icon>
+      <gcds-icon name="close"></gcds-icon>
     `);
 
     const colorContrastTest = new AxePuppeteer(page)
diff --git a/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts b/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts
index a72141110..8d29a5878 100644
--- a/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts
+++ b/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts
@@ -5,12 +5,12 @@ describe('gcds-icon', () => {
   it('renders', async () => {
     const { root } = await newSpecPage({
       components: [GcdsIcon],
-      html: '<gcds-icon name="angle-down" />',
+      html: '<gcds-icon name="close" />',
     });
     expect(root).toEqualHtml(`
-      <gcds-icon name="angle-down">
+      <gcds-icon name="close">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon fa fa-solid fa-angle-down size-text"></span>
+          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-text"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -19,12 +19,12 @@ describe('gcds-icon', () => {
   it('renders margin left', async () => {
     const { root } = await newSpecPage({
       components: [GcdsIcon],
-      html: '<gcds-icon name="angle-down" margin-left="100" />',
+      html: '<gcds-icon name="close" margin-left="100" />',
     });
     expect(root).toEqualHtml(`
-      <gcds-icon name="angle-down" margin-left="100">
+      <gcds-icon name="close" margin-left="100">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon fa fa-solid fa-angle-down size-text ml-100"></span>
+          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-text ml-100"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -33,12 +33,12 @@ describe('gcds-icon', () => {
   it('renders margin right', async () => {
     const { root } = await newSpecPage({
       components: [GcdsIcon],
-      html: '<gcds-icon name="angle-down" margin-right="100" />',
+      html: '<gcds-icon name="close" margin-right="100" />',
     });
     expect(root).toEqualHtml(`
-      <gcds-icon name="angle-down" margin-right="100">
+      <gcds-icon name="close" margin-right="100">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon fa fa-solid fa-angle-down size-text mr-100"></span>
+          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-text mr-100"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -47,12 +47,12 @@ describe('gcds-icon', () => {
   it('renders size', async () => {
     const { root } = await newSpecPage({
       components: [GcdsIcon],
-      html: '<gcds-icon name="angle-down" size="h3" />',
+      html: '<gcds-icon name="close" size="h3" />',
     });
     expect(root).toEqualHtml(`
-      <gcds-icon name="angle-down" size="h3">
+      <gcds-icon name="close" size="h3">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon fa fa-solid fa-angle-down size-h3"></span>
+          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-h3"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -61,12 +61,12 @@ describe('gcds-icon', () => {
   it('renders hidden for screen readers', async () => {
     const { root } = await newSpecPage({
       components: [GcdsIcon],
-      html: '<gcds-icon name="angle-down" />',
+      html: '<gcds-icon name="close" />',
     });
     expect(root).toEqualHtml(`
-      <gcds-icon name="angle-down">
+      <gcds-icon name="close">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon fa fa-solid fa-angle-down size-text"></span>
+          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-text"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -75,40 +75,42 @@ describe('gcds-icon', () => {
   it('renders with label', async () => {
     const { root } = await newSpecPage({
       components: [GcdsIcon],
-      html: '<gcds-icon name="angle-down" label="This is a description" />',
+      html: '<gcds-icon name="close" label="This is a description" />',
     });
     expect(root).toEqualHtml(`
-      <gcds-icon name="angle-down" label="This is a description">
+      <gcds-icon name="close" label="This is a description">
         <mock:shadow-root>
-          <span aria-hidden="false" aria-label="This is a description" role="img" class="gcds-icon fa fa-solid fa-angle-down size-text"></span>
+          <span aria-hidden="false" aria-label="This is a description" role="img" class="gcds-icon gcds-icon-close size-text"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
   });
 
+  // TODO: Will be removed in separate pull request
   it('renders icon style', async () => {
     const { root } = await newSpecPage({
       components: [GcdsIcon],
-      html: '<gcds-icon name="angle-down" size="h3" icon-style="regular"/>',
+      html: '<gcds-icon name="close" size="h3" icon-style="regular"/>',
     });
     expect(root).toEqualHtml(`
-      <gcds-icon name="angle-down" size="h3" icon-style="regular">
+      <gcds-icon name="close" size="h3" icon-style="regular">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon fa fa-regular fa-angle-down size-h3"></span>
+          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-h3"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
   });
 
+  // TODO: Will be removed in separate pull request
   it('renders fixed width icons', async () => {
     const { root } = await newSpecPage({
       components: [GcdsIcon],
-      html: '<gcds-icon name="angle-down" size="h3" fixed-width/>',
+      html: '<gcds-icon name="close" size="h3" fixed-width/>',
     });
     expect(root).toEqualHtml(`
-      <gcds-icon name="angle-down" size="h3" fixed-width>
+      <gcds-icon name="close" size="h3" fixed-width>
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon fa fa-solid fa-angle-down size-h3 fixed-width"></span>
+          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-h3 fixed-width"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);

From 07bc436071de38144df83e848da8ccae321ddd47 Mon Sep 17 00:00:00 2001
From: Melanie Boeckmann <melanie.bockmann@gmail.com>
Date: Mon, 17 Feb 2025 12:15:25 -0800
Subject: [PATCH 02/13] chore: update existing components to use new token
 names

---
 .../src/components/gcds-alert/gcds-alert.tsx  |  6 +--
 .../gcds-alert/test/gcds-alert.spec.tsx       | 46 +++++++++----------
 .../components/gcds-button/gcds-button.tsx    |  2 +-
 .../gcds-button/test/gcds-button.spec.ts      |  2 +-
 .../gcds-error-message/gcds-error-message.tsx |  2 +-
 .../test/gcds-error-message.spec.ts           |  2 +-
 .../gcds-file-uploader/gcds-file-uploader.tsx |  2 +-
 .../src/components/gcds-link/gcds-link.tsx    |  4 +-
 .../gcds-link/test/gcds-link.spec.ts          |  8 ++--
 .../gcds-nav-group/gcds-nav-group.tsx         |  2 +-
 .../test/gcds-nav-group.spec.tsx              |  6 +--
 .../components/gcds-notice/gcds-notice.tsx    | 24 ++++++++--
 .../gcds-notice/test/gcds-notice.spec.tsx     | 14 +++---
 13 files changed, 68 insertions(+), 52 deletions(-)

diff --git a/packages/web/src/components/gcds-alert/gcds-alert.tsx b/packages/web/src/components/gcds-alert/gcds-alert.tsx
index 1372bc1b2..32f7d1344 100644
--- a/packages/web/src/components/gcds-alert/gcds-alert.tsx
+++ b/packages/web/src/components/gcds-alert/gcds-alert.tsx
@@ -138,9 +138,9 @@ export class GcdsAlert {
                         : alertRole === 'info'
                           ? 'info-circle'
                           : alertRole === 'success'
-                            ? 'check-circle'
+                            ? 'checkmark-circle'
                             : alertRole === 'warning'
-                              ? 'exclamation-triangle'
+                              ? 'warning-triangle'
                               : null
                     }
                   />
@@ -164,7 +164,7 @@ export class GcdsAlert {
                     }}
                     aria-label={i18n[lang].closeBtn}
                   >
-                    <gcds-icon aria-hidden="true" name="times" size="text" />
+                    <gcds-icon aria-hidden="true" name="close" size="text" />
                   </button>
                 )}
               </div>
diff --git a/packages/web/src/components/gcds-alert/test/gcds-alert.spec.tsx b/packages/web/src/components/gcds-alert/test/gcds-alert.spec.tsx
index fa8feaecf..0010a28dd 100644
--- a/packages/web/src/components/gcds-alert/test/gcds-alert.spec.tsx
+++ b/packages/web/src/components/gcds-alert/test/gcds-alert.spec.tsx
@@ -21,7 +21,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -54,7 +54,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -83,7 +83,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -104,7 +104,7 @@ describe('gcds-alert', () => {
           <div aria-label="This is a success alert." class="gcds-alert alert--role-success" role="alert">
             <gcds-container centered="" size="full">
               <div class="alert__container">
-                <gcds-icon aria-hidden="true" class="alert__icon" name="check-circle" size="h5" margin-right="175"></gcds-icon>
+                <gcds-icon aria-hidden="true" class="alert__icon" name="checkmark-circle" size="h5" margin-right="175"></gcds-icon>
 
                 <div class="alert__content">
                   <p class="alert__heading"><strong>Main notification title</strong></p>
@@ -112,7 +112,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -133,7 +133,7 @@ describe('gcds-alert', () => {
           <div aria-label="This is a warning alert." class="gcds-alert alert--role-warning" role="alert">
             <gcds-container centered="" size="full">
               <div class="alert__container">
-                <gcds-icon aria-hidden="true" class="alert__icon" name="exclamation-triangle" size="h5" margin-right="175"></gcds-icon>
+                <gcds-icon aria-hidden="true" class="alert__icon" name="warning-triangle" size="h5" margin-right="175"></gcds-icon>
 
                 <div class="alert__content">
                   <p class="alert__heading"><strong>Main notification title</strong></p>
@@ -141,7 +141,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -174,7 +174,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Fermer l'alerte.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -203,7 +203,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Fermer l'alerte.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -224,7 +224,7 @@ describe('gcds-alert', () => {
           <div aria-label="Ceci est une alerte de succès." class="gcds-alert alert--role-success" role="alert">
             <gcds-container centered="" size="full">
               <div class="alert__container">
-                <gcds-icon aria-hidden="true" class="alert__icon" name="check-circle" size="h5" margin-right="175"></gcds-icon>
+                <gcds-icon aria-hidden="true" class="alert__icon" name="checkmark-circle" size="h5" margin-right="175"></gcds-icon>
 
                 <div class="alert__content">
                   <p class="alert__heading"><strong>Main notification title</strong></p>
@@ -232,7 +232,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Fermer l'alerte.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -253,7 +253,7 @@ describe('gcds-alert', () => {
           <div aria-label="Ceci est une alerte d'avertissement." class="gcds-alert alert--role-warning" role="alert">
             <gcds-container centered="" size="full">
               <div class="alert__container">
-                <gcds-icon aria-hidden="true" class="alert__icon" name="exclamation-triangle" size="h5" margin-right="175"></gcds-icon>
+                <gcds-icon aria-hidden="true" class="alert__icon" name="warning-triangle" size="h5" margin-right="175"></gcds-icon>
 
                 <div class="alert__content">
                   <p class="alert__heading"><strong>Main notification title</strong></p>
@@ -261,7 +261,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Fermer l'alerte.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -294,7 +294,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -323,7 +323,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -356,7 +356,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -385,7 +385,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -414,7 +414,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -443,7 +443,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -472,7 +472,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -501,7 +501,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -561,7 +561,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
@@ -598,7 +598,7 @@ describe('gcds-alert', () => {
                 </div>
 
                 <button class="alert__close-btn" aria-label="Close alert.">
-                  <gcds-icon aria-hidden="true" name="times" size="text"></gcds-icon>
+                  <gcds-icon aria-hidden="true" name="close" size="text"></gcds-icon>
                 </button>
               </div>
             </gcds-container>
diff --git a/packages/web/src/components/gcds-button/gcds-button.tsx b/packages/web/src/components/gcds-button/gcds-button.tsx
index e9893ae76..5e31ecaea 100644
--- a/packages/web/src/components/gcds-button/gcds-button.tsx
+++ b/packages/web/src/components/gcds-button/gcds-button.tsx
@@ -252,7 +252,7 @@ export class GcdsButton {
 
           {type === 'link' && target === '_blank' ? (
             <gcds-icon
-              name="external-link"
+              name="external"
               label={i18n[lang].label}
               margin-left="150"
             />
diff --git a/packages/web/src/components/gcds-button/test/gcds-button.spec.ts b/packages/web/src/components/gcds-button/test/gcds-button.spec.ts
index 798881b3f..a2d47478c 100644
--- a/packages/web/src/components/gcds-button/test/gcds-button.spec.ts
+++ b/packages/web/src/components/gcds-button/test/gcds-button.spec.ts
@@ -160,7 +160,7 @@ describe('gcds-button', () => {
         <mock:shadow-root>
           <a class="gcds-button button--role-primary button--regular" href="https://google.com" part="button" target="_blank">
             <slot></slot>
-            <gcds-icon name="external-link" label="Opens in a new tab." margin-left="150" />
+            <gcds-icon name="external" label="Opens in a new tab." margin-left="150" />
           </a>
         </mock:shadow-root>
         Button Label
diff --git a/packages/web/src/components/gcds-error-message/gcds-error-message.tsx b/packages/web/src/components/gcds-error-message/gcds-error-message.tsx
index 0c7c703a6..9faecac17 100644
--- a/packages/web/src/components/gcds-error-message/gcds-error-message.tsx
+++ b/packages/web/src/components/gcds-error-message/gcds-error-message.tsx
@@ -26,7 +26,7 @@ export class GcdsErrorMessage {
         class="gcds-error-message-wrapper"
       >
         <gcds-text class="error-message" role="alert" margin-bottom="75">
-          <gcds-icon name="triangle-exclamation" margin-right="50"></gcds-icon>
+          <gcds-icon name="warning-triangle" margin-right="50"></gcds-icon>
           <strong>
             <slot></slot>
           </strong>
diff --git a/packages/web/src/components/gcds-error-message/test/gcds-error-message.spec.ts b/packages/web/src/components/gcds-error-message/test/gcds-error-message.spec.ts
index ed7cec680..d9be2c609 100644
--- a/packages/web/src/components/gcds-error-message/test/gcds-error-message.spec.ts
+++ b/packages/web/src/components/gcds-error-message/test/gcds-error-message.spec.ts
@@ -11,7 +11,7 @@ describe('gcds-error-message', () => {
       <gcds-error-message message-id="input-renders" id="error-message-input-renders" class="gcds-error-message-wrapper">
         <mock:shadow-root>
           <gcds-text class="error-message" role="alert" margin-bottom="75">
-            <gcds-icon name="triangle-exclamation" margin-right="50"></gcds-icon>
+            <gcds-icon name="warning-triangle" margin-right="50"></gcds-icon>
             <strong>
               <slot></slot>
             </strong>
diff --git a/packages/web/src/components/gcds-file-uploader/gcds-file-uploader.tsx b/packages/web/src/components/gcds-file-uploader/gcds-file-uploader.tsx
index 2b7b30703..e2628c148 100644
--- a/packages/web/src/components/gcds-file-uploader/gcds-file-uploader.tsx
+++ b/packages/web/src/components/gcds-file-uploader/gcds-file-uploader.tsx
@@ -481,7 +481,7 @@ export class GcdsFileUploader {
                   <gcds-text margin-bottom="0">{file}</gcds-text>
                   <button onClick={e => this.removeFile(e)}>
                     <span>{i18n[lang].button.remove}</span>
-                    <gcds-icon name="times" size="text" margin-left="150" />
+                    <gcds-icon name="close" size="text" margin-left="150" />
                   </button>
                 </div>
               ))
diff --git a/packages/web/src/components/gcds-link/gcds-link.tsx b/packages/web/src/components/gcds-link/gcds-link.tsx
index eaf979466..4e6a24ba0 100644
--- a/packages/web/src/components/gcds-link/gcds-link.tsx
+++ b/packages/web/src/components/gcds-link/gcds-link.tsx
@@ -200,7 +200,7 @@ export class GcdsLink {
           <slot></slot>
           {target === '_blank' || external ? (
             <gcds-icon
-              name="external-link"
+              name="external"
               label={i18n[lang].external}
               margin-left="75"
             />
@@ -213,7 +213,7 @@ export class GcdsLink {
           ) : href && href.toLowerCase().startsWith('mailto:') ? (
             <gcds-icon
               icon-style="regular"
-              name="envelope"
+              name="email"
               label={i18n[lang].email}
               margin-left="75"
             />
diff --git a/packages/web/src/components/gcds-link/test/gcds-link.spec.ts b/packages/web/src/components/gcds-link/test/gcds-link.spec.ts
index 61b41aa53..7d366af0d 100644
--- a/packages/web/src/components/gcds-link/test/gcds-link.spec.ts
+++ b/packages/web/src/components/gcds-link/test/gcds-link.spec.ts
@@ -34,7 +34,7 @@ describe('gcds-link', () => {
         <mock:shadow-root>
           <a class="gcds-link link--inherit" href="https://google.com" part="link" target="_blank" rel="noopener noreferrer" role="link" tabindex="0">
             <slot></slot>
-            <gcds-icon name="external-link" label="${i18n.en.external}" margin-left="75" />
+            <gcds-icon name="external" label="${i18n.en.external}" margin-left="75" />
           </a>
         </mock:shadow-root>
         External Link
@@ -52,7 +52,7 @@ describe('gcds-link', () => {
         <mock:shadow-root>
           <a class="gcds-link link--inherit" href="https://google.com" part="link" target="_blank" rel="noopener noreferrer" role="link" tabindex="0">
             <slot></slot>
-            <gcds-icon name="external-link" label="${i18n.fr.external}" margin-left="75" />
+            <gcds-icon name="external" label="${i18n.fr.external}" margin-left="75" />
           </a>
         </mock:shadow-root>
         External Link
@@ -178,7 +178,7 @@ describe('gcds-link', () => {
         <mock:shadow-root>
           <a class="gcds-link link--inherit" href="mailto:test@test.com" part="link" role="link" tabindex="0" target="_self">
             <slot></slot>
-            <gcds-icon icon-style="regular" name="envelope" label="${i18n.en.email}" margin-left="75" />
+            <gcds-icon icon-style="regular" name="email" label="${i18n.en.email}" margin-left="75" />
           </a>
         </mock:shadow-root>
         test@test.com
@@ -196,7 +196,7 @@ describe('gcds-link', () => {
         <mock:shadow-root>
           <a class="gcds-link link--inherit" href="mailto:test@test.com" part="link" role="link" tabindex="0" target="_self">
             <slot></slot>
-            <gcds-icon icon-style="regular" name="envelope" label="${i18n.fr.email}" margin-left="75" />
+            <gcds-icon icon-style="regular" name="email" label="${i18n.fr.email}" margin-left="75" />
           </a>
         </mock:shadow-root>
         test@test.com
diff --git a/packages/web/src/components/gcds-nav-group/gcds-nav-group.tsx b/packages/web/src/components/gcds-nav-group/gcds-nav-group.tsx
index 39ebbd2be..1cc9ef68e 100644
--- a/packages/web/src/components/gcds-nav-group/gcds-nav-group.tsx
+++ b/packages/web/src/components/gcds-nav-group/gcds-nav-group.tsx
@@ -197,7 +197,7 @@ export class GcdsNavGroup {
             }
           }}
         >
-          <gcds-icon name={open ? 'angle-up' : 'angle-down'}></gcds-icon>
+          <gcds-icon name={open ? 'chevron-up' : 'chevron-down'}></gcds-icon>
           {closeTrigger && open ? closeTrigger : openTrigger}
         </button>
         <ul
diff --git a/packages/web/src/components/gcds-nav-group/test/gcds-nav-group.spec.tsx b/packages/web/src/components/gcds-nav-group/test/gcds-nav-group.spec.tsx
index 6bb0ba782..c86fa9ae0 100644
--- a/packages/web/src/components/gcds-nav-group/test/gcds-nav-group.spec.tsx
+++ b/packages/web/src/components/gcds-nav-group/test/gcds-nav-group.spec.tsx
@@ -11,7 +11,7 @@ describe('gcds-nav-group', () => {
     <gcds-nav-group menu-label="Nav group submenu" open-trigger="Nav group" role="listitem">
       <mock:shadow-root>
         <button aria-expanded="false" aria-haspopup="true" class="gcds-nav-group__trigger gcds-trigger--expandable">
-          <gcds-icon name="angle-down"></gcds-icon>
+          <gcds-icon name="chevron-down"></gcds-icon>
           Nav group
         </button>
         <ul aria-label="Nav group submenu" class="gcds-nav--expandable gcds-nav-group__list">
@@ -31,7 +31,7 @@ describe('gcds-nav-group', () => {
     <gcds-nav-group menu-label="Nav group submenu" open-trigger="Nav group" lang="fr" role="listitem">
       <mock:shadow-root>
         <button aria-expanded="false" aria-haspopup="true" class="gcds-nav-group__trigger gcds-trigger--expandable">
-          <gcds-icon name="angle-down"></gcds-icon>
+          <gcds-icon name="chevron-down"></gcds-icon>
           Nav group
         </button>
         <ul aria-label="Nav group submenu" class="gcds-nav--expandable gcds-nav-group__list">
@@ -51,7 +51,7 @@ describe('gcds-nav-group', () => {
     <gcds-nav-group menu-label="Nav group submenu" open-trigger="Nav group" role="listitem" open>
       <mock:shadow-root>
         <button aria-expanded="true" aria-haspopup="true" class="gcds-nav-group__trigger gcds-trigger--expandable">
-          <gcds-icon name="angle-up"></gcds-icon>
+          <gcds-icon name="chevron-up"></gcds-icon>
           Nav group
         </button>
         <ul aria-label="Nav group submenu" class="gcds-nav--expandable gcds-nav-group__list">
diff --git a/packages/web/src/components/gcds-notice/gcds-notice.tsx b/packages/web/src/components/gcds-notice/gcds-notice.tsx
index b836b8245..96a4e1780 100644
--- a/packages/web/src/components/gcds-notice/gcds-notice.tsx
+++ b/packages/web/src/components/gcds-notice/gcds-notice.tsx
@@ -123,18 +123,34 @@ export class GcdsNotice {
   render() {
     const { type, noticeTitle, noticeTitleTag } = this;
 
-    const iconTypes = {
+    const iconTypes: {
+      [key in 'danger' | 'info' | 'success' | 'warning']:
+        | 'exclamation-circle'
+        | 'info-circle'
+        | 'checkmark-circle'
+        | 'warning-triangle';
+    } = {
       danger: 'exclamation-circle',
       info: 'info-circle',
-      success: 'check-circle',
-      warning: 'exclamation-triangle',
+      success: 'checkmark-circle',
+      warning: 'warning-triangle',
     };
 
     return (
       <Host>
         {this.validateRequiredProps() && (
           <section class={`gcds-notice notice--type-${type}`}>
-            <gcds-icon class="notice__icon" size="h4" name={iconTypes[type]} />
+            <gcds-icon
+              class="notice__icon"
+              size="h4"
+              name={
+                iconTypes[type] as
+                  | 'exclamation-circle'
+                  | 'info-circle'
+                  | 'checkmark-circle'
+                  | 'warning-triangle'
+              }
+            />
             <div>
               <gcds-heading
                 tag={noticeTitleTag}
diff --git a/packages/web/src/components/gcds-notice/test/gcds-notice.spec.tsx b/packages/web/src/components/gcds-notice/test/gcds-notice.spec.tsx
index 3da50e3b3..6c53e2419 100644
--- a/packages/web/src/components/gcds-notice/test/gcds-notice.spec.tsx
+++ b/packages/web/src/components/gcds-notice/test/gcds-notice.spec.tsx
@@ -13,7 +13,7 @@ describe('gcds-notice', () => {
       .toEqualHtml(`<gcds-notice notice-title-tag="h2" notice-title="GC Design System notice" type="success">
       <mock:shadow-root>
         <section class="gcds-notice notice--type-success">
-          <gcds-icon class="notice__icon" name="check-circle" size="h4"></gcds-icon>
+          <gcds-icon class="notice__icon" name="checkmark-circle" size="h4"></gcds-icon>
           <div>
             <gcds-heading class="notice__heading" margin-top="0" margin-bottom="100" tag="h2">
               <gcds-sr-only tag="span">Success: </gcds-sr-only>
@@ -41,7 +41,7 @@ describe('gcds-notice', () => {
       .toEqualHtml(`<gcds-notice notice-title-tag="h2" notice-title="GC Design System notice" type="success" lang="fr">
       <mock:shadow-root>
         <section class="gcds-notice notice--type-success">
-          <gcds-icon class="notice__icon" name="check-circle" size="h4"></gcds-icon>
+          <gcds-icon class="notice__icon" name="checkmark-circle" size="h4"></gcds-icon>
           <div>
             <gcds-heading class="notice__heading" margin-top="0" margin-bottom="100" tag="h2">
               <gcds-sr-only tag="span">Succès : </gcds-sr-only>
@@ -181,7 +181,7 @@ describe('gcds-notice', () => {
       .toEqualHtml(`<gcds-notice notice-title-tag="h2" notice-title="GC Design System notice" type="warning">
       <mock:shadow-root>
         <section class="gcds-notice notice--type-warning">
-          <gcds-icon class="notice__icon" name="exclamation-triangle" size="h4"></gcds-icon>
+          <gcds-icon class="notice__icon" name="warning-triangle" size="h4"></gcds-icon>
           <div>
             <gcds-heading class="notice__heading" margin-top="0" margin-bottom="100" tag="h2">
               <gcds-sr-only tag="span">Warning: </gcds-sr-only>
@@ -209,7 +209,7 @@ describe('gcds-notice', () => {
       .toEqualHtml(`<gcds-notice notice-title-tag="h2" notice-title="GC Design System notice" type="warning" lang="fr">
       <mock:shadow-root>
         <section class="gcds-notice notice--type-warning">
-          <gcds-icon class="notice__icon" name="exclamation-triangle" size="h4"></gcds-icon>
+          <gcds-icon class="notice__icon" name="warning-triangle" size="h4"></gcds-icon>
           <div>
             <gcds-heading class="notice__heading" margin-top="0" margin-bottom="100" tag="h2">
               <gcds-sr-only tag="span">Avertissement : </gcds-sr-only>
@@ -237,7 +237,7 @@ describe('gcds-notice', () => {
       .toEqualHtml(`<gcds-notice notice-title-tag="h3" notice-title="GC Design System notice" type="warning">
       <mock:shadow-root>
         <section class="gcds-notice notice--type-warning">
-          <gcds-icon class="notice__icon" name="exclamation-triangle" size="h4"></gcds-icon>
+          <gcds-icon class="notice__icon" name="warning-triangle" size="h4"></gcds-icon>
           <div>
             <gcds-heading class="notice__heading" margin-top="0" margin-bottom="100" tag="h3">
               <gcds-sr-only tag="span">Warning: </gcds-sr-only>
@@ -265,7 +265,7 @@ describe('gcds-notice', () => {
       .toEqualHtml(`<gcds-notice notice-title-tag="h4" notice-title="GC Design System notice" type="warning">
       <mock:shadow-root>
         <section class="gcds-notice notice--type-warning">
-          <gcds-icon class="notice__icon" name="exclamation-triangle" size="h4"></gcds-icon>
+          <gcds-icon class="notice__icon" name="warning-triangle" size="h4"></gcds-icon>
           <div>
             <gcds-heading class="notice__heading" margin-top="0" margin-bottom="100" tag="h4">
               <gcds-sr-only tag="span">Warning: </gcds-sr-only>
@@ -293,7 +293,7 @@ describe('gcds-notice', () => {
       .toEqualHtml(`<gcds-notice notice-title-tag="h5" notice-title="GC Design System notice" type="warning">
       <mock:shadow-root>
         <section class="gcds-notice notice--type-warning">
-          <gcds-icon class="notice__icon" name="exclamation-triangle" size="h4"></gcds-icon>
+          <gcds-icon class="notice__icon" name="warning-triangle" size="h4"></gcds-icon>
           <div>
             <gcds-heading class="notice__heading" margin-top="0" margin-bottom="100" tag="h5">
               <gcds-sr-only tag="span">Warning: </gcds-sr-only>

From b8ce7d70e538fcd833adf0de017120f60b6f644b Mon Sep 17 00:00:00 2001
From: Melanie Boeckmann <melanie.bockmann@gmail.com>
Date: Tue, 18 Feb 2025 08:47:02 -0800
Subject: [PATCH 03/13] chore: update icon stories

---
 .../gcds-icon/stories/gcds-icon.stories.tsx   | 47 ++++++++++++++-----
 .../components/gcds-icon/stories/overview.mdx |  6 +--
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/packages/web/src/components/gcds-icon/stories/gcds-icon.stories.tsx b/packages/web/src/components/gcds-icon/stories/gcds-icon.stories.tsx
index d9462070d..0e1d929ca 100644
--- a/packages/web/src/components/gcds-icon/stories/gcds-icon.stories.tsx
+++ b/packages/web/src/components/gcds-icon/stories/gcds-icon.stories.tsx
@@ -3,6 +3,7 @@ export default {
 
   argTypes: {
     // Props
+    // TODO: Will be removed in separate pull request
     iconStyle: {
       name: 'icon-style',
       control: { type: 'select' },
@@ -102,7 +103,23 @@ export default {
       },
     },
     name: {
-      control: 'text',
+      control: { type: 'select' },
+      options: [
+        'checkmark-circle',
+        'chevron-down',
+        'chevron-left',
+        'chevron-right',
+        'chevron-up',
+        'close',
+        'download',
+        'email',
+        'exclamation-circle',
+        'external',
+        'info-circle',
+        'phone',
+        'search',
+        'warning-triangle',
+      ],
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: '-' },
@@ -111,6 +128,7 @@ export default {
         required: true,
       },
     },
+    // TODO: Will be removed in separate pull request
     fixedWidth: {
       name: 'fixed-width',
       control: { type: 'select' },
@@ -491,7 +509,9 @@ const TemplateMultiple = args =>
     args.size2 != 'text' ? `size="${args.size2}"` : null
   }></gcds-icon>
 <gcds-icon name="${args.name3}" ${
-    args.size3 != 'text' ? `size="${args.size3}"` : null
+    args.name3 === 'close' || args.size3 != 'text'
+      ? `size="${args.size3}"`
+      : null
   }></gcds-icon>
 <gcds-icon name="${args.name4}" ${
     args.size4 != 'text' ? `size="${args.size4}"` : null
@@ -520,7 +540,9 @@ const TemplateMultiple = args =>
     args.size2 != 'text' ? `size="${args.size2}"` : null
   }></GcdsIcon>
 <GcdsIcon name="${args.name3}" ${
-    args.size3 != 'text' ? `size="${args.size3}"` : null
+    args.name3 === 'close' || args.size3 != 'text'
+      ? `size="${args.size3}"`
+      : null
   }></GcdsIcon>
 <GcdsIcon name="${args.name4}" ${
     args.size4 != 'text' ? `size="${args.size4}"` : null
@@ -542,6 +564,7 @@ const TemplateMultiple = args =>
   }></GcdsIcon>
 `.replace(/ null/g, '');
 
+// TODO: Will be removed in separate pull request
 const TemplateTwo = args =>
   `
 <!-- Web component code (Angular, Vue) -->
@@ -591,15 +614,15 @@ Default.args = {
 
 export const Name = TemplateMultiple.bind({});
 Name.args = {
-  name1: 'close',
-  name2: 'external-link',
-  name3: 'caret-up',
-  name4: 'caret-down',
-  name5: 'exclamation-circle',
-  name6: 'sync',
+  name1: 'checkmark-circle',
+  name2: 'chevron-down',
+  name3: 'chevron-left',
+  name4: 'chevron-right',
+  name5: 'chevron-up',
+  name6: 'close',
   name7: 'download',
-  name8: 'check',
-  name9: 'paperclip',
+  name8: 'email',
+  name9: 'exclamation-circle',
   size1: 'text',
   size2: 'text',
   size3: 'text',
@@ -711,8 +734,8 @@ MarginRight.args = {
   size: 'text-small',
 };
 
+// TODO: Will be removed in separate pull request
 // ------ Icon width ------
-
 export const Width = TemplateTwo.bind({});
 Width.args = {
   name: 'close',
diff --git a/packages/web/src/components/gcds-icon/stories/overview.mdx b/packages/web/src/components/gcds-icon/stories/overview.mdx
index 45ca6129c..606362d86 100644
--- a/packages/web/src/components/gcds-icon/stories/overview.mdx
+++ b/packages/web/src/components/gcds-icon/stories/overview.mdx
@@ -5,9 +5,9 @@ import * as Icon from './gcds-icon.stories';
 
 # Icon<br/>`<gcds-icon>`
 
-_Also called: glyphs, graphic, symbol._
+_Also called: symbol, glyph, graphic._
 
-Icons are a visual cue to help users understand the context.
+An icon is a symbol that helps understand context through a visual cue.
 
 <Canvas of={Icon.Default} story={{ inline: true }} />
 
@@ -17,8 +17,6 @@ Icons are a visual cue to help users understand the context.
 
 ### Name
 
-Our icon component uses Font Awesome icons. You can find an overview of all available icons on <gcds-button type="link" button-style="text-only" href="https://fontawesome.com/v5/search?p=6&o=r&m=free" target="_blank">fontawesome.com</gcds-button>.
-
 <Canvas of={Icon.Name} story={{ inline: true }} />
 
 ### Size

From f7c28f495404dfa6bde30d22b076a8470f37b592 Mon Sep 17 00:00:00 2001
From: Melanie Boeckmann <melanie.bockmann@gmail.com>
Date: Tue, 18 Feb 2025 09:59:43 -0800
Subject: [PATCH 04/13] feat: change default icon size to inherit

---
 packages/web/src/components/gcds-icon/gcds-icon.tsx    |  4 ++--
 packages/web/src/components/gcds-icon/readme.md        |  2 +-
 .../components/gcds-icon/stories/gcds-icon.stories.tsx |  2 +-
 .../src/components/gcds-icon/test/gcds-icon.spec.ts    | 10 +++++-----
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/components/gcds-icon/gcds-icon.tsx b/packages/web/src/components/gcds-icon/gcds-icon.tsx
index 9583fda6d..ead22c6f5 100644
--- a/packages/web/src/components/gcds-icon/gcds-icon.tsx
+++ b/packages/web/src/components/gcds-icon/gcds-icon.tsx
@@ -96,7 +96,7 @@ export class GcdsIcon {
     | 'h4'
     | 'h3'
     | 'h2'
-    | 'h1' = 'text';
+    | 'h1' = 'inherit';
 
   @Watch('size')
   validateSize(newValue: string) {
@@ -113,7 +113,7 @@ export class GcdsIcon {
     ];
 
     if (!values.includes(newValue)) {
-      this.size = 'text';
+      this.size = 'inherit';
     }
   }
 
diff --git a/packages/web/src/components/gcds-icon/readme.md b/packages/web/src/components/gcds-icon/readme.md
index ecb2b4ab4..56185ac65 100644
--- a/packages/web/src/components/gcds-icon/readme.md
+++ b/packages/web/src/components/gcds-icon/readme.md
@@ -15,7 +15,7 @@
 | `marginLeft`        | `margin-left`  | Add margin to the left of the icon                                                  | `"0" \| "25" \| "50" \| "75" \| "100" \| "125" \| "150" \| "175" \| "200" \| "225" \| "250" \| "300" \| "350" \| "400" \| "450" \| "500" \| "550" \| "600" \| "650" \| "700" \| "750" \| "800" \| "850" \| "900" \| "950" \| "1000" \| "1050" \| "1100" \| "1150" \| "1200" \| "1250"` | `undefined` |
 | `marginRight`       | `margin-right` | Add margin to the right of the icon                                                 | `"0" \| "25" \| "50" \| "75" \| "100" \| "125" \| "150" \| "175" \| "200" \| "225" \| "250" \| "300" \| "350" \| "400" \| "450" \| "500" \| "550" \| "600" \| "650" \| "700" \| "750" \| "800" \| "850" \| "900" \| "950" \| "1000" \| "1050" \| "1100" \| "1150" \| "1200" \| "1250"` | `undefined` |
 | `name` _(required)_ | `name`         | Name of the icon.                                                                   | `"checkmark-circle" \| "chevron-down" \| "chevron-left" \| "chevron-right" \| "chevron-up" \| "close" \| "download" \| "email" \| "exclamation-circle" \| "external" \| "info-circle" \| "phone" \| "search" \| "warning-triangle"`                                                    | `undefined` |
-| `size`              | `size`         | Defines the size of the icon.                                                       | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "inherit" \| "text" \| "text-small"`                                                                                                                                                                                                  | `'text'`    |
+| `size`              | `size`         | Defines the size of the icon.                                                       | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "inherit" \| "text" \| "text-small"`                                                                                                                                                                                                  | `'inherit'` |
 
 
 ## Dependencies
diff --git a/packages/web/src/components/gcds-icon/stories/gcds-icon.stories.tsx b/packages/web/src/components/gcds-icon/stories/gcds-icon.stories.tsx
index 0e1d929ca..6dfac65a8 100644
--- a/packages/web/src/components/gcds-icon/stories/gcds-icon.stories.tsx
+++ b/packages/web/src/components/gcds-icon/stories/gcds-icon.stories.tsx
@@ -153,7 +153,7 @@ export default {
       ],
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: 'text' },
+        defaultValue: { summary: 'inherit' },
       },
     },
   },
diff --git a/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts b/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts
index 8d29a5878..7101902d3 100644
--- a/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts
+++ b/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts
@@ -10,7 +10,7 @@ describe('gcds-icon', () => {
     expect(root).toEqualHtml(`
       <gcds-icon name="close">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-text"></span>
+          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-inherit"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -24,7 +24,7 @@ describe('gcds-icon', () => {
     expect(root).toEqualHtml(`
       <gcds-icon name="close" margin-left="100">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-text ml-100"></span>
+          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-inherit ml-100"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -38,7 +38,7 @@ describe('gcds-icon', () => {
     expect(root).toEqualHtml(`
       <gcds-icon name="close" margin-right="100">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-text mr-100"></span>
+          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-inherit mr-100"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -66,7 +66,7 @@ describe('gcds-icon', () => {
     expect(root).toEqualHtml(`
       <gcds-icon name="close">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-text"></span>
+          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-inherit"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -80,7 +80,7 @@ describe('gcds-icon', () => {
     expect(root).toEqualHtml(`
       <gcds-icon name="close" label="This is a description">
         <mock:shadow-root>
-          <span aria-hidden="false" aria-label="This is a description" role="img" class="gcds-icon gcds-icon-close size-text"></span>
+          <span aria-hidden="false" aria-label="This is a description" role="img" class="gcds-icon gcds-icon-close size-inherit"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);

From 246cb25bd753deb3d22f6b672cf21d075a8220b7 Mon Sep 17 00:00:00 2001
From: Melanie Boeckmann <melanie.bockmann@gmail.com>
Date: Tue, 18 Feb 2025 10:19:24 -0800
Subject: [PATCH 05/13] chore: update icon demo

---
 .../src/components/gcds-icon/gcds-icon.tsx    |   2 +-
 packages/web/src/index.html                   | 118 ++++++++++++++----
 2 files changed, 98 insertions(+), 22 deletions(-)

diff --git a/packages/web/src/components/gcds-icon/gcds-icon.tsx b/packages/web/src/components/gcds-icon/gcds-icon.tsx
index ead22c6f5..0e216f9c3 100644
--- a/packages/web/src/components/gcds-icon/gcds-icon.tsx
+++ b/packages/web/src/components/gcds-icon/gcds-icon.tsx
@@ -138,7 +138,7 @@ export class GcdsIcon {
       <Host>
         <span
           class={`
-            gcds-icon gcds-icon-${name}
+            gcds-icon gcds-icon-${name} fa-${iconStyle}
             ${marginLeft ? `ml-${marginLeft}` : ''}
             ${marginRight ? `mr-${marginRight}` : ''}
             ${size ? `size-${size}` : ''}
diff --git a/packages/web/src/index.html b/packages/web/src/index.html
index afa669bb9..0eb1c186d 100644
--- a/packages/web/src/index.html
+++ b/packages/web/src/index.html
@@ -563,26 +563,102 @@
       <!-- ------------- Icons ------------- -->
 
       <gcds-heading tag="h2">Icons</gcds-heading>
-      <gcds-icon name="close" size="text-small" margin-right="150"></gcds-icon>
-      <gcds-icon name="close" size="text" margin-right="150"></gcds-icon>
-      <gcds-icon name="close" size="h6" margin-right="150"></gcds-icon>
-      <gcds-icon name="close" size="h5" margin-right="150"></gcds-icon>
-      <gcds-icon name="close" size="h4" margin-right="150"></gcds-icon>
-      <gcds-icon name="close" size="h3" margin-right="150"></gcds-icon>
-      <gcds-icon name="close" size="h2" margin-right="150"></gcds-icon>
-      <gcds-icon name="close" size="h1" margin-right="150"></gcds-icon>
-
-      <gcds-heading tag="h4">Fixed width icons (square ratio)</gcds-heading>
-      <gcds-icon name="close" size="text" fixed-width></gcds-icon>
-      <gcds-icon name="folder" size="text" fixed-width></gcds-icon>
-      <gcds-icon name="fire" size="text" fixed-width></gcds-icon>
-      <gcds-icon name="utensils" size="text" fixed-width></gcds-icon>
-
-      <gcds-heading tag="h4">Variable width icons (auto width)</gcds-heading>
-      <gcds-icon name="close" size="text"></gcds-icon>
-      <gcds-icon name="folder" size="text"></gcds-icon>
-      <gcds-icon name="fire" size="text"></gcds-icon>
-      <gcds-icon name="utensils" size="text"></gcds-icon>
+
+      <gcds-heading tag="h3">Icon names</gcds-heading>
+      <gcds-grid columns-desktop="1fr 1fr 1fr 1fr" columns-tablet="1fr 1fr" columns="1fr" tag="ul" gap="150">
+        <li class="b-sm p-150 list-none text-center">
+          <gcds-icon name="checkmark-circle" size="h2"></gcds-icon>
+          <p>checkmark-circle</p>
+        </li>
+        <li class="b-sm p-150 list-none text-center">
+          <gcds-icon name="chevron-down" size="h2"></gcds-icon>
+          <p>chevron-down</p>
+        </li>
+        <li class="b-sm p-150 list-none text-center">
+          <gcds-icon name="chevron-left" size="h2"></gcds-icon>
+          <p>chevron-left</p>
+        </li>
+        <li class="b-sm p-150 list-none text-center">
+          <gcds-icon name="chevron-right" size="h2"></gcds-icon>
+          <p>chevron-right</p>
+        </li>
+        <li class="b-sm p-150 list-none text-center">
+          <gcds-icon name="chevron-up" size="h2"></gcds-icon>
+          <p>chevron-up</p>
+        </li>
+        <li class="b-sm p-150 list-none text-center">
+          <gcds-icon name="close" size="h2"></gcds-icon>
+          <p>close</p>
+        </li>
+        <li class="b-sm p-150 list-none text-center">
+          <gcds-icon name="download" size="h2"></gcds-icon>
+          <p>download</p>
+        </li>
+        <li class="b-sm p-150 list-none text-center">
+          <gcds-icon name="email" size="h2"></gcds-icon>
+          <p>email</p>
+        </li>
+        <li class="b-sm p-150 list-none text-center">
+          <gcds-icon name="exclamation-circle" size="h2"></gcds-icon>
+          <p>exclamation-circle</p>
+        </li>
+        <li class="b-sm p-150 list-none text-center">
+          <gcds-icon name="external" size="h2"></gcds-icon>
+          <p>external</p>
+        </li>
+        <li class="b-sm p-150 list-none text-center">
+          <gcds-icon name="info-circle" size="h2"></gcds-icon>
+          <p>info-circle</p>
+        </li>
+        <li class="b-sm p-150 list-none text-center">
+          <gcds-icon name="phone" size="h2"></gcds-icon>
+          <p>phone</p>
+        </li>
+        <li class="b-sm p-150 list-none text-center">
+          <gcds-icon name="search" size="h2"></gcds-icon>
+          <p>search</p>
+        </li>
+        <li class="b-sm p-150 list-none text-center">
+          <gcds-icon name="warning-triangle" size="h2"></gcds-icon>
+          <p>warning-triangle</p>
+        </li>
+      </gcds-grid>
+
+      <gcds-heading tag="h3">Icon sizes</gcds-heading>
+      <ul class="b-sm">
+        <li class="d-flex align-items-center bb-sm p-150">
+          <gcds-icon name="close" size="text-small" margin-right="150"></gcds-icon>
+          <span> Size: text-small</span>
+        </li>
+        <li class="d-flex align-items-center bb-sm p-150">
+          <gcds-icon name="close" size="text" margin-right="150"></gcds-icon>
+          <span> Size: text</span>
+        </li>
+        <li class="d-flex align-items-center bb-sm p-150">
+          <gcds-icon name="close" size="h6" margin-right="150"></gcds-icon>
+          <span> Size: h6</span>
+        </li>
+        <li class="d-flex align-items-center bb-sm p-150">
+          <gcds-icon name="close" size="h5" margin-right="150"></gcds-icon>
+          <span> Size: h5</span>
+        </li>
+        <li class="d-flex align-items-center bb-sm p-150">
+          <gcds-icon name="close" size="h4" margin-right="150"></gcds-icon>
+          <span> Size: h4</span>
+        </li>
+        <li class="d-flex align-items-center bb-sm p-150">
+          <gcds-icon name="close" size="h3" margin-right="150"></gcds-icon>
+          <span> Size: h3</span>
+        </li>
+        <li class="d-flex align-items-center bb-sm p-150">
+          <gcds-icon name="close" size="h2" margin-right="150"></gcds-icon>
+          <span> Size: h2</span>
+        </li>
+        <li class="d-flex align-items-center p-150">
+          <gcds-icon name="close" size="h1" margin-right="150"></gcds-icon>
+          <span> Size: h1</span>
+        </li>
+      </ul>
 
       <hr class="my-550" />
 
@@ -673,7 +749,7 @@
 
       <gcds-heading tag="h2">Phase banner</gcds-heading>
       <gcds-phase-banner banner-role="primary">
-        <gcds-icon name="tree" size="sm" slot="banner-icon-left"></gcds-icon>
+        <gcds-icon name="info-circle" slot="banner-icon-left"></gcds-icon>
         <p slot="banner-text">Exciting announcement.</p>
       </gcds-phase-banner>
 

From cd9863a6f32fb14a038644999d689b382f12f993 Mon Sep 17 00:00:00 2001
From: Melanie Boeckmann <melanie.bockmann@gmail.com>
Date: Tue, 18 Feb 2025 15:59:08 -0800
Subject: [PATCH 06/13] chore: fix icon tests

---
 .../components/gcds-icon/test/gcds-icon.spec.ts  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts b/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts
index 7101902d3..1ced9e4f2 100644
--- a/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts
+++ b/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts
@@ -10,7 +10,7 @@ describe('gcds-icon', () => {
     expect(root).toEqualHtml(`
       <gcds-icon name="close">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-inherit"></span>
+          <span aria-hidden="true" role="img" class="fa-solid gcds-icon gcds-icon-close size-inherit"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -24,7 +24,7 @@ describe('gcds-icon', () => {
     expect(root).toEqualHtml(`
       <gcds-icon name="close" margin-left="100">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-inherit ml-100"></span>
+          <span aria-hidden="true" role="img" class="fa-solid gcds-icon gcds-icon-close size-inherit ml-100"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -38,7 +38,7 @@ describe('gcds-icon', () => {
     expect(root).toEqualHtml(`
       <gcds-icon name="close" margin-right="100">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-inherit mr-100"></span>
+          <span aria-hidden="true" role="img" class="fa-solid gcds-icon gcds-icon-close size-inherit mr-100"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -52,7 +52,7 @@ describe('gcds-icon', () => {
     expect(root).toEqualHtml(`
       <gcds-icon name="close" size="h3">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-h3"></span>
+          <span aria-hidden="true" role="img" class="fa-solid gcds-icon gcds-icon-close size-h3"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -66,7 +66,7 @@ describe('gcds-icon', () => {
     expect(root).toEqualHtml(`
       <gcds-icon name="close">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-inherit"></span>
+          <span aria-hidden="true" role="img" class="fa-solid gcds-icon gcds-icon-close size-inherit"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -80,7 +80,7 @@ describe('gcds-icon', () => {
     expect(root).toEqualHtml(`
       <gcds-icon name="close" label="This is a description">
         <mock:shadow-root>
-          <span aria-hidden="false" aria-label="This is a description" role="img" class="gcds-icon gcds-icon-close size-inherit"></span>
+          <span aria-hidden="false" aria-label="This is a description" role="img" class="fa-solid gcds-icon gcds-icon-close size-inherit"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -95,7 +95,7 @@ describe('gcds-icon', () => {
     expect(root).toEqualHtml(`
       <gcds-icon name="close" size="h3" icon-style="regular">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-h3"></span>
+          <span aria-hidden="true" role="img" class="fa-solid gcds-icon gcds-icon-close size-h3"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);
@@ -110,7 +110,7 @@ describe('gcds-icon', () => {
     expect(root).toEqualHtml(`
       <gcds-icon name="close" size="h3" fixed-width>
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="gcds-icon gcds-icon-close size-h3 fixed-width"></span>
+          <span aria-hidden="true" role="img" class="fa-solid gcds-icon gcds-icon-close size-h3 fixed-width"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);

From f62be034634f8dcc0291026addfbdd4212bf7914 Mon Sep 17 00:00:00 2001
From: Melanie Boeckmann <melanie.bockmann@gmail.com>
Date: Tue, 18 Feb 2025 16:14:51 -0800
Subject: [PATCH 07/13] chore: fix icon tests

---
 packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts b/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts
index 1ced9e4f2..afe34a47a 100644
--- a/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts
+++ b/packages/web/src/components/gcds-icon/test/gcds-icon.spec.ts
@@ -95,7 +95,7 @@ describe('gcds-icon', () => {
     expect(root).toEqualHtml(`
       <gcds-icon name="close" size="h3" icon-style="regular">
         <mock:shadow-root>
-          <span aria-hidden="true" role="img" class="fa-solid gcds-icon gcds-icon-close size-h3"></span>
+          <span aria-hidden="true" role="img" class="fa-regular gcds-icon gcds-icon-close size-h3"></span>
         </mock:shadow-root>
       </gcds-icon>
     `);

From 812426514cb8d31dedfcad3d689fe013a6bbb86c Mon Sep 17 00:00:00 2001
From: Melanie Boeckmann <melanie.bockmann@gmail.com>
Date: Wed, 19 Feb 2025 08:09:02 -0800
Subject: [PATCH 08/13] chore: include gcds-icon font in global css, build &
 assets

---
 package-lock.json                             |   7 +
 package.json                                  |   3 +-
 packages/web/package.json                     |   1 +
 packages/web/src/assets/css/global.css        |  12 +
 .../web/src/assets/fonts/icons/LICENSE.txt    |  92 ++++
 packages/web/src/assets/fonts/icons/README.md | 447 ++++++++++++++++++
 .../web/src/assets/fonts/icons/gcds-icons.css |  85 ++++
 .../web/src/assets/fonts/icons/gcds-icons.eot | Bin 0 -> 2536 bytes
 .../web/src/assets/fonts/icons/gcds-icons.svg |  24 +
 .../web/src/assets/fonts/icons/gcds-icons.ttf | Bin 0 -> 2360 bytes
 .../src/assets/fonts/icons/gcds-icons.woff    | Bin 0 -> 2436 bytes
 packages/web/stencil.config.ts                |  11 +-
 12 files changed, 679 insertions(+), 3 deletions(-)
 create mode 100644 packages/web/src/assets/css/global.css
 create mode 100644 packages/web/src/assets/fonts/icons/LICENSE.txt
 create mode 100644 packages/web/src/assets/fonts/icons/README.md
 create mode 100644 packages/web/src/assets/fonts/icons/gcds-icons.css
 create mode 100644 packages/web/src/assets/fonts/icons/gcds-icons.eot
 create mode 100644 packages/web/src/assets/fonts/icons/gcds-icons.svg
 create mode 100644 packages/web/src/assets/fonts/icons/gcds-icons.ttf
 create mode 100644 packages/web/src/assets/fonts/icons/gcds-icons.woff

diff --git a/package-lock.json b/package-lock.json
index ca20eab64..b5d436e70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4054,6 +4054,12 @@
       "resolved": "packages/vue",
       "link": true
     },
+    "node_modules/@cdssnc/gcds-fonts": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@cdssnc/gcds-fonts/-/gcds-fonts-0.2.1.tgz",
+      "integrity": "sha512-rnztzlhdQWwB4tBFDPRr4/5mtNaDNHV/9nNsQ0GGlMWRTIQWuZeD6RLwmlbqcyeP0KPHAilqgi03NtQT8zP+Sw==",
+      "dev": true
+    },
     "node_modules/@cdssnc/gcds-tokens": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/@cdssnc/gcds-tokens/-/gcds-tokens-2.6.0.tgz",
@@ -42171,6 +42177,7 @@
         "@babel/preset-env": "^7.20.2",
         "@babel/preset-typescript": "^7.21.0",
         "@cdssnc/gcds-tokens": "^2.6.0",
+        "@cdssnc/gcds-fonts": "^0.2.1",
         "@fortawesome/fontawesome-free": "^6.3.0",
         "@stencil/angular-output-target": "file:../../utils/angular-output-target",
         "@stencil/postcss": "^2.1.0",
diff --git a/package.json b/package.json
index 7693e2a7d..af0f1a002 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "ng": "ng",
     "compile": "gulp compile",
-    "build": "npm run build --ws",
+    "copy-icon-font": "cp -R ./node_modules/@cdssnc/gcds-fonts/fonts/icons/* ./packages/web/src/assets/fonts/icons",
+    "build": "npm run copy-icon-font && npm run build --ws",
     "pretest": "npm run patch:stenciljs",
     "test": "npm run test --workspace=utils/angular-output-target --workspace=packages/web --workspace=packages/vue",
     "build-storybook": "npm run build-storybook -w @cdssnc/gcds-components",
diff --git a/packages/web/package.json b/packages/web/package.json
index 9dc1c4303..c4d612586 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -46,6 +46,7 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.21.0",
     "@cdssnc/gcds-tokens": "^2.6.0",
+    "@cdssnc/gcds-fonts": "^0.2.1",
     "@fortawesome/fontawesome-free": "^6.3.0",
     "@stencil/angular-output-target": "file:../../utils/angular-output-target",
     "@stencil/postcss": "^2.1.0",
diff --git a/packages/web/src/assets/css/global.css b/packages/web/src/assets/css/global.css
new file mode 100644
index 000000000..5806b8e37
--- /dev/null
+++ b/packages/web/src/assets/css/global.css
@@ -0,0 +1,12 @@
+/* Import GC Design System Tokens */
+@import '../../../../../node_modules/@cdssnc/gcds-tokens/build/web/css/tokens.css';
+
+/* Import GC Design System Icon Font */
+@font-face {
+  font-family: 'gcds-icons';
+  src: url("/dist/gcds/assets/fonts/gcds-icons.woff2") format("woff2"),
+        url("/dist/gcds/assets/fonts/gcds-icons.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
diff --git a/packages/web/src/assets/fonts/icons/LICENSE.txt b/packages/web/src/assets/fonts/icons/LICENSE.txt
new file mode 100644
index 000000000..af7106f69
--- /dev/null
+++ b/packages/web/src/assets/fonts/icons/LICENSE.txt
@@ -0,0 +1,92 @@
+Copyright (c) 2024, His Majesty in Right of Canada, as represented by the Minister of Employment and Social Development, with Reserved Font Name GCDS icons.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/packages/web/src/assets/fonts/icons/README.md b/packages/web/src/assets/fonts/icons/README.md
new file mode 100644
index 000000000..c574e02a7
--- /dev/null
+++ b/packages/web/src/assets/fonts/icons/README.md
@@ -0,0 +1,447 @@
+([Français](#polices-de-système-de-design-gc--icônes))
+
+# GC Design System Fonts - GCDS Icons
+
+GC Design System Fonts - GCDS Icons is a custom icon font created for the GC Design System. Icon fonts provide scalable vector icons that enhance performance, maintain consistency, and offer easy customization through CSS. Icons are used for visual communication that helps a person understand context.
+
+To remove the reliance on a third-party icon library (Font Awesome) we built a custom icon font. This also provides the GC Design System with more control over icons available to users. FontAwesome provides an extensive collection of icons, most of which will not be used for our components. By limiting the scope of available icons, we aim to prevent misuse and provide clear guidelines on the appropriate usage of each icon.
+
+## Installation
+
+### Install icon font with CDN
+
+#### Add the code
+
+Use the latest version of GC Design System icons. Pinned versions provide stability and predictability because the code will remain consistent and won't change unexpectedly, which can be crucial for maintaining the stability of an application. However, it requires manual updating of the CDN links whenever a newer version of GC Design System icons is released.
+
+To use GC Design System icons in your project, place the following code in your CSS or include the [gcds-icons.css](https://github.com/cds-snc/gcds-fonts/blob/main/fonts/icons/gcds-icons.css) file in your project. Replace `<version-number>` with the latest version number to receive corresponding updates.
+
+```css
+<!-- GC Design System Fonts - Icons -->
+@font-face {
+  font-family: "gcds-icons";
+  src: url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@<version-number>/icons/gcds-icons.eot");
+  src: url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@<version-number>/icons/gcds-icons.eot#iefix")
+      format("embedded-opentype"), url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@<version-number>/icons/gcds-icons.ttf")
+      format("truetype"),
+    url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@<version-number>/icons/gcds-icons.woff")
+      format("woff"), url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@<version-number>/icons/gcds-icons.svg")
+      format("svg");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="gcds-icon-"],
+[class*=" gcds-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "gcds-icons" !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.gcds-icon-checkmark-circle:before {
+  content: "\e908";
+}
+
+.gcds-icon-chevron-down:before {
+  content: "\e900";
+}
+
+.gcds-icon-chevron-left:before {
+  content: "\e901";
+}
+
+.gcds-icon-chevron-right:before {
+  content: "\e902";
+}
+
+.gcds-icon-chevron-up:before {
+  content: "\e903";
+}
+
+.gcds-icon-close:before {
+  content: "\e90b";
+}
+
+.gcds-icon-download:before {
+  content: "\e906";
+}
+
+.gcds-icon-email:before {
+  content: "\e905";
+}
+
+.gcds-icon-exclamation-circle:before {
+  content: "\e909";
+}
+
+.gcds-icon-external:before {
+  content: "\e904";
+}
+
+.gcds-icon-information-circle:before {
+  content: "\e90a";
+}
+
+.gcds-icon-phone:before {
+  content: "\e90c";
+}
+
+.gcds-icon-search:before {
+  content: "\e907";
+}
+
+.gcds-icon-warning-triangle:before {
+  content: "\e90d";
+}
+```
+
+#### Automatic updates using `@latest`
+
+Use the `@latest` version of GC Design System icons to receive automatic updates whenever a new version is released. **While it removes the need to manually update the CDN links, it adds the risk of introducing breaking changes to the codebase as new versions are automatically applied**.
+
+### Install icon font with npm
+
+Navigate to the root folder of your project and run:
+
+```js
+npm install @cdssnc/gcds-fonts
+```
+
+Place the following code in your CSS and replace `path/to/node_modules` with the location where you've added the node modules:
+
+```css
+<!-- GC Design System Fonts - Icons -->
+@font-face {
+  font-family: "gcds-icons";
+  src: url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.eot");
+  src: url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.eot#iefix")
+      format("embedded-opentype"), url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.ttf")
+      format("truetype"),
+    url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.woff")
+      format("woff"), url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.svg")
+      format("svg");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="gcds-icon-"],
+[class*=" gcds-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "gcds-icons" !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.gcds-icon-checkmark-circle:before {
+  content: "\e908";
+}
+
+.gcds-icon-chevron-down:before {
+  content: "\e900";
+}
+
+.gcds-icon-chevron-left:before {
+  content: "\e901";
+}
+
+.gcds-icon-chevron-right:before {
+  content: "\e902";
+}
+
+.gcds-icon-chevron-up:before {
+  content: "\e903";
+}
+
+.gcds-icon-close:before {
+  content: "\e90b";
+}
+
+.gcds-icon-download:before {
+  content: "\e906";
+}
+
+.gcds-icon-email:before {
+  content: "\e905";
+}
+
+.gcds-icon-exclamation-circle:before {
+  content: "\e909";
+}
+
+.gcds-icon-external:before {
+  content: "\e904";
+}
+
+.gcds-icon-information-circle:before {
+  content: "\e90a";
+}
+
+.gcds-icon-phone:before {
+  content: "\e90c";
+}
+
+.gcds-icon-search:before {
+  content: "\e907";
+}
+
+.gcds-icon-warning-triangle:before {
+  content: "\e90d";
+}
+```
+
+## How to use icons
+
+Open the [icons overview]() to see a list of all available GC Design System icons and find the icon class name of the icon you want to use. Apply the class to any HTML element where you want the icon to appear. Replace `gcds-icon-name` with the specific class name for the icon you want to use.
+
+```html
+<span class="gcds-icon-name"></span>
+```
+
+If you want to use the close icon, for example, you need to add the class `gcds-icon-close`:
+
+```html
+<span class="gcds-icon-close"></span>
+```
+
+## Example
+
+Open the [icons overview]() to see a list of all available GC Design System icons. You can find the code for the icons overview page in the [examples folder](https://github.com/cds-snc/gcds-fonts/tree/main/examples/icons).
+
+---
+
+# Polices de Système de design GC — GCDS Icônes
+
+Polices de Système de design GC — GCDS Icônes est une police d'icônes sur mesure créée pour Système de design GC. Les polices d'icônes fournissent des icônes vectorielles redimensionnables qui améliorent la performance, assurent l'uniformité et offrent une personnalisation facile par le biais de CSS. Les icônes sont utilisées pour communiquer visuellement et aider les gens à comprendre le contexte.
+
+Pour éviter de recourir à une bibliothèque d'icônes tierce (Font Awesome), nous avons créé une police d'icônes sur mesure. Nous pouvons ainsi mieux contrôler les icônes mises à la disposition des utilisatrices et utilisateurs de Système de design GC. Font Awesome fournit une vaste collection d'icônes, dont la plupart ne seront pas utilisées pour nos composants. En limitant la quantité d'icônes disponibles, nous visons à prévenir les mauvais usages et à fournir des directives claires sur l'usage approprié de chaque icône.
+
+## Installation
+
+### Installer la police d'icônes avec le CDN
+
+#### Ajoutez le code
+
+Utilisez la version la plus récente de icônes de Système de design GC. Les versions épinglées offrent stabilité et prévisibilité parce que le code ne changera pas de manière inattendue, ce qui peut être crucial pour maintenir la stabilité d'une application. Toutefois, il faut mettre à jour manuellement les liens CDN chaque fois qu'une version plus récente de icônes de Système de design GC est publiée.
+
+Pour utiliser les icônes de Système de design GC dans votre projet, placez le code suivant dans votre CSS ou incluez le fichier [gcds-icons.css](https://github.com/cds-snc/gcds-fonts/blob/main/fonts/icons/gcds-icons.css) dans votre projet. Remplacez `<version-number>` par le numéro de version le plus récent pour recevoir les mises à jour correspondantes.
+
+```css
+<!-- Polices de Système de design GC — Icônes -->
+@font-face {
+  font-family: "gcds-icons";
+  src: url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@<version-number>/icons/gcds-icons.eot");
+  src: url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@<version-number>/icons/gcds-icons.eot#iefix")
+      format("embedded-opentype"), url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@<version-number>/icons/gcds-icons.ttf")
+      format("truetype"),
+    url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@<version-number>/icons/gcds-icons.woff")
+      format("woff"), url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@<version-number>/icons/gcds-icons.svg")
+      format("svg");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="gcds-icon-"],
+[class*=" gcds-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "gcds-icons" !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.gcds-icon-checkmark-circle:before {
+  content: "\e908";
+}
+
+.gcds-icon-chevron-down:before {
+  content: "\e900";
+}
+
+.gcds-icon-chevron-left:before {
+  content: "\e901";
+}
+
+.gcds-icon-chevron-right:before {
+  content: "\e902";
+}
+
+.gcds-icon-chevron-up:before {
+  content: "\e903";
+}
+
+.gcds-icon-close:before {
+  content: "\e90b";
+}
+
+.gcds-icon-download:before {
+  content: "\e906";
+}
+
+.gcds-icon-email:before {
+  content: "\e905";
+}
+
+.gcds-icon-exclamation-circle:before {
+  content: "\e909";
+}
+
+.gcds-icon-external:before {
+  content: "\e904";
+}
+
+.gcds-icon-information-circle:before {
+  content: "\e90a";
+}
+
+.gcds-icon-phone:before {
+  content: "\e90c";
+}
+
+.gcds-icon-search:before {
+  content: "\e907";
+}
+
+.gcds-icon-warning-triangle:before {
+  content: "\e90d";
+}
+```
+
+#### Mises à jour automatiques grâce à `@latest`
+
+Utilisez la version `@latest` de icônes de Système de design GC pour recevoir des mises à jour automatiques chaque fois qu'une nouvelle version est publiée. **Bien que cette approche vous évite la mise à jour manuelle des liens CDN, elle court le risque d'introduire des modifications qui entraînent une rupture de compatibilité avec le code base à mesure que les nouvelles versions sont automatiquement appliquées**.
+
+### Installer la police d'icônes avec npm
+
+Naviguez jusqu'au dossier racine de votre projet et exécutez :
+
+```js
+npm install @cdssnc/gcds-fonts
+```
+
+Placez le code suivant dans votre CSS et remplacez `path/to/node_modules` par l'emplacement où vous avez ajouté les modules de Node :
+
+```css
+<!-- Polices de Système de design GC — Icônes -->
+@font-face {
+  font-family: "gcds-icons";
+  src: url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.eot");
+  src: url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.eot#iefix")
+      format("embedded-opentype"), url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.ttf")
+      format("truetype"),
+    url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.woff")
+      format("woff"), url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.svg")
+      format("svg");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="gcds-icon-"],
+[class*=" gcds-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "gcds-icons" !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.gcds-icon-checkmark-circle:before {
+  content: "\e908";
+}
+
+.gcds-icon-chevron-down:before {
+  content: "\e900";
+}
+
+.gcds-icon-chevron-left:before {
+  content: "\e901";
+}
+
+.gcds-icon-chevron-right:before {
+  content: "\e902";
+}
+
+.gcds-icon-chevron-up:before {
+  content: "\e903";
+}
+
+.gcds-icon-close:before {
+  content: "\e90b";
+}
+
+.gcds-icon-download:before {
+  content: "\e906";
+}
+
+.gcds-icon-email:before {
+  content: "\e905";
+}
+
+.gcds-icon-exclamation-circle:before {
+  content: "\e909";
+}
+
+.gcds-icon-external:before {
+  content: "\e904";
+}
+
+.gcds-icon-information-circle:before {
+  content: "\e90a";
+}
+
+.gcds-icon-phone:before {
+  content: "\e90c";
+}
+
+.gcds-icon-search:before {
+  content: "\e907";
+}
+
+.gcds-icon-warning-triangle:before {
+  content: "\e90d";
+}
+```
+
+## Comment utiliser les icônes
+
+Ouvrez l'[aperçu des icônes]() pour afficher la liste de toutes les icônes de Système de design GC disponibles et trouver le nom de classe de l'icône que vous souhaitez utiliser. Appliquez la classe à n'importe quel élément HTML auquel vous voulez ajouter l'icône. Remplacez `gcds-icon-name` par le nom de classe de l'icône que vous souhaitez utiliser.
+
+```html
+<span class="gcds-icon-name"></span>
+```
+
+Si vous voulez utiliser l'icône « fermer », par exemple, vous devez ajouter la classe `gcds-icon-close` :
+
+```html
+<span class="gcds-icon-close"></span>
+```
+
+## Exemple
+
+Ouvrez l'[aperçu des icônes]() pour afficher la liste de toutes les icônes de Système de design GC disponibles. Vous trouverez le code accompagnant l'aperçu des icônes dans le dossier [exemples](https://github.com/cds-snc/gcds-fonts/tree/main/examples/icons).
diff --git a/packages/web/src/assets/fonts/icons/gcds-icons.css b/packages/web/src/assets/fonts/icons/gcds-icons.css
new file mode 100644
index 000000000..6e9843732
--- /dev/null
+++ b/packages/web/src/assets/fonts/icons/gcds-icons.css
@@ -0,0 +1,85 @@
+/*
+  Replace <path-to-file> with the correct path to
+  the gcds-icon font files in your project
+*/
+@font-face {
+  font-family: "gcds-icons";
+  src: url("<path-to-file>/gcds-icons.eot");
+  src: url("<path-to-file>/gcds-icons.eot#iefix") format("embedded-opentype"),
+    url("<path-to-file>/gcds-icons.ttf") format("truetype"),
+    url("<path-to-file>/gcds-icons.woff") format("woff"),
+    url("<path-to-file>/gcds-icons.svg") format("svg");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="gcds-icon-"],
+[class*=" gcds-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "gcds-icons" !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.gcds-icon-checkmark-circle:before {
+  content: "\e908";
+}
+
+.gcds-icon-chevron-down:before {
+  content: "\e900";
+}
+
+.gcds-icon-chevron-left:before {
+  content: "\e901";
+}
+
+.gcds-icon-chevron-right:before {
+  content: "\e902";
+}
+
+.gcds-icon-chevron-up:before {
+  content: "\e903";
+}
+
+.gcds-icon-close:before {
+  content: "\e90b";
+}
+
+.gcds-icon-download:before {
+  content: "\e906";
+}
+
+.gcds-icon-email:before {
+  content: "\e905";
+}
+
+.gcds-icon-exclamation-circle:before {
+  content: "\e909";
+}
+
+.gcds-icon-external:before {
+  content: "\e904";
+}
+
+.gcds-icon-information-circle:before {
+  content: "\e90a";
+}
+
+.gcds-icon-phone:before {
+  content: "\e90c";
+}
+
+.gcds-icon-search:before {
+  content: "\e907";
+}
+
+.gcds-icon-warning-triangle:before {
+  content: "\e90d";
+}
diff --git a/packages/web/src/assets/fonts/icons/gcds-icons.eot b/packages/web/src/assets/fonts/icons/gcds-icons.eot
new file mode 100644
index 0000000000000000000000000000000000000000..0b1d1e921786489a918741a774a253f8b5911ec9
GIT binary patch
literal 2536
zcmb6bTTB~AaOMtdFbT$heKb%w`!EMMp%`Nh65H@aA%rv~+$o}IS_d2;0gS*=i5gW_
zl}L?5)O@7Mqf!;|iK|F$REdv%@R>e7`Vj3;6{)RMHER0P3cli_vwOC{ZGzO%?d`mF
zW_EUGcYiMh=%$7sKp`O9K*l+CqL9yYEl|r>mj5jSsD?=xhY47OLoiKP66Od8D2EY9
zknAGNKpYl`;{k&>3nZQ9S~3Ko4cbZaJR2lp&dVSTBDBA9@}&-ErHuvtIkh*(XXEpd
z@!d^Qsv~-IGQK!ZeFf31FPWUVbnf2eda{5^0L3L!iTFfwOXP0=TbkruQ^c@e6u&2W
zjp)Xy+0;_xXTret6a5BelH>8xD<uN}_C}(cX5&lqG>ItD$B35a;<JelAAa@;(KF;@
zbw0V6qBsdkYnU8F@hiLm#Q?$`;cMc&Z}s>Ggpk&t0Fc5igg$`B`^EL`b?6hRk&xvg
z4>CuXH`eM%X7wW1s)HivCcXnoXrTq-$&dGMXScWcDETpP9Jha!ifG(!y9h{HPR1k8
zK%ObzS`SzGUp!H#u{8HmluA*f5Zrxc#?18LTj=RCSJCLRd<Y+to{j0*NfmJg9Z_=)
z2cqT{uA5si9KeB?xy1tK{<(hMu3ZS4TTvV^*P=VhmYx{O`&Y>{J~1~*4_}T74s(-?
znrksOv+Z>;O?nPEK(q9^LN2e%>-M@(342{i7}a(yhFVu}LjWVIW7^yh4&23nZhjQe
zw5#3P2N*EZLdGybFm!X{uEp0V^_J}n+1>{dKouEQ+7+Ly_=1Y$br<{TBc3iA#`z1|
zaN)dR2&*hXsH2`WM0b{GJ+Qi}XENl1uiK7IH+U%>!EOvnS}sJ@?owQ;UGlrV;Sja<
z&R_^P0)d8xV+{?FWn($=(ELGIHJ+{-=x%M58;0bD$aOqpu3V3N5lE*u^fYr~`8Yvw
z*TP|nyOSp%)FIWQ<Z)Nq%h7IAd}<r2O=>k~hB~@5NmFAO?&NI6$CccFIV-eAe@knl
zzpH|v%iq}A;&0R{oZ~e$BbwIxj<fkz|LqrEWK?%=ucnRE)Zm|m>iMDm7LuQoYU*om
z4c_(}L5r%9PLiE`%q-V+pio{4q6`<#z;CA<p(<v4zSQvXQ>Ts(r+frExcS?o;Un+i
zfe5buS7<3_9t}sXkp{~bRUPdi%eM@4PGD~O`Q-5Y<x^9oghOG)6%yciwgU!%cwu)$
zyYXyV*Lf{key{R%YT&cp!>`EQhC}#7A3B=!%Ca|kbVwiF!4JMlAdY$E<j~OQ=+ID7
z_U^{BceX}Ga`h*w<g<*`tHw*4s#e8MO|u6@6nadP|IBO;uA?JnZeke~FDv6RDm%&-
zuVG%B%|uj{qvGpOJbWWb5!ymsT5%n^tMhv--02B*_(C|^U)5Px>kyri)Z<f{sw&Yj
z7M(u*+O=kNEE)^g#3FOk>1p!$4ojX2+di>2=;^oZv&F`m)oZ6uPkr07vsMo%et}LL
zJ_oO#QlnDAC<2(n;yH7P<=+tdvXIt|jSUtrYs)L;>Ko3;CX^L1OYlqP@{ygMb^x<V
zcMhu`4m5_J-E<H$5Fc<$9MAnKEr~_3VT=}k+-Z!?H^$$M=k*wmgM%*7dgy?oaE7kf
zd+;SZMFVf*H-bYrD4Z9rkQSRuB^=>51+N-w=&pY`+|R{{bS7FOn5G@x&hbU!_vY{-
z!f)j8V#;TI4!05i^&HMl*8A*^DJmsSHAyU7pa;UcIb0<EU=A-L{B8~}rrWk9huerh
znZq5>2@fa7Cl(J)k0<9ApY;GS5(|sd$vHXL*8c2Q$KJ#DmX0JQFV4gl3LiLo59v?N
zrR2%PTw)=fN=(RSFUf=B$>C&jt_}M6V<-hO%_BjNC-y{&LyGzd;+=&{^dIC8t6|b)
O&#N|C8Ft(60sjE?OyI@<

literal 0
HcmV?d00001

diff --git a/packages/web/src/assets/fonts/icons/gcds-icons.svg b/packages/web/src/assets/fonts/icons/gcds-icons.svg
new file mode 100644
index 000000000..ebbd8908d
--- /dev/null
+++ b/packages/web/src/assets/fonts/icons/gcds-icons.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="gcds-icons" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="chevron-down" d="M512 375.467l277.333 277.333 64-64-341.333-341.333-341.333 341.333 64 64 277.333-277.333z" />
+<glyph unicode="&#xe901;" glyph-name="chevron-left" horiz-adv-x="983" d="M417.792 448l266.24-266.24-61.44-61.44-327.68 327.68 327.68 327.68 61.44-61.44-266.24-266.24z" />
+<glyph unicode="&#xe902;" glyph-name="chevron-right" horiz-adv-x="983" d="M561.152 448l-266.24-266.24 61.44-61.44 327.68 327.68-327.68 327.68-61.44-61.44 266.24-266.24z" />
+<glyph unicode="&#xe903;" glyph-name="chevron-up" horiz-adv-x="983" d="M491.52 521.728l-266.24-266.24-61.44 61.44 327.68 327.68 327.68-327.68-61.44-61.44-266.24 266.24z" />
+<glyph unicode="&#xe904;" glyph-name="external" d="M213.333 149.333h512v298.667h85.333v-384h-682.667v682.667h384v-85.333h-298.667v-512zM750.933 746.667h-153.6v85.333h298.667v-298.667h-85.333v153.6l-354.133-354.133-59.733 59.733s354.133 354.133 354.133 354.133z" />
+<glyph unicode="&#xe905;" glyph-name="email" d="M85.333 789.333v-682.667h853.333v682.667h-85.333s-682.667 0-682.667 0h-85.333zM170.667 704h682.667v-42.667l-341.333-170.667-341.333 170.667v-85.333l341.333-170.667 341.333 170.667v-384h-682.667v512z" />
+<glyph unicode="&#xe906;" glyph-name="download" d="M469.333 277.333v0s0 0 0 0l42.667-42.667 42.667 42.667s200.533 200.533 200.533 200.533l-59.733 59.733-140.8-140.8v349.867h-85.333v-349.867l-140.8 140.8-59.733-59.733 200.533-200.533zM170.667 320v-128h682.667v128h85.333v-213.333h-853.333v85.333s0 128 0 128h85.333z" />
+<glyph unicode="&#xe907;" glyph-name="search" horiz-adv-x="983" d="M241.664 493.056c0 110.592 90.112 200.704 200.704 200.704s200.704-90.112 200.704-200.704c0-110.592-90.112-200.704-200.704-200.704s-200.704 90.112-200.704 200.704zM143.36 493.056c0-167.936 135.168-303.104 303.104-303.104s126.976 20.48 180.224 57.344l151.552-151.552 69.632 73.728-151.552 151.552c32.768 49.152 53.248 106.496 53.248 172.032 0 167.936-135.168 303.104-303.104 303.104s-303.104-135.168-303.104-303.104z" />
+<glyph unicode="&#xe908;" glyph-name="checkmark-circle" d="M938.667 448c0-234.667-192-426.667-426.667-426.667s-426.667 192-426.667 426.667 192 426.667 426.667 426.667 426.667-192 426.667-426.667zM657.067 618.667l-221.867-221.867-76.8 76.8-59.733-59.733 136.533-136.533 281.6 281.6-59.733 59.733z" />
+<glyph unicode="&#xe909;" glyph-name="exclamation-circle" d="M512 874.667c-234.667 0-426.667-192-426.667-426.667s192-426.667 426.667-426.667 426.667 192 426.667 426.667-192 426.667-426.667 426.667zM554.667 234.667h-85.333v85.333h85.333v-85.333zM554.667 405.333h-85.333v256h85.333v-256z" />
+<glyph unicode="&#xe90a;" glyph-name="information-circle" horiz-adv-x="983" d="M491.52 857.6c-225.28 0-409.6-184.32-409.6-409.6s184.32-409.6 409.6-409.6 409.6 184.32 409.6 409.6-184.32 409.6-409.6 409.6zM532.48 243.2h-81.92v245.76h81.92v-245.76zM532.48 570.88h-81.92v81.92h81.92v-81.92z" />
+<glyph unicode="&#xe90b;" glyph-name="close" horiz-adv-x="983" d="M434.176 448l-258.048 266.24 57.344 61.44 258.048-266.24 258.048 266.24 57.344-61.44-258.048-266.24 258.048-266.24-57.344-61.44-258.048 266.24-258.048-266.24-57.344 61.44 258.048 266.24z" />
+<glyph unicode="&#xe90c;" glyph-name="phone" horiz-adv-x="983" d="M339.968 771.584l69.632-266.24c-24.576-20.48-61.44-36.864-98.304-36.864s-16.384 0-20.48 0c40.96-102.4 122.88-184.32 225.28-225.28 0 8.192 0 16.384 0 20.48 0 36.864 12.288 69.632 36.864 98.304l266.24-69.632c0-8.192 0-16.384 0-24.576 0-81.92-69.632-151.552-151.552-151.552-278.528 0-503.808 225.28-503.808 503.808s69.632 151.552 151.552 151.552 16.384 0 24.576 0z" />
+<glyph unicode="&#xe90d;" glyph-name="warning-triangle" d="M512 832l-435.2-768h870.4l-435.2 768zM554.667 192h-85.333v85.333h85.333v-85.333zM469.333 362.667v213.333h85.333v-213.333h-85.333z" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/packages/web/src/assets/fonts/icons/gcds-icons.ttf b/packages/web/src/assets/fonts/icons/gcds-icons.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..a1809ec5a5537cacad96d79d6c91508fb7c05ad6
GIT binary patch
literal 2360
zcmb7FO-vhC5T4lu8%%;RU@r|6)?Um4PAJBhg~T?TD1?x<gk426P3wSTNWezeQHdH=
zR+UJNl&CqRN<yV7$`MzQ+NctT9yq2yhyIB6QblSjRf?KkTEQt^I`6G5Kvj`C_S^T(
z&zqSy`{pem08~K^MCg9y)Jr|iTAM(UFKE0qy%1lNjPGv)U=#6^$#`aw<{IMJT#=l=
zeE$BGX7Yf`0Ob|4iTF%=N91n+TaNU7vm~%z5`Q3mjri8th3s<V7eZkBnI0qa>FIdo
z)rt`Sdn@s63-RSe@IaLK6U57@_(I~N$De;n{5-{2T})@PlqXST1Ji>jevP-F96-1y
zd_$5CtQr4+5LPm~U4)eOUK#>;dQe>7UWXx(1}RxBN+ff@qOs9LI%^iWRTGp!Kgk_X
z0RsIH<fjL>3)|a#mHZSq#_ivvGFrFWF9MR4lgTJDP-LpNHo#5(mrT@YE$zJ$rApK&
z1^1AdH}gaIHhPB4RWydI7{VuHXJdADGDUoVj;OhYBT;h;*UhaMj^Iel++vCI_}sqa
z*DeIjttgI|YtbEJ%T5fH;;ZBupP8Fvhc8D3hq*~k&9xZY+4j1aBRdBiqFs7jA(z+X
zb$eZ?guN~$jB2+QL#;2kA%IcPF=uWFhgLA4n;%Cs?OMO~AqLExkT*;a4BgyVvE&++
z-twI%-v>Yfs3XTpx8jo(Ur>>}?s7l<Nv4a2apB@NT)bcy!YV5e>ZlhC(On>353H{0
z`8<W-?`_AY8@yDGU_S;Wt(c-}cPTE_F8STwaEL~CZ!m-#fj~>kiI$eg4dX`SvH7F0
zYCK;x(B0W7w~Waxk(+qdd~h@JWgwT^&~q$^72{RPyAh63-o3m4p&qFjC6Bw_UX6B}
z;#0d&ZBy&HFx1nhNtznNa4#1tK5pdx%UPqf`a3#X{e3k=eg4+Y4u7jw<D712n9#Jr
zcb)BbhVQ=cBIEi82Q_V?p#lHgYhGIF?;!mtsiC>?&gfmg5wy4l=@j`X<;-f`1Paw<
zPnO}mJMi17MyQH;pD#Op^7QGG<5?fk4mN*(GJfoRJQTt8e=9A+{FCv>b+TafqOPMe
zWW|<&?g=bzzf>Gvzfx)HlyE4lxIzN_m+yc<BwpN|(QaJG={oO4EABP^o?7^>_lYa=
zu;CCs)5ngdy|V00A0N{vcktoYh{P$coE{sSoE#fV%ii6%aBpj3qS$|;N-?WgziPa-
zscTjI%rpm3L}9=*`NJ#>;5s^D<|bBA^RhOsqPC-Y@gC;A*-lJdH7dRy#lsJh6rm&3
zr<FIMyS{YB!o8kQk1vFi!*#t)jSkT%NdrEmt*#awQ_;CIuU~Ihr=qcdO)N7vot`$I
z@2KRdu^kW_gPvjA0b6XUUA=zh%<OjqJMZcd<uA~U!}s9zQ)yIc7)1bcTs&_sv-%t2
zPyuqfv9ZDOW#h(!YV}QLWD}~&m?!u(f92TDOecVOrEd=FA5OG}-`#W(GZG(hPaGE?
zwU)->*fPe8KkW?0mj;vX#w9x@<K%#PXoem*4rgHr?!#B`91XmU-wF=luy8@RN>*$y
zwQ!7oDR|ddOLsl1;bAdPq&v}C!7T0YPEjtBe6Wbi2;VB=a;j%@5!*=qMiH}{^&$Jl
zlvR?Xo-`H~pc>vQVv*#dMO;RBrHISvYui!8Hj*cc*a5xpI5|C&IWjk$PGv|w4Kt8|
zBQQrO4JpVNiKWb3Iwc3Yy1{@1l_Wz-rjj8DUC_P%^8K|FiR7jE_!3Nz<0M>yd5FW(
z{!50_sjQq#q!LT<Y+^<}cUc~tPLHS4sV*4iX=N#~B>7A6WaE&fd4^=?;4(c&`M$=<
Pl5L@j-VFQN??e9pJbKP}

literal 0
HcmV?d00001

diff --git a/packages/web/src/assets/fonts/icons/gcds-icons.woff b/packages/web/src/assets/fonts/icons/gcds-icons.woff
new file mode 100644
index 0000000000000000000000000000000000000000..b880c6b68ed0d637742cb32402c1f350b387b2c1
GIT binary patch
literal 2436
zcmb7FO-vhC5T4luJD3Dxz+M_CUVAYMIH4G0782WVq7X{b5_T2QG_3=UAptwWj*_TR
zWmSpPNQs(5tNc`|q8xD*sf{Xe=z&8I>Cd4*qP<0GD^-e`URuE^UOMl2EsUxn^})RT
z=6myI=8bpWUOYBB3J5f6u0kz;4wiI=caCGnU+M$EJ;c7n#MxjIW|tD@iJK>Vnu%om
z@Ifk(W!x8}Gg~J0sm04@i2D+tn)K>D_ph|!d@?ZyVEdNV2bgqrMgN{B62M+XdOH*Q
z1@XuErQ9XrI!Pa668!~WF*D2TC=PTmskypmY$<Vxbo(9BWiB3wr4vg@;#Mj43X_i>
zfBxzDOg2a7rP!98NJtdF!CO!bAlwyLM(>xN_y>fshV;sT^_3dKBLGkLiECSHFd~u=
zgCyl4bHJkzYNa)XTWMxitxyGn^mI_A1o}gepYGc#Zfy|<gn?t+`c0~`cJKw75Rj~#
z%nL;ZiYx$VLp=2V;zXVH(%EZJszHrXaF3V;voL}e(KBMMpfOU4A$&r1HfCohQ^W`8
zh?%Q67Be?-&D@OR7>>owO_m>z&+W^8?Lx@hjNzEM8rwE5*@@wDe3e||GjoIN@a34`
zFgM7lxf*9D+gcOzWaohWbV{Eq?DDyMZl4R4h|i@&Q0>*?s11bH1u%*_=FN3s|2+)q
z=EqS@yEdqOh(R+i6bustLpRs&m3WOxU-Dfb-+Ms<Xe7r<ui}>#e@Kyh?&<*j6Q_%Y
zarWF6oI7h6!U`)8>ZlhD(Oo2653a1}g#v|O$FK0|1|O9pG>9Qdvr<&;F2$wVrGVQP
z36u2phr+lX40^q<c)igZ#*OG>^Cw}&c)ntwySrQVPRQQqO*~~jxEcK_n9r~4`Ry35
zQr<0ai1O~|1qk;^Z76x%P4+sp+Z4argKCG`#K~~qfF@~b93%alR{Y$^{g<;|YY%jF
zw+9C5X$%C~ySoDITD^0&xp_*{hTm~^-X6X4!i!8B93IxRspe+<bEkQEYoLqPk4w#M
zEw{(-1dLEgYnG0apUS$lf<krKk!57(2?BPi5vpRr@6SyhJ#pgbWX?}x8=JpBnLPX+
z?vLWyzZXk}g(s8I>tw;|MO{bl5c{25L1y<0TE{OJhu5!MnnooOjwr6M0RQDXXwVSP
zRc2I)i+NqAHYmrv#(yU-KlLtgMIJU1#%KD(k&I84eVHQ@`t&wF@EQ$q#wTYcCZ?w+
zCNi?G5*P1oPEA?;C#n>aZgpyE-rCf)Dt=~~Lnxv!WSV?3i$l1Ej<~sjwbZ<<jccjx
zC~w}wyf^9Y#l|{R{C$dtzerM)UZDZ4x)t3`<##O7?+N$$!#F+K*x%aX5S@}V<X1Wx
z8_+QmTR8dp^-gsr77yCQDs#i>>G1mxNuGM!Ua=+Q8MW=T#b-Lz>nBgne?PQcvqzM_
zKsOFQgD*g(QK?}R0nAD9jCqOG-w;QNkk^g%b(Sxa8xQK#H=WT9sAZoKfL{w&4sSo{
z4Pai`cd68=d=J07=^|!Be8fF*Y)uWNm6FD`F<tz5TbN!J##iF99pm_LKohh<9~^;G
zunhO%Yj}<Zet_Qz4&i`sR=7%5>?{p%n13mF*Oaza%ysb4$`k2MEbU;Hc6i(3MdF7o
zTt)bng{!HaZ5Fl>|AvLx&H9jiW2$P1X`+=97N8E^wXjJ1xP_|--?MNvc%aL|HsVtj
zc0fNoPR-6`4=&7R(plnXVGgoz5Eck!APrd~xtv|dq~%agFBp)dl4NO-Ey)mq9_ZbD
z`|hh#$<&3##4=2g;}l$gMM%K%?psDP>71NOrjyHwTyjo6eOVr#%}i!8=^hy6Y2_%f
j6!}Z@WD}61=NxgT;WEwR{9Kb{$&S!NzYP1@?=t=YE3(q5

literal 0
HcmV?d00001

diff --git a/packages/web/stencil.config.ts b/packages/web/stencil.config.ts
index 0349adf71..c7e757134 100644
--- a/packages/web/stencil.config.ts
+++ b/packages/web/stencil.config.ts
@@ -8,8 +8,7 @@ import { vueOutputTarget } from '@stencil/vue-output-target';
 
 export const config: Config = {
   namespace: 'gcds',
-  globalStyle:
-    '../../node_modules/@cdssnc/gcds-tokens/build/web/css/tokens.css',
+  globalStyle: 'src/assets/css/global.css',
   srcDir: './src',
   outputTargets: [
     reactOutputTarget({
@@ -34,7 +33,15 @@ export const config: Config = {
       isPrimaryPackageOutputTarget: true,
     },
     {
+      // Copy font assets from 'assets' folder to 'dist' folder to ensure they are included in the build output.
       type: 'dist-custom-elements',
+      copy: [
+        {
+          src: 'assets/fonts/**/*',
+          dest: 'dist/gcds/assets/fonts',
+          warn: true,
+        },
+      ],
     },
     {
       type: 'docs-readme',

From 704d13e5de70f6de33582af0eececdcc5cab9c9e Mon Sep 17 00:00:00 2001
From: Melanie Boeckmann <melanie.bockmann@gmail.com>
Date: Wed, 19 Feb 2025 19:57:29 -0800
Subject: [PATCH 09/13] chore: update icon font face

---
 package-lock.json                      | 2 +-
 packages/web/src/assets/css/global.css | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b5d436e70..6b5181e91 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42176,8 +42176,8 @@
         "@babel/core": "^7.20.12",
         "@babel/preset-env": "^7.20.2",
         "@babel/preset-typescript": "^7.21.0",
-        "@cdssnc/gcds-tokens": "^2.6.0",
         "@cdssnc/gcds-fonts": "^0.2.1",
+        "@cdssnc/gcds-tokens": "^2.6.0",
         "@fortawesome/fontawesome-free": "^6.3.0",
         "@stencil/angular-output-target": "file:../../utils/angular-output-target",
         "@stencil/postcss": "^2.1.0",
diff --git a/packages/web/src/assets/css/global.css b/packages/web/src/assets/css/global.css
index 5806b8e37..9d36ca007 100644
--- a/packages/web/src/assets/css/global.css
+++ b/packages/web/src/assets/css/global.css
@@ -4,9 +4,9 @@
 /* Import GC Design System Icon Font */
 @font-face {
   font-family: 'gcds-icons';
-  src: url("/dist/gcds/assets/fonts/gcds-icons.woff2") format("woff2"),
-        url("/dist/gcds/assets/fonts/gcds-icons.woff") format("woff");
+  src: url('/dist/gcds/assets/fonts/gcds-icons.ttf') format('truetype'),
+      url('/dist/gcds/assets/fonts/gcds-icons.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: block;
-}
+}
\ No newline at end of file

From d49dc3be8efd5ed624d4ed485fe493c836caf856 Mon Sep 17 00:00:00 2001
From: Melanie Boeckmann <melanie.bockmann@gmail.com>
Date: Thu, 27 Feb 2025 16:20:24 -0800
Subject: [PATCH 10/13] fix: copy-icon-font script to work cross-platform

---
 package-lock.json | 10 ++++++++++
 package.json      |  3 ++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 5ec9b7de2..ef7642b72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "@stencil/angular-output-target": "^0.10.0",
         "@types/node": "^20.11.10",
         "cssnano": "^6.0.0",
+        "ncp": "^2.0.0",
         "ng-packagr": "^19.0.1",
         "nx": "^16.0.0",
         "sass": "^1.43.5",
@@ -30182,6 +30183,15 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "devOptional": true
     },
+    "node_modules/ncp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
+      "integrity": "sha512-zIdGUrPRFTUELUvr3Gmc7KZ2Sw/h1PiVM0Af/oHB6zgnV1ikqSfRk+TOufi79aHYCW3NiOXmr1BP5nWbzojLaA==",
+      "dev": true,
+      "bin": {
+        "ncp": "bin/ncp"
+      }
+    },
     "node_modules/needle": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
diff --git a/package.json b/package.json
index af0f1a002..5693bfda3 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "ng": "ng",
     "compile": "gulp compile",
-    "copy-icon-font": "cp -R ./node_modules/@cdssnc/gcds-fonts/fonts/icons/* ./packages/web/src/assets/fonts/icons",
+    "copy-icon-font": "npx ncp ./node_modules/@cdssnc/gcds-fonts/fonts/icons ./packages/web/src/assets/fonts/icons",
     "build": "npm run copy-icon-font && npm run build --ws",
     "pretest": "npm run patch:stenciljs",
     "test": "npm run test --workspace=utils/angular-output-target --workspace=packages/web --workspace=packages/vue",
@@ -36,6 +36,7 @@
     "@stencil/angular-output-target": "^0.10.0",
     "@types/node": "^20.11.10",
     "cssnano": "^6.0.0",
+    "ncp": "^2.0.0",
     "ng-packagr": "^19.0.1",
     "nx": "^16.0.0",
     "sass": "^1.43.5",

From 3c0a92457cde164b0a81532cccad9dc3a6d04a0f Mon Sep 17 00:00:00 2001
From: Melanie Boeckmann <melanie.bockmann@gmail.com>
Date: Thu, 27 Feb 2025 16:54:02 -0800
Subject: [PATCH 11/13] style: update search icon size in search component

---
 .../src/components/gcds-search/gcds-search.css   | 16 +++++-----------
 .../src/components/gcds-search/gcds-search.tsx   |  1 +
 .../gcds-search/test/gcds-search.spec.tsx        |  6 +++---
 3 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/web/src/components/gcds-search/gcds-search.css b/packages/web/src/components/gcds-search/gcds-search.css
index 57a767142..bafeb2be0 100644
--- a/packages/web/src/components/gcds-search/gcds-search.css
+++ b/packages/web/src/components/gcds-search/gcds-search.css
@@ -51,17 +51,11 @@
       }
     }
 
-    gcds-button {
-      &::part(button) {
-        border-radius: 0;
-        padding: var(--gcds-search-button-padding);
-        width: var(--gcds-search-button-width-height);
-        height: var(--gcds-search-button-width-height);
-      }
-
-      gcds-icon {
-        display: block;
-      }
+    gcds-button::part(button) {
+      border-radius: 0;
+      padding: 0;
+      width: var(--gcds-search-button-width-height);
+      height: var(--gcds-search-button-width-height);
     }
   }
 }
diff --git a/packages/web/src/components/gcds-search/gcds-search.tsx b/packages/web/src/components/gcds-search/gcds-search.tsx
index faf5ca4f9..de2caed23 100644
--- a/packages/web/src/components/gcds-search/gcds-search.tsx
+++ b/packages/web/src/components/gcds-search/gcds-search.tsx
@@ -181,6 +181,7 @@ export class GcdsSearch {
               exportparts="button"
             >
               <gcds-icon
+                size="h3"
                 name="search"
                 label={I18N[lang].search}
                 fixed-width
diff --git a/packages/web/src/components/gcds-search/test/gcds-search.spec.tsx b/packages/web/src/components/gcds-search/test/gcds-search.spec.tsx
index e23d81c6a..2c0017a70 100644
--- a/packages/web/src/components/gcds-search/test/gcds-search.spec.tsx
+++ b/packages/web/src/components/gcds-search/test/gcds-search.spec.tsx
@@ -18,7 +18,7 @@ describe('gcds-search', () => {
               <gcds-label hide-label="" label="Search Canada.ca" label-for="search"></gcds-label>
               <input class="gcds-search__input" id="search" list="search-list" maxlength="170" name="q" placeholder="Search Canada.ca" size="34" type="search">
               <gcds-button class="gcds-search__button" exportparts="button" type="submit">
-                <gcds-icon fixed-width="" label="Search" name="search"></gcds-icon>
+                <gcds-icon fixed-width="" label="Search" name="search" size="h3"></gcds-icon>
               </gcds-button>
             </form>
           </div>
@@ -42,7 +42,7 @@ describe('gcds-search', () => {
               <gcds-label hide-label="" label="Rechercher dans Canada.ca" label-for="search"></gcds-label>
               <input class="gcds-search__input" id="search" list="search-list" maxlength="170" name="q" placeholder="Rechercher dans Canada.ca" size="34" type="search">
               <gcds-button class="gcds-search__button" exportparts="button" type="submit">
-                <gcds-icon fixed-width="" label="Recherche" name="search"></gcds-icon>
+                <gcds-icon fixed-width="" label="Recherche" name="search" size="h3"></gcds-icon>
               </gcds-button>
             </form>
           </div>
@@ -72,7 +72,7 @@ describe('gcds-search', () => {
             <gcds-label hide-label="" label="Search Text.ca" label-for="searchForm"></gcds-label>
               <input class="gcds-search__input" id="searchForm" list="search-list" maxlength="170" name="s" placeholder="Search Text.ca" size="34" type="search">
               <gcds-button class="gcds-search__button" exportparts="button" type="submit">
-                <gcds-icon fixed-width="" label="Search" name="search"></gcds-icon>
+                <gcds-icon fixed-width="" label="Search" name="search" size="h3"></gcds-icon>
               </gcds-button>
             </form>
           </div>

From 65c7370ce17986fb66a41098b2dda46eeb7158b1 Mon Sep 17 00:00:00 2001
From: Melanie Boeckmann <melanie.bockmann@gmail.com>
Date: Thu, 27 Feb 2025 17:46:33 -0800
Subject: [PATCH 12/13] style: remove link underline from pagination prev &
 next arrows

---
 .../gcds-pagination/gcds-pagination.css       | 15 +++++++++
 .../gcds-pagination/gcds-pagination.tsx       | 10 +++---
 .../test/gcds-pagination.spec.tsx             | 32 +++++++++----------
 3 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/packages/web/src/components/gcds-pagination/gcds-pagination.css b/packages/web/src/components/gcds-pagination/gcds-pagination.css
index 7de188c65..34e8040e5 100644
--- a/packages/web/src/components/gcds-pagination/gcds-pagination.css
+++ b/packages/web/src/components/gcds-pagination/gcds-pagination.css
@@ -50,6 +50,11 @@
             width: auto;
             min-width: auto;
             height: auto;
+            text-decoration: none;
+
+            span {
+              text-decoration: underline;
+            }
           }
         }
 
@@ -102,6 +107,16 @@
       }
     }
 
+    .gcds-pagination-simple-previous a,
+    .gcds-pagination-simple-next a {
+      text-decoration: none;
+
+      .gcds-pagination-simple-text,
+      span {
+        text-decoration: underline;
+      }
+    }
+
     .gcds-pagination-simple-previous a {
       grid-template-areas:
         'icon text'
diff --git a/packages/web/src/components/gcds-pagination/gcds-pagination.tsx b/packages/web/src/components/gcds-pagination/gcds-pagination.tsx
index 63e75e55f..e236ef99a 100644
--- a/packages/web/src/components/gcds-pagination/gcds-pagination.tsx
+++ b/packages/web/src/components/gcds-pagination/gcds-pagination.tsx
@@ -174,7 +174,7 @@ export class GcdsPagination {
                   : 'gcds-pagination-end-button-mobile'
               }
             >
-              {I18N[this.lang].next}
+              <span>{I18N[this.lang].next}</span>
               <gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
             </a>
           ) : (
@@ -187,9 +187,11 @@ export class GcdsPagination {
               }
             >
               <gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
-              {mobile
-                ? I18N[this.lang].previousMobile
-                : I18N[this.lang].previous}
+              <span>
+                {mobile
+                  ? I18N[this.lang].previousMobile
+                  : I18N[this.lang].previous}
+              </span>
             </a>
           )}
         </li>
diff --git a/packages/web/src/components/gcds-pagination/test/gcds-pagination.spec.tsx b/packages/web/src/components/gcds-pagination/test/gcds-pagination.spec.tsx
index 1b1380841..b1fde5be2 100644
--- a/packages/web/src/components/gcds-pagination/test/gcds-pagination.spec.tsx
+++ b/packages/web/src/components/gcds-pagination/test/gcds-pagination.spec.tsx
@@ -203,7 +203,7 @@ describe('gcds-pagination', () => {
                 <li>
                   <a aria-label="Previous page: Page 4 of 9 of Search results" class="gcds-pagination-end-button" href="javascript:void(0)" tabindex="0">
                     <gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
-                    Previous
+                    <span>Previous</span>
                   </a>
                 </li>
                 <li>
@@ -263,7 +263,7 @@ describe('gcds-pagination', () => {
                 </li>
                 <li>
                   <a aria-label="Next page: Page 6 of 9 of Search results" class="gcds-pagination-end-button" href="javascript:void(0)" tabindex="0">
-                    Next
+                    <span>Next</span>
                     <gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
                   </a>
                 </li>
@@ -272,12 +272,12 @@ describe('gcds-pagination', () => {
                 <li>
                   <a aria-label="Previous page: Page 4 of 9 of Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)" tabindex="0">
                     <gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
-                    Prev
+                    <span>Prev</span>
                   </a>
                 </li>
                 <li>
                   <a aria-label="Next page: Page 6 of 9 of Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)" tabindex="0">
-                    Next
+                    <span>Next</span>
                     <gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
                   </a>
                 </li>
@@ -310,7 +310,7 @@ describe('gcds-pagination', () => {
                 <li>
                   <a aria-label="Previous page: Page 9 of 20 of Search results" class="gcds-pagination-end-button" href="javascript:void(0)" tabindex="0">
                     <gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
-                    Previous
+                    <span>Previous</span>
                   </a>
                 </li>
                 <li>
@@ -360,7 +360,7 @@ describe('gcds-pagination', () => {
                 </li>
                 <li>
                   <a aria-label="Next page: Page 11 of 20 of Search results" class="gcds-pagination-end-button" href="javascript:void(0)" tabindex="0">
-                    Next
+                    <span>Next</span>
                     <gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
                   </a>
                 </li>
@@ -369,12 +369,12 @@ describe('gcds-pagination', () => {
                 <li>
                   <a aria-label="Previous page: Page 9 of 20 of Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)" tabindex="0">
                     <gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
-                    Prev
+                    <span>Prev</span>
                   </a>
                 </li>
                 <li>
                   <a aria-label="Next page: Page 11 of 20 of Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)" tabindex="0">
-                    Next
+                    <span>Next</span>
                     <gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
                   </a>
                 </li>
@@ -407,7 +407,7 @@ describe('gcds-pagination', () => {
                 <li>
                   <a aria-label="Page précédente: Page 4 sur 9 des Search results" class="gcds-pagination-end-button" href="javascript:void(0)" tabindex="0">
                     <gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
-                    Précédent
+                    <span>Précédent</span>
                   </a>
                 </li>
                 <li>
@@ -467,7 +467,7 @@ describe('gcds-pagination', () => {
                 </li>
                 <li>
                   <a aria-label="Page suivante: Page 6 sur 9 des Search results" class="gcds-pagination-end-button" href="javascript:void(0)" tabindex="0">
-                    Suivante
+                    <span>Suivante</span>
                     <gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
                   </a>
                 </li>
@@ -476,12 +476,12 @@ describe('gcds-pagination', () => {
                 <li>
                   <a aria-label="Page précédente: Page 4 sur 9 des Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)" tabindex="0">
                     <gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
-                    Préc.
+                    <span>Préc.</span>
                   </a>
                 </li>
                 <li>
                   <a aria-label="Page suivante: Page 6 sur 9 des Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)" tabindex="0">
-                    Suivante
+                    <span>Suivante</span>
                     <gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
                   </a>
                 </li>
@@ -514,7 +514,7 @@ describe('gcds-pagination', () => {
                 <li>
                   <a aria-label="Page précédente: Page 9 sur 20 des Search results" class="gcds-pagination-end-button" href="javascript:void(0)" tabindex="0">
                     <gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
-                    Précédent
+                    <span>Précédent</span>
                   </a>
                 </li>
                 <li>
@@ -564,7 +564,7 @@ describe('gcds-pagination', () => {
                 </li>
                 <li>
                   <a aria-label="Page suivante: Page 11 sur 20 des Search results" class="gcds-pagination-end-button" href="javascript:void(0)" tabindex="0">
-                    Suivante
+                    <span>Suivante</span>
                     <gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
                   </a>
                 </li>
@@ -573,12 +573,12 @@ describe('gcds-pagination', () => {
                 <li>
                   <a aria-label="Page précédente: Page 9 sur 20 des Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)" tabindex="0">
                     <gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
-                    Préc.
+                    <span>Préc.</span>
                   </a>
                 </li>
                 <li>
                   <a aria-label="Page suivante: Page 11 sur 20 des Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)" tabindex="0">
-                    Suivante
+                    <span>Suivante</span>
                     <gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
                   </a>
                 </li>

From 4855842b36a305ae36db93c1113ae3c00ea0c46a Mon Sep 17 00:00:00 2001
From: Melanie Boeckmann <melanie.bockmann@gmail.com>
Date: Mon, 3 Mar 2025 09:16:49 -0800
Subject: [PATCH 13/13] chore: update fonts package

---
 package-lock.json         | 8 ++++----
 packages/web/package.json | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ef7642b72..9fc1af41c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4056,9 +4056,9 @@
       "link": true
     },
     "node_modules/@cdssnc/gcds-fonts": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@cdssnc/gcds-fonts/-/gcds-fonts-0.2.1.tgz",
-      "integrity": "sha512-rnztzlhdQWwB4tBFDPRr4/5mtNaDNHV/9nNsQ0GGlMWRTIQWuZeD6RLwmlbqcyeP0KPHAilqgi03NtQT8zP+Sw==",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@cdssnc/gcds-fonts/-/gcds-fonts-0.2.2.tgz",
+      "integrity": "sha512-w17pfEpG2xo4fUddpvk6+tJ6gF94eYnXi9QKClsHl5LcJLd8WN9L7a1mTmMX7Jzxd3hxFxtCP+NKjOKJwA6k1Q==",
       "dev": true
     },
     "node_modules/@cdssnc/gcds-tokens": {
@@ -42186,7 +42186,7 @@
         "@babel/core": "^7.20.12",
         "@babel/preset-env": "^7.20.2",
         "@babel/preset-typescript": "^7.21.0",
-        "@cdssnc/gcds-fonts": "^0.2.1",
+        "@cdssnc/gcds-fonts": "^0.2.2",
         "@cdssnc/gcds-tokens": "^2.6.0",
         "@fortawesome/fontawesome-free": "^6.3.0",
         "@stencil/angular-output-target": "file:../../utils/angular-output-target",
diff --git a/packages/web/package.json b/packages/web/package.json
index 9e1ee8e58..ff0ae28e5 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -45,8 +45,8 @@
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.21.0",
+    "@cdssnc/gcds-fonts": "^0.2.2",
     "@cdssnc/gcds-tokens": "^2.6.0",
-    "@cdssnc/gcds-fonts": "^0.2.1",
     "@fortawesome/fontawesome-free": "^6.3.0",
     "@stencil/angular-output-target": "file:../../utils/angular-output-target",
     "@stencil/postcss": "^2.1.0",