diff --git a/core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig b/core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig
index 5d85f50..607e441 100644
--- a/core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig
+++ b/core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig
@@ -13,32 +13,8 @@
  * @ingroup themeable
  */
 #}
-{% macro button(button) %}
-  {# Value of the button item. #}
-  {% if button.image_alternative %}
-    {% if button.image_alternative in ['format', 'styles']  %}
-      <a href="#" role="button" title="{{ button.button_text }}" aria-label="{{ button.button_text }}">
-        <span class="ckeditor-button-dropdown">{{ button.button_text }}<span class="ckeditor-button-arrow"></span></span>
-      </a>
-    {% elseif button.image_alternative == 'separator' %}
-      <a href="#" role="button" title="{{ button.button_text }}" aria-label="{{ button.button_text }}" class="ckeditor-separator"></a>
-    {% else %}
-      <a href="#" role="button" title="{{ button.label }}" aria-label="{{ button.label }}" class="cke-icon-only cke_{{ button.direction|default('ltr') }}" >
-        <span class="cke_button_icon cke_button__{{ button.image_alternative }}_icon">{{ button.label }}</span>
-      </a>
-    {% endif %}
-  {% elseif button.image_url %}
-    <a href="#" role="button" title="{{ button.label }}" aria-label="{{ button.label }}">
-      <span class="cke_button_icon">
-        <img src="{{ button.image_url }}" title="{{ button.label }}" alt="{{ button.label }}">
-      </span>
-    </a>
-  {% else %}
-    ?
-  {% endif %}
-{% endmacro %}
-
-{% import _self as ckeditor %}
+{# Import the Button theme to this main template #}
+{% import "@ckeditor/ckeditor-buttons-macro.twig" as ckeditor %}

 {% spaceless %}
   <fieldset role="form" aria-labelledby="ckeditor-button-configuration ckeditor-button-description">

diff --git a/core/modules/ckeditor/templates/ckeditor-buttons-macro.twig b/core/modules/ckeditor/templates/ckeditor-buttons-macro.twig
new file mode 100644
index 0000000..d936eb1
--- /dev/null
+++ b/core/modules/ckeditor/templates/ckeditor-buttons-macro.twig
@@ -0,0 +1,40 @@
+{#
+/**
+ * @file
+ * Default button theme for CkEditor Buttons.
+ *
+ * Available variables:
+ * - button: array of the buttons that needed to be rendered.
+ * - image_alternative: The name of the buttons.
+ * - direction: The language direction for the buttons.
+ * - image_url: If the button has an image as label then the full URL of the image.
+ *
+ * @see template_preprocess_ckeditor_settings_toolbar()
+ *
+ * @ingroup themeable
+ */
+#}
+{% macro button(button) %}
+  {# Value of the button item. #}
+  {% if button.image_alternative %}
+    {% if button.image_alternative in ['format', 'styles']  %}
+      <a href="#" role="button" title="{{ button.button_text }}" aria-label="{{ button.button_text }}">
+        <span class="ckeditor-button-dropdown">{{ button.button_text }}<span class="ckeditor-button-arrow"></span></span>
+      </a>
+    {% elseif button.image_alternative == 'separator' %}
+      <a href="#" role="button" title="{{ button.button_text }}" aria-label="{{ button.button_text }}" class="ckeditor-separator"></a>
+    {% else %}
+      <a href="#" role="button" title="{{ button.label }}" aria-label="{{ button.label }}" class="cke-icon-only cke_{{ button.direction|default('ltr') }}" >
+        <span class="cke_button_icon cke_button__{{ button.image_alternative }}_icon">{{ button.label }}</span>
+      </a>
+    {% endif %}
+  {% elseif button.image_url %}
+    <a href="#" role="button" title="{{ button.label }}" aria-label="{{ button.label }}">
+      <span class="cke_button_icon">
+        <img src="{{ button.image_url }}" title="{{ button.label }}" alt="{{ button.label }}">
+      </span>
+    </a>
+  {% else %}
+    ?
+  {% endif %}
+{% endmacro %}