From 4ed4132ea9bf8294d143b38c92f9638f714e3fd0 Mon Sep 17 00:00:00 2001
From: rajsite <1588923+rajsite@users.noreply.github.com>
Date: Tue, 13 Jan 2026 18:15:23 -0600
Subject: [PATCH 1/7] SVGIcon proto

---
 .../build/generate-icons/source/index.js      |  6 +++---
 .../nimble-components/src/icon-base/index.ts  | 10 ++++++---
 .../src/icon-base/template.ts                 |  4 ++--
 .../mapping/icon/tests/mapping-icon.spec.ts   |  6 +++---
 .../mapping/table-column-mapping.stories.ts   | 21 +++++++++++++++++--
 5 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/packages/nimble-components/build/generate-icons/source/index.js b/packages/nimble-components/build/generate-icons/source/index.js
index 170b771ccb..de4a02ab34 100644
--- a/packages/nimble-components/build/generate-icons/source/index.js
+++ b/packages/nimble-components/build/generate-icons/source/index.js
@@ -45,7 +45,7 @@ for (const key of Object.keys(icons)) {
 
     const componentFileContents = `${generatedFilePrefix}
 import { ${svgName} } from '@ni/nimble-tokens/dist/icons/js';
-import { Icon, registerIcon } from '../icon-base';
+import { SvgIcon, registerSvgIcon } from '../icon-base';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -56,13 +56,13 @@ declare global {
 /**
  * The icon component for the '${iconName}' icon
  */
-export class ${className} extends Icon {
+export class ${className} extends SvgIcon {
     public constructor() {
         super(${svgName});
     }
 }
 
-registerIcon('${elementBaseName}', ${className});
+registerSvgIcon('${elementBaseName}', ${className});
 export const ${tagName} = '${elementName}';
 `;
 
diff --git a/packages/nimble-components/src/icon-base/index.ts b/packages/nimble-components/src/icon-base/index.ts
index 90da606b6b..334a2a6482 100644
--- a/packages/nimble-components/src/icon-base/index.ts
+++ b/packages/nimble-components/src/icon-base/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import { attr } from '@ni/fast-element';
 import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
 import type { NimbleIcon } from '@ni/nimble-tokens/dist/icons/js';
@@ -16,15 +17,18 @@ export class Icon extends FoundationElement {
      */
     @attr
     public severity: IconSeverity;
+}
 
+/**
+ * Icon base class for the standard nimble icon set
+ */
+export class SvgIcon extends Icon {
     public constructor(/** @internal */ public readonly icon: NimbleIcon) {
         super();
     }
 }
 
-type IconClass = typeof Icon;
-
-export const registerIcon = (baseName: string, iconClass: IconClass): void => {
+export const registerSvgIcon = (baseName: string, iconClass: typeof SvgIcon): void => {
     const composedIcon = iconClass.compose({
         baseName,
         template,
diff --git a/packages/nimble-components/src/icon-base/template.ts b/packages/nimble-components/src/icon-base/template.ts
index bcbba0f894..23f12a5f76 100644
--- a/packages/nimble-components/src/icon-base/template.ts
+++ b/packages/nimble-components/src/icon-base/template.ts
@@ -1,8 +1,8 @@
 import { html } from '@ni/fast-element';
-import type { Icon } from '.';
+import type { SvgIcon } from '.';
 
 // Avoiding any whitespace in the template because this is an inline element
-export const template = html<Icon>`<div
+export const template = html<SvgIcon>`<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
diff --git a/packages/nimble-components/src/mapping/icon/tests/mapping-icon.spec.ts b/packages/nimble-components/src/mapping/icon/tests/mapping-icon.spec.ts
index 0f85c73f0b..f8050af0e3 100644
--- a/packages/nimble-components/src/mapping/icon/tests/mapping-icon.spec.ts
+++ b/packages/nimble-components/src/mapping/icon/tests/mapping-icon.spec.ts
@@ -6,11 +6,11 @@ import {
     type Fixture
 } from '../../../utilities/tests/fixture';
 import { waitForUpdatesAsync } from '../../../testing/async-helpers';
-import { Icon, registerIcon } from '../../../icon-base';
+import { SvgIcon, registerSvgIcon } from '../../../icon-base';
 
 describe('Icon Mapping', () => {
     const testIconElementName = uniqueElementName();
-    class TestIcon extends Icon {}
+    class TestIcon extends SvgIcon {}
 
     let element: MappingIcon;
     let connect: () => Promise<void>;
@@ -38,7 +38,7 @@ describe('Icon Mapping', () => {
 
         expect(element.resolvedIcon).toBeUndefined();
 
-        registerIcon(testIconElementName, TestIcon);
+        registerSvgIcon(testIconElementName, TestIcon);
         await waitForUpdatesAsync();
 
         expect(element.resolvedIcon).toBeDefined();
diff --git a/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts b/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts
index f2c3b517dd..4d29aba963 100644
--- a/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts
+++ b/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts
@@ -1,4 +1,4 @@
-import { html, ref } from '@ni/fast-element';
+import { html, ref, customElement, css } from '@ni/fast-element';
 import type { Meta, StoryObj } from '@storybook/html-vite';
 import { tableTag } from '@ni/nimble-components/dist/esm/table';
 import { iconXmarkTag } from '@ni/nimble-components/dist/esm/icons/xmark';
@@ -11,6 +11,8 @@ import { mappingTextTag } from '@ni/nimble-components/dist/esm/mapping/text';
 import { mappingEmptyTag } from '@ni/nimble-components/dist/esm/mapping/empty';
 import { TableColumnMappingWidthMode } from '@ni/nimble-components/dist/esm/table-column/mapping/types';
 import { tableColumnMappingTag } from '@ni/nimble-components/dist/esm/table-column/mapping';
+import { Icon } from '@ni/nimble-components/dist/esm/icon-base';
+import { display } from '@ni/nimble-components/dist/esm/utilities/style/display';
 import {
     type SharedTableArgs,
     sharedTableArgTypes,
@@ -83,6 +85,21 @@ This should only be set when the header contains a single icon (no text) and non
 to \`default\`, the column will be resizable and be sized based on its fractional-width and min-pixel-width values. A column with its \`width-mode\` set to \`iconSize\` should
 should not be the right-most column in the table.`;
 
+const img = 'data:image/gif;base64,R0lGODlhFwAaAPIHAPfWre+9e//v3s6EITw+PP////+M/wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAHACwAAAAAFwAaAEADkHi63O5jhEmFBSDCYPq0oNUZGTNgJ6ZiVCC5Tywr70QQn3WD5RKpPMvAMhnMjjOJMcLUnIybVuVygfoot50uq7I2gSEBQGhtnMIgaRnJbifXEDjNVWv95If6lCfXT8ZhPVc2BAU4W4ZVJhwFBjcBAgRiNwaNgnMVgIGXKWBhQygxZ2gRdnEYaAJqZU2trq0HCQAh+QQFCgAAACwAAAAAAQABAAACAkQBACH5BAUKAAAALAAAAAABAAEAAAICRAEAIfkECQoAAAAsAAAAABMABwAAAgqEj6nL7Q+jnLEAACH5BAkKAAIALAIABgATAAQAAAIQlD+pc6gNzRohxAsAY/eyAgAh+QQJCgAEACwEAAUADwAFAAADGThD3E5qhBUrBGrKwLvCWccJJABuYkCuWAIAIfkECQoABAAsAgAGABMABAAAAxhIutM+i70Rqg2zVXqD+AAwhJDWeR/YEAkAIfkEBQoABAAsBAAFAA8ABQAAAxk4Q9xOaoQVKwRqysC7wlnHCSQAbmJArlgCACH5BAUKAAAALAAAAAABAAEAAAICRAEAIfkEBQoAAAAsAAAAAAEAAQAAAgJEAQAh+QQFCgAAACwAAAAAAQABAAACAkQBACH5BAUKAAAALAAAAAABAAEAAAICRAEAIfkEBQoAAAAsAAAAAAEAAQAAAgJEAQAh+QQFCgAAACwAAAAAAQABAAACAkQBACH5BAUKAAAALAAAAAABAAEAAAICRAEAIfkEBQoAAAAsAAAAAAEAAQAAAgJEAQAh+QQFCgAAACwAAAAAAQABAAACAkQBACH5BAUKAAAALAAAAAABAAEAAAICRAEAIfkEBQoAAwAsBgAIAAsABwAAAhKMD6PL7SveSsM0gU+AOFqGDQUAIfkEBQoAAQAsBgAIAAsABwAAAxMYurL+EILIFCHviluwJd3lLWICACH5BAUKAAAALAAAAAABAAEAAAICRAEAIfkEBQoAAAAsAAAAAAEAAQAAAgJEAQAh+QQFCgAAACwAAAAAAQABAAACAkQBACH5BAUKAAAALAAAAAABAAEAAAICRAEAIfkEBQoAAAAsAAAAAAEAAQAAAgJEAQAh+QQFCgAAACwAAAAAAQABAAACAkQBACH5BAUKAAAALAAAAAABAAEAAAICRAEAOw==';
+const awesomeIconTag = 'awesome-icon';
+/**
+ * Awesome icon
+ */
+@customElement({
+    name: awesomeIconTag,
+    template: html`<img src="${img}" style="width: 16px; height: 16px">`,
+    styles: css`
+        ${display('inline-flex')}
+    `
+})
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class AwesomeIcon extends Icon {}
+
 export const mappingColumn: StoryObj<MappingColumnTableArgs> = {
     render: createUserSelectedThemeStory(html<MappingColumnTableArgs>`
         <${tableTag}
@@ -96,7 +113,7 @@ export const mappingColumn: StoryObj<MappingColumnTableArgs> = {
             <${tableColumnMappingTag} field-name="status" group-index="0">
                 Status
                 <${mappingIconTag} key="fail" icon="${iconXmarkTag}" severity="error" text="Not a Simpson"></${mappingIconTag}>
-                <${mappingIconTag} key="success" icon="${iconCheckTag}" severity="success" text="Is a Simpson"></${mappingIconTag}>
+                <${mappingIconTag} key="success" icon="${awesomeIconTag}" severity="success" text="Is a Simpson"></${mappingIconTag}>
                 <${mappingSpinnerTag} key="calculating" text="Calculating" text-hidden></${mappingSpinnerTag}>
                 <${mappingEmptyTag} key="unknown" text="Unknown"></${mappingEmptyTag}>
             </${tableColumnMappingTag}>

From 59125895cc47262eff25437d237c1dafdc4c0654 Mon Sep 17 00:00:00 2001
From: rajsite <1588923+rajsite@users.noreply.github.com>
Date: Tue, 13 Jan 2026 18:15:38 -0600
Subject: [PATCH 2/7] Change files

---
 ...le-components-b60d4aa1-b360-468e-b13c-5a5dca16fa53.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@ni-nimble-components-b60d4aa1-b360-468e-b13c-5a5dca16fa53.json

diff --git a/change/@ni-nimble-components-b60d4aa1-b360-468e-b13c-5a5dca16fa53.json b/change/@ni-nimble-components-b60d4aa1-b360-468e-b13c-5a5dca16fa53.json
new file mode 100644
index 0000000000..b61b43618f
--- /dev/null
+++ b/change/@ni-nimble-components-b60d4aa1-b360-468e-b13c-5a5dca16fa53.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "SVGIcon proto",
+  "packageName": "@ni/nimble-components",
+  "email": "1588923+rajsite@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

From 10f31ca2be7ef8de63b5a20d90380696c7aeabbd Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Thu, 22 Jan 2026 22:21:38 -0600
Subject: [PATCH 3/7] merge fix

---
 packages/nimble-components/build/generate-icons.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nimble-components/build/generate-icons.mjs b/packages/nimble-components/build/generate-icons.mjs
index b721b650c2..cde2ff51bc 100644
--- a/packages/nimble-components/build/generate-icons.mjs
+++ b/packages/nimble-components/build/generate-icons.mjs
@@ -44,7 +44,7 @@ for (const key of Object.keys(icons)) {
 
     const componentFileContents = `${generatedFilePrefix}
 import { ${svgName} } from '@ni/nimble-tokens/dist/icons/js';
-import { SvgIcon, registerSvgIcon } from '../icon-base';
+import { SvgIcon, registerSvgIcon } from '../../icon-base';
 
 declare global {
     interface HTMLElementTagNameMap {

From f9f57684dbd29422c7608def927fe74d9055f7c9 Mon Sep 17 00:00:00 2001
From: rajsite <1588923+rajsite@users.noreply.github.com>
Date: Fri, 23 Jan 2026 10:53:15 -0600
Subject: [PATCH 4/7] Clean-up IconSvg

---
 .../nimble-angular/build/generate-icons.mjs   |  2 +-
 .../blazor-workspace/build/generate-icons.mjs |  2 +-
 .../build/generate-icons.mjs                  |  8 +++---
 .../nimble-components/src/icon-base/index.ts  | 27 ++-----------------
 .../nimble-components/src/icon-svg/index.ts   | 24 +++++++++++++++++
 .../src/{icon-base => icon-svg}/styles.ts     |  0
 .../src/{icon-base => icon-svg}/template.ts   |  4 +--
 .../tests/icon-metadata.ts                    |  0
 .../tests/icons.spec.ts                       |  0
 .../mapping/icon/tests/mapping-icon.spec.ts   |  6 ++---
 .../src/nimble/icon-base/icons.stories.ts     |  2 +-
 11 files changed, 38 insertions(+), 37 deletions(-)
 create mode 100644 packages/nimble-components/src/icon-svg/index.ts
 rename packages/nimble-components/src/{icon-base => icon-svg}/styles.ts (100%)
 rename packages/nimble-components/src/{icon-base => icon-svg}/template.ts (72%)
 rename packages/nimble-components/src/{icon-base => icon-svg}/tests/icon-metadata.ts (100%)
 rename packages/nimble-components/src/{icon-base => icon-svg}/tests/icons.spec.ts (100%)

diff --git a/packages/angular-workspace/nimble-angular/build/generate-icons.mjs b/packages/angular-workspace/nimble-angular/build/generate-icons.mjs
index dd8e46d91e..144c4a0bf7 100644
--- a/packages/angular-workspace/nimble-angular/build/generate-icons.mjs
+++ b/packages/angular-workspace/nimble-angular/build/generate-icons.mjs
@@ -91,7 +91,7 @@ export class ${moduleName} { }
         modulePath: moduleFilePath
     });
 }
-console.log(`Finshed writing ${directiveAndModulePaths.length} icon directive and module files`);
+console.log(`Finished writing ${directiveAndModulePaths.length} icon directive and module files`);
 
 let barrelFileContents = `${generatedFilePrefix}\n`;
 for (const paths of directiveAndModulePaths) {
diff --git a/packages/blazor-workspace/build/generate-icons.mjs b/packages/blazor-workspace/build/generate-icons.mjs
index a6ecc76548..3f25490c60 100644
--- a/packages/blazor-workspace/build/generate-icons.mjs
+++ b/packages/blazor-workspace/build/generate-icons.mjs
@@ -46,4 +46,4 @@ for (const key of Object.keys(icons)) {
     const componentFilePath = path.resolve(iconsDirectory, componentFileName);
     fs.writeFileSync(componentFilePath, directiveFileContents, { encoding: 'utf-8' });
 }
-console.log('Finshed writing icon Razor component files');
+console.log('Finished writing icon Razor component files');
diff --git a/packages/nimble-components/build/generate-icons.mjs b/packages/nimble-components/build/generate-icons.mjs
index cde2ff51bc..41cf70d359 100644
--- a/packages/nimble-components/build/generate-icons.mjs
+++ b/packages/nimble-components/build/generate-icons.mjs
@@ -44,7 +44,7 @@ for (const key of Object.keys(icons)) {
 
     const componentFileContents = `${generatedFilePrefix}
 import { ${svgName} } from '@ni/nimble-tokens/dist/icons/js';
-import { SvgIcon, registerSvgIcon } from '../../icon-base';
+import { IconSvg, registerIconSvg } from '../../icon-svg';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -55,13 +55,13 @@ declare global {
 /**
  * The icon component for the '${iconName}' icon
  */
-export class ${className} extends SvgIcon {
+export class ${className} extends IconSvg {
     public constructor() {
         super(${svgName});
     }
 }
 
-registerSvgIcon('${elementBaseName}', ${className});
+registerIconSvg('${elementBaseName}', ${className});
 export const ${tagName} = '${elementName}';
 `;
 
@@ -72,7 +72,7 @@ export const ${tagName} = '${elementName}';
         `export { ${className} } from './${directoryName}';\n`
     );
 }
-console.log(`Finshed writing ${fileCount} icon component files`);
+console.log(`Finished writing ${fileCount} icon component files`);
 
 const allIconsFilePath = path.resolve(iconsDirectory, 'all-icons.ts');
 console.log('Writing all-icons file');
diff --git a/packages/nimble-components/src/icon-base/index.ts b/packages/nimble-components/src/icon-base/index.ts
index 334a2a6482..851f5c827f 100644
--- a/packages/nimble-components/src/icon-base/index.ts
+++ b/packages/nimble-components/src/icon-base/index.ts
@@ -1,15 +1,11 @@
-/* eslint-disable max-classes-per-file */
 import { attr } from '@ni/fast-element';
-import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
-import type { NimbleIcon } from '@ni/nimble-tokens/dist/icons/js';
-import { template } from './template';
-import { styles } from './styles';
+import { FoundationElement } from '@ni/fast-foundation';
 import type { IconSeverity } from './types';
 
 /**
  * The base class for icon components
  */
-export class Icon extends FoundationElement {
+export abstract class Icon extends FoundationElement {
     /**
      * @public
      * @remarks
@@ -18,22 +14,3 @@ export class Icon extends FoundationElement {
     @attr
     public severity: IconSeverity;
 }
-
-/**
- * Icon base class for the standard nimble icon set
- */
-export class SvgIcon extends Icon {
-    public constructor(/** @internal */ public readonly icon: NimbleIcon) {
-        super();
-    }
-}
-
-export const registerSvgIcon = (baseName: string, iconClass: typeof SvgIcon): void => {
-    const composedIcon = iconClass.compose({
-        baseName,
-        template,
-        styles
-    });
-
-    DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
-};
diff --git a/packages/nimble-components/src/icon-svg/index.ts b/packages/nimble-components/src/icon-svg/index.ts
new file mode 100644
index 0000000000..44aad2ecf0
--- /dev/null
+++ b/packages/nimble-components/src/icon-svg/index.ts
@@ -0,0 +1,24 @@
+import type { NimbleIcon } from '@ni/nimble-tokens/dist/icons/js';
+import { DesignSystem } from '@ni/fast-foundation';
+import { template } from './template';
+import { styles } from './styles';
+import { Icon } from '../icon-base';
+
+/**
+ * Icon base class for the standard nimble icon set
+ */
+export class IconSvg extends Icon {
+    public constructor(/** @internal */ public readonly icon: NimbleIcon) {
+        super();
+    }
+}
+
+export const registerIconSvg = (baseName: string, iconClass: typeof IconSvg): void => {
+    const composedIcon = iconClass.compose({
+        baseName,
+        template,
+        styles
+    });
+
+    DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
+};
diff --git a/packages/nimble-components/src/icon-base/styles.ts b/packages/nimble-components/src/icon-svg/styles.ts
similarity index 100%
rename from packages/nimble-components/src/icon-base/styles.ts
rename to packages/nimble-components/src/icon-svg/styles.ts
diff --git a/packages/nimble-components/src/icon-base/template.ts b/packages/nimble-components/src/icon-svg/template.ts
similarity index 72%
rename from packages/nimble-components/src/icon-base/template.ts
rename to packages/nimble-components/src/icon-svg/template.ts
index 23f12a5f76..c7187346bb 100644
--- a/packages/nimble-components/src/icon-base/template.ts
+++ b/packages/nimble-components/src/icon-svg/template.ts
@@ -1,8 +1,8 @@
 import { html } from '@ni/fast-element';
-import type { SvgIcon } from '.';
+import type { IconSvg } from '.';
 
 // Avoiding any whitespace in the template because this is an inline element
-export const template = html<SvgIcon>`<div
+export const template = html<IconSvg>`<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
diff --git a/packages/nimble-components/src/icon-base/tests/icon-metadata.ts b/packages/nimble-components/src/icon-svg/tests/icon-metadata.ts
similarity index 100%
rename from packages/nimble-components/src/icon-base/tests/icon-metadata.ts
rename to packages/nimble-components/src/icon-svg/tests/icon-metadata.ts
diff --git a/packages/nimble-components/src/icon-base/tests/icons.spec.ts b/packages/nimble-components/src/icon-svg/tests/icons.spec.ts
similarity index 100%
rename from packages/nimble-components/src/icon-base/tests/icons.spec.ts
rename to packages/nimble-components/src/icon-svg/tests/icons.spec.ts
diff --git a/packages/nimble-components/src/mapping/icon/tests/mapping-icon.spec.ts b/packages/nimble-components/src/mapping/icon/tests/mapping-icon.spec.ts
index f8050af0e3..4805329af6 100644
--- a/packages/nimble-components/src/mapping/icon/tests/mapping-icon.spec.ts
+++ b/packages/nimble-components/src/mapping/icon/tests/mapping-icon.spec.ts
@@ -6,11 +6,11 @@ import {
     type Fixture
 } from '../../../utilities/tests/fixture';
 import { waitForUpdatesAsync } from '../../../testing/async-helpers';
-import { SvgIcon, registerSvgIcon } from '../../../icon-base';
+import { IconSvg, registerIconSvg } from '../../../icon-svg';
 
 describe('Icon Mapping', () => {
     const testIconElementName = uniqueElementName();
-    class TestIcon extends SvgIcon {}
+    class TestIcon extends IconSvg {}
 
     let element: MappingIcon;
     let connect: () => Promise<void>;
@@ -38,7 +38,7 @@ describe('Icon Mapping', () => {
 
         expect(element.resolvedIcon).toBeUndefined();
 
-        registerSvgIcon(testIconElementName, TestIcon);
+        registerIconSvg(testIconElementName, TestIcon);
         await waitForUpdatesAsync();
 
         expect(element.resolvedIcon).toBeDefined();
diff --git a/packages/storybook/src/nimble/icon-base/icons.stories.ts b/packages/storybook/src/nimble/icon-base/icons.stories.ts
index e66aed0c28..7cf7fe5a48 100644
--- a/packages/storybook/src/nimble/icon-base/icons.stories.ts
+++ b/packages/storybook/src/nimble/icon-base/icons.stories.ts
@@ -10,7 +10,7 @@ import { tableColumnMappingTag } from '@ni/nimble-components/dist/esm/table-colu
 import { mappingIconTag } from '@ni/nimble-components/dist/esm/mapping/icon';
 import { tableColumnTextTag } from '@ni/nimble-components/dist/esm/table-column/text';
 import { IconSeverity } from '@ni/nimble-components/dist/esm/icon-base/types';
-import { iconMetadata } from '@ni/nimble-components/dist/esm/icon-base/tests/icon-metadata';
+import { iconMetadata } from '@ni/nimble-components/dist/esm/icon-svg/tests/icon-metadata';
 import { tableFitRowsHeight } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
 import {
     apiCategory,

From daa4feb43682c76f912e56e48d2cd662716b60e6 Mon Sep 17 00:00:00 2001
From: rajsite <1588923+rajsite@users.noreply.github.com>
Date: Fri, 23 Jan 2026 10:53:54 -0600
Subject: [PATCH 5/7] Change files

---
 ...imble-angular-95b60d3c-bce1-46a4-a5a0-0c486f84843a.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@ni-nimble-angular-95b60d3c-bce1-46a4-a5a0-0c486f84843a.json

diff --git a/change/@ni-nimble-angular-95b60d3c-bce1-46a4-a5a0-0c486f84843a.json b/change/@ni-nimble-angular-95b60d3c-bce1-46a4-a5a0-0c486f84843a.json
new file mode 100644
index 0000000000..2e673e1adb
--- /dev/null
+++ b/change/@ni-nimble-angular-95b60d3c-bce1-46a4-a5a0-0c486f84843a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Internal change to icon pattern",
+  "packageName": "@ni/nimble-angular",
+  "email": "1588923+rajsite@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

From acd63977c7a7e606c47b6f7cca5ae31a843dca53 Mon Sep 17 00:00:00 2001
From: rajsite <1588923+rajsite@users.noreply.github.com>
Date: Fri, 23 Jan 2026 12:09:12 -0600
Subject: [PATCH 6/7] revert sb change

---
 .../mapping/table-column-mapping.stories.ts   | 21 ++-----------------
 1 file changed, 2 insertions(+), 19 deletions(-)

diff --git a/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts b/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts
index 4d29aba963..f2c3b517dd 100644
--- a/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts
+++ b/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts
@@ -1,4 +1,4 @@
-import { html, ref, customElement, css } from '@ni/fast-element';
+import { html, ref } from '@ni/fast-element';
 import type { Meta, StoryObj } from '@storybook/html-vite';
 import { tableTag } from '@ni/nimble-components/dist/esm/table';
 import { iconXmarkTag } from '@ni/nimble-components/dist/esm/icons/xmark';
@@ -11,8 +11,6 @@ import { mappingTextTag } from '@ni/nimble-components/dist/esm/mapping/text';
 import { mappingEmptyTag } from '@ni/nimble-components/dist/esm/mapping/empty';
 import { TableColumnMappingWidthMode } from '@ni/nimble-components/dist/esm/table-column/mapping/types';
 import { tableColumnMappingTag } from '@ni/nimble-components/dist/esm/table-column/mapping';
-import { Icon } from '@ni/nimble-components/dist/esm/icon-base';
-import { display } from '@ni/nimble-components/dist/esm/utilities/style/display';
 import {
     type SharedTableArgs,
     sharedTableArgTypes,
@@ -85,21 +83,6 @@ This should only be set when the header contains a single icon (no text) and non
 to \`default\`, the column will be resizable and be sized based on its fractional-width and min-pixel-width values. A column with its \`width-mode\` set to \`iconSize\` should
 should not be the right-most column in the table.`;
 
-const img = 'data:image/gif;base64,R0lGODlhFwAaAPIHAPfWre+9e//v3s6EITw+PP////+M/wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAHACwAAAAAFwAaAEADkHi63O5jhEmFBSDCYPq0oNUZGTNgJ6ZiVCC5Tywr70QQn3WD5RKpPMvAMhnMjjOJMcLUnIybVuVygfoot50uq7I2gSEBQGhtnMIgaRnJbifXEDjNVWv95If6lCfXT8ZhPVc2BAU4W4ZVJhwFBjcBAgRiNwaNgnMVgIGXKWBhQygxZ2gRdnEYaAJqZU2trq0HCQAh+QQFCgAAACwAAAAAAQABAAACAkQBACH5BAUKAAAALAAAAAABAAEAAAICRAEAIfkECQoAAAAsAAAAABMABwAAAgqEj6nL7Q+jnLEAACH5BAkKAAIALAIABgATAAQAAAIQlD+pc6gNzRohxAsAY/eyAgAh+QQJCgAEACwEAAUADwAFAAADGThD3E5qhBUrBGrKwLvCWccJJABuYkCuWAIAIfkECQoABAAsAgAGABMABAAAAxhIutM+i70Rqg2zVXqD+AAwhJDWeR/YEAkAIfkEBQoABAAsBAAFAA8ABQAAAxk4Q9xOaoQVKwRqysC7wlnHCSQAbmJArlgCACH5BAUKAAAALAAAAAABAAEAAAICRAEAIfkEBQoAAAAsAAAAAAEAAQAAAgJEAQAh+QQFCgAAACwAAAAAAQABAAACAkQBACH5BAUKAAAALAAAAAABAAEAAAICRAEAIfkEBQoAAAAsAAAAAAEAAQAAAgJEAQAh+QQFCgAAACwAAAAAAQABAAACAkQBACH5BAUKAAAALAAAAAABAAEAAAICRAEAIfkEBQoAAAAsAAAAAAEAAQAAAgJEAQAh+QQFCgAAACwAAAAAAQABAAACAkQBACH5BAUKAAAALAAAAAABAAEAAAICRAEAIfkEBQoAAwAsBgAIAAsABwAAAhKMD6PL7SveSsM0gU+AOFqGDQUAIfkEBQoAAQAsBgAIAAsABwAAAxMYurL+EILIFCHviluwJd3lLWICACH5BAUKAAAALAAAAAABAAEAAAICRAEAIfkEBQoAAAAsAAAAAAEAAQAAAgJEAQAh+QQFCgAAACwAAAAAAQABAAACAkQBACH5BAUKAAAALAAAAAABAAEAAAICRAEAIfkEBQoAAAAsAAAAAAEAAQAAAgJEAQAh+QQFCgAAACwAAAAAAQABAAACAkQBACH5BAUKAAAALAAAAAABAAEAAAICRAEAOw==';
-const awesomeIconTag = 'awesome-icon';
-/**
- * Awesome icon
- */
-@customElement({
-    name: awesomeIconTag,
-    template: html`<img src="${img}" style="width: 16px; height: 16px">`,
-    styles: css`
-        ${display('inline-flex')}
-    `
-})
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-class AwesomeIcon extends Icon {}
-
 export const mappingColumn: StoryObj<MappingColumnTableArgs> = {
     render: createUserSelectedThemeStory(html<MappingColumnTableArgs>`
         <${tableTag}
@@ -113,7 +96,7 @@ export const mappingColumn: StoryObj<MappingColumnTableArgs> = {
             <${tableColumnMappingTag} field-name="status" group-index="0">
                 Status
                 <${mappingIconTag} key="fail" icon="${iconXmarkTag}" severity="error" text="Not a Simpson"></${mappingIconTag}>
-                <${mappingIconTag} key="success" icon="${awesomeIconTag}" severity="success" text="Is a Simpson"></${mappingIconTag}>
+                <${mappingIconTag} key="success" icon="${iconCheckTag}" severity="success" text="Is a Simpson"></${mappingIconTag}>
                 <${mappingSpinnerTag} key="calculating" text="Calculating" text-hidden></${mappingSpinnerTag}>
                 <${mappingEmptyTag} key="unknown" text="Unknown"></${mappingEmptyTag}>
             </${tableColumnMappingTag}>

From d90f08da8d7437b7237203d54d592e32ddf6f224 Mon Sep 17 00:00:00 2001
From: rajsite <1588923+rajsite@users.noreply.github.com>
Date: Fri, 23 Jan 2026 12:26:11 -0600
Subject: [PATCH 7/7] Add icon implementor requirements in comment

---
 packages/nimble-components/src/icon-base/index.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nimble-components/src/icon-base/index.ts b/packages/nimble-components/src/icon-base/index.ts
index 851f5c827f..e1af84652a 100644
--- a/packages/nimble-components/src/icon-base/index.ts
+++ b/packages/nimble-components/src/icon-base/index.ts
@@ -3,7 +3,11 @@ import { FoundationElement } from '@ni/fast-foundation';
 import type { IconSeverity } from './types';
 
 /**
- * The base class for icon components
+ * The base class for icon components. Implementors:
+ * - Should not increase the API surface area, consumers of icons would not expect additional attributes to configure
+ * - Should not add interactive components to the template, expect to be visual only
+ * - Should respond well to sizing of the element
+ * - Should respond to configuration of the severity attribute and other tokens such as theme
  */
 export abstract class Icon extends FoundationElement {
     /**