@jack-henry/jh-icons 1.2.0

package/icons-wc/icon-fork-knife.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 JhIconForkKnife 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.968 4.406c-.505.505-.843 1.196-.843 1.97v3.864l.52 1.386h1.23V3.79c-.312.13-.627.337-.907.617Zm-2.295 6.233.702 1.873v7.364a2 2 0 1 0 4 0v-17a.75.75 0 0 0-.75-.75c-.987 0-1.982.484-2.718 1.22-.745.745-1.282 1.804-1.282 3.03v4h.75-.75c0 .09.016.18.048.263Zm2.202 9.237v-6.75h1v6.75a.5.5 0 0 1-1 0ZM7.625 8.9a.5.5 0 0 1-.5-.5V5.376a.75.75 0 1 0-1.5 0v4.5c0 1.04.49 1.967 1.25 2.562v7.688c0 .967.784 1.75 1.75 1.75h.5a1.75 1.75 0 0 0 1.75-1.75v-7.688a3.244 3.244 0 0 0 1.25-2.562v-4.5a.75.75 0 0 0-1.5 0V8.4a.5.5 0 0 1-1 0V5.376a.75.75 0 1 0-1.5 0V8.4a.5.5 0 0 1-.5.5Zm0 1.5c.473 0 .908-.164 1.25-.439a1.992 1.992 0 0 0 1.685.392 1.75 1.75 0 0 1-3.37 0c.14.03.286.047.435.047Zm1.75 2.727h-1v7c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-7Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-fork-knife', JhIconForkKnife);

package/icons-wc/icon-gauge.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 JhIconGauge 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.25 6.929a8.213 8.213 0 0 0-4.53 1.876l.86.86-1.06 1.06-.86-.859a8.213 8.213 0 0 0-1.876 4.53H5v1.5H3a.75.75 0 0 1-.75-.75c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75a.75.75 0 0 1-.75.75h-2v-1.5h1.216a8.213 8.213 0 0 0-1.876-4.53l-.86.86-1.06-1.06.86-.86a8.213 8.213 0 0 0-4.53-1.877v1.216h-1.5V6.93Zm3.015 2.84-.75-.01-.667-.342a.75.75 0 0 1 1.417.353Zm-.75-.01-.667-.342-.002.004-.006.011-.023.045-.087.171a260.15 260.15 0 0 0-1.275 2.537c-.355.716-.718 1.46-1.006 2.077-.272.582-.518 1.132-.592 1.407-.289 1.078.355 2.263 1.48 2.564 1.127.302 2.277-.402 2.565-1.48.086-.32.14-.945.182-1.6a81.49 81.49 0 0 0 .106-2.317 179.985 179.985 0 0 0 .071-2.81l.004-.19V9.77l-.75-.012Zm-.835 3.333a97.539 97.539 0 0 0-.872 1.806c-.298.635-.47 1.043-.502 1.16a.615.615 0 0 0 .42.727.615.615 0 0 0 .727-.42c.04-.144.09-.601.134-1.308a74.85 74.85 0 0 0 .093-1.965Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-gauge', JhIconGauge);

package/icons-wc/icon-gear.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 JhIconGear 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="M13.26 2.089h-.001a8.975 8.975 0 0 0-2.518 0l-.357.045a.75.75 0 0 0-.646.616l-.47 2.727A7.063 7.063 0 0 0 7.495 6.55L4.93 5.642a.75.75 0 0 0-.86.271l-.213.299A9.955 9.955 0 0 0 2.65 8.476l-.128.343a.75.75 0 0 0 .251.863l2.185 1.64a6.454 6.454 0 0 0 0 1.358l-2.185 1.64a.75.75 0 0 0-.251.864l.128.342v.001c.305.807.71 1.57 1.205 2.263v.001l.214.298a.75.75 0 0 0 .86.271l2.565-.907a7.06 7.06 0 0 0 1.773 1.073l.47 2.726a.75.75 0 0 0 .646.617l.357.045A9.96 9.96 0 0 0 12 22c.395 0 .797-.028 1.259-.086l.357-.045a.75.75 0 0 0 .646-.617l.47-2.726a7.062 7.062 0 0 0 1.773-1.073l2.565.907a.75.75 0 0 0 .86-.27l.213-.299a9.995 9.995 0 0 0 1.206-2.264v-.001l.128-.342a.75.75 0 0 0-.251-.864l-2.185-1.64c.023-.22.037-.446.037-.679 0-.232-.014-.459-.037-.678l2.185-1.64a.75.75 0 0 0 .251-.864l-.128-.342v-.001a9.958 9.958 0 0 0-1.205-2.264l-.214-.299a.75.75 0 0 0-.86-.27l-2.565.907a7.065 7.065 0 0 0-1.773-1.073l-.47-2.727a.75.75 0 0 0-.646-.616l-.357-.045Zm-2.586 4.063.448-2.598a7.179 7.179 0 0 1 1.756 0l.448 2.598a.75.75 0 0 0 .494.582c.755.26 1.435.678 2.005 1.215a.75.75 0 0 0 .765.162l2.445-.865c.332.49.614 1.019.838 1.576l-2.084 1.565a.75.75 0 0 0-.29.72c.049.304.08.6.08.894 0 .295-.031.591-.08.895a.75.75 0 0 0 .29.72l2.084 1.565a8.468 8.468 0 0 1-.838 1.576l-2.445-.866a.75.75 0 0 0-.765.162 5.57 5.57 0 0 1-2.005 1.216.75.75 0 0 0-.494.581l-.448 2.598c-.328.036-.61.052-.878.052s-.55-.016-.878-.052l-.448-2.598a.75.75 0 0 0-.495-.581 5.566 5.566 0 0 1-2.004-1.216.75.75 0 0 0-.765-.162l-2.445.866a8.463 8.463 0 0 1-.839-1.576l2.085-1.565a.75.75 0 0 0 .29-.721 5.533 5.533 0 0 1-.08-.894c0-.295.03-.591.08-.893a.75.75 0 0 0-.29-.72L4.126 8.821a8.459 8.459 0 0 1 .839-1.576l2.445.865a.75.75 0 0 0 .765-.162 5.566 5.566 0 0 1 2.004-1.215.75.75 0 0 0 .495-.582ZM10.25 12a1.75 1.75 0 1 1 3.5 0 1.75 1.75 0 0 1-3.5 0ZM12 8.75a3.25 3.25 0 1 0 0 6.5 3.25 3.25 0 0 0 0-6.5Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-gear', JhIconGear);

package/icons-wc/icon-globe.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 JhIconGlobe 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="M9.719 4.07a8.271 8.271 0 0 0-5.07 4.181h3.865c.156-1.06.378-2.026.653-2.851a9.19 9.19 0 0 1 .552-1.33Zm2.28-.319c-.085 0-.286.052-.578.422-.284.361-.574.93-.83 1.701a15.098 15.098 0 0 0-.56 2.377h3.938a15.098 15.098 0 0 0-.56-2.377c-.256-.77-.546-1.34-.83-1.701-.292-.37-.493-.422-.58-.422Zm3.487 4.5a16.946 16.946 0 0 0-.653-2.851 9.193 9.193 0 0 0-.552-1.33 8.271 8.271 0 0 1 5.07 4.181h-3.865Zm-1.333 1.5H9.847a25.576 25.576 0 0 0-.097 2.25c0 .781.034 1.535.097 2.25h4.306a25.7 25.7 0 0 0 .097-2.25 25.7 25.7 0 0 0-.097-2.25Zm1.505 4.5a27.271 27.271 0 0 0 0-4.5h4.281c.203.715.31 1.47.31 2.25s-.107 1.535-.31 2.25h-4.28Zm-1.69 1.5h-3.937c.142.895.333 1.698.56 2.377.256.77.546 1.34.83 1.702.292.37.493.421.579.421.086 0 .287-.051.579-.421.284-.362.574-.931.83-1.702.227-.68.418-1.482.56-2.377Zm.313 4.18c.207-.397.39-.846.552-1.329a16.9 16.9 0 0 0 .653-2.85h3.864a8.271 8.271 0 0 1-5.07 4.18ZM12 21.752c5.385 0 9.75-4.365 9.75-9.75s-4.365-9.75-9.75-9.75-9.75 4.365-9.75 9.75 4.365 9.75 9.75 9.75Zm-2.281-1.82a9.185 9.185 0 0 1-.552-1.329 16.946 16.946 0 0 1-.653-2.85H4.65a8.271 8.271 0 0 0 5.069 4.18Zm-1.377-5.68a27.18 27.18 0 0 1-.092-2.25c0-.773.032-1.527.092-2.25H4.06a8.255 8.255 0 0 0-.31 2.25c0 .78.108 1.535.31 2.25h4.282Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-globe', JhIconGlobe);

package/icons-wc/icon-graduation-cap.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 JhIconGraduationCap 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.593 4.328a.75.75 0 0 1 .656-.003l9.327 4.495a.75.75 0 0 1 .001 1.35l-.327.159v4.922a.75.75 0 1 1-1.5 0v-4.195l-1.5.728v4.967c0 .611-.326 1.101-.72 1.457-.393.356-.914.637-1.478.856-1.133.439-2.602.687-4.052.687-1.45 0-2.92-.248-4.052-.687-.565-.22-1.086-.5-1.478-.856-.394-.355-.72-.846-.72-1.457v-4.95l-3.33-1.626a.75.75 0 0 1 0-1.347l9.173-4.5Zm.694 10.348 4.463-2.165v4.24c0 .04-.018.156-.226.345-.208.188-.547.388-1.014.569-.93.36-2.21.586-3.51.586-1.3 0-2.58-.226-3.51-.586-.467-.181-.806-.38-1.014-.57-.209-.188-.226-.304-.226-.344v-4.216l4.38 2.14a.75.75 0 0 0 .657 0Zm-.361-8.841L4.456 9.5l7.505 3.667 7.566-3.67-7.601-3.662Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-graduation-cap', JhIconGraduationCap);

package/icons-wc/icon-grid.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 JhIconGrid 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.5 8.501h-1a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1Zm5 0h-1a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1Zm4 0h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1Zm-9 5h-1a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1Zm4 0h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1Zm6 0h-1a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1Zm-11 5h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1Zm6 0h-1a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1Zm4 0h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-grid', JhIconGrid);

package/icons-wc/icon-grip-dots-vertical.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 JhIconGripDotsVertical 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="M9 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm0 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM15 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM15 19.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" clip-rule="evenodd"/> </svg> 
+    `;
+  }
+}
+
+customElements.define('jh-icon-grip-dots-vertical', JhIconGripDotsVertical);