feat: replace Font Awesome with GCDS icons font

build/figma/figma.tokens.json

@@ -1057,7 +1057,7 @@
         "type": "fontFamilies"
       },
       "icons": {
-        "value": "'Font Awesome 6 Free', FontAwesome",
+        "value": "'gcds-icons'",
         "type": "fontFamilies"
       }
     },
@@ -3046,7 +3046,7 @@
     "icon": {
       "font": {
         "family": {
-          "value": "'Font Awesome 6 Free', FontAwesome",
+          "value": "'gcds-icons'",
           "type": "fontFamilies"
         },
         "size": {
@@ -3081,6 +3081,38 @@
           "h1": {
             "value": "2.5625rem",
             "type": "fontSizes"
+          },
+          "textSmallMobile": {
+            "value": "1rem",
+            "type": "fontSizes"
+          },
+          "textMobile": {
+            "value": "1.125rem",
+            "type": "fontSizes"
+          },
+          "h6Mobile": {
+            "value": "1.25rem",
+            "type": "fontSizes"
+          },
+          "h5Mobile": {
+            "value": "1.375rem",
+            "type": "fontSizes"
+          },
+          "h4Mobile": {
+            "value": "1.5rem",
+            "type": "fontSizes"
+          },
+          "h3Mobile": {
+            "value": "1.625rem",
+            "type": "fontSizes"
+          },
+          "h2Mobile": {
+            "value": "2.1875rem",
+            "type": "fontSizes"
+          },
+          "h1Mobile": {
+            "value": "2.3125rem",
+            "type": "fontSizes"
           }
         }
       },
@@ -3116,6 +3148,38 @@
         "h1": {
           "value": "117%",
           "type": "lineHeights"
+        },
+        "textSmallMobile": {
+          "value": "150%",
+          "type": "lineHeights"
+        },
+        "textMobile": {
+          "value": "155%",
+          "type": "lineHeights"
+        },
+        "h6Mobile": {
+          "value": "140%",
+          "type": "lineHeights"
+        },
+        "h5Mobile": {
+          "value": "127%",
+          "type": "lineHeights"
+        },
+        "h4Mobile": {
+          "value": "133%",
+          "type": "lineHeights"
+        },
+        "h3Mobile": {
+          "value": "123%",
+          "type": "lineHeights"
+        },
+        "h2Mobile": {
+          "value": "125%",
+          "type": "lineHeights"
+        },
+        "h1Mobile": {
+          "value": "119%",
+          "type": "lineHeights"
         }
       },
       "fixedWidth": {

build/web/css/components.css

@@ -412,7 +412,7 @@
   --gcds-heading-spacing-1250: 6.25rem;
   --gcds-hint-margin: -0.375rem 0 0.5rem;
   --gcds-hint-text: #43474e;
-  --gcds-icon-font-family: 'Font Awesome 6 Free', FontAwesome;
+  --gcds-icon-font-family: 'gcds-icons';
   --gcds-icon-font-size-text-small: 1.125rem;
   --gcds-icon-font-size-text: 1.25rem;
   --gcds-icon-font-size-h6: 1.375rem;
@@ -421,6 +421,14 @@
   --gcds-icon-font-size-h3: 1.8125rem;
   --gcds-icon-font-size-h2: 2.4375rem;
   --gcds-icon-font-size-h1: 2.5625rem;
+  --gcds-icon-font-size-text-small-mobile: 1rem;
+  --gcds-icon-font-size-text-mobile: 1.125rem;
+  --gcds-icon-font-size-h6-mobile: 1.25rem;
+  --gcds-icon-font-size-h5-mobile: 1.375rem;
+  --gcds-icon-font-size-h4-mobile: 1.5rem;
+  --gcds-icon-font-size-h3-mobile: 1.625rem;
+  --gcds-icon-font-size-h2-mobile: 2.1875rem;
+  --gcds-icon-font-size-h1-mobile: 2.3125rem;
   --gcds-icon-line-height-text-small: 155%;
   --gcds-icon-line-height-text: 160%;
   --gcds-icon-line-height-h6: 145%;
@@ -429,6 +437,14 @@
   --gcds-icon-line-height-h3: 137%;
   --gcds-icon-line-height-h2: 123%;
   --gcds-icon-line-height-h1: 117%;
+  --gcds-icon-line-height-text-small-mobile: 150%;
+  --gcds-icon-line-height-text-mobile: 155%;
+  --gcds-icon-line-height-h6-mobile: 140%;
+  --gcds-icon-line-height-h5-mobile: 127%;
+  --gcds-icon-line-height-h4-mobile: 133%;
+  --gcds-icon-line-height-h3-mobile: 123%;
+  --gcds-icon-line-height-h2-mobile: 125%;
+  --gcds-icon-line-height-h1-mobile: 119%;
   --gcds-icon-fixed-width-text-small: 1.55;
   --gcds-icon-fixed-width-text: 1.6;
   --gcds-icon-fixed-width-h6: 1.45;

build/web/css/components/icon.css

@@ -3,7 +3,7 @@
  */
 
 :root {
-  --gcds-icon-font-family: 'Font Awesome 6 Free', FontAwesome;
+  --gcds-icon-font-family: 'gcds-icons';
   --gcds-icon-font-size-text-small: 1.125rem;
   --gcds-icon-font-size-text: 1.25rem;
   --gcds-icon-font-size-h6: 1.375rem;
@@ -12,6 +12,14 @@
   --gcds-icon-font-size-h3: 1.8125rem;
   --gcds-icon-font-size-h2: 2.4375rem;
   --gcds-icon-font-size-h1: 2.5625rem;
+  --gcds-icon-font-size-text-small-mobile: 1rem;
+  --gcds-icon-font-size-text-mobile: 1.125rem;
+  --gcds-icon-font-size-h6-mobile: 1.25rem;
+  --gcds-icon-font-size-h5-mobile: 1.375rem;
+  --gcds-icon-font-size-h4-mobile: 1.5rem;
+  --gcds-icon-font-size-h3-mobile: 1.625rem;
+  --gcds-icon-font-size-h2-mobile: 2.1875rem;
+  --gcds-icon-font-size-h1-mobile: 2.3125rem;
   --gcds-icon-line-height-text-small: 155%;
   --gcds-icon-line-height-text: 160%;
   --gcds-icon-line-height-h6: 145%;
@@ -20,6 +28,14 @@
   --gcds-icon-line-height-h3: 137%;
   --gcds-icon-line-height-h2: 123%;
   --gcds-icon-line-height-h1: 117%;
+  --gcds-icon-line-height-text-small-mobile: 150%;
+  --gcds-icon-line-height-text-mobile: 155%;
+  --gcds-icon-line-height-h6-mobile: 140%;
+  --gcds-icon-line-height-h5-mobile: 127%;
+  --gcds-icon-line-height-h4-mobile: 133%;
+  --gcds-icon-line-height-h3-mobile: 123%;
+  --gcds-icon-line-height-h2-mobile: 125%;
+  --gcds-icon-line-height-h1-mobile: 119%;
   --gcds-icon-fixed-width-text-small: 1.55;
   --gcds-icon-fixed-width-text: 1.6;
   --gcds-icon-fixed-width-h6: 1.45;

build/web/css/global.css

@@ -97,7 +97,7 @@
   --gcds-font-families-heading: 'Lato', sans-serif;
   --gcds-font-families-body: 'Noto Sans', sans-serif;
   --gcds-font-families-monospace: 'Noto Sans Mono', monospace;
-  --gcds-font-families-icons: 'Font Awesome 6 Free', FontAwesome;
+  --gcds-font-families-icons: 'gcds-icons';
   --gcds-font-sizes-text-small: 1.125rem;
   --gcds-font-sizes-text-small-mobile: 1rem;
   --gcds-font-sizes-text: 1.25rem;

build/web/css/global/typography.css

@@ -29,7 +29,7 @@
   --gcds-font-families-heading: 'Lato', sans-serif;
   --gcds-font-families-body: 'Noto Sans', sans-serif;
   --gcds-font-families-monospace: 'Noto Sans Mono', monospace;
-  --gcds-font-families-icons: 'Font Awesome 6 Free', FontAwesome;
+  --gcds-font-families-icons: 'gcds-icons';
   --gcds-font-sizes-text-small: 1.125rem;
   --gcds-font-sizes-text-small-mobile: 1rem;
   --gcds-font-sizes-text: 1.25rem;

build/web/css/global/typography/fontFamilies.css

@@ -6,5 +6,5 @@
   --gcds-font-families-heading: 'Lato', sans-serif;
   --gcds-font-families-body: 'Noto Sans', sans-serif;
   --gcds-font-families-monospace: 'Noto Sans Mono', monospace;
-  --gcds-font-families-icons: 'Font Awesome 6 Free', FontAwesome;
+  --gcds-font-families-icons: 'gcds-icons';
 }

build/web/css/tokens.css

@@ -216,7 +216,7 @@
   --gcds-font-families-heading: 'Lato', sans-serif;
   --gcds-font-families-body: 'Noto Sans', sans-serif;
   --gcds-font-families-monospace: 'Noto Sans Mono', monospace;
-  --gcds-font-families-icons: 'Font Awesome 6 Free', FontAwesome;
+  --gcds-font-families-icons: 'gcds-icons';
   --gcds-font-sizes-text-small: 1.125rem;
   --gcds-font-sizes-text-small-mobile: 1rem;
   --gcds-font-sizes-text: 1.25rem;
@@ -572,7 +572,7 @@
   --gcds-heading-spacing-1250: 6.25rem;
   --gcds-hint-margin: -0.375rem 0 0.5rem;
   --gcds-hint-text: #43474e;
-  --gcds-icon-font-family: 'Font Awesome 6 Free', FontAwesome;
+  --gcds-icon-font-family: 'gcds-icons';
   --gcds-icon-font-size-text-small: 1.125rem;
   --gcds-icon-font-size-text: 1.25rem;
   --gcds-icon-font-size-h6: 1.375rem;
@@ -581,6 +581,14 @@
   --gcds-icon-font-size-h3: 1.8125rem;
   --gcds-icon-font-size-h2: 2.4375rem;
   --gcds-icon-font-size-h1: 2.5625rem;
+  --gcds-icon-font-size-text-small-mobile: 1rem;
+  --gcds-icon-font-size-text-mobile: 1.125rem;
+  --gcds-icon-font-size-h6-mobile: 1.25rem;
+  --gcds-icon-font-size-h5-mobile: 1.375rem;
+  --gcds-icon-font-size-h4-mobile: 1.5rem;
+  --gcds-icon-font-size-h3-mobile: 1.625rem;
+  --gcds-icon-font-size-h2-mobile: 2.1875rem;
+  --gcds-icon-font-size-h1-mobile: 2.3125rem;
   --gcds-icon-line-height-text-small: 155%;
   --gcds-icon-line-height-text: 160%;
   --gcds-icon-line-height-h6: 145%;
@@ -589,6 +597,14 @@
   --gcds-icon-line-height-h3: 137%;
   --gcds-icon-line-height-h2: 123%;
   --gcds-icon-line-height-h1: 117%;
+  --gcds-icon-line-height-text-small-mobile: 150%;
+  --gcds-icon-line-height-text-mobile: 155%;
+  --gcds-icon-line-height-h6-mobile: 140%;
+  --gcds-icon-line-height-h5-mobile: 127%;
+  --gcds-icon-line-height-h4-mobile: 133%;
+  --gcds-icon-line-height-h3-mobile: 123%;
+  --gcds-icon-line-height-h2-mobile: 125%;
+  --gcds-icon-line-height-h1-mobile: 119%;
   --gcds-icon-fixed-width-text-small: 1.55;
   --gcds-icon-fixed-width-text: 1.6;
   --gcds-icon-fixed-width-h6: 1.45;

build/web/scss/components.scss

@@ -410,7 +410,7 @@ $gcds-heading-spacing-1200: 6rem;
 $gcds-heading-spacing-1250: 6.25rem;
 $gcds-hint-margin: -0.375rem 0 0.5rem;
 $gcds-hint-text: #43474e;
-$gcds-icon-font-family: 'Font Awesome 6 Free', FontAwesome;
+$gcds-icon-font-family: 'gcds-icons';
 $gcds-icon-font-size-text-small: 1.125rem;
 $gcds-icon-font-size-text: 1.25rem;
 $gcds-icon-font-size-h6: 1.375rem;
@@ -419,6 +419,14 @@ $gcds-icon-font-size-h4: 1.6875rem;
 $gcds-icon-font-size-h3: 1.8125rem;
 $gcds-icon-font-size-h2: 2.4375rem;
 $gcds-icon-font-size-h1: 2.5625rem;
+$gcds-icon-font-size-text-small-mobile: 1rem;
+$gcds-icon-font-size-text-mobile: 1.125rem;
+$gcds-icon-font-size-h6-mobile: 1.25rem;
+$gcds-icon-font-size-h5-mobile: 1.375rem;
+$gcds-icon-font-size-h4-mobile: 1.5rem;
+$gcds-icon-font-size-h3-mobile: 1.625rem;
+$gcds-icon-font-size-h2-mobile: 2.1875rem;
+$gcds-icon-font-size-h1-mobile: 2.3125rem;
 $gcds-icon-line-height-text-small: 155%;
 $gcds-icon-line-height-text: 160%;
 $gcds-icon-line-height-h6: 145%;
@@ -427,6 +435,14 @@ $gcds-icon-line-height-h4: 133%;
 $gcds-icon-line-height-h3: 137%;
 $gcds-icon-line-height-h2: 123%;
 $gcds-icon-line-height-h1: 117%;
+$gcds-icon-line-height-text-small-mobile: 150%;
+$gcds-icon-line-height-text-mobile: 155%;
+$gcds-icon-line-height-h6-mobile: 140%;
+$gcds-icon-line-height-h5-mobile: 127%;
+$gcds-icon-line-height-h4-mobile: 133%;
+$gcds-icon-line-height-h3-mobile: 123%;
+$gcds-icon-line-height-h2-mobile: 125%;
+$gcds-icon-line-height-h1-mobile: 119%;
 $gcds-icon-fixed-width-text-small: 1.55;
 $gcds-icon-fixed-width-text: 1.6;
 $gcds-icon-fixed-width-h6: 1.45;

build/web/scss/components/icon.scss

@@ -1,7 +1,7 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$gcds-icon-font-family: 'Font Awesome 6 Free', FontAwesome;
+$gcds-icon-font-family: 'gcds-icons';
 $gcds-icon-font-size-text-small: 1.125rem;
 $gcds-icon-font-size-text: 1.25rem;
 $gcds-icon-font-size-h6: 1.375rem;
@@ -10,6 +10,14 @@ $gcds-icon-font-size-h4: 1.6875rem;
 $gcds-icon-font-size-h3: 1.8125rem;
 $gcds-icon-font-size-h2: 2.4375rem;
 $gcds-icon-font-size-h1: 2.5625rem;
+$gcds-icon-font-size-text-small-mobile: 1rem;
+$gcds-icon-font-size-text-mobile: 1.125rem;
+$gcds-icon-font-size-h6-mobile: 1.25rem;
+$gcds-icon-font-size-h5-mobile: 1.375rem;
+$gcds-icon-font-size-h4-mobile: 1.5rem;
+$gcds-icon-font-size-h3-mobile: 1.625rem;
+$gcds-icon-font-size-h2-mobile: 2.1875rem;
+$gcds-icon-font-size-h1-mobile: 2.3125rem;
 $gcds-icon-line-height-text-small: 155%;
 $gcds-icon-line-height-text: 160%;
 $gcds-icon-line-height-h6: 145%;
@@ -18,6 +26,14 @@ $gcds-icon-line-height-h4: 133%;
 $gcds-icon-line-height-h3: 137%;
 $gcds-icon-line-height-h2: 123%;
 $gcds-icon-line-height-h1: 117%;
+$gcds-icon-line-height-text-small-mobile: 150%;
+$gcds-icon-line-height-text-mobile: 155%;
+$gcds-icon-line-height-h6-mobile: 140%;
+$gcds-icon-line-height-h5-mobile: 127%;
+$gcds-icon-line-height-h4-mobile: 133%;
+$gcds-icon-line-height-h3-mobile: 123%;
+$gcds-icon-line-height-h2-mobile: 125%;
+$gcds-icon-line-height-h1-mobile: 119%;
 $gcds-icon-fixed-width-text-small: 1.55;
 $gcds-icon-fixed-width-text: 1.6;
 $gcds-icon-fixed-width-h6: 1.45;

build/web/scss/global.scss

@@ -95,7 +95,7 @@ $gcds-font-text-small-mobile: 400 1rem/150% 'Noto Sans', sans-serif;
 $gcds-font-families-heading: 'Lato', sans-serif;
 $gcds-font-families-body: 'Noto Sans', sans-serif;
 $gcds-font-families-monospace: 'Noto Sans Mono', monospace;
-$gcds-font-families-icons: 'Font Awesome 6 Free', FontAwesome;
+$gcds-font-families-icons: 'gcds-icons';
 $gcds-font-sizes-text-small: 1.125rem;
 $gcds-font-sizes-text-small-mobile: 1rem;
 $gcds-font-sizes-text: 1.25rem;

build/web/scss/global/typography.scss

@@ -27,7 +27,7 @@ $gcds-font-text-small-mobile: 400 1rem/150% 'Noto Sans', sans-serif;
 $gcds-font-families-heading: 'Lato', sans-serif;
 $gcds-font-families-body: 'Noto Sans', sans-serif;
 $gcds-font-families-monospace: 'Noto Sans Mono', monospace;
-$gcds-font-families-icons: 'Font Awesome 6 Free', FontAwesome;
+$gcds-font-families-icons: 'gcds-icons';
 $gcds-font-sizes-text-small: 1.125rem;
 $gcds-font-sizes-text-small-mobile: 1rem;
 $gcds-font-sizes-text: 1.25rem;

build/web/scss/global/typography/fontFamilies.scss

@@ -4,4 +4,4 @@
 $gcds-font-families-heading: 'Lato', sans-serif;
 $gcds-font-families-body: 'Noto Sans', sans-serif;
 $gcds-font-families-monospace: 'Noto Sans Mono', monospace;
-$gcds-font-families-icons: 'Font Awesome 6 Free', FontAwesome;
+$gcds-font-families-icons: 'gcds-icons';

build/web/scss/tokens.scss

@@ -214,7 +214,7 @@ $gcds-font-text-small-mobile: 400 1rem/150% 'Noto Sans', sans-serif;
 $gcds-font-families-heading: 'Lato', sans-serif;
 $gcds-font-families-body: 'Noto Sans', sans-serif;
 $gcds-font-families-monospace: 'Noto Sans Mono', monospace;
-$gcds-font-families-icons: 'Font Awesome 6 Free', FontAwesome;
+$gcds-font-families-icons: 'gcds-icons';
 $gcds-font-sizes-text-small: 1.125rem;
 $gcds-font-sizes-text-small-mobile: 1rem;
 $gcds-font-sizes-text: 1.25rem;
@@ -570,7 +570,7 @@ $gcds-heading-spacing-1200: 6rem;
 $gcds-heading-spacing-1250: 6.25rem;
 $gcds-hint-margin: -0.375rem 0 0.5rem;
 $gcds-hint-text: #43474e;
-$gcds-icon-font-family: 'Font Awesome 6 Free', FontAwesome;
+$gcds-icon-font-family: 'gcds-icons';
 $gcds-icon-font-size-text-small: 1.125rem;
 $gcds-icon-font-size-text: 1.25rem;
 $gcds-icon-font-size-h6: 1.375rem;
@@ -579,6 +579,14 @@ $gcds-icon-font-size-h4: 1.6875rem;
 $gcds-icon-font-size-h3: 1.8125rem;
 $gcds-icon-font-size-h2: 2.4375rem;
 $gcds-icon-font-size-h1: 2.5625rem;
+$gcds-icon-font-size-text-small-mobile: 1rem;
+$gcds-icon-font-size-text-mobile: 1.125rem;
+$gcds-icon-font-size-h6-mobile: 1.25rem;
+$gcds-icon-font-size-h5-mobile: 1.375rem;
+$gcds-icon-font-size-h4-mobile: 1.5rem;
+$gcds-icon-font-size-h3-mobile: 1.625rem;
+$gcds-icon-font-size-h2-mobile: 2.1875rem;
+$gcds-icon-font-size-h1-mobile: 2.3125rem;
 $gcds-icon-line-height-text-small: 155%;
 $gcds-icon-line-height-text: 160%;
 $gcds-icon-line-height-h6: 145%;
@@ -587,6 +595,14 @@ $gcds-icon-line-height-h4: 133%;
 $gcds-icon-line-height-h3: 137%;
 $gcds-icon-line-height-h2: 123%;
 $gcds-icon-line-height-h1: 117%;
+$gcds-icon-line-height-text-small-mobile: 150%;
+$gcds-icon-line-height-text-mobile: 155%;
+$gcds-icon-line-height-h6-mobile: 140%;
+$gcds-icon-line-height-h5-mobile: 127%;
+$gcds-icon-line-height-h4-mobile: 133%;
+$gcds-icon-line-height-h3-mobile: 123%;
+$gcds-icon-line-height-h2-mobile: 125%;
+$gcds-icon-line-height-h1-mobile: 119%;
 $gcds-icon-fixed-width-text-small: 1.55;
 $gcds-icon-fixed-width-text: 1.6;
 $gcds-icon-fixed-width-h6: 1.45;