@jack-henry/jh-icons 1.2.0 → 2.0.0-beta.7

package/icons-wc/icon-text.js

@@ -1,7 +1,8 @@
-// SPDX-FileCopyrightText: 2025 Jack Henry
-//
-// SPDX-License-Identifier: Apache-2.0
-
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
 import {LitElement, css, html} from 'lit';
 
 export default class JhIconText extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconText extends LitElement {
       :host([size='x-small']) {
         --icon-size: var(
           --jh-icon-size-extra-small,
-          var(--jh-size-400)
+          var(--jh-dimension-400)
         );
       }
       :host([size='small']) {
         --icon-size: var(
           --jh-icon-size-small,
-          var(--jh-size-500)
+          var(--jh-dimension-500)
         );
       }
       :host([size='medium']) {
         --icon-size: var(
           --jh-icon-size-medium,
-          var(--jh-size-600)
+          var(--jh-dimension-600)
         );
       }
       :host([size='large']) {
         --icon-size: var(
           --jh-icon-size-large,
-          var(--jh-size-900)
+          var(--jh-dimension-900)
         );
       }
       :host([size='x-large']) {
         --icon-size: var(
           --jh-icon-size-extra-large,
-          var(--jh-size-1400)
+          var(--jh-dimension-1400)
         );
       }
       svg {

package/icons-wc/icon-thumbs-down.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconThumbsDown extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M13.255 3.171c.811.028 1.616.078 2.745.078a.75.75 0 0 1 .077.005c.97.1 1.88.505 2.384 1.197.26.358.41.798.367 1.278-.01.101-.028.201-.054.299.47.298.777.79.912 1.249.123.413.15.95-.02 1.433.4.304.671.726.763 1.217.091.491-.01.986-.267 1.418.053.057.105.115.15.179.258.357.362.773.345 1.176-.033.793-.528 1.56-1.313 1.966-.437.226-1.04.301-1.577.329-.572.029-1.207.009-1.788-.029a27.25 27.25 0 0 1-.728-.057c.252.535.512 1.202.587 1.835.088.747-.031 1.397-.363 1.922-.331.524-.822.841-1.327 1.021a1.725 1.725 0 0 1-.894.089 1.687 1.687 0 0 1-.747-.35 3.765 3.765 0 0 1-.502-.502 21.108 21.108 0 0 1-.226-.266c-.076-.091-.152-.183-.233-.277-.399-.46-.67-.981-.924-1.401a6.564 6.564 0 0 0-1.14-1.439c-.561-.536-1.257-1.002-1.829-1.34a13.823 13.823 0 0 0-.833-.455.742.742 0 0 1-.07.004h-4A.75.75 0 0 1 2 13V4a.75.75 0 0 1 .75-.75h4A.75.75 0 0 1 7.5 4v.01c.131-.047.276-.095.433-.145.724-.232 1.714-.497 2.734-.61 1-.112 1.779-.11 2.588-.084Zm-.05 1.5a15.409 15.409 0 0 0-2.372.075c-.883.098-1.769.332-2.443.547a15.75 15.75 0 0 0-.805.282l-.085.033v6.802l.138.069c.195.1.467.246.779.43.618.366 1.423.9 2.102 1.55a8.056 8.056 0 0 1 1.386 1.745c.321.531.487.863.775 1.196.09.105.175.205.25.296.078.092.145.173.21.248.132.153.223.246.295.303a.4.4 0 0 0 .07.046c.01.006.016.006.016.006s.007.002.024 0a.473.473 0 0 0 .101-.026c.272-.097.452-.235.561-.408.108-.17.198-.456.14-.946-.056-.48-.303-1.09-.575-1.628a10.89 10.89 0 0 0-.5-.877l-.002-.002a.751.751 0 0 1 .736-1.154h.002l.039.005.123.018a30.143 30.143 0 0 0 1.904.188c.554.036 1.125.053 1.615.027.525-.026.841-.098.967-.163.34-.175.493-.476.502-.696a.365.365 0 0 0-.062-.235c-.038-.053-.119-.129-.3-.18a.75.75 0 0 1-.216-1.344c.349-.235.405-.511.374-.676-.029-.154-.165-.383-.596-.465a.75.75 0 0 1-.205-1.403c.037-.018.083-.059.114-.17a.873.873 0 0 0-.019-.46.772.772 0 0 0-.225-.373.322.322 0 0 0-.267-.075.75.75 0 0 1-.648-1.253c.18-.193.22-.334.227-.41a.374.374 0 0 0-.087-.26c-.17-.232-.608-.507-1.303-.584-1.135-.001-1.988-.053-2.74-.079ZM3.5 4.75v7.5H6v-7.5H3.5Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-thumbs-down', JhIconThumbsDown);

package/icons-wc/icon-thumbs-up.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconThumbsUp extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M13.254 4.225c.305-.056.606-.014.894.088.505.18.996.498 1.327 1.021.332.525.451 1.176.363 1.923-.075.633-.335 1.3-.587 1.835.23-.021.475-.042.728-.058a16.07 16.07 0 0 1 1.788-.028c.537.027 1.14.103 1.577.328.785.406 1.28 1.173 1.313 1.967.017.402-.087.819-.345 1.175a1.81 1.81 0 0 1-.15.18c.258.43.358.926.267 1.417a1.974 1.974 0 0 1-.763 1.217 2.41 2.41 0 0 1 .02 1.434c-.135.458-.443.95-.912 1.249.026.097.045.197.054.299.044.48-.106.92-.367 1.278-.504.691-1.415 1.096-2.384 1.196a.763.763 0 0 1-.077.005c-1.129 0-1.934.05-2.745.078-.81.027-1.588.028-2.588-.083-1.02-.113-2.01-.379-2.734-.61-.157-.05-.302-.1-.433-.146V20a.75.75 0 0 1-.75.75h-4A.75.75 0 0 1 2 20v-9a.75.75 0 0 1 .75-.75h4c.024 0 .047 0 .07.003l.131-.066c.174-.089.42-.22.702-.387.572-.338 1.268-.805 1.828-1.341a6.563 6.563 0 0 0 1.141-1.439c.254-.42.525-.94.924-1.4l.233-.277.226-.267c.145-.168.312-.35.502-.5a1.67 1.67 0 0 1 .747-.351Zm.25 1.482a.406.406 0 0 0-.069.046c-.072.057-.163.15-.295.304-.065.074-.132.155-.21.248-.075.09-.16.191-.25.296-.288.332-.454.664-.775 1.195a8.055 8.055 0 0 1-1.386 1.746c-.679.649-1.484 1.183-2.102 1.549-.312.184-.584.33-.78.43-.05.027-.097.049-.137.069v6.802l.085.034c.192.073.47.174.805.281.674.215 1.56.45 2.443.548.903.1 1.604.1 2.371.075.753-.025 1.606-.077 2.741-.08.695-.076 1.134-.35 1.303-.583.076-.105.093-.189.087-.26-.007-.076-.048-.217-.227-.41a.75.75 0 0 1 .648-1.253.322.322 0 0 0 .267-.074.772.772 0 0 0 .225-.373.874.874 0 0 0 .019-.46c-.03-.112-.077-.152-.114-.171a.751.751 0 0 1 .205-1.402c.43-.083.567-.311.596-.465.03-.165-.025-.441-.374-.677a.75.75 0 0 1 .217-1.344c.18-.05.26-.127.299-.18a.366.366 0 0 0 .062-.235c-.009-.22-.162-.52-.502-.696-.126-.065-.442-.136-.967-.163a14.612 14.612 0 0 0-1.615.027 28.77 28.77 0 0 0-1.904.189l-.123.017-.04.005h-.001a.75.75 0 0 1-.736-1.154l.003-.001c0-.002.003-.006.006-.01l.03-.047a10.845 10.845 0 0 0 .463-.821c.272-.537.519-1.147.576-1.628.057-.49-.033-.775-.141-.945-.11-.173-.29-.312-.56-.408a.472.472 0 0 0-.102-.027c-.017-.002-.023 0-.024 0 0 0-.005 0-.016.006ZM3.5 19.25H6v-7.5H3.5v7.5Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-thumbs-up', JhIconThumbsUp);

package/icons-wc/icon-thumbtack.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconThumbtack extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M11.25 20.5v-5.75H7a.75.75 0 0 1-.741-.864v-.007l.003-.01.006-.037a6.996 6.996 0 0 1 .126-.549c.094-.348.25-.823.493-1.328.421-.873 1.15-1.918 2.363-2.473v-3.52l-1.585-.791A.751.751 0 0 1 7.25 4.5V2.76l.004-.077A.75.75 0 0 1 8 2.01h8a.75.75 0 0 1 .75.75V4.5a.751.751 0 0 1-.415.67l-1.585.793v3.52c1.213.554 1.942 1.6 2.363 2.472a7.776 7.776 0 0 1 .62 1.877l.005.036.002.01.001.005v.002a.753.753 0 0 1-.741.865h-4.25v5.75L12 22l-.75-1.5ZM8.75 4.036l1.585.793a.75.75 0 0 1 .415.671V10a.75.75 0 0 1-.534.718c-.961.288-1.583 1.07-1.978 1.89a6.058 6.058 0 0 0-.263.642h8.05a6.05 6.05 0 0 0-.263-.643c-.396-.818-1.017-1.6-1.978-1.89A.75.75 0 0 1 13.25 10V5.5c0-.284.161-.544.415-.67l1.585-.794V3.51h-6.5v.526Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-thumbtack', JhIconThumbtack);

package/icons-wc/icon-tower-broadcast.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconTowerBroadcast extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M12 9.5a2 2 0 0 1 .75 3.852V20.5a.75.75 0 0 1-1.5 0v-7.148A1.999 1.999 0 0 1 12 9.5Zm6.538-3.813A8.715 8.715 0 0 1 20.75 11.5a8.722 8.722 0 0 1-2.692 6.31l-1.04-1.081A7.226 7.226 0 0 0 19.25 11.5a7.22 7.22 0 0 0-1.755-4.726l1.043-1.087ZM6.503 6.774A7.22 7.22 0 0 0 4.75 11.5c0 2.055.856 3.91 2.23 5.229l-1.039 1.08A8.722 8.722 0 0 1 3.25 11.5c0-2.23.836-4.266 2.21-5.812l1.043 1.086ZM8.77 9.138A3.982 3.982 0 0 0 8 11.5a3.99 3.99 0 0 0 1.23 2.884l-1.039 1.082A5.482 5.482 0 0 1 6.5 11.5c0-1.31.458-2.512 1.222-3.456l1.05 1.094Zm7.505-1.094A5.475 5.475 0 0 1 17.5 11.5a5.48 5.48 0 0 1-1.693 3.966l-1.038-1.081A3.987 3.987 0 0 0 16 11.5c0-.884-.288-1.7-.773-2.362l1.05-1.094Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-tower-broadcast', JhIconTowerBroadcast);

package/icons-wc/icon-trash-can.js

@@ -1,7 +1,8 @@
-// SPDX-FileCopyrightText: 2025 Jack Henry
-//
-// SPDX-License-Identifier: Apache-2.0
-
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
 import {LitElement, css, html} from 'lit';
 
 export default class JhIconTrashCan extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconTrashCan extends LitElement {
       :host([size='x-small']) {
         --icon-size: var(
           --jh-icon-size-extra-small,
-          var(--jh-size-400)
+          var(--jh-dimension-400)
         );
       }
       :host([size='small']) {
         --icon-size: var(
           --jh-icon-size-small,
-          var(--jh-size-500)
+          var(--jh-dimension-500)
         );
       }
       :host([size='medium']) {
         --icon-size: var(
           --jh-icon-size-medium,
-          var(--jh-size-600)
+          var(--jh-dimension-600)
         );
       }
       :host([size='large']) {
         --icon-size: var(
           --jh-icon-size-large,
-          var(--jh-size-900)
+          var(--jh-dimension-900)
         );
       }
       :host([size='x-large']) {
         --icon-size: var(
           --jh-icon-size-extra-large,
-          var(--jh-size-1400)
+          var(--jh-dimension-1400)
         );
       }
       svg {

package/icons-wc/icon-triangle-exclamation-filled.js

@@ -1,7 +1,8 @@
-// SPDX-FileCopyrightText: 2025 Jack Henry
-//
-// SPDX-License-Identifier: Apache-2.0
-
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
 import {LitElement, css, html} from 'lit';
 
 export default class JhIconTriangleExclamationFilled extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconTriangleExclamationFilled extends LitElement {
       :host([size='x-small']) {
         --icon-size: var(
           --jh-icon-size-extra-small,
-          var(--jh-size-400)
+          var(--jh-dimension-400)
         );
       }
       :host([size='small']) {
         --icon-size: var(
           --jh-icon-size-small,
-          var(--jh-size-500)
+          var(--jh-dimension-500)
         );
       }
       :host([size='medium']) {
         --icon-size: var(
           --jh-icon-size-medium,
-          var(--jh-size-600)
+          var(--jh-dimension-600)
         );
       }
       :host([size='large']) {
         --icon-size: var(
           --jh-icon-size-large,
-          var(--jh-size-900)
+          var(--jh-dimension-900)
         );
       }
       :host([size='x-large']) {
         --icon-size: var(
           --jh-icon-size-extra-large,
-          var(--jh-size-1400)
+          var(--jh-dimension-1400)
         );
       }
       svg {

package/icons-wc/icon-triangle-exclamation.js

@@ -1,7 +1,8 @@
-// SPDX-FileCopyrightText: 2025 Jack Henry
-//
-// SPDX-License-Identifier: Apache-2.0
-
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
 import {LitElement, css, html} from 'lit';
 
 export default class JhIconTriangleExclamation extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconTriangleExclamation extends LitElement {
       :host([size='x-small']) {
         --icon-size: var(
           --jh-icon-size-extra-small,
-          var(--jh-size-400)
+          var(--jh-dimension-400)
         );
       }
       :host([size='small']) {
         --icon-size: var(
           --jh-icon-size-small,
-          var(--jh-size-500)
+          var(--jh-dimension-500)
         );
       }
       :host([size='medium']) {
         --icon-size: var(
           --jh-icon-size-medium,
-          var(--jh-size-600)
+          var(--jh-dimension-600)
         );
       }
       :host([size='large']) {
         --icon-size: var(
           --jh-icon-size-large,
-          var(--jh-size-900)
+          var(--jh-dimension-900)
         );
       }
       :host([size='x-large']) {
         --icon-size: var(
           --jh-icon-size-extra-large,
-          var(--jh-size-1400)
+          var(--jh-dimension-1400)
         );
       }
       svg {

package/icons-wc/icon-umbrella.js

@@ -1,7 +1,8 @@
-// SPDX-FileCopyrightText: 2025 Jack Henry
-//
-// SPDX-License-Identifier: Apache-2.0
-
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
 import {LitElement, css, html} from 'lit';
 
 export default class JhIconUmbrella extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconUmbrella extends LitElement {
       :host([size='x-small']) {
         --icon-size: var(
           --jh-icon-size-extra-small,
-          var(--jh-size-400)
+          var(--jh-dimension-400)
         );
       }
       :host([size='small']) {
         --icon-size: var(
           --jh-icon-size-small,
-          var(--jh-size-500)
+          var(--jh-dimension-500)
         );
       }
       :host([size='medium']) {
         --icon-size: var(
           --jh-icon-size-medium,
-          var(--jh-size-600)
+          var(--jh-dimension-600)
         );
       }
       :host([size='large']) {
         --icon-size: var(
           --jh-icon-size-large,
-          var(--jh-size-900)
+          var(--jh-dimension-900)
         );
       }
       :host([size='x-large']) {
         --icon-size: var(
           --jh-icon-size-extra-large,
-          var(--jh-size-1400)
+          var(--jh-dimension-1400)
         );
       }
       svg {

package/icons-wc/icon-underline.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconUnderline extends LitElement {
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+      * The size of the icon.
+      */
+      size: {
+        type: String, reflect: true 
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">   <path d="M16 16.75a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1 0-1.5h8ZM15.5 5a1 1 0 0 1 1 1v4.387C16.5 12.904 14.515 15 12 15c-2.515 0-4.5-2.096-4.5-4.613V6a1 1 0 0 1 2 0v4.387C9.5 11.86 10.649 13 12 13s2.5-1.14 2.5-2.613V6a1 1 0 0 1 1-1Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-underline', JhIconUnderline);