@jack-henry/jh-icons 1.2.0 → 2.0.0-beta.7

package/icons-wc/icon-video-slash.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconVideoSlash 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-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-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 d="M5.914 5.006H15a2 2 0 0 1 2 2V8.62l1.644-1.517C19.924 5.922 22 6.831 22 8.574v6.864c0 1.743-2.075 2.652-3.356 1.47L17 15.39v.7l2.839 2.84-.707.707L2.868 3.374l.707-.707 2.34 2.339Zm-1.328 1.5H4a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .394-.192l1.062 1.063a1.995 1.995 0 0 1-1.456.629H4a2 2 0 0 1-2-2v-10c0-.834.51-1.55 1.236-1.85l1.35 1.35ZM20.5 8.574a.5.5 0 0 0-.839-.368l-2.5 2.308a.502.502 0 0 0-.161.368v2.248a.5.5 0 0 0 .161.368l2.5 2.308a.5.5 0 0 0 .839-.368V8.573Zm-10.586.432h3.336a.75.75 0 0 1 0 1.5h-1.836l4.086 4.086V7.006a.5.5 0 0 0-.5-.5H7.414l2.5 2.5Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-video-slash', JhIconVideoSlash);

package/icons-wc/icon-video.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconVideo 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-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-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 d="M15 5a2 2 0 0 1 2 2v1.615L18.644 7.1C19.924 5.916 22 6.825 22 8.569v6.863c0 1.743-2.075 2.652-3.356 1.47L17 15.384V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h11ZM4 6.5a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V7a.5.5 0 0 0-.5-.5H4Zm16.5 2.068a.5.5 0 0 0-.839-.368l-2.5 2.308a.502.502 0 0 0-.161.368v2.248c0 .14.058.274.161.368l2.5 2.308a.5.5 0 0 0 .839-.368V8.568ZM13.25 9a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5h4.5Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-video', JhIconVideo);

package/icons-wc/icon-viewfinder-credit-card.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconViewfinderCreditCard 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-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-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 d="M21.25 17.498a.75.75 0 0 1 .75.75v.957l.002.001v1.046a1.75 1.75 0 0 1-1.75 1.749h-1.046V22h-.954a.75.75 0 0 1 0-1.5h1.5v.001h.5a.25.25 0 0 0 .25-.25v-.503H20.5v-1.5a.75.75 0 0 1 .75-.75ZM2.751 17.5a.75.75 0 0 1 .75.75v1.5h-.002v.5c0 .138.112.25.25.25h2.003a.75.75 0 0 1 0 1.5H3.749a1.75 1.75 0 0 1-1.75-1.75v-1.046h.002v-.954a.75.75 0 0 1 .75-.75ZM17.758 7.252c.813 0 1.485.655 1.485 1.478v6.552c0 .823-.672 1.479-1.485 1.479H5.99a1.483 1.483 0 0 1-1.485-1.479V8.73c0-.822.673-1.478 1.485-1.478h11.768ZM6.005 15.261h11.738v-3.072H6.005v3.072Zm6.828-.752H6.749v-1h6.084v1Zm-6.828-4.504h11.738V8.752H6.005v1.253ZM5.75 2a.75.75 0 0 1 0 1.5h-2a.25.25 0 0 0-.25.25v2.003a.75.75 0 0 1-1.5 0V3.75C2 2.784 2.784 2 3.75 2h2Zm14 .001h.503c.966 0 1.75.784 1.75 1.751v1.046L22 4.797v.954a.75.75 0 0 1-1.5 0v-1.5h.003v-.5a.25.25 0 0 0-.25-.25h-1.046V3.5h-.957a.75.75 0 0 1 0-1.5h1.5v.001Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-viewfinder-credit-card', JhIconViewfinderCreditCard);

package/icons-wc/icon-viewfinder-face-smile.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconViewfinderFaceSmile 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-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-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 d="M21.25 17.498a.75.75 0 0 1 .75.75v.957l.002.001v1.046a1.75 1.75 0 0 1-1.75 1.749h-1.046V22h-.954a.75.75 0 0 1 0-1.5h1.5v.001h.5a.25.25 0 0 0 .25-.25v-.503H20.5v-1.5a.75.75 0 0 1 .75-.75ZM2.751 17.5a.75.75 0 0 1 .75.75v1.5h-.002v.5c0 .138.112.25.25.25h2.003a.75.75 0 0 1 0 1.5H3.749a1.75 1.75 0 0 1-1.75-1.75v-1.046h.002v-.954a.75.75 0 0 1 .75-.75ZM12 5.256a6.751 6.751 0 0 1 0 13.5 6.751 6.751 0 0 1 0-13.5Zm0 1.5a5.25 5.25 0 0 0-5.25 5.25l.007.27A5.252 5.252 0 0 0 12 17.255a5.251 5.251 0 0 0 0-10.5Zm2.042 6.167a.75.75 0 0 1 1.248.832c-1.63 2.445-4.95 2.444-6.581 0a.75.75 0 0 1 1.248-.832c1.036 1.554 3.049 1.554 4.085 0Zm-4.208-3.25a.834.834 0 1 1-.002 1.668.834.834 0 0 1 .002-1.668Zm4.333 0a.834.834 0 1 1-.002 1.668.834.834 0 0 1 .002-1.668ZM5.75 2a.75.75 0 0 1 0 1.5h-2a.25.25 0 0 0-.25.25v2.003a.75.75 0 0 1-1.5 0V3.75C2 2.784 2.784 2 3.75 2h2Zm14 .001h.503c.966 0 1.75.784 1.75 1.751v1.046L22 4.797v.954a.75.75 0 0 1-1.5 0v-1.5h.003v-.5a.25.25 0 0 0-.25-.25h-1.046V3.5h-.957a.75.75 0 0 1 0-1.5h1.5v.001Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-viewfinder-face-smile', JhIconViewfinderFaceSmile);

package/icons-wc/icon-viewfinder-id-card.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconViewfinderIdCard 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-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-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 d="M21.25 17.498a.75.75 0 0 1 .75.75v.957l.002.001v1.046a1.75 1.75 0 0 1-1.75 1.749h-1.046V22h-.954a.75.75 0 0 1 0-1.5h1.5v.001h.5a.25.25 0 0 0 .25-.25v-.503H20.5v-1.5a.75.75 0 0 1 .75-.75ZM2.751 17.5a.75.75 0 0 1 .75.75v1.5h-.002v.5c0 .138.112.25.25.25h2.003a.75.75 0 0 1 0 1.5H3.749a1.75 1.75 0 0 1-1.75-1.75v-1.046h.002v-.954a.75.75 0 0 1 .75-.75ZM17.546 7.01c1.044.104 1.956.96 1.956 2.127v5.725c0 1.245-1.038 2.136-2.167 2.137H6.665c-1.13 0-2.167-.892-2.167-2.137V9.137C4.498 7.892 5.536 7 6.665 7h10.67l.21.01ZM6.665 8.5c-.368 0-.667.286-.667.637v5.725c0 .351.299.637.667.637h10.67c.367 0 .667-.286.667-.637V9.137c0-.351-.3-.636-.667-.637H6.665Zm9.584 4.901a.497.497 0 0 1 0 .993h-2.502a.496.496 0 0 1 0-.993h2.502ZM9.567 8.977c.45 0 .933.14 1.312.468.397.344.63.853.607 1.456v.01a7.1 7.1 0 0 1-.102.884l.039.018c.328.161 1.004.582 1.004 1.403v.36a.75.75 0 0 1-1.5 0v-.308a.712.712 0 0 0-.168-.11 1.794 1.794 0 0 0-.397-.137v-.002a.75.75 0 0 1-.579-.94 5.48 5.48 0 0 0 .203-1.24c.005-.156-.045-.221-.089-.259a.511.511 0 0 0-.328-.103.528.528 0 0 0-.336.106c-.048.042-.101.111-.097.27.02.415.087.826.202 1.224a.752.752 0 0 1-.57.942l-.02.005a1.85 1.85 0 0 0-.367.133.708.708 0 0 0-.164.109v.31a.75.75 0 0 1-1.5 0v-.36c0-.812.663-1.234.987-1.398l.034-.016a6.865 6.865 0 0 1-.101-.895l-.001-.014c-.015-.604.224-1.108.62-1.449.38-.325.862-.467 1.311-.467Zm6.678 2.682a.496.496 0 0 1 0 .99h-2.5a.494.494 0 0 1 0-.99h2.5Zm0-1.743a.496.496 0 0 1 0 .99h-2.5a.495.495 0 0 1 0-.99h2.5ZM5.75 2a.75.75 0 0 1 0 1.5h-2a.25.25 0 0 0-.25.25v2.003a.75.75 0 0 1-1.5 0V3.75C2 2.784 2.784 2 3.75 2h2Zm14 .001h.503c.966 0 1.75.784 1.75 1.751v1.046L22 4.797v.954a.75.75 0 0 1-1.5 0v-1.5h.003v-.5a.25.25 0 0 0-.25-.25h-1.046V3.5h-.957a.75.75 0 0 1 0-1.5h1.5v.001Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-viewfinder-id-card', JhIconViewfinderIdCard);

package/icons-wc/icon-viewfinder-user.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconViewfinderUser 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-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-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 d="M21.25 17.498a.75.75 0 0 1 .75.75v.957l.002.001v1.046a1.75 1.75 0 0 1-1.75 1.749h-1.046V22h-.954a.75.75 0 0 1 0-1.5h1.5v.001h.5a.25.25 0 0 0 .25-.25v-.503H20.5v-1.5a.75.75 0 0 1 .75-.75ZM2.751 17.5a.75.75 0 0 1 .75.75v1.5h-.002v.5c0 .138.112.25.25.25h2.003a.75.75 0 0 1 0 1.5H3.749a1.75 1.75 0 0 1-1.75-1.75v-1.046h.002v-.954a.75.75 0 0 1 .75-.75ZM12 5.752c.797 0 1.453.2 1.97.557a3.06 3.06 0 0 1 1.053 1.295c.407.907.4 1.884.4 2.211v.03a4.809 4.809 0 0 1-1.295 3.09c.005.012.01.025.018.037a.466.466 0 0 0 .192.182c.265.13.616.237 1.06.363.423.119.926.255 1.387.437.46.182.953.44 1.333.844.4.427.64.981.64 1.666v.208a.75.75 0 0 1-1.5 0v-.208c0-.303-.094-.49-.234-.64-.16-.171-.418-.328-.79-.475-.373-.148-.788-.26-1.244-.389-.429-.121-.913-.263-1.321-.463l-.009-.004a1.966 1.966 0 0 1-1.072-1.875l.02-.306.227-.205a3.306 3.306 0 0 0 1.087-2.304c0-.34-.01-1.01-.268-1.586a1.573 1.573 0 0 0-.534-.673c-.233-.16-.582-.292-1.12-.292-.537 0-.884.132-1.117.294a1.583 1.583 0 0 0-.536.679c-.258.578-.269 1.247-.269 1.576a3.363 3.363 0 0 0 1.11 2.295l.248.223v.334c0 .277-.082.623-.226.932-.143.307-.404.698-.847.914l-.002.001c-.412.2-.9.34-1.334.46-.459.13-.877.242-1.253.39-.375.147-.635.303-.797.475-.141.15-.235.337-.235.639v.208a.75.75 0 0 1-1.5 0v-.208c0-.686.24-1.241.644-1.668.381-.405.876-.66 1.34-.843.463-.182.97-.317 1.397-.436.452-.127.81-.236 1.083-.368.013-.006.077-.053.145-.198l.02-.05a4.864 4.864 0 0 1-1.292-3.046v-.04c0-.317-.008-1.293.398-2.203a3.083 3.083 0 0 1 1.051-1.299c.518-.359 1.173-.561 1.972-.561ZM5.75 2a.75.75 0 0 1 0 1.5h-2a.25.25 0 0 0-.25.25v2.003a.75.75 0 0 1-1.5 0V3.75C2 2.784 2.784 2 3.75 2h2Zm14 .001h.503c.966 0 1.75.784 1.75 1.751v1.046L22 4.797v.954a.75.75 0 0 1-1.5 0v-1.5h.003v-.5a.25.25 0 0 0-.25-.25h-1.046V3.5h-.957a.75.75 0 0 1 0-1.5h1.5v.001Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-viewfinder-user', JhIconViewfinderUser);

package/icons-wc/icon-volume-xmark.js

@@ -0,0 +1,88 @@
+/**
+* SPDX-FileCopyrightText: 2025 Jack Henry
+*
+* SPDX-License-Identifier: Apache-2.0
+*/
+import {LitElement, css, html} from 'lit';
+
+export default class JhIconVolumeXmark 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-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-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 d="M11.512 4.715a.751.751 0 0 1 1.238.57v13.43a.75.75 0 0 1-1.238.57l-3.29-2.82H5a.75.75 0 0 1-.75-.75v-7.43a.75.75 0 0 1 .75-.75h3.223l3.289-2.82ZM8.988 8.853a.75.75 0 0 1-.488.181H5.75v5.932H8.5c.179 0 .352.064.488.18l2.262 1.939V6.914l-2.262 1.94Zm10.482.617a.75.75 0 0 1 1.06 1.06l-1.97 1.97 1.97 1.97a.75.75 0 0 1-1.06 1.06l-1.97-1.97-1.97 1.97a.75.75 0 1 1-1.06-1.06l1.97-1.97-1.97-1.97a.75.75 0 0 1 1.06-1.06l1.97 1.97 1.97-1.97Z"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-volume-xmark', JhIconVolumeXmark);