@jack-henry/jh-icons 1.2.0

package/icons-wc/icon-handshake.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 JhIconHandshake 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="M19.53 6.67a.75.75 0 0 0-.987-.315c-.124.06-.339.08-.808-.06a11.223 11.223 0 0 1-.75-.267l-.068-.026c-.257-.098-.543-.208-.839-.306-.648-.215-1.406-.401-2.235-.352a4.444 4.444 0 0 0-1.856.534c-1.531.202-2.416-.025-2.887-.244a1.722 1.722 0 0 1-.468-.305.72.72 0 0 1-.07-.075L8.56 5.25a.75.75 0 0 0-1.163-.128L2.278 10.24a.75.75 0 0 0 .007 1.068c.15.147.368.363.57.565a1.973 1.973 0 0 0 1.317 3.18c.05.426.238.839.565 1.165.326.327.739.515 1.164.565a1.973 1.973 0 0 0 3.208 1.296l2.068 2.067a1.955 1.955 0 0 0 3.182-.62 1.954 1.954 0 0 0 2.277-1.144 1.954 1.954 0 0 0 2.327-1.338 1.955 1.955 0 0 0 1.532-3.331l-.44-.442 1.714-.933a.75.75 0 0 0 .3-1.018l-2.54-4.65Zm-9.353 10.355 2.06 2.06a.455.455 0 0 0 .645-.641l-.002-.002-1.202-1.203-.003-.002-.223-.223a.75.75 0 0 1 1.061-1.06l.226.225 1.202 1.202.004.004.565.565a.455.455 0 0 0 .643-.643l-2.725-2.725-.003-.003-.124-.124a.75.75 0 0 1 1.06-1.06l.128.126 2.725 2.725.555.556a.455.455 0 0 0 .645-.642l-.001-.001-3.917-3.917-.066-.066a.75.75 0 0 1 1.06-1.06l.065.064.002.002 3.916 3.916.002.001.316.317a.455.455 0 0 0 .643-.643L14.061 9.4a3.201 3.201 0 0 0-.507.27c-.494.322-1.07.89-1.366 1.9a.75.75 0 0 1-.19.32 1.68 1.68 0 0 1-.892.49 1.384 1.384 0 0 1-.975-.196c-.53-.329-.815-.946-.912-1.554-.15-.948.1-2.127.94-3.206-.705-.066-1.26-.229-1.692-.43a3.529 3.529 0 0 1-.523-.298L3.871 10.77l.146.146.136.137a1.97 1.97 0 0 1 2.177 1.191 1.971 1.971 0 0 1 2.288 1.163 1.971 1.971 0 0 1 1.868 3.31l-.309.309Zm-1.988-1.47-.663.663a.472.472 0 1 0 .668.668l1.231-1.231a.472.472 0 1 0-.668-.668l-.568.568Zm-1.06-1.06a.472.472 0 0 0-.668-.669l-.562.561-.102.102a.472.472 0 0 0 .668.669l.664-.664Zm-2.29-1.168-.102.102a.473.473 0 0 1-.668-.668l.102-.102a.473.473 0 0 1 .668.668Zm14.11-1.162 1.443-.785-1.903-3.486c-.423.033-.834-.058-1.185-.163a12.549 12.549 0 0 1-.854-.302l-.064-.024c-.263-.1-.518-.198-.781-.286-.569-.189-1.118-.31-1.672-.277a2.968 2.968 0 0 0-1.345.418c-.139.081-.28.175-.425.285-1.319 1.006-1.57 2.17-1.462 2.85.035.221.1.358.151.434.438-1.219 1.2-1.97 1.882-2.415.365-.239.706-.389.959-.48a3.79 3.79 0 0 1 .437-.128l.01-.002.005-.001h.002l.045.232-.044-.233a.75.75 0 0 1 .784.353c.02.016.039.033.057.051l3.96 3.96Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-handshake', JhIconHandshake);

package/icons-wc/icon-hashtag.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 JhIconHashtag 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="m11.895 4.5-.04.196-.735 3.68h3.21l.775-3.876h2.04l-.04.196-.735 3.68h2.355l-.4 2H15.97l-.65 3.25h2.355l-.4 2H14.92l-.775 3.874h-2.04l.04-.196.735-3.679H9.67L8.895 19.5h-2.04l.04-.196.735-3.679H5.275l.4-2H8.03l.65-3.25H6.325l.4-2H9.08L9.855 4.5h2.04Zm-1.825 9.125.65-3.25h3.21l-.65 3.25h-3.21Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-hashtag', JhIconHashtag);

package/icons-wc/icon-heart-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 JhIconHeartFilled 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="M7.737 3.248A5.323 5.323 0 0 0 2.414 8.57c0 4.741 2.354 8.036 4.666 10.12a17.992 17.992 0 0 0 3.17 2.274 15.717 15.717 0 0 0 1.355.68l.084.036.024.01.007.003h.002l.001.001.277-.697-.276.697a.75.75 0 0 0 .552 0L12 20.998l.277.697.003-.001.007-.003.024-.01.084-.035a15.717 15.717 0 0 0 1.354-.68 17.993 17.993 0 0 0 3.171-2.276c2.312-2.083 4.666-5.378 4.666-10.119a5.323 5.323 0 0 0-5.323-5.323A5.306 5.306 0 0 0 12 5.39a5.306 5.306 0 0 0-4.263-2.142Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-heart-filled', JhIconHeartFilled);

package/icons-wc/icon-heart-pulse.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 JhIconHeartPulse 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="M7.737 3.25a5.323 5.323 0 0 0-5.323 5.323c0 1.341.188 2.566.51 3.68A.75.75 0 0 0 3 13.75h.461c.902 2.093 2.268 3.725 3.619 4.942a17.981 17.981 0 0 0 3.17 2.275 15.717 15.717 0 0 0 1.355.68l.084.036.024.01.007.003h.002l.001.001L12 21l-.276.698a.75.75 0 0 0 .552 0L12 21c.276.698.276.697.277.697l.003-.001.007-.003.024-.01.084-.035a15.32 15.32 0 0 0 1.354-.681 17.982 17.982 0 0 0 3.171-2.275c1.351-1.217 2.717-2.85 3.619-4.942h.961a.75.75 0 0 0 0-1.5h-.424c.322-1.114.51-2.337.51-3.677a5.323 5.323 0 0 0-5.323-5.323A5.306 5.306 0 0 0 12 5.392 5.306 5.306 0 0 0 7.737 3.25Zm11.768 9c.364-1.098.58-2.32.58-3.677A3.82 3.82 0 0 0 12.7 7.198a.75.75 0 0 1-1.399 0 3.82 3.82 0 0 0-7.386 1.375c0 1.356.217 2.579.58 3.677H6.98l1.318-3.513a.75.75 0 0 1 1.4-.011l2.202 5.606 2.462-3.977a.75.75 0 0 1 1.262-.02l1.277 1.915h2.604Zm-14.39 1.5c.788 1.576 1.873 2.84 2.97 3.828 1.053.95 2.11 1.636 2.903 2.083.396.223.724.386.95.492l.062.029.062-.029c.226-.106.554-.269.95-.492a16.48 16.48 0 0 0 2.904-2.083c1.096-.988 2.18-2.252 2.969-3.828H16.5a.75.75 0 0 1-.624-.334l-.853-1.279-2.635 4.258a.75.75 0 0 1-1.336-.12l-2.036-5.182-.814 2.17a.75.75 0 0 1-.702.487H5.115Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-heart-pulse', JhIconHeartPulse);

package/icons-wc/icon-heart.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 JhIconHeart 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.414 8.571a5.323 5.323 0 0 1 5.323-5.323c1.748 0 3.294.843 4.263 2.142a5.305 5.305 0 0 1 4.263-2.142 5.323 5.323 0 0 1 5.323 5.323c0 4.741-2.354 8.036-4.666 10.12a17.99 17.99 0 0 1-3.17 2.274 15.719 15.719 0 0 1-1.355.68 4.989 4.989 0 0 1-.084.036l-.024.01-.007.003h-.002l-.001.001-.277-.697-.277.697-.003-.001-.007-.003-.024-.01a10.554 10.554 0 0 1-.386-.172c-.257-.12-.62-.3-1.052-.544A17.99 17.99 0 0 1 7.08 18.69c-2.312-2.083-4.666-5.378-4.666-10.119ZM12 20.998l-.276.697a.75.75 0 0 0 .552 0L12 20.998Zm0-.818.062-.03c.226-.105.554-.268.95-.491a16.49 16.49 0 0 0 2.904-2.083c2.106-1.898 4.17-4.817 4.17-9.005A3.82 3.82 0 0 0 12.7 7.196a.75.75 0 0 1-1.4 0A3.82 3.82 0 0 0 3.914 8.57c0 4.188 2.064 7.107 4.17 9.005a16.47 16.47 0 0 0 2.904 2.083 14.254 14.254 0 0 0 1.012.52Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-heart', JhIconHeart);

package/icons-wc/icon-house-dollar-sign.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 JhIconHouseDollarSign 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="M11.506 2.936a.75.75 0 0 1 .988 0l3.256 2.849V4.5h2v3h-.04l2.784 2.436a.75.75 0 1 1-.988 1.129l-.756-.662v7.347H20a.75.75 0 0 1 0 1.5H4a.75.75 0 0 1 0-1.5h1.25v-7.347l-.756.662a.75.75 0 1 1-.988-1.13l8-7ZM17.25 9.09v8.66H6.75V9.09L12 4.497l5.25 4.594Zm-4.75-.34v-.5h-1v.754c-.273.06-.538.174-.765.347a1.59 1.59 0 0 0-.635 1.298c0 .663.226 1.137.605 1.474.332.295.757.457 1.083.58l.034.013c.37.141.627.246.808.407.146.13.27.322.27.726a.591.591 0 0 1-.24.502c-.16.122-.398.198-.66.198s-.5-.076-.66-.198a.591.591 0 0 1-.24-.502v-.5h-1v.5c0 .565.255 1.009.635 1.298.227.173.492.287.765.348v.754h1v-.755c.273-.06.538-.174.765-.347.38-.29.635-.733.635-1.298 0-.662-.226-1.136-.605-1.473-.332-.296-.757-.457-1.083-.581l-.034-.013c-.37-.14-.627-.245-.808-.406-.146-.13-.27-.323-.27-.727 0-.235.095-.391.24-.502.16-.122.398-.198.66-.198s.5.077.66.198c.145.111.24.267.24.502v.5h1v-.5a1.59 1.59 0 0 0-.635-1.297 1.967 1.967 0 0 0-.765-.348V8.75Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-house-dollar-sign', JhIconHouseDollarSign);

package/icons-wc/icon-house.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 JhIconHouse 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="M11.506 4.436a.75.75 0 0 1 .988 0l3.256 2.849V6h2v3h-.04l2.784 2.436a.75.75 0 1 1-.988 1.129l-.756-.662v7.347H20a.75.75 0 0 1 0 1.5H4a.75.75 0 0 1 0-1.5h1.25v-7.347l-.756.662a.75.75 0 1 1-.988-1.13l8-7ZM6.75 19.25h2.5V13a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 .75.75v6.25h2.5v-8.66L12 5.998 6.75 10.59v8.66Zm6.5 0v-5.5h-2.5v5.5h2.5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-house', JhIconHouse);

package/icons-wc/icon-id-badge.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 JhIconIdBadge 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="M14.45 4.498H20a.75.75 0 0 1 .75.75v15a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75v-15a.75.75 0 0 1 .75-.75h5.55a2.5 2.5 0 0 1 4.9 0Zm-9.7 15v-13.5h6.5V4.75a.75.75 0 0 1 1.5 0v1.247h6.5v13.5h-1.06V18.28c0-.638-.223-1.157-.599-1.557-.354-.378-.811-.614-1.233-.781-.378-.15-.788-.265-1.143-.365l-.12-.034c-.403-.114-.715-.21-.949-.323a.351.351 0 0 1-.133-.121 4.423 4.423 0 0 0 1.156-2.809l.001-.015v-.031c0-.311 0-1.193-.368-2.015a2.846 2.846 0 0 0-.977-1.202c-.483-.332-1.09-.517-1.825-.517-.736 0-1.344.187-1.826.521a2.86 2.86 0 0 0-.976 1.206c-.368.825-.368 1.706-.368 2.008v.035l.001.02a4.47 4.47 0 0 0 1.158 2.77.556.556 0 0 1-.075.123.158.158 0 0 1-.025.024c-.24.116-.558.212-.966.326l-.116.032c-.36.1-.774.216-1.156.366-.424.167-.883.403-1.24.78-.376.4-.601.92-.601 1.56v1.216H4.75Zm11.94-.007v.007H7.31V18.28c0-.255.078-.407.193-.53.137-.144.36-.28.696-.413.306-.12.644-.214 1.017-.319l.111-.03c.392-.11.84-.239 1.22-.422l.002-.002c.42-.205.666-.575.8-.86a2.18 2.18 0 0 0 .211-.874v-.334l-.25-.224a2.97 2.97 0 0 1-.98-2.033c0-.3.012-.886.237-1.39.11-.245.259-.445.461-.585.198-.137.498-.254.972-.254.476 0 .776.116.974.252.202.14.35.337.46.58.225.504.236 1.094.236 1.403a2.92 2.92 0 0 1-.962 2.038l-.227.205-.02.305a1.85 1.85 0 0 0 1.01 1.766l.008.004c.376.185.82.314 1.209.424l.115.032c.368.104.701.198 1.003.317.334.133.556.269.691.413.115.122.193.275.193.531v1.21Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-id-badge', JhIconIdBadge);