@jack-henry/jh-icons 1.2.0

package/icons-wc/icon-magnifying-glass.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 JhIconMagnifyingGlass 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.625 10.375a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0Zm5.75-7.25a7.25 7.25 0 1 0 4.569 12.88l4.65 4.65a.75.75 0 1 0 1.061-1.06l-4.65-4.651a7.25 7.25 0 0 0-5.63-11.819Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-magnifying-glass', JhIconMagnifyingGlass);

package/icons-wc/icon-map.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 JhIconMap 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.794 3.81a.746.746 0 0 0-.29-.06h-.012a.746.746 0 0 0-.388.113l-4.67 2.802-4.655-1.861A.75.75 0 0 0 3.75 5.5v12a.75.75 0 0 0 .471.696l4.985 1.994a.745.745 0 0 0 .294.06h.01a.746.746 0 0 0 .386-.113l4.67-2.803 4.655 1.862a.75.75 0 0 0 1.029-.696v-12a.75.75 0 0 0-.471-.696L14.794 3.81ZM13.75 5.825l-3.5 2.1v10.25l3.5-2.1V5.825Zm1.5 10.167V5.608l3.5 1.4v10.384l-3.5-1.4Zm-10-9.384 3.5 1.4v10.384l-3.5-1.4V6.608Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-map', JhIconMap);

package/icons-wc/icon-masks.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 JhIconMask 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.049 4.814h-.75.75v4.023c.433.061.89.099 1.357.099 1.162 0 2.419-.235 3.405-.478a21.049 21.049 0 0 0 1.612-.47l.02-.007.005-.001a.75.75 0 0 1 1.003.706h-.75.75v6.251c0 1.66-.9 2.93-2.072 3.756-1.16.818-2.638 1.244-3.974 1.244-2.432 0-4.922-1.69-5.38-4.178a7.07 7.07 0 0 1-2.022.306c-2.692 0-5.454-2.068-5.454-5v-6.25h.75-.75a.75.75 0 0 1 1.06-.684l.001.001.014.006.065.028a12.52 12.52 0 0 0 1.233.428c.823.238 1.925.47 3.081.47 1.163 0 2.42-.234 3.405-.478a21.032 21.032 0 0 0 1.613-.469l.02-.007.005-.002a.75.75 0 0 1 1.003.706Zm0 5.732v-.196c.434.053.89.086 1.357.086 1.337 0 2.728-.266 3.765-.522.287-.071.55-.142.78-.208v5.23c0 1.056-.556 1.91-1.436 2.53-.891.628-2.062.97-3.11.97-1.996 0-3.813-1.476-3.946-3.287a6.25 6.25 0 0 0 .518-.328c.728-.513 1.35-1.197 1.718-2.04a.75.75 0 1 0 .333-1.283 4.4 4.4 0 0 0 .02-.434v-.517Zm-10-4.651v5.169c0 1.907 1.88 3.5 3.954 3.5 1.048 0 2.219-.341 3.11-.97.88-.619 1.436-1.474 1.436-2.53V5.835c-.23.065-.493.136-.78.207-1.037.257-2.428.522-3.766.522-1.344 0-2.594-.268-3.498-.53a14.582 14.582 0 0 1-.456-.14ZM14.462 16.63a.75.75 0 0 0 .75-.75c0-.076.058-.263.268-.455.197-.18.46-.295.732-.295.272 0 .535.115.732.295.21.192.268.38.268.455a.75.75 0 0 0 1.5 0c0-.615-.334-1.178-.758-1.563a2.602 2.602 0 0 0-1.742-.687 2.6 2.6 0 0 0-1.743.687c-.423.385-.757.948-.757 1.563 0 .414.335.75.75.75Zm3.978-4.73a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm-11.786-.78a.75.75 0 0 0-1.5 0c0 .615.334 1.177.757 1.563a2.602 2.602 0 0 0 1.743.687c.694 0 1.306-.29 1.742-.687.424-.386.758-.948.758-1.563a.75.75 0 1 0-1.5 0c0 .076-.058.263-.268.455-.197.18-.46.295-.732.295-.273 0-.535-.116-.732-.295-.21-.192-.268-.38-.268-.455Zm.069-2.338a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm2.98 1.142a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-masks', JhIconMask);

package/icons-wc/icon-merge.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 JhIconMerge 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.336 11.01a.75.75 0 0 0 1.046.176l.041-.03c.588-.418 1.31-.933 1.867-1.715.588-.825.96-1.894.96-3.381V5a.75.75 0 0 0-1.5 0v1.06c0 1.216-.297 1.971-.681 2.51-.403.566-.936.951-1.558 1.394a.75.75 0 0 0-.175 1.046Zm-.586 5.68 1.22-1.22a.75.75 0 0 1 1.06 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 1 1 1.06-1.06l1.22 1.22v-3.13c0-.684-.21-1.106-.516-1.456-.287-.325-.646-.582-1.102-.908l-.323-.232c-.579-.42-1.238-.943-1.738-1.73-.51-.798-.821-1.813-.821-3.174v-.92a.75.75 0 1 1 1.5 0v.92c0 1.118.251 1.844.586 2.369.343.538.809.925 1.355 1.322l.264.189c.462.328.993.705 1.405 1.174.537.61.89 1.38.89 2.446v3.129Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-merge', JhIconMerge);

package/icons-wc/icon-message-dots.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 JhIconMessageDot 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.25A1.75 1.75 0 0 0 2.25 5v16.56l1.219-.974 4.794-3.836H20A1.75 1.75 0 0 0 21.75 15V5A1.75 1.75 0 0 0 20 3.25H4ZM3.75 5A.25.25 0 0 1 4 4.75h16a.25.25 0 0 1 .25.25v10a.25.25 0 0 1-.25.25H7.737l-.206.164L3.75 18.44V5ZM8 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm5-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-message-dots', JhIconMessageDot);

package/icons-wc/icon-message-lines.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 JhIconMessageLine 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 5c0-.966.784-1.75 1.75-1.75h16c.966 0 1.75.784 1.75 1.75v10A1.75 1.75 0 0 1 20 16.75H8.263L3.47 20.586l-1.219.975V5ZM4 4.75a.25.25 0 0 0-.25.25v13.44l3.781-3.026.206-.164H20a.25.25 0 0 0 .25-.25V5a.25.25 0 0 0-.25-.25H4ZM7.25 8A.75.75 0 0 1 8 7.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 8ZM8 11.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5H8Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-message-lines', JhIconMessageLine);

package/icons-wc/icon-message-sms.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 JhIconMessageSm 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.25A1.75 1.75 0 0 0 2.25 5v16.56l1.219-.974 4.794-3.836H20A1.75 1.75 0 0 0 21.75 15V5A1.75 1.75 0 0 0 20 3.25H4ZM3.75 5A.25.25 0 0 1 4 4.75h16a.25.25 0 0 1 .25.25v10a.25.25 0 0 1-.25.25H7.737l-.206.164L3.75 18.44V5Zm2.997 7.374c-1.158 0-1.888-.546-1.907-1.428h1.11c.029.333.362.546.845.546.434 0 .733-.21.733-.511 0-.254-.2-.39-.724-.496l-.603-.12c-.838-.159-1.27-.616-1.27-1.336 0-.895.718-1.483 1.822-1.483 1.073 0 1.816.581 1.835 1.429H7.512c-.025-.324-.333-.55-.743-.55s-.679.194-.679.499c0 .25.203.397.686.492l.59.114c.905.175 1.31.584 1.31 1.31 0 .956-.73 1.534-1.929 1.534Zm7.69-4.704v4.58H13.36V9.36h-.058l-1.018 2.548h-.72L10.541 9.36h-.057v2.891H9.409V7.67h1.374l1.111 2.81h.06l1.108-2.81h1.374Zm2.636 4.704c-1.158 0-1.888-.546-1.907-1.428h1.11c.029.333.362.546.845.546.434 0 .733-.21.733-.511 0-.254-.2-.39-.724-.496l-.603-.12c-.838-.159-1.27-.616-1.27-1.336 0-.895.718-1.483 1.822-1.483 1.073 0 1.816.581 1.835 1.429h-1.076c-.026-.324-.333-.55-.743-.55s-.679.194-.679.499c0 .25.203.397.686.492l.59.114c.904.175 1.31.584 1.31 1.31 0 .956-.73 1.534-1.929 1.534Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-message-sms', JhIconMessageSm);

package/icons-wc/icon-messages-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 JhIconMessagesFilled 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 4.125c0-.966.784-1.75 1.75-1.75h12.5c.966 0 1.75.784 1.75 1.75v8.5a1.75 1.75 0 0 1-1.75 1.75H7.27l-4.043 3.33L2 18.714V4.124Zm6 11.75h8.25a3.25 3.25 0 0 0 3.25-3.25v-6.25h.75c.966 0 1.75.784 1.75 1.75v14.268l-1.206-.922-4.048-3.096H9.75A1.75 1.75 0 0 1 8 16.625v-.75Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-messages-filled', JhIconMessagesFilled);