diff --git a/cypress/integration/folder_navigation.js b/cypress/integration/folder_navigation.js
index c5b3a44f0d..ba65454ef6 100644
--- a/cypress/integration/folder_navigation.js
+++ b/cypress/integration/folder_navigation.js
@@ -7,8 +7,8 @@ context("Folder Navigation", () => {
 
 	it("Adding Folders", () => {
 		//Adding filter to go into the home folder
-		cy.get(".filter-selector > .btn").findByText("1 filter").click();
-		cy.findByRole("button", { name: "Clear Filters" }).click();
+		cy.get(".filter-x-button").click();
+		cy.click_filter_button();
 		cy.get(".filter-action-buttons > .text-muted").findByText("+ Add a Filter").click();
 		cy.get(".fieldname-select-area > .awesomplete > .form-control:last").type("Fol{enter}");
 		cy.get(
@@ -47,9 +47,13 @@ context("Folder Navigation", () => {
 		//Adding a file inside the Test Folder
 		cy.findByRole("button", { name: "Add File" }).eq(0).click({ force: true });
 		cy.get(".file-uploader").findByText("Link").click();
-		cy.get(".input-group > .form-control").type(
-			"https://wallpaperplay.com/walls/full/8/2/b/72402.jpg"
-		);
+		cy.get(".input-group > input.form-control:visible").as("upload_input");
+		cy.get("@upload_input").type("https://wallpaperplay.com/walls/full/8/2/b/72402.jpg", {
+			waitForAnimations: false,
+			parseSpecialCharSequences: false,
+			force: true,
+			delay: 100,
+		});
 		cy.click_modal_primary_button("Upload");
 
 		//To check if the added file is present in the Test Folder
diff --git a/cypress/integration/list_paging.js b/cypress/integration/list_paging.js
index 3071950260..5195d0b3ae 100644
--- a/cypress/integration/list_paging.js
+++ b/cypress/integration/list_paging.js
@@ -12,7 +12,7 @@ context("List Paging", () => {
 
 	it("test load more with count selection buttons", () => {
 		cy.visit("/app/todo/view/report");
-		cy.clear_filters();
+		cy.get(".filter-x-button").click();
 
 		cy.get(".list-paging-area .list-count").should("contain.text", "20 of");
 		cy.get(".list-paging-area .btn-more").click();
diff --git a/cypress/integration/list_view_drag_select.js b/cypress/integration/list_view_drag_select.js
index d481390d89..2dcb31372c 100644
--- a/cypress/integration/list_view_drag_select.js
+++ b/cypress/integration/list_view_drag_select.js
@@ -5,6 +5,7 @@ context("List View", () => {
 	});
 
 	it("List view check rows on drag", () => {
+		cy.get(".filter-x-button").click();
 		cy.get(".list-row-checkbox").then(($checkbox) => {
 			cy.wrap($checkbox).first().trigger("mousedown");
 			cy.get(".level.list-row").each(($ele) => {
diff --git a/cypress/integration/sidebar.js b/cypress/integration/sidebar.js
index 0b2a21aa4f..0f97cdc7fe 100644
--- a/cypress/integration/sidebar.js
+++ b/cypress/integration/sidebar.js
@@ -53,7 +53,7 @@ context("Sidebar", () => {
 		);
 
 		//To check if there is no filter added to the listview
-		cy.get(".filter-selector > .btn").should("contain", "Filter");
+		cy.get(".filter-button").should("contain", "Filter");
 
 		//To add a filter to display data into the listview
 		cy.get(".group-by-field.show > .dropdown-menu > .group-by-item > .dropdown-item").click();
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index c067974d9f..4b44a24598 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -479,7 +479,7 @@ Cypress.Commands.add("click_listview_row_item_with_text", (text) => {
 });
 
 Cypress.Commands.add("click_filter_button", () => {
-	cy.get(".filter-selector > .btn").click();
+	cy.get(".filter-button").click();
 });
 
 Cypress.Commands.add("click_listview_primary_button", (btn_name) => {
diff --git a/frappe/public/icons/timeless/icons.svg b/frappe/public/icons/timeless/icons.svg
index cfaf3ba1d7..aeef96ccfe 100644
--- a/frappe/public/icons/timeless/icons.svg
+++ b/frappe/public/icons/timeless/icons.svg
@@ -237,8 +237,14 @@
 		<path d="M2.5 3.5h2m7 9h2m-10-6h6m-3 3h6" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"></path>
 	</symbol>
 
-	<symbol viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="icon-filter">
-		<path d="M2 4h12M4 8h8m-5.5 4h3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
+	<symbol viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" id="icon-filter">
+		<path stroke-width="1.2" d="M3.68016 3L15.4502 3C16.1 3 16.4787 3.73367 16.1023 4.26337L11.6585 10.5177C11.5383 10.6869 11.4737 10.8893 11.4737 11.0969L11.4737 16.4053C11.4737 16.6516 11.1934 16.7929 10.9954 16.6466L8.72152 14.9665C8.46635 14.7779 8.31579 14.4795 8.31579 14.1622L8.31579 11.1327C8.31579 10.9031 8.2368 10.6805 8.09208 10.5023L3.05913 4.3043C2.63456 3.78145 3.00664 3 3.68016 3Z" stroke="var(--icon-stroke)" stroke-linecap="round"/>
+	</symbol>
+
+	<symbol viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" id="icon-filter-x">
+		<path stroke-width="1.2" d="M8.5 3L3.66449 3.00002C2.99369 3.00002 2.62075 3.77596 3.0398 4.29977L8.15768 10.6971C8.29953 10.8744 8.37681 11.0947 8.37681 11.3218L8.37681 14.4565C8.37681 14.7713 8.525 15.0677 8.77681 15.2565L11.0852 16.9878C11.283 17.1362 11.5652 16.9951 11.5652 16.7478L11.5652 11.3742C11.5652 11.1155 11.6654 10.8669 11.8448 10.6806L12.5 10" stroke="var(--icon-stroke)" stroke-linecap="round"/>
+		<path stroke-width="1.2" d="M11 3L16 8" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>
+		<path stroke-width="1.2" d="M16 3L11 8" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>
 	</symbol>
 
 	<symbol viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="icon-list">
diff --git a/frappe/public/js/frappe/list/base_list.js b/frappe/public/js/frappe/list/base_list.js
index ab0ca87b0d..e6ed0df7f4 100644
--- a/frappe/public/js/frappe/list/base_list.js
+++ b/frappe/public/js/frappe/list/base_list.js
@@ -831,22 +831,31 @@ class FilterArea {
 
 	make_filter_list() {
 		$(`<div class="filter-selector">
-			<button class="btn btn-default btn-sm filter-button">
-				<span class="filter-icon">
-					${frappe.utils.icon("filter")}
-				</span>
-				<span class="button-label hidden-xs">
+			<div class="btn-group">
+				<button class="btn btn-default btn-sm filter-button">
+					<span class="filter-icon">
+						${frappe.utils.icon("filter")}
+					</span>
+					<span class="button-label hidden-xs">
 					${__("Filter")}
-				<span>
-			</button>
+					<span>
+				</button>
+				<button class="btn btn-default btn-sm filter-x-button" title="${__("Clear all filters")}">
+					<span class="filter-icon">
+						${frappe.utils.icon("filter-x")}
+					</span>
+				</button>
+			</div>
 		</div>`).appendTo(this.$filter_list_wrapper);
 
 		this.filter_button = this.$filter_list_wrapper.find(".filter-button");
+		this.filter_x_button = this.$filter_list_wrapper.find(".filter-x-button");
 		this.filter_list = new frappe.ui.FilterGroup({
 			base_list: this.list_view,
 			parent: this.$filter_list_wrapper,
 			doctype: this.list_view.doctype,
 			filter_button: this.filter_button,
+			filter_x_button: this.filter_x_button,
 			default_filters: [],
 			on_change: () => this.refresh_list_view(),
 		});
diff --git a/frappe/public/js/frappe/ui/filters/filter_list.js b/frappe/public/js/frappe/ui/filters/filter_list.js
index 3119ee4b68..5a8d14e09f 100644
--- a/frappe/public/js/frappe/ui/filters/filter_list.js
+++ b/frappe/public/js/frappe/ui/filters/filter_list.js
@@ -14,9 +14,29 @@ frappe.ui.FilterGroup = class {
 
 	make_popover() {
 		this.init_filter_popover();
+		this.set_clear_all_filters_event();
 		this.set_popover_events();
 	}
 
+	set_clear_all_filters_event() {
+		this.filter_x_button.on("click", () => {
+			this.toggle_empty_filters(true);
+			if (typeof this.base_list !== "undefined") {
+				// It's a list view. Clear all the filters, also the ones in the
+				// FilterArea outside this FilterGroup
+				this.base_list.filter_area.clear();
+			} else {
+				// Not a list view, just clear the filters in this FilterGroup
+				this.clear_filters();
+			}
+			this.update_filter_button();
+		});
+	}
+
+	hide_popover() {
+		this.filter_button.popover("hide");
+	}
+
 	init_filter_popover() {
 		this.filter_button.popover({
 			content: this.get_filter_area_template(),
@@ -54,7 +74,7 @@ frappe.ui.FilterGroup = class {
 					!$(e.target).is(this.filter_button) &&
 					!in_datepicker
 				) {
-					this.wrapper && this.filter_button.popover("hide");
+					this.wrapper && this.hide_popover();
 				}
 			}
 		});
@@ -85,7 +105,7 @@ frappe.ui.FilterGroup = class {
 		// REDESIGN-TODO: (Temporary) Review and find best solution for this
 		frappe.router.on("change", () => {
 			if (this.wrapper && this.wrapper.is(":visible")) {
-				this.filter_button.popover("hide");
+				this.hide_popover();
 			}
 		});
 	}
@@ -130,11 +150,10 @@ frappe.ui.FilterGroup = class {
 			this.toggle_empty_filters(true);
 			this.clear_filters();
 			this.on_change();
+			this.hide_popover();
 		});
 
-		this.wrapper.find(".apply-filters").on("click", () => {
-			this.filter_button.popover("hide");
-		});
+		this.wrapper.find(".apply-filters").on("click", () => this.hide_popover());
 	}
 
 	add_filters(filters) {
diff --git a/frappe/public/scss/desk/filters.scss b/frappe/public/scss/desk/filters.scss
index ffaea7a9bd..3f197e8278 100644
--- a/frappe/public/scss/desk/filters.scss
+++ b/frappe/public/scss/desk/filters.scss
@@ -1,7 +1,5 @@
 .filter-icon.active {
-	use {
-		stroke: var(--text-on-blue);
-	}
+	--icon-stroke: var(--text-on-blue);
 }
 
 .filter-popover {
diff --git a/frappe/public/scss/desk/list.scss b/frappe/public/scss/desk/list.scss
index 30bf1d6499..d464e6dec1 100644
--- a/frappe/public/scss/desk/list.scss
+++ b/frappe/public/scss/desk/list.scss
@@ -378,13 +378,14 @@ input.list-check-all {
 		padding: 0 var(--padding-xs);
 	}
 
-	.filter-button {
-		margin: 5px;
-		// padding: 4px 8px;
+	.filter-selector .btn-group {
+		margin: var(--margin-xs);
 	}
 
 	.filter-button.btn-primary-light {
 		color: var(--text-on-blue);
+		outline: 1px solid var(--bg-dark-blue);
+		z-index: 1;
 	}
 
 	.sort-selector {