diff --git a/components/lib/theme/aura/megamenu/index.js b/components/lib/theme/aura/megamenu/index.js
index 4f9dc5629..4dc2bbfb5 100644
--- a/components/lib/theme/aura/megamenu/index.js
+++ b/components/lib/theme/aura/megamenu/index.js
@@ -24,7 +24,7 @@ export default {
                 separator: {
                     borderColor: '{surface.200}'
                 },
-                toggleIcon: {
+                mobileToggle: {
                     color: '{surface.500}',
                     colorHover: '{surface.600}',
                     backgroundHover: '{surface.100}'
@@ -269,7 +269,7 @@ export default {
     width: 1.75rem;
     height: 1.75rem;
     position: relative;
-    color: var(--p-megamenu-toggle-icon-color);
+    color: var(--p-megamenu-mobile-toggle-color);
     border: 0 none;
     background: transparent;
     border-radius: 50%;
@@ -278,8 +278,8 @@ export default {
 }
 
 .p-megamenu-button:hover {
-    color: var(--p-megamenu-toggle-icon-color-hover);
-    background: var(--p-megamenu-toggle-icon-background-hover);
+    color: var(--p-megamenu-mobile-toggle-color-hover);
+    background: var(--p-megamenu-mobile-toggle-background-hover);
 }
 
 .p-megamenu-button:focus-visible {
diff --git a/components/lib/theme/aura/menubar/index.js b/components/lib/theme/aura/menubar/index.js
index 95cf92ba7..ccbf06ed1 100644
--- a/components/lib/theme/aura/menubar/index.js
+++ b/components/lib/theme/aura/menubar/index.js
@@ -21,7 +21,7 @@ export default {
                 separator: {
                     borderColor: '{surface.200}'
                 },
-                toggleIcon: {
+                mobileToggle: {
                     color: '{surface.500}',
                     colorHover: '{surface.600}',
                     backgroundHover: '{surface.100}'
@@ -47,7 +47,7 @@ export default {
                 separator: {
                     borderColor: '{surface.700}'
                 },
-                toggleIcon: {
+                mobileToggle: {
                     color: '{surface.400}',
                     colorHover: '{surface.300}',
                     backgroundHover: '{surface.800}'
@@ -202,7 +202,7 @@ export default {
     width: 1.75rem;
     height: 1.75rem;
     position: relative;
-    color: var(--p-menubar-toggle-icon-color);
+    color: var(--p-menubar-mobile-toggle-color);
     border: 0 none;
     background: transparent;
     border-radius: 50%;
@@ -211,8 +211,8 @@ export default {
 }
 
 .p-menubar-button:hover {
-    color: var(--p-menubar-toggle-icon-color-hover);
-    background: var(--p-menubar-toggle-icon-background-hover);
+    color: var(--p-menubar-mobile-toggle-color-hover);
+    background: var(--p-menubar-mobile-toggle-background-hover);
 }
 
 .p-menubar-button:focus-visible {