@jack-henry/jh-icons 1.2.0

package/icons-wc/icon-squares-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 JhIconSquaresUser 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.5 3.25a.75.75 0 0 0-.75.75v13c0 .415.336.75.75.75h2.25V20c0 .415.336.75.75.75h14a.75.75 0 0 0 .75-.75V7a.75.75 0 0 0-.75-.75h-2.25V4a.75.75 0 0 0-.75-.75h-14ZM5.75 7v9.25h-1.5V4.75h12.5v1.5H6.5a.75.75 0 0 0-.75.75Zm1.5.75v11.5h.5v-.658c0-.605.216-1.097.575-1.474.338-.354.77-.574 1.162-.727.35-.136.727-.241 1.05-.331l.115-.032c.334-.093.588-.17.778-.256a.58.58 0 0 0 .112-.137 4.14 4.14 0 0 1-1.011-2.54l-.001-.017v-.047c0-.286-.002-1.097.329-1.857a2.68 2.68 0 0 1 .915-1.146c.457-.32 1.033-.496 1.726-.496.693 0 1.27.176 1.728.494.454.314.743.733.925 1.141.348.776.347 1.603.347 1.88v.038l-.001.023a4.131 4.131 0 0 1-1.085 2.545.25.25 0 0 0 .082.064l.012.006c.205.103.484.19.857.298l.122.035c.322.091.695.197 1.04.334.39.155.82.376 1.155.731.356.378.568.87.568 1.471v.658h.5V7.75H7.25Zm10.5 11.5v-.658c0-.217-.065-.341-.16-.442-.116-.124-.311-.245-.615-.365-.27-.108-.567-.192-.898-.287l-.125-.035c-.354-.102-.765-.223-1.114-.398a1.75 1.75 0 0 1-.974-1.747l.03-.294.22-.194A2.63 2.63 0 0 0 15 13.037c0-.275-.013-.804-.216-1.258a1.217 1.217 0 0 0-.41-.521c-.174-.12-.442-.227-.874-.227s-.696.106-.866.225a1.185 1.185 0 0 0-.4.516c-.2.458-.204.99-.204 1.273a2.64 2.64 0 0 0 .848 1.815l.26.24-.02.352a2.08 2.08 0 0 1-.844 1.564l-.051.038-.058.028c-.344.173-.757.29-1.109.39l-.114.031a9.68 9.68 0 0 0-.91.284c-.305.12-.503.241-.62.365-.097.102-.162.224-.162.44v.657h8.5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-squares-user', JhIconSquaresUser);

package/icons-wc/icon-star-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 JhIconStarFilled 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.68 4.683a.75.75 0 0 0-1.36 0L9.34 8.925l-4.948.717a.75.75 0 0 0-.389 1.305l3.71 3.278-.74 4.658a.75.75 0 0 0 1.107.772L12 17.468l3.92 2.187a.75.75 0 0 0 1.106-.772l-.739-4.658 3.71-3.278a.75.75 0 0 0-.39-1.305l-4.947-.717-1.98-4.242Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-star-filled', JhIconStarFilled);

package/icons-wc/icon-star.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 JhIconStar 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 4.25a.75.75 0 0 1 .68.433l1.98 4.242 4.948.717a.75.75 0 0 1 .389 1.305l-3.71 3.278.74 4.658a.75.75 0 0 1-1.107.772L12 17.468l-3.92 2.187a.75.75 0 0 1-1.106-.772l.739-4.658-3.71-3.278a.75.75 0 0 1 .39-1.305l4.947-.717 1.98-4.242A.75.75 0 0 1 12 4.25Zm0 2.523-1.472 3.153a.75.75 0 0 1-.572.425l-3.746.543 2.805 2.48a.75.75 0 0 1 .244.679l-.562 3.54 2.938-1.64a.75.75 0 0 1 .73 0l2.938 1.64-.562-3.54a.75.75 0 0 1 .244-.68l2.805-2.478-3.746-.544a.75.75 0 0 1-.572-.425L12 6.773Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-star', JhIconStar);

package/icons-wc/icon-store.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 JhIconStore 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 4a.75.75 0 0 1 .75-.75h14.5A.75.75 0 0 1 20 4v1.55l.003.004 1.85 2.5.147.199v1.279l-.003.03c-.09 1.117-.902 2.098-1.997 2.366v6.822h.25a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1 0-1.5H4v-6.822c-1.095-.268-1.907-1.249-1.998-2.365L2 9.533V8.236l.164-.205L4 5.737V4Zm1.5 1.25h13v-.5h-13v.5Zm.958 1.5H5.11L3.5 8.763v.705c.06.576.555 1.032 1.1 1.032s1.04-.456 1.1-1.032V8.33l.074-.154.684-1.426ZM5.5 11.835c.362-.139.685-.358.95-.632.469.486 1.12.797 1.85.797s1.381-.311 1.85-.797c.469.486 1.12.797 1.85.797s1.381-.311 1.85-.797c.469.486 1.12.797 1.85.797s1.381-.311 1.85-.797c.265.274.588.493.95.632v6.915h-1v-3.535l-.007-.143-.001-.017-.002-.018c-.126-1.36-1.384-2.287-2.74-2.287-1.356 0-2.614.927-2.74 2.287l-.002.018v.017l-.007.144-.001.017v3.517H5.5v-6.915Zm3.91-3.453.26-1.632H8.122L7.2 8.67v.798c.06.576.555 1.032 1.1 1.032s1.04-.456 1.1-1.032V8.44l.01-.058ZM12 10.5c-.545 0-1.04-.456-1.1-1.032V8.56l.29-1.81h1.62l.29 1.81v.908c-.06.576-.555 1.032-1.1 1.032Zm3.7 0c.545 0 1.04-.456 1.1-1.032V8.67l-.922-1.92H14.33l.26 1.63.01.06v1.027c.06.576.555 1.032 1.1 1.032Zm3.7 0c-.545 0-1.04-.456-1.1-1.032V8.33l-.074-.154-.684-1.426h1.48L20.5 8.747v.72c-.06.577-.555 1.033-1.1 1.033Zm-5.9 4.767.005-.105c.05-.435.51-.912 1.245-.912.735 0 1.196.477 1.245.912l.005.105V18.5h-2.5v-3.233Zm-7-.767c0-.966.784-1.75 1.75-1.75h1c.966 0 1.75.784 1.75 1.75v1a1.75 1.75 0 0 1-1.75 1.75h-1A1.75 1.75 0 0 1 6.5 15.5v-1Zm1.75-.25a.25.25 0 0 0-.25.25v1c0 .138.112.25.25.25h1a.25.25 0 0 0 .25-.25v-1a.25.25 0 0 0-.25-.25h-1Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-store', JhIconStore);

package/icons-wc/icon-tablet-mobile.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 JhIconTabletMobile 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 4.75a.25.25 0 0 0-.25.25v10c0 .138.112.25.25.25h1.25V4.75H4Zm2-1.5H4A1.75 1.75 0 0 0 2.25 5v10c0 .966.784 1.75 1.75 1.75h8v-1.5H6.75V4.75h9.5V6h1.5V4.75H19a.25.25 0 0 1 .25.25v1h1.5V5A1.75 1.75 0 0 0 19 3.25H6ZM13.25 8a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-.75.75h-7a.75.75 0 0 1-.75-.75V8Zm7 .75v7.5h-5.5v-7.5h5.5Zm0 9h-5.5v1.5h5.5v-1.5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-tablet-mobile', JhIconTabletMobile);

package/icons-wc/icon-tablet.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 JhIconTablet 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 6.75a.25.25 0 0 0-.25.25v10c0 .138.112.25.25.25h1.25V6.75H4Zm2.75 0v10.5h10.5V6.75H6.75ZM18 5.25H4A1.75 1.75 0 0 0 2.25 7v10c0 .966.784 1.75 1.75 1.75h16A1.75 1.75 0 0 0 21.75 17V7A1.75 1.75 0 0 0 20 5.25h-2Zm.75 1.5v10.5H20a.25.25 0 0 0 .25-.25V7a.25.25 0 0 0-.25-.25h-1.25Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-tablet', JhIconTablet);

package/icons-wc/icon-tag-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 JhIconTagFilled 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.934 5.25c-.595 0-1.161.255-1.557.7l-.017.019-.016.02-3.587 4.65a2.084 2.084 0 0 0 0 2.723l3.587 4.649.016.02.017.02c.396.444.962.7 1.557.7H20A1.75 1.75 0 0 0 21.75 17V7A1.75 1.75 0 0 0 20 5.25H7.934ZM7.75 12a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-tag-filled', JhIconTagFilled);

package/icons-wc/icon-tag-xmark-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 JhIconTagXmarkFilled 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="M6.377 5.95c.396-.445.962-.7 1.557-.7H20c.966 0 1.75.784 1.75 1.75v10A1.75 1.75 0 0 1 20 18.75H7.934a2.084 2.084 0 0 1-1.557-.699l-.017-.02-.016-.02-3.587-4.649a2.084 2.084 0 0 1 0-2.724L6.344 5.99l.016-.02.017-.02ZM9.47 8.47a.75.75 0 0 1 1.06 0L13 10.94l2.47-2.47a.75.75 0 0 1 1.06 1.06L14.06 12l2.47 2.47a.75.75 0 0 1-1.06 1.06L13 13.06l-2.47 2.47a.75.75 0 1 1-1.06-1.06L11.94 12 9.47 9.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-tag-xmark-filled', JhIconTagXmarkFilled);