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 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#004875" d="M2.611 5.393c-.17-.216-.084-.393.191-.393h10.397c.275 0 .361.177.191.393l-5.08 6.464c-.17.216-.452.216-.622 0l-5.077-6.464z"/></svg>
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 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#004875" d="M13.391 10.607c.17.216.084.393-.191.393h-10.398c-.275 0-.361-.177-.191-.393l5.08-6.464c.17-.216.45-.216.62 0l5.08 6.464z"/></svg>
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 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#008ee6" d="M2.611 5.393c-.17-.216-.084-.393.191-.393h10.397c.275 0 .361.177.191.393l-5.08 6.464c-.17.216-.452.216-.622 0l-5.077-6.464z"/></svg>
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 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#008ee6" d="M13.391 10.607c.17.216.084.393-.191.393h-10.398c-.275 0-.361-.177-.191-.393l5.08-6.464c.17-.216.45-.216.62 0l5.08 6.464z"/></svg>
diff --git a/core/misc/icons/ffffff/twistie-down.svg b/core/misc/icons/ffffff/twistie-down.svg
new file mode 100644
index 0000000..83c77fd
--- /dev/null
+++ b/core/misc/icons/ffffff/twistie-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#FFFFFF" d="M2.611 5.393c-.17-.216-.084-.393.191-.393h10.397c.275 0 .361.177.191.393l-5.08 6.464c-.17.216-.452.216-.622 0l-5.077-6.464z"/></svg>
diff --git a/core/misc/icons/ffffff/twistie-up.svg b/core/misc/icons/ffffff/twistie-up.svg
new file mode 100644
index 0000000..7b55028
--- /dev/null
+++ b/core/misc/icons/ffffff/twistie-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#FFFFFF" d="M13.391 10.607c.17.216.084.393-.191.393h-10.398c-.275 0-.361-.177-.191-.393l5.08-6.464c.17-.216.45-.216.62 0l5.08 6.464z"/></svg>
diff --git a/core/modules/system/css/components/tablesort.module.css b/core/modules/system/css/components/tablesort.module.css
new file mode 100644
index 0000000..5e0e711
--- /dev/null
+++ b/core/modules/system/css/components/tablesort.module.css
@@ -0,0 +1,19 @@
+/**
+ * @file
+ * Table sort indicator.
+ *
+ * @see 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);
+}
diff --git a/core/themes/bartik/css/components/tablesort-indicator.css b/core/themes/bartik/css/components/tablesort-indicator.css
new file mode 100644
index 0000000..d0ea03b
--- /dev/null
+++ b/core/themes/bartik/css/components/tablesort-indicator.css
@@ -0,0 +1,17 @@
+/**
+ * @file
+ * Tablesort indicator styles.
+ */
+
+.tablesort {
+  width: 14px;
+  height: 14px;
+  vertical-align: top;
+  margin: 1px 0 0 5px;
+}
+.tablesort--asc {
+  background-image: url(../../../../misc/icons/ffffff/twistie-down.svg);
+}
+.tablesort--desc {
+  background-image: url(../../../../misc/icons/ffffff/twistie-up.svg);
+}
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..fa49af7
--- /dev/null
+++ b/core/themes/seven/css/components/tablesort-indicator.css
@@ -0,0 +1,26 @@
+/**
+ * @file
+ * Tablesort indicator styles.
+ */
+
+.tablesort {
+  float: right; /* LTR */
+  margin-top: 5px;
+  width: 10px;
+  height: 10px;
+}
+[dir="rtl"] .tablesort {
+  float: left;
+}
+.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);
+}