diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html
index 27b189f18..a5fbed415 100644
--- a/html/extra-networks-pane.html
+++ b/html/extra-networks-pane.html
@@ -49,7 +49,7 @@
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke-width="1" d="M 2 12 L 6 3 L 10 12 M 3.5 9 L 8.5 9" />
-                        <path stroke-width="1" d="M 8 3 L 15 3 M 9.5 6 L 15 6 M 11 9 L 15 9 M 12.5 12 L 15 12">
+                        <path stroke-width="1" d="M 8 3 L 15 3 M 9.5 6 L 15 6 M 11 9 L 15 9 M 12.5 12 L 15 12" />
                     </svg>
                 </button>
                 <button class="extra-network-control extra-network-control--sort-mode" title="Sort by date created"
@@ -77,7 +77,7 @@
                             <line x1="12" y1="1" x2="12" y2="3" />
                         </g>
                         <g stroke-linecap="square" stroke-linejoin="square">
-                            <path d="M 4 9 H 10 L 12 10 L 10 11 H 4 Z M 6 9 V 10">
+                            <path d="M 4 9 H 10 L 12 10 L 10 11 H 4 Z M 6 9 V 10" />
                         </g>
                     </svg>
                 </button>
@@ -86,12 +86,20 @@
         <div class="extra-network-controls--container">
             <div class="extra-network-controls--header">Sort Order</div>
             <div class="extra-network-controls--buttons">
-                <button class="extra-network-control extra-network-control--sort-dir" title="Sort {data_sort_dir}"
-                    data-sort-dir="{data_sort_dir}">
+                <button class="extra-network-control extra-network-control--sort-dir" title="Sort ascending"
+                    data-sort-dir="ascending" {btn_sort_dir_ascending_data_attributes}>
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
-                        fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
-                        <path class="extra-network-control--sort-dir-icon-ascending" d="M 8 1 L 3 7 L 13 7 Z" />
-                        <path class="extra-network-control--sort-dir-icon-descending" d="M 8 15 L 3 9 L 13 9 Z" />
+                        stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+                        <path fill="currentColor" d="M 8 1 L 3 7 L 13 7 Z" />
+                        <path fill="none" stroke="var(--input-placeholder-color)" d="M 8 15 L 3 9 L 13 9 Z" />
+                    </svg>
+                </button>
+                <button class="extra-network-control extra-network-control--sort-dir" title="Sort descending"
+                    data-sort-dir="descending" {btn_sort_dir_descending_data_attributes}>
+                    <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+                        stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+                        <path fill="none" stroke="var(--input-placeholder-color)" d="M 8 1 L 3 7 L 13 7 Z" />
+                        <path fill="currentColor" d="M 8 15 L 3 9 L 13 9 Z" />
                     </svg>
                 </button>
             </div>
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index ba6243f14..87082b847 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -1173,8 +1173,12 @@ function extraNetworksControlSortDirOnClick(event) {
     }
 
     let sort_dir_str = curr_sort_dir_str === "ascending" ? "descending" : "ascending";
-    btn.dataset.sortDir = sort_dir_str;
-    btn.setAttribute("title", `Sort ${sort_dir_str}`);
+
+    const other_btn = tab.controls_elem.querySelector(
+        `.extra-network-control--sort-dir[data-sort-dir="${sort_dir_str}"]`
+    );
+    delete btn.dataset.selected;
+    other_btn.dataset.selected = "";
 
     tab.setSortDir(sort_dir_str);
 }
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index e81732324..567fbf3cc 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -846,11 +846,12 @@ class ExtraNetworksPage:
             **{
                 "tabname": tabname,
                 "extra_networks_tabname": self.extra_networks_tabname,
-                "data_sort_dir": sort_dir,
                 "btn_sort_mode_path_data_attributes": "data-selected" if sort_mode == "path" else "",
                 "btn_sort_mode_name_data_attributes": "data-selected" if sort_mode == "name" else "",
                 "btn_sort_mode_date_created_data_attributes": "data-selected" if sort_mode == "date_created" else "",
                 "btn_sort_mode_date_modified_data_attributes": "data-selected" if sort_mode == "date_modified" else "",
+                "btn_sort_dir_ascending_data_attributes": "data-selected" if sort_dir == "ascending" else "",
+                "btn_sort_dir_descending_data_attributes": "data-selected" if sort_dir == "descending" else "",
                 "btn_dirs_view_data_attributes": "data-selected" if dirs_view_en else "",
                 "btn_tree_view_data_attributes": "data-selected" if tree_view_en else "",
                 "btn_card_view_data_attributes": "data-selected" if card_view_en else "",
diff --git a/style.css b/style.css
index d295c2e9e..735c4112c 100644
--- a/style.css
+++ b/style.css
@@ -1443,23 +1443,9 @@ body.resizing .resize-handle {
     color: var(--button-secondary-text-color-hover);
 }
 
-/* Customize behavior or sort direction button icon. */
-.extra-network-control--sort-dir[data-sort-dir="ascending"] .extra-network-control--sort-dir-icon-ascending {
-    fill: var(--button-secondary-text-color);
-    stroke: var(--button-secondary-text-color);
-}
-
-.extra-network-control--sort-dir[data-sort-dir="ascending"] .extra-network-control--sort-dir-icon-descending {
-    stroke: var(--input-placeholder-color);
-}
-
-.extra-network-control--sort-dir[data-sort-dir="descending"] .extra-network-control--sort-dir-icon-descending {
-    fill: var(--button-secondary-text-color);
-    stroke: var(--button-secondary-text-color);
-}
-
-.extra-network-control--sort-dir[data-sort-dir="descending"] .extra-network-control--sort-dir-icon-ascending {
-    stroke: var(--input-placeholder-color);
+/* Customize behavior of sort direction button icon. */
+.extra-network-control--sort-dir:not([data-selected]) {
+    display: none;
 }
 
 /* ==== ICONS ==== */