diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 2508367e417d9..8809d660a259a 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -228,7 +228,7 @@ export default mixins(
 				},
 				{
 					id: 'variables',
-					icon: 'code',
+					icon: 'variable',
 					label: this.$locale.baseText('mainSidebar.variables'),
 					customIconSize: 'medium',
 					position: 'top',
diff --git a/packages/editor-ui/src/plugins/icons/custom.ts b/packages/editor-ui/src/plugins/icons/custom.ts
new file mode 100644
index 0000000000000..9817abf254e84
--- /dev/null
+++ b/packages/editor-ui/src/plugins/icons/custom.ts
@@ -0,0 +1,13 @@
+import type { IconDefinition, IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
+
+export const faVariable: IconDefinition = {
+	prefix: 'fas' as IconPrefix,
+	iconName: 'variable' as IconName,
+	icon: [
+		52,
+		52,
+		[],
+		'e001',
+		'M42.6,17.8c2.4,0,7.2-2,7.2-8.4c0-6.4-4.6-6.8-6.1-6.8c-2.8,0-5.6,2-8.1,6.3c-2.5,4.4-5.3,9.1-5.3,9.1 l-0.1,0c-0.6-3.1-1.1-5.6-1.3-6.7c-0.5-2.7-3.6-8.4-9.9-8.4c-6.4,0-12.2,3.7-12.2,3.7l0,0C5.8,7.3,5.1,8.5,5.1,9.9 c0,2.1,1.7,3.9,3.9,3.9c0.6,0,1.2-0.2,1.7-0.4l0,0c0,0,4.8-2.7,5.9,0c0.3,0.8,0.6,1.7,0.9,2.7c1.2,4.2,2.4,9.1,3.3,13.5l-4.2,6 c0,0-4.7-1.7-7.1-1.7s-7.2,2-7.2,8.4s4.6,6.8,6.1,6.8c2.8,0,5.6-2,8.1-6.3c2.5-4.4,5.3-9.1,5.3-9.1c0.8,4,1.5,7.1,1.9,8.5 c1.6,4.5,5.3,7.2,10.1,7.2c0,0,5,0,10.9-3.3c1.4-0.6,2.4-2,2.4-3.6c0-2.1-1.7-3.9-3.9-3.9c-0.6,0-1.2,0.2-1.7,0.4l0,0 c0,0-4.2,2.4-5.6,0.5c-1-2-1.9-4.6-2.6-7.8c-0.6-2.8-1.3-6.2-2-9.5l4.3-6.2C35.5,16.1,40.2,17.8,42.6,17.8z',
+	],
+};
diff --git a/packages/editor-ui/src/plugins/icons.ts b/packages/editor-ui/src/plugins/icons/index.ts
similarity index 93%
rename from packages/editor-ui/src/plugins/icons.ts
rename to packages/editor-ui/src/plugins/icons/index.ts
index d1e59d4bcd4fb..90257a28ce316 100644
--- a/packages/editor-ui/src/plugins/icons.ts
+++ b/packages/editor-ui/src/plugins/icons/index.ts
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 
-import { IconDefinition, library } from '@fortawesome/fontawesome-svg-core';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import {
 	faAngleDoubleLeft,
 	faAngleDown,
@@ -15,7 +16,6 @@ import {
 	faBook,
 	faBoxOpen,
 	faBug,
-	faBracketsCurly,
 	faCalculator,
 	faCalendar,
 	faChartBar,
@@ -129,12 +129,12 @@ import {
 	faStickyNote as faSolidStickyNote,
 	faUserLock,
 } from '@fortawesome/free-solid-svg-icons';
+import { faVariable } from './custom';
 import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function addIcon(icon: any) {
-	library.add(icon as IconDefinition);
+function addIcon(icon: IconDefinition) {
+	library.add(icon);
 }
 
 addIcon(faAngleDoubleLeft);
@@ -240,7 +240,7 @@ addIcon(faSignOutAlt);
 addIcon(faSlidersH);
 addIcon(faSpinner);
 addIcon(faSolidStickyNote);
-addIcon(faStickyNote);
+addIcon(faStickyNote as IconDefinition);
 addIcon(faStop);
 addIcon(faSun);
 addIcon(faSync);
@@ -260,6 +260,7 @@ addIcon(faUser);
 addIcon(faUserCircle);
 addIcon(faUserFriends);
 addIcon(faUsers);
+addIcon(faVariable);
 addIcon(faVideo);
 addIcon(faTree);
 addIcon(faUserLock);