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

package/icons-wc/icon-universal-access.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 JhIconUniversalAccess 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 2.25c5.385 0 9.75 4.365 9.75 9.75s-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12 6.615 2.25 12 2.25Zm0 1.5a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5Zm3.763 4.538a.75.75 0 1 1 .473 1.424h-.002l-.007.003-.026.009-.1.032a45.963 45.963 0 0 1-1.52.465c-.4.114-.833.228-1.237.322a4.836 4.836 0 0 0-.251 1.827c.009.189.028.357.048.496.192.607.432 1.249.678 1.85a40.848 40.848 0 0 0 1.01 2.26l.069.141.017.036.005.01v.001a.751.751 0 0 1-1.34.671l-.002-.001v-.003l-.007-.01a24.11 24.11 0 0 1-.093-.19l-.26-.549a41.928 41.928 0 0 1-.787-1.798 30.69 30.69 0 0 1-.4-1.034h-.061c-.13.353-.265.703-.4 1.034a41.928 41.928 0 0 1-1.122 2.496l-.02.04-.005.011-.001.003-.001.001-.038.067a.75.75 0 0 1-1.304-.738l.001-.002.005-.009.018-.036.069-.141a40.793 40.793 0 0 0 1.009-2.26 25.73 25.73 0 0 0 .645-1.748c.02-.156.04-.355.047-.585a5.745 5.745 0 0 0-.23-1.843 24.439 24.439 0 0 1-1.224-.32 44.734 44.734 0 0 1-1.52-.464l-.1-.032-.027-.01-.006-.001-.002-.001a.751.751 0 0 1 .473-1.424v.001h.002l.03.01.094.031a40.215 40.215 0 0 0 1.468.45c.43.122.884.242 1.285.331.42.093.724.139.884.139.16 0 .465-.046.884-.139.401-.089.855-.209 1.285-.332a43.285 43.285 0 0 0 1.468-.449l.094-.031.03-.01h.002ZM12 5.75a1.4 1.4 0 1 1 0 2.801 1.4 1.4 0 0 1 0-2.801Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-universal-access', JhIconUniversalAccess);

package/icons-wc/icon-usb-drive.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 JhIconUsbDrive 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="M15.25 2.003a.75.75 0 0 1 .75.75v5.08l.865.469a.75.75 0 0 1 .393.659v7.777a.77.77 0 0 1-.004.073 5.259 5.259 0 0 1-10.51.2l-.008-.27v-7.78c0-.27.146-.52.38-.652l.878-.5V2.755a.75.75 0 0 1 .75-.751h6.506ZM8.236 9.397v7.344l.005.194a3.76 3.76 0 0 0 7.515-.194v-.003l.002-.039V9.407l-.756-.409H8.939l-.703.4Zm3.76 5.11a2.234 2.234 0 1 1 0 4.469 2.234 2.234 0 0 1 0-4.47Zm0 1.5a.735.735 0 1 0 0 1.47.735.735 0 0 0 0-1.47ZM9.494 7.498H14.5V3.504H9.494v3.994ZM11.503 6h-1.5V4.5h1.5V6Zm2.488 0h-1.5V4.5h1.5V6Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-usb-drive', JhIconUsbDrive);

package/icons-wc/icon-user-plus.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 JhIconUserPlu extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconUserPlu 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-user.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 JhIconUser extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconUser 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-users-circle-dollar-sign.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 JhIconUsersCircleDollarSign 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="M17.84 14c.745 0 1.433.224 1.937.706.509.486.754 1.16.754 1.9 0 .64-.17 1.146-.302 1.486.343.204.686.466.978.783.43.468.793 1.105.793 1.875a.75.75 0 0 1-1.5 0c0-.278-.13-.57-.397-.86a2.954 2.954 0 0 0-.713-.552l-.257-.13a.893.893 0 0 1-.472-.488.976.976 0 0 1-.047-.524c.034-.196.13-.42.176-.535.12-.302.241-.633.241-1.056 0-.404-.127-.658-.29-.814-.167-.16-.452-.29-.9-.291-.448 0-.712.131-.862.28-.15.15-.273.405-.273.825 0 .417.124.75.25 1.043.048.11.148.323.192.49a.993.993 0 0 1 .014.492.854.854 0 0 1-.484.578h-.001a9.42 9.42 0 0 0-.72.378c.176.342.293.732.293 1.164a.75.75 0 0 1-1.5 0c0-.278-.13-.57-.397-.86a2.95 2.95 0 0 0-.713-.552l-.257-.13a.892.892 0 0 1-.472-.488.976.976 0 0 1-.047-.524c.034-.196.13-.42.176-.535.12-.302.241-.633.241-1.056 0-.404-.127-.658-.29-.814-.167-.16-.451-.291-.9-.291-.448 0-.712.13-.862.28-.15.15-.273.405-.273.825 0 .417.124.75.25 1.043.048.11.148.323.192.49a.993.993 0 0 1 .014.492.854.854 0 0 1-.484.578h-.001a11.91 11.91 0 0 0-1.34.752c-.045.03-.148.164-.24.446a2.777 2.777 0 0 0-.1.412l-.002.022-.001.003-.013.073a.75.75 0 0 1-1.475-.256v-.009l.003-.014.006-.048a4.253 4.253 0 0 1 .154-.646 3.4 3.4 0 0 1 .191-.467 3.257 3.257 0 0 0-.22-.138l-.257-.13a.893.893 0 0 1-.472-.488.977.977 0 0 1-.047-.524c.034-.196.13-.42.176-.535.12-.302.241-.633.241-1.056 0-.404-.127-.658-.29-.814-.167-.16-.452-.29-.9-.291-.448 0-.712.131-.862.28-.15.15-.273.405-.273.825 0 .417.124.75.25 1.043.048.11.148.323.192.49a.992.992 0 0 1 .014.492.854.854 0 0 1-.484.578h-.001a11.83 11.83 0 0 0-1.34.752c-.045.03-.149.165-.24.446a2.776 2.776 0 0 0-.1.412l-.002.022-.001.003-.013.073a.75.75 0 0 1-1.475-.256v-.009l.003-.014.006-.048a4.252 4.252 0 0 1 .154-.646c.11-.338.346-.914.852-1.242.34-.22.7-.427 1.004-.59a3.895 3.895 0 0 1-.32-1.506c0-.723.222-1.396.716-1.888S5.595 14 6.34 14c.744 0 1.431.224 1.936.706.509.486.754 1.16.754 1.9 0 .64-.17 1.146-.302 1.486.165.098.329.21.488.335.194-.116.385-.223.558-.317a3.894 3.894 0 0 1-.32-1.505c0-.723.222-1.396.716-1.888S11.345 14 12.09 14c.745 0 1.431.224 1.936.706.509.486.754 1.16.754 1.9 0 .64-.17 1.146-.302 1.486.165.098.329.21.488.335.194-.116.385-.223.558-.317a3.896 3.896 0 0 1-.32-1.505c0-.723.222-1.396.716-1.888S17.095 14 17.84 14Zm-5.09-7.863c.202.07.4.166.577.287.405.274.83.758.83 1.451v.45h-1.5v-.45c0-.02-.008-.099-.17-.209A.986.986 0 0 0 12 7.5c-.193 0-.397.042-.525.118a.264.264 0 0 0-.096.088.314.314 0 0 0-.035.169v.005l.003.016a.33.33 0 0 0 .016.054.646.646 0 0 0 .112.177c.118.137.344.311.75.438 1.226.386 1.931 1.183 1.931 2.123l-.004.14c-.043.683-.4 1.159-.874 1.43a2.178 2.178 0 0 1-.528.212v.842h-1.5v-.854a2.261 2.261 0 0 1-.531-.223 1.734 1.734 0 0 1-.875-1.547v-.358h1.5v.357c0 .1.022.145.035.165a.275.275 0 0 0 .1.091c.132.078.338.12.52.12.216 0 .415-.039.535-.107a.215.215 0 0 0 .084-.075.28.28 0 0 0 .034-.115l.004-.079c0-.06-.036-.424-.88-.69C10.602 9.63 9.93 8.832 9.85 8.034l-.007-.159c0-.747.382-1.26.867-1.547.174-.103.358-.176.539-.226v-.848h1.5v.883ZM12 2a7.5 7.5 0 0 1 6.968 10.28.75.75 0 0 1-1.393-.557 6 6 0 1 0-11.15 0 .75.75 0 0 1-1.393.556A7.5 7.5 0 0 1 12 2Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-users-circle-dollar-sign', JhIconUsersCircleDollarSign);

package/icons-wc/icon-users-group.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 JhIconUsersGroup 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 6.5c.687 0 1.259.175 1.714.493a2.7 2.7 0 0 1 .916 1.142c.349.789.342 1.634.342 1.909 0 .388-.098.91-.304 1.426-.159.4-.398.83-.739 1.207.01.01.031.028.074.05.205.103.486.19.86.297l.087.025c.242-.252.51-.465.777-.639-.128-.361-.313-.922-.313-1.642 0-.76.224-1.46.706-1.974.488-.52 1.168-.773 1.915-.773.75 0 1.422.255 1.899.785.467.519.67 1.216.67 1.962 0 .722-.19 1.29-.333 1.664.304.18.67.415 1.012.663.487.352.707.957.808 1.304a4.864 4.864 0 0 1 .145.678l.006.049.002.015v.007l-.242.027.243-.027a.751.751 0 0 1-1.49.162l-.002-.002-.003-.026a3.416 3.416 0 0 0-.1-.462 1.95 1.95 0 0 0-.14-.363.496.496 0 0 0-.105-.147 11.15 11.15 0 0 0-1.287-.806l-.085-.05a.858.858 0 0 1-.373-.538 1.05 1.05 0 0 1 .013-.464c.04-.169.131-.386.18-.512.123-.317.25-.696.25-1.172 0-.487-.13-.788-.284-.96-.145-.16-.382-.287-.784-.287-.403 0-.66.129-.82.3-.165.175-.3.475-.3.947 0 .48.123.857.24 1.183.046.13.133.357.163.552a1.02 1.02 0 0 1-.04.495.896.896 0 0 1-.449.506l-.137.073c-.042.024-.082.05-.123.077.218.127.43.282.614.478a2.1 2.1 0 0 1 .567 1.476v1.142a.75.75 0 0 1-1.5 0v-1.142c0-.222-.066-.349-.162-.45-.116-.125-.312-.248-.615-.369a5.702 5.702 0 0 0-.394-.137.74.74 0 0 1-.208-.063c-.134-.04-.274-.08-.42-.122-.356-.102-.77-.224-1.12-.4h-.002a1.667 1.667 0 0 1-.773-.768 2.114 2.114 0 0 1-.19-.844.75.75 0 0 1 .269-.606c.281-.234.495-.572.64-.935.146-.367.197-.7.197-.87 0-.284-.007-.836-.214-1.304a1.205 1.205 0 0 0-.402-.517C12.686 8.104 12.424 8 12 8c-.423 0-.685.104-.855.223a1.203 1.203 0 0 0-.402.517c-.207.468-.214 1.02-.214 1.304 0 .17.05.5.194.864.143.36.355.696.635.933a.75.75 0 0 1 .256.684c-.024.16-.077.43-.197.704-.114.262-.333.63-.746.838-.35.176-.765.298-1.12.4l-.426.123a.739.739 0 0 1-.204.061 5.625 5.625 0 0 0-.393.138c-.304.12-.499.244-.616.368-.095.102-.162.229-.162.451v1.142a.75.75 0 0 1-1.5 0v-1.142c0-.603.212-1.096.568-1.476.183-.196.394-.35.612-.477-.041-.026-.08-.054-.122-.078l-.138-.073a.897.897 0 0 1-.449-.506 1.02 1.02 0 0 1-.04-.495c.03-.195.118-.422.164-.552.116-.326.24-.702.24-1.183 0-.472-.136-.772-.3-.948-.16-.17-.418-.3-.82-.3-.402 0-.64.128-.784.289-.154.17-.285.472-.285.959 0 .476.128.855.25 1.172.05.126.14.344.18.512.022.088.057.264.013.464a.858.858 0 0 1-.372.538l-.086.05c-.235.118-.781.44-1.286.806a.493.493 0 0 0-.104.147c-.054.1-.102.227-.142.363a3.394 3.394 0 0 0-.1.462l-.003.026v.002a.75.75 0 0 1-1.492-.162l.243.027-.242-.027v-.007l.002-.015.007-.049a4.883 4.883 0 0 1 .145-.678c.101-.347.32-.952.807-1.304a14.03 14.03 0 0 1 1.013-.663 4.556 4.556 0 0 1-.333-1.664c0-.746.203-1.443.67-1.962.476-.53 1.148-.785 1.898-.785.748 0 1.427.253 1.915.773.483.515.706 1.214.706 1.974 0 .72-.184 1.281-.312 1.642.267.174.534.389.776.64l.089-.026c.365-.104.641-.19.845-.29a.42.42 0 0 0 .053-.095 4.065 4.065 0 0 1-.707-1.177c-.203-.512-.3-1.03-.3-1.418 0-.275-.007-1.12.341-1.91.18-.407.466-.826.916-1.14.456-.319 1.027-.494 1.714-.494Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-users-group', JhIconUsersGroup);

package/icons-wc/icon-users.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 JhIconUser extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconUser 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-vault-clock.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 JhIconVaultClock 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="M19.75 3a.75.75 0 0 1 .75.75v3h1.25v3H20.5v4h1.25v3H20.5v3a.75.75 0 0 1-.75.75h-1v1.25h-3V20.5h-8v1.25h-3V20.5h-1a.75.75 0 0 1-.75-.75v-16A.75.75 0 0 1 3.75 3h16ZM4.5 19H19V4.5H4.5V19Zm7.25-13.75a6.5 6.5 0 1 1-.001 13.001A6.5 6.5 0 0 1 11.75 5.25Zm0 1.5a5 5 0 1 0 .001 10.001A5 5 0 0 0 11.75 6.75Zm0 1.25a.75.75 0 0 1 .75.75v2.592l1.594 1.028a.75.75 0 1 1-.813 1.26l-1.937-1.25a.302.302 0 0 1-.006-.004l-.02-.015a.752.752 0 0 1-.093-.076l-.005-.005a.747.747 0 0 1-.219-.504l-.001-.01V8.75a.75.75 0 0 1 .75-.75Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-vault-clock', JhIconVaultClock);

package/icons-wc/icon-vault.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 JhIconVault extends LitElement {
@@ -22,31 +23,31 @@ export default class JhIconVault 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 {