diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less
index 55a3d8ce8..b23aa4fa9 100644
--- a/customize.dist/src/less2/include/drive.less
+++ b/customize.dist/src/less2/include/drive.less
@@ -224,17 +224,9 @@
                 position: absolute;
                 font-size: 50px;
             }
-            .cptools-folder-no-color {
+            .folder-no-color {
                 color: @cryptpad_color_grey_500;
             }
-            .fa-check {
-                position: absolute;
-                top: 40%; left: 35%;
-                color: transparent;
-            }
-            &.cp-app-drive-current-color > .fa-check {
-                color: @cryptpad_color_grey_900;
-            }
         }
     }
 
diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js
index e0f5ddac6..04282c358 100644
--- a/www/common/drive-ui.js
+++ b/www/common/drive-ui.js
@@ -1318,26 +1318,43 @@ define([
             var colors = ["", "#f23c38", "#ff0073", "#da0eba", "#9d00ac", "#6c19b3", "#4a42b1", "#3d8af0", "#30a0f1", "#1fb9d1", "#009686", "#45b354", "#84c750", "#c6e144", "#faf147", "#fbc423", "#fc9819", "#fd5227", "#775549", "#9c9c9c", "#607a89"];
             var colorsElements = [];
             var currentElement = null;
+            const icon_classes = 'cp-app-drive-icon-folder cp-app-drive-content-icon';
             colors.forEach(function (color, i) {
                 var element = h("span.cp-app-drive-color-picker-color", [
-                    h("span.cptools.cp-app-drive-icon-folder.cp-app-drive-content-icon" + (i === 0 ? ".cptools-folder-no-color" : ".cptools-folder")),
-                    h("span.fa.fa-check")
+                    (i === 0 ? Icons.get('folder-nocolor', {'class': icon_classes + ' folder-no-color'}): Icons.get('drive-folder', {'class': icon_classes})),
                 ]);
                 $(element).css("color", colors[i]);
                 if (colors[i] === currentColor) {
                     currentElement = element;
+                    $(element).find('.cp-app-drive-icon-folder').replaceWith(
+                        Icons.get('folder-check', {'class': icon_classes})
+                    );
+                    if (i === 0) {
+                        $(element).addClass("folder-no-color");
+                    }
                     $(element).addClass("cp-app-drive-current-color");
                 }
                 $(element).on("click", function () {
-                    $(currentElement).removeClass("cp-app-drive-current-color");
+                    if (currentElement) {
+                        $(currentElement).removeClass("cp-app-drive-current-color");
+                        var currentIndex = colorsElements.indexOf(currentElement);
+                        var originalIcon = currentIndex === 0 ?
+                            Icons.get('folder-nocolor', {'class': icon_classes + ' folder-no-color'}) :
+                            Icons.get('drive-folder', {'class': icon_classes});
+                        $(currentElement).find('.cp-app-drive-icon-folder').replaceWith(originalIcon);
+                    }
                     currentElement = element;
                     $(element).addClass("cp-app-drive-current-color");
+                    $(element).find('.cp-app-drive-icon-folder').replaceWith(
+                        Icons.get('folder-check', {'class': icon_classes})
+                    );
                     cb(color);
                 });
                 colorsElements.push(element);
             });
             var content = h("div.cp-app-drive-color-picker", colorsElements);
             UI.alert(content);
+            Lucide.createIcons();
         };
 
         var getFolderColor = function (path) {