diff --git a/public/img/touchbar/backward.png b/public/img/touchbar/backward.png
new file mode 100644
index 0000000..83b2053
Binary files /dev/null and b/public/img/touchbar/backward.png differ
diff --git a/public/img/touchbar/forward.png b/public/img/touchbar/forward.png
new file mode 100644
index 0000000..5577bb5
Binary files /dev/null and b/public/img/touchbar/forward.png differ
diff --git a/public/img/touchbar/like.png b/public/img/touchbar/like.png
new file mode 100644
index 0000000..09f6534
Binary files /dev/null and b/public/img/touchbar/like.png differ
diff --git a/public/img/touchbar/like_fill.png b/public/img/touchbar/like_fill.png
new file mode 100644
index 0000000..bbc2727
Binary files /dev/null and b/public/img/touchbar/like_fill.png differ
diff --git a/public/img/touchbar/next_up.png b/public/img/touchbar/next_up.png
new file mode 100644
index 0000000..60d67a0
Binary files /dev/null and b/public/img/touchbar/next_up.png differ
diff --git a/public/img/touchbar/pause.png b/public/img/touchbar/pause.png
new file mode 100644
index 0000000..083f680
Binary files /dev/null and b/public/img/touchbar/pause.png differ
diff --git a/public/img/touchbar/play.png b/public/img/touchbar/play.png
new file mode 100644
index 0000000..101b92f
Binary files /dev/null and b/public/img/touchbar/play.png differ
diff --git a/public/img/touchbar/route_next.png b/public/img/touchbar/route_next.png
new file mode 100644
index 0000000..24ab389
Binary files /dev/null and b/public/img/touchbar/route_next.png differ
diff --git a/public/img/touchbar/route_prev.png b/public/img/touchbar/route_prev.png
new file mode 100644
index 0000000..52cb588
Binary files /dev/null and b/public/img/touchbar/route_prev.png differ
diff --git a/public/img/touchbar/search.png b/public/img/touchbar/search.png
new file mode 100644
index 0000000..e62e725
Binary files /dev/null and b/public/img/touchbar/search.png differ
diff --git a/src/electron/touchBar.js b/src/electron/touchBar.js
index f8f791e..7976dab 100644
--- a/src/electron/touchBar.js
+++ b/src/electron/touchBar.js
@@ -1,70 +1,81 @@
-const { TouchBar, ipcMain } = require("electron");
+const { TouchBar, nativeImage, ipcMain } = require("electron");
 const { TouchBarButton, TouchBarSpacer } = TouchBar;
+const path = require("path");
 
 export function createTouchBar(window) {
   const renderer = window.webContents;
 
-  // use SF Symbols as label, you probably will see a 􀂒 instead of real icon
+  // Icon follow touchbar design guideline.
+  // See: https://developer.apple.com/design/human-interface-guidelines/macos/touch-bar/touch-bar-icons-and-images/
+  // Icon Resource: https://devimages-cdn.apple.com/design/resources/
+  function getNativeIcon(name) {
+    return nativeImage.createFromPath(
+      path.join(__static, "img/touchbar/", name)
+    );
+  }
 
   const previousPage = new TouchBarButton({
-    label: "􀆉",
     click: () => {
       renderer.send("routerGo", "back");
     },
+    icon: getNativeIcon("page_prev.png"),
   });
 
   const nextPage = new TouchBarButton({
-    label: "􀆊",
     click: () => {
       renderer.send("routerGo", "forward");
     },
+    icon: getNativeIcon("page_next.png"),
   });
 
   const searchButton = new TouchBarButton({
-    label: "􀊫",
     click: () => {
       renderer.send("search");
     },
+    icon: getNativeIcon("search.png"),
   });
 
   const playButton = new TouchBarButton({
-    label: "􀊄",
     click: () => {
       renderer.send("play");
     },
+    icon: getNativeIcon("play.png"),
   });
 
   const previousTrackButton = new TouchBarButton({
-    label: "􀊎",
     click: () => {
       renderer.send("previous");
     },
+    icon: getNativeIcon("backward.png"),
   });
 
   const nextTrackButton = new TouchBarButton({
-    label: "􀊐",
     click: () => {
       renderer.send("next");
     },
+    icon: getNativeIcon("forward.png"),
   });
 
   const likeButton = new TouchBarButton({
-    label: "􀊴",
     click: () => {
       renderer.send("like");
     },
+    icon: getNativeIcon("like.png"),
   });
 
   const nextUpButton = new TouchBarButton({
-    label: "􀑬",
     click: () => {
       renderer.send("nextUp");
     },
+    icon: getNativeIcon("next_up.png"),
   });
 
   ipcMain.on("player", (e, { playing, likedCurrentTrack }) => {
-    playButton.label = playing === true ? "􀊆" : "􀊄";
-    likeButton.label = likedCurrentTrack ? "􀊵" : "􀊴";
+    playButton.icon =
+      playing === true ? getNativeIcon("pause.png") : getNativeIcon("play.png");
+    likeButton.icon = likedCurrentTrack
+      ? getNativeIcon("like_fill.png")
+      : getNativeIcon("like.png");
   });
 
   const touchBar = new TouchBar({