@jack-henry/jh-icons 1.2.0

package/icons-wc/icon-id-card.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 JhIconIdCard 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="M19.111 18.5H4.89c-1.35 0-2.389-1.11-2.389-2.409V7.91C2.5 6.611 3.538 5.5 4.889 5.5H19.11c1.35 0 2.389 1.111 2.389 2.41v8.181c0 1.298-1.038 2.41-2.389 2.41ZM4.89 17h14.22a.9.9 0 0 0 .889-.909V7.91a.9.9 0 0 0-.888-.91H4.89a.9.9 0 0 0-.89.91v8.181a.9.9 0 0 0 .889.91ZM14 9.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm.5 1.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1h-4Zm-.5 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 1 1 0 1h-4a.5.5 0 0 1-.5-.5Zm-2.84-3.05c.028-.765-.265-1.394-.757-1.817-.473-.407-1.082-.588-1.658-.588-.577 0-1.186.183-1.66.587-.492.42-.794 1.044-.775 1.808v.015c.023.493.085.983.184 1.466a3.901 3.901 0 0 0-.261.12c-.445.223-1.233.74-1.233 1.7v.51a.75.75 0 0 0 1.5 0v-.51c0-.03.032-.172.407-.36a2.827 2.827 0 0 1 .627-.223l.006-.002a.75.75 0 0 0 .57-.943 7.859 7.859 0 0 1-.3-1.817c-.007-.315.106-.501.249-.623.161-.137.409-.227.687-.228.279 0 .522.09.678.224.137.118.248.302.237.62a8.102 8.102 0 0 1-.302 1.826.75.75 0 0 0 .578.943h.007l.037.01a2.917 2.917 0 0 1 .603.212c.385.188.416.332.416.361v.51a.75.75 0 0 0 1.5 0v-.51c0-.97-.804-1.487-1.254-1.708a3.992 3.992 0 0 0-.27-.12c.098-.48.16-.966.183-1.455v-.008Zm-1.223 2.708h.001Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-id-card', JhIconIdCard);

package/icons-wc/icon-image-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 JhIconImageFilled 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 5A.25.25 0 0 1 5 4.75h14a.25.25 0 0 1 .25.25v9.19l-2.72-2.72-.53-.53-.53.53-1.97 1.97-3.97-3.97L9 8.94l-.53.53-3.72 3.72V5Zm-1.5 9.69V5c0-.966.784-1.75 1.75-1.75h14c.966 0 1.75.784 1.75 1.75v14A1.75 1.75 0 0 1 19 20.75H5A1.75 1.75 0 0 1 3.25 19v-4.31Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-image-filled', JhIconImageFilled);

package/icons-wc/icon-image.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 JhIconImage 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 5A.25.25 0 0 1 5 4.75h14a.25.25 0 0 1 .25.25v9.19l-2.72-2.72-.53-.53-.53.53-1.97 1.97-3.97-3.97L9 8.94l-.53.53-3.72 3.72V5Zm0 10.31L9 11.06l3.44 3.44-4.75 4.75H5a.25.25 0 0 1-.25-.25v-3.69Zm5.06 3.94L16 13.06l3.25 3.25V19a.25.25 0 0 1-.25.25H9.81ZM8 20.75H5A1.75 1.75 0 0 1 3.25 19V5c0-.966.784-1.75 1.75-1.75h14c.966 0 1.75.784 1.75 1.75v14A1.75 1.75 0 0 1 19 20.75H8Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-image', JhIconImage);

package/icons-wc/icon-inbox.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 JhIconInbox 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.7 5.25h-.408l-.222.343-3.7 5.728-.12.185V16.5A2.756 2.756 0 0 0 5 19.25h14a2.756 2.756 0 0 0 2.75-2.75v-4.994l-.12-.185-3.7-5.728-.222-.343H6.7Zm13.099 6-2.907-4.5H7.108l-2.907 4.5H9a.75.75 0 0 1 .75.75A2.259 2.259 0 0 0 12 14.25 2.259 2.259 0 0 0 14.25 12a.75.75 0 0 1 .75-.75h4.799ZM3.75 12.75h4.576c.35 1.707 1.867 3 3.674 3a3.762 3.762 0 0 0 3.674-3h4.576v3.75c0 .686-.564 1.25-1.25 1.25H5c-.686 0-1.25-.564-1.25-1.25v-3.75Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-inbox', JhIconInbox);

package/icons-wc/icon-layer-group.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 JhIconLayerGroup 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 4.25a.75.75 0 0 0-.75.75v8c0 .414.336.75.75.75h2.25V16c0 .414.336.75.75.75h2.25V19c0 .414.336.75.75.75h11a.75.75 0 0 0 .75-.75v-8a.75.75 0 0 0-.75-.75h-2.25V8a.75.75 0 0 0-.75-.75h-2.25V5a.75.75 0 0 0-.75-.75h-11Zm13.25 6v-1.5h-9.5v6.5h1.5V11a.75.75 0 0 1 .75-.75h7.25ZM5.75 8v4.25h-1.5v-6.5h9.5v1.5H6.5a.75.75 0 0 0-.75.75Zm4.5 10.25v-6.5h9.5v6.5h-9.5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-layer-group', JhIconLayerGroup);

package/icons-wc/icon-life-preserver.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 JhIconLifePreserver 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="M21.033 10A9.263 9.263 0 0 0 14 2.968 1 1 0 0 0 13 2h-2a1 1 0 0 0-1 .967A9.263 9.263 0 0 0 2.968 10 1 1 0 0 0 2 11v2a1 1 0 0 0 .967.998A9.263 9.263 0 0 0 10 21.034 1 1 0 0 0 11 22h2a1 1 0 0 0 1-.967A9.263 9.263 0 0 0 21.032 14 1 1 0 0 0 22 13v-2a1 1 0 0 0-.967-1ZM10.861 4.334a7.814 7.814 0 0 1 2.278 0l-.61 2.443a5.31 5.31 0 0 0-1.058 0l-.61-2.443Zm-1.455.362a7.772 7.772 0 0 0-4.711 4.71l2.443.61a5.268 5.268 0 0 1 2.877-2.877l-.61-2.443Zm-5.073 6.166a7.815 7.815 0 0 0 0 2.278l2.443-.61a5.313 5.313 0 0 1 0-1.058l-2.443-.61Zm.362 3.733a7.772 7.772 0 0 0 4.71 4.711l.61-2.443a5.268 5.268 0 0 1-2.877-2.877l-2.443.61Zm6.166 5.073a7.815 7.815 0 0 0 2.278 0l-.61-2.443a5.322 5.322 0 0 1-1.058 0l-.61 2.443Zm3.733-.362a7.772 7.772 0 0 0 4.711-4.71l-2.443-.61a5.268 5.268 0 0 1-2.877 2.877l.61 2.443Zm5.073-6.166a7.801 7.801 0 0 0 0-2.278l-2.443.61a5.294 5.294 0 0 1 0 1.059l2.443.609Zm-.362-3.733a7.772 7.772 0 0 0-4.71-4.711l-.61 2.443a5.267 5.267 0 0 1 2.877 2.877l2.443-.61ZM12 8.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-life-preserver', JhIconLifePreserver);

package/icons-wc/icon-lightbulb.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 JhIconLightbulb 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.75A5.25 5.25 0 0 0 6.75 9c0 2.333 1.504 4.588 3.5 5.293.3.106.5.39.5.707v1.24h2.5V15a.75.75 0 0 1 .5-.707c1.996-.706 3.5-2.96 3.5-5.293 0-2.9-2.35-5.25-5.25-5.25ZM5.25 9a6.75 6.75 0 0 1 13.5 0c0 2.707-1.608 5.398-4 6.504v1.486a.75.75 0 0 1-.75.75h-4a.75.75 0 0 1-.75-.75v-1.486c-2.391-1.106-4-3.797-4-6.504Zm4 10a.75.75 0 0 1 .75-.75h4a.75.75 0 1 1 0 1.5h-4a.75.75 0 0 1-.75-.75ZM11 20.25a.75.75 0 1 0 0 1.5h2a.75.75 0 0 0 0-1.5h-2Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-lightbulb', JhIconLightbulb);

package/icons-wc/icon-link.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 JhIconLink 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="M15.359 5.46a2.259 2.259 0 0 1 3.182 0 2.259 2.259 0 0 1 0 3.182l-4.243 4.242a2.259 2.259 0 0 1-3.182 0 .75.75 0 0 0-1.06 1.06 3.759 3.759 0 0 0 5.303 0L19.6 9.703a3.759 3.759 0 0 0 0-5.303 3.76 3.76 0 0 0-5.303 0l-2.12 2.12a.75.75 0 1 0 1.06 1.06l2.122-2.12Zm-5.657 5.656a2.259 2.259 0 0 1 3.182 0 .75.75 0 0 0 1.06-1.06 3.759 3.759 0 0 0-5.303 0L4.4 14.297a3.759 3.759 0 0 0 0 5.304 3.759 3.759 0 0 0 5.303 0l2.121-2.122a.75.75 0 0 0-1.06-1.06L8.64 18.54a2.26 2.26 0 0 1-3.182 0 2.259 2.259 0 0 1 0-3.181l4.243-4.243Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-link', JhIconLink);