@jack-henry/jh-icons 1.2.0

package/icons-wc/icon-file.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 JhIconFile 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 3.251a.75.75 0 0 0-.75.75v16c0 .414.336.75.75.75h12a.75.75 0 0 0 .75-.75v-9a.75.75 0 0 0-.22-.53l-7-7a.75.75 0 0 0-.53-.22H6Zm.75 16v-14.5h3.5v6.25c0 .414.336.75.75.75h6.25v7.5H6.75Zm9.439-9-4.439-4.44v4.44h4.439Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-file', JhIconFile);

package/icons-wc/icon-fingerprint.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 JhIconFingerprint 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="M11.998 3.502c-2.381 0-4.312.7-5.377 1.356a.75.75 0 0 1-.787-1.277c1.305-.805 3.509-1.58 6.164-1.58 2.67 0 4.71.78 6.109 1.564a.75.75 0 1 1-.733 1.309c-1.22-.684-3.011-1.372-5.376-1.372Zm-.745 2.43C8.255 6.217 5.558 7.828 4.28 9.82a.75.75 0 0 1-1.262-.81C4.58 6.574 7.724 4.76 11.11 4.438c3.43-.326 7.163.873 9.846 4.531a.75.75 0 1 1-1.21.887c-2.34-3.192-5.538-4.205-8.494-3.925ZM9.67 8.607c3.82-1.507 8.563 1.228 9.143 5.413.126.91-.145 1.421-.462 1.73-.35.343-.838.512-1.205.557a1.886 1.886 0 0 1-1.176-.28c-.35-.224-.651-.605-.696-1.273-.072-1.068-.497-1.899-1.155-2.45-.646-.54-1.456-.762-2.227-.737-1.495.049-3.156 1.09-3.156 3.014 0 1.413.216 2.805 1.004 4.086.79 1.281 2.099 2.365 4.122 3.268a.75.75 0 0 0 .612-1.37c-1.838-.82-2.87-1.732-3.456-2.685-.588-.954-.782-2.034-.782-3.299 0-.861.74-1.483 1.705-1.515.46-.015.894.12 1.215.388.31.26.574.693.621 1.4.079 1.164.65 1.966 1.383 2.436a3.38 3.38 0 0 0 2.167.506c.598-.073 1.426-.341 2.072-.972.68-.665 1.086-1.662.9-3.01-.713-5.14-6.45-8.468-11.18-6.603-2.286.902-4.007 2.425-4.887 4.427-.88 2.004-.878 4.394.105 6.948a.75.75 0 1 0 1.4-.538c-.87-2.259-.824-4.23-.132-5.806C6.3 10.665 7.683 9.39 9.67 8.607Zm2.284 5.4a.75.75 0 0 1 .76.74c.04 2.693 2.468 4.334 5.093 3.82a.75.75 0 0 1 .287 1.473c-3.361.657-6.824-1.468-6.88-5.271a.75.75 0 0 1 .74-.761Zm.004-3.358c.887-.018 2.012.315 2.906 1.017.873.685 1.506 1.704 1.506 3.092a.75.75 0 1 0 1.5 0c0-1.909-.895-3.341-2.08-4.272-1.165-.915-2.628-1.362-3.863-1.336-2.367.049-5.325 1.552-5.723 4.978-.38 3.268 1.62 6.224 3.02 7.568a.75.75 0 0 0 1.039-1.082c-1.237-1.188-2.871-3.709-2.569-6.313.284-2.447 2.385-3.613 4.264-3.652Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-fingerprint', JhIconFingerprint);

package/icons-wc/icon-flag.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 JhIconFlag 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 3.001a.75.75 0 0 0-1.5 0v18a.75.75 0 0 0 1.5 0v-6.883a5.323 5.323 0 0 1 1.576-.71c1.144-.303 2.787-.325 4.726.96 2.347 1.557 4.703 1.553 6.443 1.169a9.949 9.949 0 0 0 2.093-.718 8.497 8.497 0 0 0 .805-.436l.014-.009.004-.003.002-.001c.001 0 .001-.001-.413-.626l.414.625a.75.75 0 0 0 .336-.625V5.258a.75.75 0 0 0-1.203-.598l-.002.001-.022.016c-.021.015-.056.04-.102.07a6.652 6.652 0 0 1-1.938.844c-1.236.313-2.854.314-4.497-.93-2.107-1.597-4.495-1.575-6.275-1.197-.77.163-1.443.395-1.961.607v-1.07Zm0 2.711v6.685a6.9 6.9 0 0 1 1.191-.439c1.522-.403 3.613-.382 5.94 1.16 1.92 1.273 3.83 1.277 5.29.954a8.448 8.448 0 0 0 2.079-.76V6.547c-.39.18-.863.362-1.4.498-1.564.395-3.68.394-5.77-1.19-1.626-1.232-3.505-1.254-5.058-.925a10.163 10.163 0 0 0-2.272.781Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-flag', JhIconFlag);

package/icons-wc/icon-floppy-disk.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 JhIconFloppyDisk 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 4.001a.75.75 0 0 1 .75-.75h13a.75.75 0 0 1 .53.22l3 3c.141.14.22.331.22.53v13a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75v-16Zm1.5.75h2.5v4.25c0 .414.336.75.75.75h8a.75.75 0 0 0 .75-.75v-4.19l2.5 2.5v11.94H4.75v-14.5Zm10.5 3.5v-3.5h-6.5v3.5h6.5Zm-8.25 4a.75.75 0 0 0-.75.75v4c0 .414.336.75.75.75h10a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 0-.75-.75H7Zm.75 4v-2.5h8.5v2.5h-8.5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-floppy-disk', JhIconFloppyDisk);

package/icons-wc/icon-flower.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 JhIconFlower 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 3.753a3.88 3.88 0 0 0-.733.084c-.332.066-.615.434-.523.939l.52 2.86a.746.746 0 0 0 .214.402 4.039 4.039 0 0 1 1.044 0 .746.746 0 0 0 .214-.402l.52-2.86c.092-.505-.191-.873-.523-.94A3.862 3.862 0 0 0 12 3.754ZM9.566 8.83a.746.746 0 0 0-.133-.434L7.778 6.005c-.292-.421-.753-.482-1.034-.294a3.863 3.863 0 0 0-.578.459 3.85 3.85 0 0 0-.458.577c-.188.282-.128.743.293 1.034l2.391 1.655a.746.746 0 0 0 .435.133c.213-.277.461-.526.739-.739Zm-3.88.558-.538-.373c-.947-.656-1.424-1.998-.688-3.1.18-.271.398-.558.646-.806a5.34 5.34 0 0 1 .805-.645c1.102-.736 2.445-.26 3.1.687l.375.542-.118-.649c-.206-1.133.406-2.42 1.706-2.678A5.34 5.34 0 0 1 12 2.253c.35 0 .707.05 1.026.113 1.3.259 1.912 1.545 1.706 2.678l-.117.645.373-.54c.655-.946 1.997-1.423 3.1-.687.27.18.557.398.805.646s.465.535.646.805c.736 1.103.26 2.445-.688 3.1l-.538.373.644-.117c1.133-.206 2.42.406 2.678 1.706.064.32.113.676.113 1.026s-.049.707-.113 1.026c-.259 1.3-1.545 1.912-2.678 1.706l-.645-.117.54.373c.946.655 1.423 1.997.687 3.1a5.33 5.33 0 0 1-.646.805 5.335 5.335 0 0 1-.805.646c-1.103.736-2.445.26-3.1-.688l-.373-.538.117.644c.206 1.133-.406 2.42-1.706 2.679a5.338 5.338 0 0 1-1.026.112c-.35 0-.707-.049-1.026-.112-1.3-.26-1.912-1.546-1.706-2.679l.117-.644-.373.538c-.655.947-1.997 1.424-3.1.688a5.337 5.337 0 0 1-.805-.646 5.335 5.335 0 0 1-.646-.805c-.736-1.102-.26-2.445.688-3.1l.535-.37-.641.116c-1.133.206-2.42-.406-2.678-1.706a5.341 5.341 0 0 1-.113-1.026c0-.35.049-.707.113-1.026.259-1.3 1.545-1.912 2.678-1.706l.644.117Zm8.88 6.22a.746.746 0 0 1-.133-.431 4.02 4.02 0 0 0 .742-.743c.15-.001.3.043.432.133l2.39 1.655c.422.292.482.752.294 1.034a3.863 3.863 0 0 1-.459.578 3.85 3.85 0 0 1-.577.458c-.282.188-.742.128-1.034-.293l-1.655-2.391Zm-5.741-1.174c.214.279.463.529.742.743.001.15-.043.3-.133.43L7.779 18c-.292.42-.752.481-1.034.293a3.864 3.864 0 0 1-.577-.459 3.862 3.862 0 0 1-.46-.577c-.187-.282-.127-.742.295-1.034l2.39-1.655a.746.746 0 0 1 .432-.133Zm6.782-4.999a.746.746 0 0 1-.435.133 4.02 4.02 0 0 0-.739-.739.746.746 0 0 1 .133-.434l1.655-2.391c.292-.422.752-.482 1.034-.294.222.148.423.304.577.459.155.154.311.355.46.577.187.282.127.743-.295 1.034l-2.39 1.655ZM8.035 11.48a4.037 4.037 0 0 0 0 1.048.746.746 0 0 1-.4.212l-2.86.52c-.505.092-.873-.191-.94-.524a3.862 3.862 0 0 1-.083-.732c0-.219.031-.471.084-.733.066-.332.434-.615.938-.523l2.861.52a.746.746 0 0 1 .4.212Zm8.33 1.258a.746.746 0 0 1-.4-.212 4.039 4.039 0 0 0 0-1.048.746.746 0 0 1 .4-.212l2.86-.52c.505-.092.873.191.94.523.052.262.083.515.083.733 0 .219-.031.471-.084.733-.066.332-.434.615-.939.523l-2.86-.52Zm-4.89 3.23a4.049 4.049 0 0 0 1.05 0 .745.745 0 0 1 .21.399l.521 2.86c.092.505-.191.873-.523.94a3.86 3.86 0 0 1-.733.083 3.86 3.86 0 0 1-.733-.083c-.332-.067-.615-.435-.523-.94l.52-2.86a.745.745 0 0 1 .21-.399ZM12 10.005a1.999 1.999 0 1 0 0 3.998 1.999 1.999 0 0 0 0-3.998Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-flower', JhIconFlower);

package/icons-wc/icon-folder.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 JhIconFolder 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="m8.75 4.751 1.75 2.25h8.75a1 1 0 0 1 1 1v10.25a1 1 0 0 1-1 1H4.75a1 1 0 0 1-1-1v-12.5a1 1 0 0 1 1-1h4Zm2.484.75-1.3-1.67a1.5 1.5 0 0 0-1.184-.58h-4a2.5 2.5 0 0 0-2.5 2.5v12.5a2.5 2.5 0 0 0 2.5 2.5h14.5a2.5 2.5 0 0 0 2.5-2.5V8.001a2.5 2.5 0 0 0-2.5-2.5h-8.016Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-folder', JhIconFolder);

package/icons-wc/icon-football.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 JhIconFootball 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.53 7.531c1.727-1.726 4.566-2.472 7.19-2.749l.25.25 4 4 .249.249c-.277 2.624-1.023 5.464-2.75 7.19-1.726 1.726-4.565 2.472-7.19 2.749l-.249-.25-4-4-.249-.248c.277-2.625 1.023-5.464 2.75-7.19Zm-2.88 9.181 2.64 2.639a28.751 28.751 0 0 1-2.595-.045 28.763 28.763 0 0 1-.045-2.594Zm14.7-9.422a28.751 28.751 0 0 0-.045-2.594 28.755 28.755 0 0 0-2.594-.045l2.639 2.64Zm1.395-3.371L20 4l.745-.083a.75.75 0 0 0-.662-.662L20 4l.082-.745h-.002l-.007-.001-.022-.003a10.863 10.863 0 0 0-.388-.034 29.422 29.422 0 0 0-4.73.036c-2.783.253-6.266 1.02-8.463 3.217-2.198 2.197-2.964 5.68-3.217 8.462a29.422 29.422 0 0 0-.036 4.731 17.376 17.376 0 0 0 .034.388l.003.023v.008l.746-.08-.745.083a.75.75 0 0 0 .662.663L4 20c-.083.745-.083.745-.082.746h.009l.022.003a10.412 10.412 0 0 0 .388.034 29.414 29.414 0 0 0 4.73-.036c2.783-.253 6.266-1.02 8.463-3.217 2.198-2.197 2.964-5.68 3.217-8.462a29.414 29.414 0 0 0 .036-4.73 17.638 17.638 0 0 0-.034-.389l-.003-.022v-.008Zm-10.16 5.607a.75.75 0 0 0-1.06 1.06l1.414 1.415-.939.94-.414-.415a.75.75 0 1 0-1.06 1.06l1.767 1.769a.75.75 0 1 0 1.06-1.061l-.292-.293.939-.94 1.414 1.415a.75.75 0 0 0 1.06-1.06L13.062 12l.939-.94.293.294a.75.75 0 0 0 1.06-1.061l-1.767-1.768a.75.75 0 0 0-1.06 1.06l.413.415-.939.94-1.414-1.415Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-football', JhIconFootball);