diff --git a/libs/components/package.json b/libs/components/package.json
index 745400d582..ef124e9483 100644
--- a/libs/components/package.json
+++ b/libs/components/package.json
@@ -111,6 +111,11 @@
       "import": "./icon-button.mjs",
       "require": "./icon-button.js"
     },
+    "./icon-button-toggle": {
+      "types": "./icon-button-toggle/icon-button-toggle.d.ts",
+      "import": "./icon-button-toggle.mjs",
+      "require": "./icon-button-toggle.js"
+    },
     "./icon-check-toggle": {
       "types": "./icon-checkbox/icon-checkbox.d.ts",
       "import": "./icon-checkbox.mjs",
diff --git a/libs/components/src/icon-button-toggle/icon-button-toggle.scss b/libs/components/src/icon-button-toggle/icon-button-toggle.scss
new file mode 100644
index 0000000000..1b770927f2
--- /dev/null
+++ b/libs/components/src/icon-button-toggle/icon-button-toggle.scss
@@ -0,0 +1,17 @@
+:host {
+  border-radius: 50%;
+  color: var(--cv-theme-on-surface-variant);
+}
+
+:host([disabled]) {
+  background-color: transparent;
+}
+
+:host([on]) {
+  --mdc-ripple-press-opacity: 0.16;
+  --mdc-ripple-hover-opacity: 0.12;
+  --mdc-ripple-focus-opacity: 0.16;
+
+  background-color: var(--cv-theme-primary-8);
+  color: var(--cv-theme-primary);
+}
diff --git a/libs/components/src/icon-button-toggle/icon-button-toggle.spec.ts b/libs/components/src/icon-button-toggle/icon-button-toggle.spec.ts
new file mode 100644
index 0000000000..7f9231c822
--- /dev/null
+++ b/libs/components/src/icon-button-toggle/icon-button-toggle.spec.ts
@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentIconButtonToggle } from './icon-button-toggle';
+
+describe('Icon button toggle', () => {
+  it('should work', () => {
+    expect(new CovalentIconButtonToggle()).toBeDefined();
+  });
+});
diff --git a/libs/components/src/icon-button-toggle/icon-button-toggle.stories.js b/libs/components/src/icon-button-toggle/icon-button-toggle.stories.js
new file mode 100644
index 0000000000..c98ad16af6
--- /dev/null
+++ b/libs/components/src/icon-button-toggle/icon-button-toggle.stories.js
@@ -0,0 +1,32 @@
+import './icon-button-toggle';
+import iconList from '../../../icons/material-codepoints.json';
+
+export default {
+  title: 'Components/Icon Button Toggle',
+  argTypes: {
+    onIcon: {
+      control: 'select',
+      options: Object.keys(iconList),
+    },
+    offIcon: {
+      control: 'select',
+      options: Object.keys(iconList),
+    },
+  },
+  args: {
+    onIcon: 'flashlight_on',
+    offIcon: 'flashlight_off',
+    disabled: false,
+    on: false,
+  },
+};
+
+const Template = ({ disabled, onIcon, offIcon, on }) => {
+  return `
+    <cv-icon-button-toggle onIcon="${onIcon}" offIcon="${offIcon}"${
+    disabled ? ` disabled` : ``
+  }${on ? ' on' : ''}>
+    </cv-icon-button-toggle>`;
+};
+
+export const Basic = Template.bind({});
diff --git a/libs/components/src/icon-button-toggle/icon-button-toggle.ts b/libs/components/src/icon-button-toggle/icon-button-toggle.ts
new file mode 100644
index 0000000000..284bceb232
--- /dev/null
+++ b/libs/components/src/icon-button-toggle/icon-button-toggle.ts
@@ -0,0 +1,22 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { IconButtonToggle } from '@material/mwc-icon-button-toggle/mwc-icon-button-toggle';
+import styles from './icon-button-toggle.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-icon-button-toggle': CovalentIconButtonToggle;
+  }
+}
+
+@customElement('cv-icon-button-toggle')
+export class CovalentIconButtonToggle extends IconButtonToggle {
+  static override styles = [
+    ...IconButtonToggle.styles,
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+}
+
+export default CovalentIconButtonToggle;
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index eef6157629..d6bfa88aee 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -17,6 +17,7 @@ export * from './expansion-panel/expansion-panel-item';
 export * from './formfield/formfield';
 export * from './icon/icon';
 export * from './icon-button/icon-button';
+export * from './icon-button-toggle/icon-button-toggle';
 export * from './icon-checkbox/icon-check-toggle';
 export * from './icon-radio/icon-radio-toggle';
 export * from './linear-progress/linear-progress';
diff --git a/libs/components/vite.config.js b/libs/components/vite.config.js
index 91f5b81520..eb3cbdebf0 100644
--- a/libs/components/vite.config.js
+++ b/libs/components/vite.config.js
@@ -29,6 +29,7 @@ module.exports = defineConfig(({ mode }) => {
           'libs/components/src/formfield/formfield',
           'libs/components/src/icon/icon',
           'libs/components/src/icon-button/icon-button',
+          'libs/components/src/icon-button-toggle/icon-button-toggle',
           'libs/components/src/icon-checkbox/icon-check-toggle',
           'libs/components/src/icon-radio/icon-radio-toggle',
           'libs/components/src/linear-progress/linear-progress',
diff --git a/package-lock.json b/package-lock.json
index 78d5b59fe0..a0f8958d3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,7 @@
         "@material/mwc-formfield": "^0.27.0",
         "@material/mwc-icon": "^0.27.0",
         "@material/mwc-icon-button": "^0.27.0",
+        "@material/mwc-icon-button-toggle": "^0.27.0",
         "@material/mwc-linear-progress": "^0.27.0",
         "@material/mwc-list": "^0.27.0",
         "@material/mwc-radio": "^0.27.0",
@@ -81,7 +82,7 @@
         "@commitlint/cli": "^18.4.3",
         "@commitlint/config-angular": "^16.2.1",
         "@commitlint/config-conventional": "^16.2.1",
-        "@covalent/tokens": "*",
+        "@covalent/tokens": "latest",
         "@nx/angular": "17.3.1",
         "@nx/cypress": "17.3.1",
         "@nx/eslint": "17.3.1",
@@ -8040,6 +8041,18 @@
         "tslib": "^2.0.1"
       }
     },
+    "node_modules/@material/mwc-icon-button-toggle": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.27.0.tgz",
+      "integrity": "sha512-PLozOm8m96vfPqTvugdCSC6V+sd337rdm/H2ZpnMbV+8gllfIkm1J02hv7rQ1O51ThrpMt4hd0URitIiEeuATg==",
+      "dependencies": {
+        "@material/mwc-base": "^0.27.0",
+        "@material/mwc-icon-button": "^0.27.0",
+        "@material/mwc-ripple": "^0.27.0",
+        "lit": "^2.0.0",
+        "tslib": "^2.0.1"
+      }
+    },
     "node_modules/@material/mwc-line-ripple": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/@material/mwc-line-ripple/-/mwc-line-ripple-0.27.0.tgz",
diff --git a/package.json b/package.json
index 4ce755234d..b2ba6056c0 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@material/mwc-formfield": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
+    "@material/mwc-icon-button-toggle": "^0.27.0",
     "@material/mwc-linear-progress": "^0.27.0",
     "@material/mwc-list": "^0.27.0",
     "@material/mwc-radio": "^0.27.0",