diff --git a/core/misc/icons/004875/twistie-down.svg b/core/misc/icons/004875/twistie-down.svg
new file mode 100644
index 0000000..6cd6a78
--- /dev/null
+++ b/core/misc/icons/004875/twistie-down.svg
@@ -0,0 +1 @@
+
diff --git a/core/misc/icons/004875/twistie-up.svg b/core/misc/icons/004875/twistie-up.svg
new file mode 100644
index 0000000..bf3b80e
--- /dev/null
+++ b/core/misc/icons/004875/twistie-up.svg
@@ -0,0 +1 @@
+
diff --git a/core/misc/icons/008ee6/twistie-down.svg b/core/misc/icons/008ee6/twistie-down.svg
new file mode 100644
index 0000000..23f6d9a
--- /dev/null
+++ b/core/misc/icons/008ee6/twistie-down.svg
@@ -0,0 +1 @@
+
diff --git a/core/misc/icons/008ee6/twistie-up.svg b/core/misc/icons/008ee6/twistie-up.svg
new file mode 100644
index 0000000..dc9dd8e
--- /dev/null
+++ b/core/misc/icons/008ee6/twistie-up.svg
@@ -0,0 +1 @@
+
diff --git a/core/modules/system/css/system.module.css b/core/modules/system/css/system.module.css
index cea7a25..0569e50 100644
--- a/core/modules/system/css/system.module.css
+++ b/core/modules/system/css/system.module.css
@@ -179,6 +179,22 @@ table.sticky-header {
}
/**
+ * Markup generated by tablesort-indicator.html.twig.
+ */
+.tablesort {
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ background-size: 100%;
+}
+.tablesort--asc {
+ background-image: url(../../../misc/icons/787878/twistie-down.svg);
+}
+.tablesort--desc {
+ background-image: url(../../../misc/icons/787878/twistie-up.svg);
+}
+
+/**
* Progress behavior.
*
* @see progress.js
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index c35796a..76cd8c2 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -11,16 +11,6 @@
}
/**
- * Markup generated by tablesort-indicator.html.twig.
- */
-th.active img {
- display: inline;
-}
-td.active {
- background-color: #ddd;
-}
-
-/**
* Markup generated by item-list.html.twig.
*/
.item-list .title {
diff --git a/core/modules/system/templates/tablesort-indicator.html.twig b/core/modules/system/templates/tablesort-indicator.html.twig
index e593082..b4fe62e 100644
--- a/core/modules/system/templates/tablesort-indicator.html.twig
+++ b/core/modules/system/templates/tablesort-indicator.html.twig
@@ -11,8 +11,18 @@
* @ingroup themeable
*/
#}
-{% if style == 'asc' -%}
-
-{% else -%}
-
-{% endif %}
+{%
+ set classes = [
+ 'tablesort',
+ 'tablesort--' ~ style,
+ ]
+%}
+
+
+ {% if style == 'asc' -%}
+ {{ 'Sort ascending.'|t }}
+ {% else -%}
+ {{ 'Sort descending.'|t }}
+ {% endif %}
+
+
diff --git a/core/themes/seven/css/components/tablesort-indicator.css b/core/themes/seven/css/components/tablesort-indicator.css
new file mode 100644
index 0000000..7685fbd
--- /dev/null
+++ b/core/themes/seven/css/components/tablesort-indicator.css
@@ -0,0 +1,22 @@
+/**
+ * @file
+ * Tablesort indicator styles.
+ */
+ .tablesort {
+ float: right; /* LTR */
+ margin-top: 5px;
+ width: 10px;
+ height: 10px;
+ }
+.tablesort--asc {
+ background-image: url(../../../../misc/icons/004875/twistie-down.svg);
+}
+a:hover .tablesort--asc {
+ background-image: url(../../../../misc/icons/008ee6/twistie-down.svg);
+}
+.tablesort--desc {
+ background-image: url(../../../../misc/icons/004875/twistie-up.svg);
+}
+a:hover .tablesort--desc {
+ background-image: url(../../../../misc/icons/008ee6/twistie-up.svg);
+}
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index 94aba5c..f6c5131 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -29,6 +29,7 @@ global-styling:
css/components/pager.css: {}
css/components/skip-link.css: {}
css/components/tables.css: {}
+ css/components/tablesort-indicator.css: {}
css/components/tabs.css: {}
css/components/tour.theme.css: {}
css/components/update-status.css: {}
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index 621cf82..872ca41 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -110,18 +110,6 @@ function seven_preprocess_admin_block_content(&$variables) {
}
/**
- * Implements hook_preprocess_HOOK() for tablesort indicator templates.
- *
- * Uses Seven's image versions, so the arrows show up as black and not gray on
- * gray.
- */
-function seven_preprocess_tablesort_indicator(&$variables) {
- $theme_path = drupal_get_path('theme', 'seven');
- $variables['arrow_asc'] = file_create_url($theme_path . '/images/arrow-asc.png');
- $variables['arrow_desc'] = file_create_url($theme_path . '/images/arrow-desc.png');
-}
-
-/**
* Implements hook_preprocess_HOOK() for menu-local-action templates.
*/
function seven_preprocess_menu_local_action(array &$variables) {
diff --git a/core/themes/seven/templates/tablesort-indicator.html.twig b/core/themes/seven/templates/tablesort-indicator.html.twig
deleted file mode 100644
index b2eadaa..0000000
--- a/core/themes/seven/templates/tablesort-indicator.html.twig
+++ /dev/null
@@ -1,16 +0,0 @@
-{#
-/**
- * @file
- * Seven's theme implementation for displaying a tablesort indicator.
- *
- * Available variables:
- * - style: Either 'asc' or 'desc', indicating the sorting direction.
- * - arrow_asc: URL to the image for an ascending arrow.
- * - arrow_desc: URL to the image for a descending arrow.
- */
-#}
-{% if style == 'asc' -%}
- 
-{% else -%}
- 
-{% endif %}