From 82683f8c7d8918831e07563fa48867d19bdbcb01 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 18 Mar 2026 15:08:46 +0000
Subject: [PATCH 1/5] added `@hashicorp/flight-icons` as local workspace

---
 pnpm-lock.yaml        | 3 +++
 showcase/package.json | 1 +
 2 files changed, 4 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fdc390e738d..7c681ceb48a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -568,6 +568,9 @@ importers:
       '@hashicorp/design-system-tokens':
         specifier: workspace:*
         version: link:../packages/tokens
+      '@hashicorp/flight-icons':
+        specifier: workspace:*
+        version: link:../packages/flight-icons
       '@nullvoxpopuli/ember-composable-helpers':
         specifier: ^5.2.11
         version: 5.2.11(@babel/core@7.28.0)(ember-source@6.5.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
diff --git a/showcase/package.json b/showcase/package.json
index 6f1c988ca60..4f0e0eae37f 100644
--- a/showcase/package.json
+++ b/showcase/package.json
@@ -59,6 +59,7 @@
     "@glint/template": "^1.5.2",
     "@hashicorp/design-system-components": "workspace:*",
     "@hashicorp/design-system-tokens": "workspace:*",
+    "@hashicorp/flight-icons": "workspace:*",
     "@nullvoxpopuli/ember-composable-helpers": "^5.2.11",
     "@percy/cli": "^1.30.5",
     "@percy/ember": "^4.2.0",

From 0af6ac1e6afd7195d037aaff4c1e4a749fd666d5 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 18 Mar 2026 15:09:25 +0000
Subject: [PATCH 2/5] fixed wrong class name in showcase section of `Icon`
 component

---
 .../page-components/icon/sub-sections/display.gts      | 10 +++++-----
 showcase/app/styles/showcase-pages/icon.scss           |  8 +++-----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/showcase/app/components/page-components/icon/sub-sections/display.gts b/showcase/app/components/page-components/icon/sub-sections/display.gts
index 18995a6d6d3..7ed2ccf5a64 100644
--- a/showcase/app/components/page-components/icon/sub-sections/display.gts
+++ b/showcase/app/components/page-components/icon/sub-sections/display.gts
@@ -23,7 +23,7 @@ const SubSectionDisplay: TemplateOnlyComponent = <template>
           "Block (default)"
         }}</ShwTextH4>
 
-      <ShwFlex class="shw-foundation-outline-icons" as |SF|>
+      <ShwFlex class="shw-component-outline-icons" as |SF|>
         <SF.Item @label="single icon">
           <HdsIcon @name="bookmark" @isInline={{isInline}} />
         </SF.Item>
@@ -34,26 +34,26 @@ const SubSectionDisplay: TemplateOnlyComponent = <template>
         </SF.Item>
       </ShwFlex>
 
-      <ShwFlex class="shw-foundation-outline-icons" @gap="4rem" as |SG|>
+      <ShwFlex class="shw-component-outline-icons" @gap="4rem" as |SG|>
         <SG.Item @label="icon + inline text">
           <HdsIcon @name="bookmark" @isInline={{isInline}} />
           <span class="hds-typography-body-200">Lorem ipsum dolor</span>
         </SG.Item>
         <SG.Item @label="icon + inline text (inside flexbox)">
-          <div class="shw-foundation-icon-container-flex">
             <HdsIcon @name="bookmark" @isInline={{isInline}} />
+          <div class="shw-component-icon-container-flex">
             <span class="hds-typography-body-200">Lorem ipsum dolor</span>
           </div>
         </SG.Item>
         <SG.Item @label="icon + inline text (inside grid)">
-          <div class="shw-foundation-icon-container-grid">
             <HdsIcon @name="bookmark" @isInline={{isInline}} />
+          <div class="shw-component-icon-container-grid">
             <span class="hds-typography-body-200">Lorem ipsum dolor</span>
           </div>
         </SG.Item>
       </ShwFlex>
 
-      <ShwFlex class="shw-foundation-outline-icons" @gap="4rem" as |SF|>
+      <ShwFlex class="shw-component-outline-icons" @gap="4rem" as |SF|>
         <SF.Item @label="icons interleaved with inline text">
           <span class="hds-typography-body-200">Lorem ipsum dolor</span>
           <HdsIcon @name="bookmark" @isInline={{isInline}} />
diff --git a/showcase/app/styles/showcase-pages/icon.scss b/showcase/app/styles/showcase-pages/icon.scss
index bd6ef53914b..5459c3e128c 100644
--- a/showcase/app/styles/showcase-pages/icon.scss
+++ b/showcase/app/styles/showcase-pages/icon.scss
@@ -4,22 +4,20 @@
  */
 
 // ICON
-// The icon page is currently displayed in 2 places,
-// foundations for FlightIcon and components for Hds::icon
 body.page-components-icon {
-  .shw-foundation-outline-icons {
+  .shw-component-outline-icons {
     .hds-icon {
       outline: 1px dotted #CCC;
     }
   }
 
-  .shw-foundation-icon-container-flex {
+  .shw-component-icon-container-flex {
     display: flex;
     gap: 4px;
     align-items: center;
   }
 
-  .shw-foundation-icon-container-grid {
+  .shw-component-icon-container-grid {
     display: grid;
     grid-template-columns: auto 1fr;
     gap: 4px;

From 861cfe7e30886ec551a47e6418abaf33e8259a4c Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 18 Mar 2026 15:11:41 +0000
Subject: [PATCH 3/5] updated icons in showcase page for `Icon` component

---
 .../page-components/icon/sub-sections/color.gts      | 12 ++++++------
 .../page-components/icon/sub-sections/display.gts    | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/showcase/app/components/page-components/icon/sub-sections/color.gts b/showcase/app/components/page-components/icon/sub-sections/color.gts
index 821808ab27a..a3ec374a8fa 100644
--- a/showcase/app/components/page-components/icon/sub-sections/color.gts
+++ b/showcase/app/components/page-components/icon/sub-sections/color.gts
@@ -23,13 +23,13 @@ const SubSectionColor: TemplateOnlyComponent = <template>
     <SF.Item as |SFI|>
       <SFI.Label>unspecified color (<code>currentColor</code>)</SFI.Label>
       <div>
-        <HdsIcon @name="lock-fill" @size="24" />
+        <HdsIcon @name="plus-circle-fill" @size="24" />
       </div>
     </SF.Item>
     <SF.Item as |SGI|>
       <SGI.Label>parent with <code>#e12568</code> color</SGI.Label>
       <div {{style color="#e12568"}}>
-        <HdsIcon @name="lock-fill" @size="24" />
+        <HdsIcon @name="plus-circle-fill" @size="24" />
       </div>
     </SF.Item>
   </ShwFlex>
@@ -41,7 +41,7 @@ const SubSectionColor: TemplateOnlyComponent = <template>
     {{#each COLORS as |color|}}
       <SG.Item @label={{color}}>
         <div class="shw-component-icon-sample-color--{{color}}">
-          <HdsIcon @name="lock-fill" @color={{color}} @size="24" />
+          <HdsIcon @name="plus-circle-fill" @color={{color}} @size="24" />
         </div>
       </SG.Item>
     {{/each}}
@@ -53,12 +53,12 @@ const SubSectionColor: TemplateOnlyComponent = <template>
   <ShwFlex @direction="column" as |SF|>
     <SF.Item as |SGI|>
       <SGI.Label><code>#e91e63</code></SGI.Label>
-      <HdsIcon @name="lock-fill" @color="#e91e63" @size="24" />
+      <HdsIcon @name="plus-circle-fill" @color="#e91e63" @size="24" />
     </SF.Item>
     <SF.Item as |SGI|>
       <SGI.Label><code>--token-color-palette-purple-400</code></SGI.Label>
       <HdsIcon
-        @name="lock-fill"
+        @name="plus-circle-fill"
         @color="var(--token-color-palette-purple-400)"
         @size="24"
       />
@@ -69,7 +69,7 @@ const SubSectionColor: TemplateOnlyComponent = <template>
         <code>green !important</code>
       </SGI.Label>
       <div {{style color="green !important"}}>
-        <HdsIcon @name="lock-fill" @color="orange" @size="24" />
+        <HdsIcon @name="plus-circle-fill" @color="orange" @size="24" />
       </div>
     </SF.Item>
   </ShwFlex>
diff --git a/showcase/app/components/page-components/icon/sub-sections/display.gts b/showcase/app/components/page-components/icon/sub-sections/display.gts
index 7ed2ccf5a64..8b41b62fbe3 100644
--- a/showcase/app/components/page-components/icon/sub-sections/display.gts
+++ b/showcase/app/components/page-components/icon/sub-sections/display.gts
@@ -25,7 +25,7 @@ const SubSectionDisplay: TemplateOnlyComponent = <template>
 
       <ShwFlex class="shw-component-outline-icons" as |SF|>
         <SF.Item @label="single icon">
-          <HdsIcon @name="bookmark" @isInline={{isInline}} />
+          <HdsIcon @name="bookmark-fill" @isInline={{isInline}} />
         </SF.Item>
         <SF.Item @label="multiple icons">
           <HdsIcon @name="alert-circle-fill" @isInline={{isInline}} />
@@ -36,18 +36,18 @@ const SubSectionDisplay: TemplateOnlyComponent = <template>
 
       <ShwFlex class="shw-component-outline-icons" @gap="4rem" as |SG|>
         <SG.Item @label="icon + inline text">
-          <HdsIcon @name="bookmark" @isInline={{isInline}} />
+          <HdsIcon @name="bookmark-fill" @isInline={{isInline}} />
           <span class="hds-typography-body-200">Lorem ipsum dolor</span>
         </SG.Item>
         <SG.Item @label="icon + inline text (inside flexbox)">
-            <HdsIcon @name="bookmark" @isInline={{isInline}} />
           <div class="shw-component-icon-container-flex">
+            <HdsIcon @name="bookmark-fill" @isInline={{isInline}} />
             <span class="hds-typography-body-200">Lorem ipsum dolor</span>
           </div>
         </SG.Item>
         <SG.Item @label="icon + inline text (inside grid)">
-            <HdsIcon @name="bookmark" @isInline={{isInline}} />
           <div class="shw-component-icon-container-grid">
+            <HdsIcon @name="bookmark-fill" @isInline={{isInline}} />
             <span class="hds-typography-body-200">Lorem ipsum dolor</span>
           </div>
         </SG.Item>
@@ -56,7 +56,7 @@ const SubSectionDisplay: TemplateOnlyComponent = <template>
       <ShwFlex class="shw-component-outline-icons" @gap="4rem" as |SF|>
         <SF.Item @label="icons interleaved with inline text">
           <span class="hds-typography-body-200">Lorem ipsum dolor</span>
-          <HdsIcon @name="bookmark" @isInline={{isInline}} />
+          <HdsIcon @name="bookmark-fill" @isInline={{isInline}} />
           <span class="hds-typography-body-200">Sit amet consectetur</span>
           <HdsIcon @name="alert-circle-fill" @isInline={{isInline}} />
           <HdsIcon @name="alert-diamond-fill" @isInline={{isInline}} />
@@ -65,7 +65,7 @@ const SubSectionDisplay: TemplateOnlyComponent = <template>
         </SF.Item>
         <SF.Item @label="icons interleaved with block text">
           <p class="hds-typography-body-200">Lorem ipsum dolor</p>
-          <HdsIcon @name="bookmark" @isInline={{isInline}} />
+          <HdsIcon @name="bookmark-fill" @isInline={{isInline}} />
           <p class="hds-typography-body-200">Sit amet consectetur</p>
           <HdsIcon @name="alert-circle-fill" @isInline={{isInline}} />
           <HdsIcon @name="alert-diamond-fill" @isInline={{isInline}} />

From e75eff660ea89863b6d5a75aec92118a2bb5202a Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 18 Mar 2026 15:10:49 +0000
Subject: [PATCH 4/5] added library section to the showcase page for `Icon`
 library

---
 .../components/page-components/icon/index.gts |  4 ++
 .../icon/sub-sections/display.gts             |  3 +
 .../icon/sub-sections/library.gts             | 67 +++++++++++++++++++
 showcase/app/styles/showcase-pages/icon.scss  | 14 ++++
 4 files changed, 88 insertions(+)
 create mode 100644 showcase/app/components/page-components/icon/sub-sections/library.gts

diff --git a/showcase/app/components/page-components/icon/index.gts b/showcase/app/components/page-components/icon/index.gts
index 970b047d441..5d9dc9e2c65 100644
--- a/showcase/app/components/page-components/icon/index.gts
+++ b/showcase/app/components/page-components/icon/index.gts
@@ -2,7 +2,9 @@
  * Copyright IBM Corp. 2021, 2025
  * SPDX-License-Identifier: MPL-2.0
  */
+
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
@@ -10,6 +12,7 @@ import ShwTextH1 from 'showcase/components/shw/text/h1';
 import SubSectionSize from 'showcase/components/page-components/icon/sub-sections/size';
 import SubSectionColor from 'showcase/components/page-components/icon/sub-sections/color';
 import SubSectionDisplay from 'showcase/components/page-components/icon/sub-sections/display';
+import SubSectionLibrary from 'showcase/components/page-components/icon/sub-sections/library';
 
 const IconIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Icon Component"}}
@@ -20,6 +23,7 @@ const IconIndex: TemplateOnlyComponent = <template>
     <SubSectionSize />
     <SubSectionColor />
     <SubSectionDisplay />
+    <SubSectionLibrary />
   </section>
 </template>;
 
diff --git a/showcase/app/components/page-components/icon/sub-sections/display.gts b/showcase/app/components/page-components/icon/sub-sections/display.gts
index 8b41b62fbe3..f49a9ccf09f 100644
--- a/showcase/app/components/page-components/icon/sub-sections/display.gts
+++ b/showcase/app/components/page-components/icon/sub-sections/display.gts
@@ -9,6 +9,7 @@ import { array } from '@ember/helper';
 import ShwTextH2 from 'showcase/components/shw/text/h2';
 import ShwTextH4 from 'showcase/components/shw/text/h4';
 import ShwFlex from 'showcase/components/shw/flex';
+import ShwDivider from 'showcase/components/shw/divider';
 
 import { HdsIcon } from '@hashicorp/design-system-components/components';
 
@@ -76,6 +77,8 @@ const SubSectionDisplay: TemplateOnlyComponent = <template>
 
     {{/each}}
   {{/let}}
+
+  <ShwDivider />
 </template>;
 
 export default SubSectionDisplay;
diff --git a/showcase/app/components/page-components/icon/sub-sections/library.gts b/showcase/app/components/page-components/icon/sub-sections/library.gts
new file mode 100644
index 00000000000..a5b15a327d2
--- /dev/null
+++ b/showcase/app/components/page-components/icon/sub-sections/library.gts
@@ -0,0 +1,67 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwTextH4 from 'showcase/components/shw/text/h4';
+import ShwGrid from 'showcase/components/shw/grid';
+import ShwLabel from 'showcase/components/shw/label';
+import ShwDivider from 'showcase/components/shw/divider';
+
+import { HdsIcon } from '@hashicorp/design-system-components/components';
+import catalog from '@hashicorp/flight-icons/catalog.json';
+
+import type { IconName } from '@hashicorp/flight-icons/svg';
+
+export default class SubSectionIconLibrary extends Component {
+  get groupedIcons() {
+    const groupedIcons: Record<string, IconName[]> = {}; // icons grouped by category
+
+    catalog.assets
+      .filter(({ size }) => size === '24')
+      .forEach((icon) => {
+        const category = icon.category;
+        if (!groupedIcons[category]) {
+          groupedIcons[category] = [];
+        }
+        groupedIcons[category].push(icon.iconName as IconName);
+      });
+
+    // Sort the categories alphabetically
+    const sortedGroupedIcons: Record<string, IconName[]> = {};
+    Object.keys(groupedIcons)
+      .sort()
+      .forEach((category) => {
+        sortedGroupedIcons[category] = groupedIcons[category] as IconName[];
+      });
+
+    return sortedGroupedIcons;
+  }
+
+  <template>
+    <div class="shw-component-icon-library-header">
+      <ShwTextH2>Library</ShwTextH2>
+    </div>
+
+    {{#each-in this.groupedIcons as |categoryName categoryIcons|}}
+      <ShwTextH4 @tag="h3">{{categoryName}}</ShwTextH4>
+
+      <ShwGrid @columns={{8}} @gap="1rem" as |SG|>
+        {{#each categoryIcons as |iconName|}}
+          <SG.Item class="shw-component-icon-library-item">
+            <HdsIcon @name={{iconName}} @size="24" />
+            <ShwLabel
+              class="hds-typography-body-100 shw-icon-label"
+            >{{iconName}}</ShwLabel>
+          </SG.Item>
+        {{/each}}
+      </ShwGrid>
+
+      <ShwDivider @level={{2}} />
+
+    {{/each-in}}
+  </template>
+}
diff --git a/showcase/app/styles/showcase-pages/icon.scss b/showcase/app/styles/showcase-pages/icon.scss
index 5459c3e128c..103a0689f21 100644
--- a/showcase/app/styles/showcase-pages/icon.scss
+++ b/showcase/app/styles/showcase-pages/icon.scss
@@ -29,4 +29,18 @@ body.page-components-icon {
     background: #0c0c0e;
     outline: 2px solid #0c0c0e;
   }
+
+  // LIBRARY
+
+  .shw-component-icon-library-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .shw-component-icon-library-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
 }

From 654780c416e7b9be98c42c82a5bda7b8f8396e37 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 18 Mar 2026 15:07:14 +0000
Subject: [PATCH 5/5] disabled icons animations when Percy is taking
 screenshots

---
 showcase/app/styles/_globals.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/showcase/app/styles/_globals.scss b/showcase/app/styles/_globals.scss
index a51bb3879c1..b740f4d24dd 100644
--- a/showcase/app/styles/_globals.scss
+++ b/showcase/app/styles/_globals.scss
@@ -236,4 +236,8 @@ body {
   main section:not([data-test-percy]) {
     display: none !important;
   }
+  // disable icons animations when Percy is taking screenshots
+  .hds-icon--animation-loading {
+    animation: none !important;
+  }
 }