@jack-henry/jh-icons 1.2.0

package/icons-wc/icon-user.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconUser 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M9.26 3.525c.705-.49 1.61-.775 2.74-.775 1.13 0 2.035.285 2.74.775.7.486 1.154 1.14 1.445 1.796.565 1.27.565 2.65.565 3.161V8.5c0 .61-.158 1.468-.505 2.333-.305.76-.774 1.57-1.458 2.233.023.137.056.25.103.345.07.145.19.29.446.418.427.214.985.385 1.65.574l.213.06c.585.166 1.231.349 1.827.585.669.264 1.348.623 1.864 1.17.537.57.86 1.309.86 2.24V20.5a.75.75 0 0 1-1.5 0v-2.042c0-.548-.177-.918-.452-1.211-.297-.316-.742-.575-1.324-.805-.52-.206-1.09-.367-1.686-.536l-.212-.06c-.647-.184-1.339-.389-1.911-.675-.54-.27-.903-.65-1.124-1.104-.211-.434-.269-.888-.285-1.276l-.015-.372.287-.237c.604-.5 1.04-1.197 1.325-1.908.286-.714.397-1.383.397-1.774 0-.504-.007-1.606-.435-2.57-.209-.469-.506-.879-.93-1.173-.42-.292-1.016-.507-1.885-.507-.87 0-1.465.215-1.885.507-.424.294-.721.704-.93 1.173-.428.964-.435 2.066-.435 2.57 0 .391.11 1.054.393 1.763.281.705.712 1.399 1.31 1.903l.323.27-.064.418c-.04.258-.126.684-.312 1.11-.18.413-.5.925-1.065 1.207-.572.286-1.264.49-1.91.675l-.213.06c-.596.169-1.166.33-1.686.536-.581.23-1.027.489-1.324.805-.275.293-.452.663-.452 1.211V20.5a.75.75 0 0 1-1.5 0v-2.042c0-.931.323-1.67.86-2.24.516-.547 1.195-.906 1.864-1.17.596-.236 1.242-.419 1.827-.585l.212-.06c.666-.19 1.224-.36 1.652-.574.112-.056.243-.198.361-.467.052-.118.092-.241.124-.359-.653-.655-1.105-1.443-1.4-2.184-.343-.858-.5-1.71-.5-2.319v-.018c0-.51 0-1.89.565-3.161.291-.657.744-1.31 1.445-1.796Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-user', JhIconUser);

package/icons-wc/icon-users.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconUser 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M8.442 6.11c-.736 0-1.343.187-1.826.522A2.86 2.86 0 0 0 5.64 7.84c-.367.827-.367 1.713-.367 2.027v.016c0 .411.105.964.324 1.512.17.427.423.885.785 1.286a.415.415 0 0 1-.094.16l-.001.002c-.23.114-.539.21-.941.324l-.128.036c-.352.1-.758.215-1.133.363-.422.167-.88.403-1.234.78-.376.4-.601.919-.601 1.558v1.235a.75.75 0 0 0 1.5 0v-1.235c0-.255.078-.407.193-.53.136-.144.36-.28.693-.413.3-.119.63-.212.993-.315l.127-.036c.388-.11.833-.24 1.207-.428.43-.216.661-.598.783-.877a3.04 3.04 0 0 0 .21-.746l.063-.416-.321-.27c-.315-.265-.55-.64-.708-1.034-.16-.4-.217-.763-.217-.956 0-.307.007-.915.238-1.434.11-.246.259-.446.46-.586.198-.137.497-.254.97-.254.475 0 .774.117.971.254.202.14.351.34.46.586.231.52.238 1.127.238 1.434 0 .193-.057.56-.218.963-.16.398-.398.773-.715 1.035l-.287.237.015.372c.01.251.049.573.202.889.163.335.432.612.813.803.375.187.82.317 1.208.428l.127.036c.363.103.693.196.992.315.335.132.558.269.694.414.115.122.193.274.193.529v1.235a.75.75 0 0 0 1.5 0v-1.235a2.21 2.21 0 0 0-.6-1.558 2.473 2.473 0 0 0-.098-.097 3.46 3.46 0 0 0 .143-.067c.43-.216.661-.598.784-.877.127-.29.184-.576.21-.745l.064-.416-.323-.272c-.315-.264-.55-.638-.708-1.033-.16-.4-.216-.763-.216-.956 0-.307.007-.915.237-1.434.11-.246.259-.446.46-.586.198-.137.497-.254.971-.254s.773.117.97.254c.203.14.352.34.461.586.231.52.238 1.127.238 1.434 0 .192-.057.56-.219.963-.16.398-.398.773-.715 1.035l-.287.237.016.372c.01.251.048.573.201.889.164.335.432.612.813.803.375.187.82.317 1.208.428l.127.036c.364.103.693.196.993.315.334.132.557.269.693.414.115.122.193.274.193.529v1.235a.75.75 0 0 0 1.5 0v-1.235c0-.639-.224-1.158-.6-1.558-.356-.377-.813-.613-1.234-.78-.375-.148-.782-.263-1.134-.363l-.128-.036c-.406-.116-.717-.212-.947-.327-.09-.045-.118-.084-.132-.11.383-.41.649-.886.825-1.326.222-.552.327-1.11.327-1.521v-.016c0-.314 0-1.2-.367-2.027a2.86 2.86 0 0 0-.976-1.21c-.483-.335-1.09-.52-1.826-.52-.735 0-1.343.186-1.826.52a2.86 2.86 0 0 0-.975 1.21c-.368.827-.367 1.713-.367 2.027v.016c0 .411.104.964.323 1.512.17.427.423.885.785 1.286a.415.415 0 0 1-.094.16v.002c-.265.131-.599.226-1.024.347l-.38.11-.334-.096-.128-.036c-.406-.116-.717-.212-.947-.327-.09-.045-.118-.084-.132-.11a4.29 4.29 0 0 0 .825-1.326c.221-.553.326-1.11.326-1.521v-.016c0-.314 0-1.2-.367-2.027a2.86 2.86 0 0 0-.975-1.21c-.483-.334-1.09-.52-1.826-.52Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-users', JhIconUser);

package/icons-wc/icon-vault.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconVault 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v3H22v3h-1.25v4H22v3h-1.25v3a.75.75 0 0 1-.75.75h-1V22h-3v-1.25H8V22H5v-1.25H4a.75.75 0 0 1-.75-.75V4Zm1.5.75v14.5h14.5V4.75H4.75Zm9.25 5.5a1.75 1.75 0 1 0 0 3.5 1.75 1.75 0 0 0 0-3.5ZM10.75 12a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0Zm-2-2.5a.75.75 0 0 0-1.5 0v5a.75.75 0 0 0 1.5 0v-5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-vault', JhIconVault);

package/icons-wc/icon-wallet-filled.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconWalletFilled 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M2.25 5.5c0-.966.783-1.75 1.75-1.75h15c.966 0 1.75.784 1.75 1.75v2.75h-6.5a2 2 0 0 0-2 2v3.5a2 2 0 0 0 2 2h6.5v2.75A1.75 1.75 0 0 1 19 20.25H4a1.75 1.75 0 0 1-1.75-1.75v-13Zm12 4.25a.5.5 0 0 0-.5.5v3.5a.5.5 0 0 0 .5.5h7.5v-4.5h-7.5ZM16 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-wallet-filled', JhIconWalletFilled);

package/icons-wc/icon-wallet.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconWallet 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M4 3.75A1.75 1.75 0 0 0 2.25 5.5v13c0 .967.784 1.75 1.75 1.75h15a1.75 1.75 0 0 0 1.75-1.75v-2.75H21a.75.75 0 0 0 .75-.75V9a.75.75 0 0 0-.75-.75h-.25V5.5A1.75 1.75 0 0 0 19 3.75H4Zm10.25 12h5v2.75a.25.25 0 0 1-.25.25H4a.25.25 0 0 1-.25-.25v-13A.25.25 0 0 1 4 5.25h15a.25.25 0 0 1 .25.25v2.75h-5a2 2 0 0 0-2 2v3.5a2 2 0 0 0 2 2Zm0-6a.5.5 0 0 0-.5.5v3.5a.5.5 0 0 0 .5.5h6v-4.5h-6ZM16 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-wallet', JhIconWallet);

package/icons-wc/icon-window-maximize.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconWindowMaximize 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75V4Zm1.5.75v14.5h14.5V4.75H4.75ZM6.25 7A.75.75 0 0 1 7 6.25h7a.75.75 0 0 1 0 1.5H7A.75.75 0 0 1 6.25 7ZM17 6.25a.75.75 0 0 0 0 1.5h.01a.75.75 0 0 0 0-1.5H17Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-window-maximize', JhIconWindowMaximize);

package/icons-wc/icon-window-minimize.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconWindowMinimize 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M3.25 8.5A.75.75 0 0 1 4 7.75h16a.75.75 0 0 1 .75.75v7a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75v-7Zm1.5.75v5.5h14.5v-5.5H4.75Zm1.5 2.25a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5H7a.75.75 0 0 1-.75-.75ZM17 10.75a.75.75 0 0 0 0 1.5h.01a.75.75 0 0 0 0-1.5H17Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-window-minimize', JhIconWindowMinimize);

package/icons-wc/icon-window.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconWindow 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-size-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-size-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-size-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-size-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-size-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 fill-rule="evenodd" d="M3.25 6.5A.75.75 0 0 1 4 5.75h16a.75.75 0 0 1 .75.75v11a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75v-11Zm1.5.75v9.5h14.5v-9.5H4.75Zm1.5 2.25A.75.75 0 0 1 7 8.75h7a.75.75 0 0 1 0 1.5H7a.75.75 0 0 1-.75-.75ZM17 8.75a.75.75 0 0 0 0 1.5h.01a.75.75 0 1 0 0-1.5H17Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-window', JhIconWindow);