diff --git a/src/app.js b/src/app.js
index fab843e..75d38af 100644
--- a/src/app.js
+++ b/src/app.js
@@ -4,6 +4,7 @@ import './components/item-list.js';
 import './components/custom-item.js';
 import './components/custom-modal.js';
 import './components/custom-text.js';
+import './components/back-icon.js';
 
 import Store from './modules/store.js';
 import text from './modules/text.js';
@@ -72,9 +73,6 @@ class AppBase extends HTMLElement {
       .button-bar > .right-button {
         margin-left: auto;
       }
-      #undo-char {
-        margin-top: 3px;
-      }
     </style>
     <main-window width="900px" gap="35px">
       <h1 id="title">${this.text.title}</h1>
@@ -83,12 +81,7 @@ class AppBase extends HTMLElement {
         ${this.store.getRecords().map((item) => `<option is="custom-item" color="${this.properties.color}" value=${item.id}>${item.text}</option>`)}
       </select>
       <span class="button-bar">
-        <button is="custom-button" action="${Store.actions.UNDO}" outline width="81px" color="${this.properties.color}">
-          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="undo-char" width="21" height="19" viewBox="0 0 5.556 5.027">
-            <path d="M.681 2.22a2.38 2.38 0 0 1 4.742.294v0a2.38 2.38 0 0 1-4.526 1.03" style="fill:none;stroke:${this.properties.color};stroke-width:.264583;stroke-linecap:round;stroke-dasharray:none"/>
-            <path d="m.132 1.525.437.964.964-.437" style="fill:none;stroke:${this.properties.color};stroke-width:.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"/>
-          </svg>
-        </button>
+        <button is="custom-button" action="${Store.actions.UNDO}" outline width="81px" color="${this.properties.color}"><back-icon color="${this.properties.color}"></back-icon></button>
         <button is="custom-button" action="${Store.actions.REMOVE_LINE}" outline width="124px" color="${this.properties.color}">Delete</button>
         <button is="custom-button" class="right-button" action="${Store.actions.OPEN_MODAL}" width="138px" color="${this.properties.color}">Add</button>
       </span>
diff --git a/src/components/back-icon.js b/src/components/back-icon.js
new file mode 100644
index 0000000..c015419
--- /dev/null
+++ b/src/components/back-icon.js
@@ -0,0 +1,27 @@
+class BackIcon extends HTMLElement {
+  static observedAttributes = ['color'];
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+  
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+  this.shadowRoot.innerHTML = `
+    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" marginTop="3px" width="21" height="19" viewBox="0 0 5.556 5.027">
+      <path d="M.681 2.22a2.38 2.38 0 0 1 4.742.294v0a2.38 2.38 0 0 1-4.526 1.03" style="fill:none;stroke:${this.getAttribute('color')};stroke-width:.264583;stroke-linecap:round;stroke-dasharray:none"/>
+      <path d="m.132 1.525.437.964.964-.437" style="fill:none;stroke:${this.getAttribute('color')};stroke-width:.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"/>
+    </svg>
+  `;
+  }
+}
+
+customElements.define('back-icon', BackIcon);