@jack-henry/jh-icons 1.2.0

package/icons-wc/icon-piggy-bank.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 JhIconPiggyBank 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="M13 3.469a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-2.5 1a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0ZM7.245 7.032c-.497-.277-.776-.229-.888-.164-.113.065-.295.284-.302.86-.007.549.16 1.27.538 2.027a.75.75 0 0 1-.099.82c-.304.359-.561.76-.761 1.191a.75.75 0 0 1-.444.397l-1.789.596v1.665l1.469.49a.75.75 0 0 1 .484.505c.2.7.544 1.342.998 1.891a.75.75 0 0 1-.048 1.008l-.842.842 1.06 1.061 1.185-1.185a.75.75 0 0 1 .8-.169 5.234 5.234 0 0 0 1.894.352H14a5.23 5.23 0 0 0 2.08-.428.75.75 0 0 1 .827.158l1.272 1.272.88-.881-.989-.99a.75.75 0 0 1-.044-1.012A5.25 5.25 0 0 0 14 8.718h-3.5a5.28 5.28 0 0 0-1.008.097.75.75 0 0 1-.767-.32c-.466-.698-1.004-1.198-1.48-1.463Zm2.445.235C9.18 6.6 8.587 6.062 7.975 5.722c-.706-.394-1.595-.6-2.368-.153-.777.449-1.042 1.327-1.052 2.14-.009.706.166 1.496.495 2.277-.198.27-.376.554-.532.853l-2.005.668A.75.75 0 0 0 2 12.22v2.746c0 .322.207.61.513.711l1.62.54c.189.534.443 1.037.752 1.5l-.915.914a.75.75 0 0 0 0 1.06l2.121 2.122a.75.75 0 0 0 1.06 0l1.385-1.384a6.75 6.75 0 0 0 1.964.29H14a6.74 6.74 0 0 0 2.191-.363l1.457 1.457a.75.75 0 0 0 1.061 0l1.942-1.942a.75.75 0 0 0 0-1.06l-1.06-1.06a6.719 6.719 0 0 0 1.154-3.531h.505a.75.75 0 0 0 0-1.5h-.616A6.752 6.752 0 0 0 14 7.219h-3.5c-.274 0-.544.016-.81.048Zm.81 3.452a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1-.75-.75Zm-2.5 2.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-piggy-bank', JhIconPiggyBank);

package/icons-wc/icon-pizza-slice.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 JhIconPizzaSlouse 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="M10.53 2.391a1.5 1.5 0 0 0-2.226.23 2.24 2.24 0 0 0-.107 2.462l-5.86 15.624a.75.75 0 0 0 1.004.95l15.615-6.832c.71.41 1.6.416 2.327-.014a1.5 1.5 0 0 0 .247-2.4l-11-10.02Zm7.15 11.355L9.357 6.26l-.652 1.738a2 2 0 1 1-1.214 3.238l-3.126 8.336 2.408-1.054a2 2 0 1 1 3.263-1.428l7.644-3.344ZM9.625 4.483A.74.74 0 0 1 9.52 3.5l.544.495L19.949 13l.57.52a.81.81 0 0 1-.953-.095L9.625 4.483Zm3.415 6.487a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-pizza-slice', JhIconPizzaSlouse);

package/icons-wc/icon-plus.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 JhIconPlu 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="M12.75 5a.75.75 0 0 0-1.5 0v6.25H5a.75.75 0 1 0 0 1.5h6.25V19a.75.75 0 0 0 1.5 0v-6.25H19a.75.75 0 0 0 0-1.5h-6.25V5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-plus', JhIconPlu);

package/icons-wc/icon-printer.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 JhIconPrinter 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="M5 2.25a.75.75 0 0 0-.75.75v3.25H3a.75.75 0 0 0-.75.75v10c0 .414.336.75.75.75h3.25v4h11.5v-4H21a.75.75 0 0 0 .75-.75V7a.75.75 0 0 0-.75-.75h-1.25V3a.75.75 0 0 0-.75-.75H5Zm1.25 10.5v3.5h-2.5v-8.5h16.5v8.5h-2.5v-3.5H18a.75.75 0 0 0 0-1.5H6a.75.75 0 0 0 0 1.5h.25Zm1.5 0v7.5h8.5v-7.5h-8.5Zm10.5-6.5v-2.5H5.75v2.5h12.5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-printer', JhIconPrinter);

package/icons-wc/icon-question.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 JhIconQuestion 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="M10.5 8c0-.643.213-.976.431-1.163.245-.21.618-.338 1.067-.337.466 0 .857.127 1.107.322.216.167.395.433.395.928 0 .134-.055.334-.234.615a5.23 5.23 0 0 1-.721.853c-.19.187-.345.332-.502.476-.111.102-.222.205-.345.323a4.166 4.166 0 0 0-.373.397 1.725 1.725 0 0 0-.187.284 1.21 1.21 0 0 0-.138.552v.03c.009.291.009.837.007 1.325l-.005.623-.001.192v.052l-.001.014v.004l1 .011 1 .011v-.072l.002-.194.005-.632c.001-.352.002-.756-.002-1.078l.079-.076c.06-.058.148-.14.25-.235.19-.175.425-.393.62-.588.334-.331.706-.738.998-1.196.29-.455.548-1.032.548-1.69 0-1.089-.446-1.947-1.168-2.507-.687-.535-1.546-.742-2.33-.743-.802-.001-1.678.224-2.371.818C8.91 5.933 8.5 6.85 8.5 8v.75h2V8Zm2.386 3.664.002-.002-.002.002ZM13.5 17a1.5 1.5 0 1 0-2.999.002A1.5 1.5 0 0 0 13.5 17Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-question', JhIconQuestion);

package/icons-wc/icon-receipt-bill-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 JhIconReceiptBillFilled 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.75 3a.75.75 0 0 1 .75-.75h13a.75.75 0 0 1 .75.75v18a.75.75 0 0 1-1.166.624l-2.614-1.743-3.098 1.77a.75.75 0 0 1-.744 0l-3.098-1.77-2.614 1.743A.75.75 0 0 1 4.75 21V3Zm8 3.5v-.75h-1.5v1.085a2.85 2.85 0 0 0-1.08.497c-.55.42-.92 1.064-.92 1.882 0 .956.327 1.644.877 2.132.479.426 1.091.66 1.556.836l.05.019c.53.202.89.349 1.144.574.2.178.373.443.373 1.01a.81.81 0 0 1-.33.69c-.22.168-.552.275-.92.275s-.7-.107-.92-.275a.81.81 0 0 1-.33-.69v-.75h-1.5v.75c0 .82.37 1.464.92 1.883a2.85 2.85 0 0 0 1.08.497v1.085h1.5v-1.085a2.85 2.85 0 0 0 1.08-.497c.55-.42.92-1.063.92-1.882 0-.956-.327-1.643-.877-2.132-.479-.426-1.091-.659-1.556-.836l-.05-.019c-.53-.201-.89-.348-1.144-.574-.2-.178-.373-.443-.373-1.01a.81.81 0 0 1 .33-.69c.22-.168.551-.275.92-.275.368 0 .7.107.92.275.2.152.33.365.33.69v.75h1.5v-.75c0-.82-.37-1.463-.92-1.883a2.836 2.836 0 0 0-1.08-.497V6.5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-receipt-bill-filled', JhIconReceiptBillFilled);

package/icons-wc/icon-receipt-bill.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 JhIconReceiptBill 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="M5.5 2.25a.75.75 0 0 0-.75.75v18a.75.75 0 0 0 1.166.624l2.614-1.743 3.098 1.77a.75.75 0 0 0 .744 0l3.098-1.77 2.614 1.743A.75.75 0 0 0 19.25 21V3a.75.75 0 0 0-.75-.75h-13Zm.75 17.35V3.75h11.5V19.6l-1.834-1.223a.75.75 0 0 0-.788-.027L12 20.136 8.872 18.35a.75.75 0 0 0-.788.027L6.25 19.6Zm6.5-13.1v-.75h-1.5v1.085a2.85 2.85 0 0 0-1.08.497c-.55.42-.92 1.064-.92 1.882 0 .956.327 1.644.877 2.132.479.426 1.091.66 1.556.836l.05.019c.53.202.89.349 1.144.574.2.178.373.443.373 1.01a.81.81 0 0 1-.33.69c-.22.168-.552.275-.92.275s-.7-.107-.92-.275a.81.81 0 0 1-.33-.69v-.75h-1.5v.75c0 .82.37 1.464.92 1.883a2.85 2.85 0 0 0 1.08.497v1.085h1.5v-1.085a2.85 2.85 0 0 0 1.08-.497c.55-.42.92-1.063.92-1.882 0-.956-.327-1.643-.877-2.132-.479-.426-1.091-.659-1.556-.836l-.05-.019c-.53-.201-.89-.348-1.144-.574-.2-.178-.373-.443-.373-1.01a.81.81 0 0 1 .33-.69c.22-.168.551-.275.92-.275.368 0 .7.107.92.275.2.152.33.365.33.69v.75h1.5v-.75c0-.82-.37-1.463-.92-1.883a2.836 2.836 0 0 0-1.08-.497V6.5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-receipt-bill', JhIconReceiptBill);

package/icons-wc/icon-receipt-bills.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 JhIconReceiptBill 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 2.5A.75.75 0 0 1 4 1.75h13a.75.75 0 0 1 .75.75v2.25H20a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-1.166.624l-2.614-1.743-3.098 1.77a.75.75 0 0 1-.744 0l-3.098-1.77-2.614 1.743A.75.75 0 0 1 6.25 21.5v-3.599l-1.834 1.223A.75.75 0 0 1 3.25 18.5v-16Zm3 13.599V5.5A.75.75 0 0 1 7 4.75h9.25v-1.5H4.75V17.1l1.5-1Zm1.5-9.849V20.1l1.834-1.223a.75.75 0 0 1 .788-.027l3.128 1.787 3.128-1.787a.75.75 0 0 1 .788.027L19.25 20.1V6.25H7.75Zm6.5 1v1.086c.385.089.758.251 1.08.496.55.42.92 1.064.92 1.882v.75h-1.5v-.75a.81.81 0 0 0-.33-.689c-.22-.168-.552-.275-.92-.275-.369 0-.7.107-.92.275a.81.81 0 0 0-.33.69c0 .568.173.832.373 1.01.254.226.615.373 1.144.574l.05.02c.465.176 1.077.409 1.556.835.55.489.877 1.176.877 2.132 0 .819-.37 1.463-.92 1.882a2.839 2.839 0 0 1-1.08.497v1.085h-1.5v-1.085a2.839 2.839 0 0 1-1.08-.497 2.307 2.307 0 0 1-.92-1.882v-.75h1.5v.75c0 .324.13.537.33.689.22.168.552.275.92.275s.7-.107.92-.275a.81.81 0 0 0 .33-.689c0-.568-.173-.833-.373-1.01-.254-.226-.615-.373-1.144-.575l-.05-.019c-.465-.177-1.077-.41-1.556-.836-.55-.488-.877-1.176-.877-2.132 0-.818.37-1.463.92-1.882a2.837 2.837 0 0 1 1.08-.497V7.25h1.5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-receipt-bills', JhIconReceiptBill);