@jack-henry/jh-icons 1.2.0

package/icons-wc/icon-eye-slash.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 JhIconEyeSlash 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.672 4.673.708-.707 2.956 2.956c1.06-.42 2.261-.671 3.664-.671 4.354 0 6.76 2.427 9.066 4.753l.464.466a.75.75 0 0 1 0 1.061l-.464.467c-1.094 1.103-2.21 2.23-3.546 3.108l2.515 2.515-.707.708L4.672 4.673ZM6.48 7.895c-1.336.88-2.452 2.005-3.546 3.109l-.464.466a.75.75 0 0 0 0 1.061l.464.467C5.24 15.324 7.646 17.75 12 17.75c1.403 0 2.604-.252 3.664-.672l-1.176-1.176A8.57 8.57 0 0 1 12 16.25c-3.65 0-5.635-1.933-7.941-4.25 1.166-1.172 2.25-2.245 3.507-3.02L6.48 7.895Zm2.812 2.812a3 3 0 0 0 4 4.001l-4-4Zm.22-2.609 1.195 1.195a3 3 0 0 1 4 4l1.727 1.727c1.258-.775 2.341-1.848 3.507-3.02-2.306-2.316-4.29-4.25-7.941-4.25a8.57 8.57 0 0 0-2.488.348Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-eye-slash', JhIconEyeSlash);

package/icons-wc/icon-eye.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 JhIconEye 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 6.25c-4.354 0-6.76 2.428-9.066 4.754l-.464.466a.75.75 0 0 0 0 1.061l.464.467C5.24 15.324 7.646 17.751 12 17.751c4.354 0 6.76-2.427 9.066-4.753l.464-.467a.75.75 0 0 0 0-1.06l-.464-.467C18.76 8.678 16.354 6.25 12 6.25Zm0 10c-3.65 0-5.635-1.932-7.941-4.25C6.365 9.685 8.349 7.75 12 7.75c3.65 0 5.635 1.934 7.941 4.25-2.306 2.318-4.29 4.25-7.941 4.25ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-eye', JhIconEye);

package/icons-wc/icon-face-baby.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 JhIconFaceBaby 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 12a6.5 6.5 0 0 1 6.732-6.495c-.037.489-.128.766-.214.93-.1.193-.224.293-.446.439a.77.77 0 0 1-.221.088c-.1.025-.204.038-.292.039a.75.75 0 0 0-1.309.5c0 .533.41.791.62.88.227.094.475.12.68.12.41 0 .935-.105 1.344-.373.286-.187.672-.46.953-.996.193-.37.317-.825.371-1.402A6.5 6.5 0 1 1 5.5 12ZM12 4a8.002 8.002 0 0 0-7.335 4.804 3.251 3.251 0 0 0 0 6.394 8.002 8.002 0 0 0 14.67 0 3.25 3.25 0 0 0 0-6.394A8.002 8.002 0 0 0 12 4Zm7.89 6.674a8.054 8.054 0 0 1 0 2.654 1.746 1.746 0 0 0 0-2.655ZM3.5 12c0-.531.236-1.007.61-1.327a8.053 8.053 0 0 0 0 2.654A1.746 1.746 0 0 1 3.5 12Zm4-.5a2 2 0 1 1 4 0 .75.75 0 0 1-1.5 0 .5.5 0 0 0-1 0 .75.75 0 0 1-1.5 0Zm7-2a2 2 0 0 0-2 2 .75.75 0 0 0 1.5 0 .5.5 0 0 1 1 0 .75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Zm-4.75 4a.75.75 0 0 1 .75.751c.004.016.046.186.343.396.283.2.694.353 1.157.353a2.03 2.03 0 0 0 1.157-.353c.297-.21.339-.38.343-.396v-.001a.75.75 0 0 1 1.5 0c0 .694-.476 1.267-.975 1.62A3.531 3.531 0 0 1 12 16.5a3.53 3.53 0 0 1-2.025-.63c-.5-.354-.975-.926-.975-1.62a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-face-baby', JhIconFaceBaby);

package/icons-wc/icon-face-frown.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 JhIconFaceFrown 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.75 12a8.25 8.25 0 1 1 16.5.001 8.25 8.25 0 0 1-16.5 0ZM12 2.25c-5.385 0-9.75 4.366-9.75 9.75 0 5.386 4.365 9.75 9.75 9.75s9.75-4.364 9.75-9.75c0-5.384-4.365-9.75-9.75-9.75ZM8.75 11a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm7.75-1.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm-8.916 7.125a.75.75 0 0 0 1.04-.208c1.703-2.555 5.049-2.555 6.752 0a.75.75 0 1 0 1.248-.832c-2.297-3.445-6.951-3.445-9.248 0a.75.75 0 0 0 .208 1.04Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-face-frown', JhIconFaceFrown);

package/icons-wc/icon-face-hat.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 JhIconFaceHat 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="M17.72 8.519c.072.247.13.457.174.614l.378.04c.805.093 1.49.205 1.986.34.242.065.484.147.68.257.098.054.22.136.328.255.11.125.234.329.234.6a.902.902 0 0 1-.235.601c-.106.12-.23.202-.327.256-.196.11-.438.192-.68.257-.291.079-.647.15-1.054.214a9.537 9.537 0 0 1-.226 1.355 10.787 10.787 0 0 1-.505 1.483 13.267 13.267 0 0 1-.276.617l-.019.038-.005.01-.001.004-.001.001-.381-.19.38.19a.75.75 0 0 1-.567.408 9.764 9.764 0 0 1-1.105 2.258C15.41 19.75 13.83 20.876 12 20.876s-3.41-1.125-4.498-2.75a9.767 9.767 0 0 1-1.105-2.257.75.75 0 0 1-.568-.408l.381-.19-.381.19v-.002l-.003-.003-.005-.011-.018-.038a13.453 13.453 0 0 1-.276-.619 10.796 10.796 0 0 1-.505-1.48 9.389 9.389 0 0 1-.225-1.354 10.288 10.288 0 0 1-1.055-.215 3.062 3.062 0 0 1-.68-.257 1.249 1.249 0 0 1-.327-.256.903.903 0 0 1-.235-.6c0-.272.124-.476.235-.6.106-.12.23-.202.327-.256.196-.11.438-.192.68-.257.497-.135 1.18-.247 1.986-.34l.378-.04a45.716 45.716 0 0 1 .81-2.628c.254-.73.55-1.49.857-2.078.151-.29.324-.574.517-.796.162-.187.487-.505.96-.505.639 0 1.091.232 1.417.4l.106.054A2.43 2.43 0 0 0 12 3.876c.594 0 .914-.14 1.227-.296l.106-.054c.326-.168.778-.4 1.417-.4.473 0 .798.318.96.505.193.222.366.506.517.796.307.589.603 1.349.856 2.078.256.735.479 1.467.637 2.014Zm-7.47 7.607c-.407 0-1.369-.065-2.196-.126.2.471.435.905.694 1.292.912 1.362 2.082 2.084 3.252 2.084s2.34-.722 3.252-2.084c.26-.387.493-.82.694-1.292-.827.061-1.789.126-2.196.126-.628 0-1.055-.321-1.296-.503l-.029-.022c-.265-.199-.33-.225-.425-.225-.095 0-.16.026-.425.225l-.03.022c-.24.182-.667.503-1.295.503Zm-6.462-5.044.003-.002-.003.002Zm16.424 0-.003-.002a.297.297 0 0 0 .003.002Zm0-.913-.003.002h.001l.002-.002Zm-16.42.002a.026.026 0 0 1-.004-.002l.003.002Zm11.88 2.455h-.25c-1.013.02-2.597.935-2.142 1.643 1.026 1.603 4.239-.702 3.775-1.332-.151-.204-.72-.302-1.382-.311Zm-8.727.312c.171-.23.87-.325 1.634-.31 1.012.018 2.595.933 2.14 1.642-1.025 1.602-4.237-.703-3.774-1.332Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-face-hat', JhIconFaceHat);

package/icons-wc/icon-face-smile.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 JhIconFaceSmile 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.75 12.001a8.25 8.25 0 1 1 16.5 0 8.25 8.25 0 0 1-16.5 0ZM12 2.251c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75-4.365-9.75-9.75-9.75Zm-3.25 8.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm7.75-1.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm-7.876 3.834a.75.75 0 1 0-1.248.832c2.297 3.445 6.951 3.445 9.248 0a.75.75 0 1 0-1.248-.832c-1.703 2.555-5.049 2.555-6.752 0Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-face-smile', JhIconFaceSmile);

package/icons-wc/icon-file-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 JhIconFileFilled 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.25 4.001a.75.75 0 0 1 .75-.75h4.25v7.75c0 .414.336.75.75.75h7.75v8.25a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75v-16Zm13.06 6.25-6.56-6.56v6.56h6.56Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-file-filled', JhIconFileFilled);

package/icons-wc/icon-file-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 JhIconFilePlu 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.25 4A.75.75 0 0 1 6 3.25h6a.75.75 0 0 1 .53.22l6 6.001c.141.14.22.332.22.53v10a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75V4Zm1.5.75v14.5h10.5v-8.5H12a.75.75 0 0 1-.75-.75V4.75h-4.5Zm6 1.062V9.25h3.439L12.75 5.81Zm0 6.689a.75.75 0 0 0-1.5 0v1.75H9.5a.75.75 0 0 0 0 1.5h1.75v1.75a.75.75 0 0 0 1.5 0v-1.75h1.75a.75.75 0 0 0 0-1.5h-1.75V12.5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-file-plus', JhIconFilePlu);