diff --git a/core/misc/components/ajax-progress.module.css b/core/misc/components/ajax-progress.module.css
index 5c28e930b5e6118186ae50b5b8353c14f43c8195..28fa727a8f6f9a04194868821d2ded94414f3d5a 100644
--- a/core/misc/components/ajax-progress.module.css
+++ b/core/misc/components/ajax-progress.module.css
@@ -39,7 +39,7 @@ tr .ajax-progress-throbber .throbber {
   opacity: 0.9;
   border-radius: 7px;
   background-color: #232323;
-  background-image: url(../loading-small.gif);
+  background-image: url(../loading-small.svg);
   background-repeat: no-repeat;
   background-position: center center;
 }
diff --git a/core/misc/loading-small.svg b/core/misc/loading-small.svg
new file mode 100644
index 0000000000000000000000000000000000000000..65ebff8b7582a781067e6bb926886ea63b819d5d
--- /dev/null
+++ b/core/misc/loading-small.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" display="block" preserveAspectRatio="xMidYMid" width="24" height="24" style="shape-rendering: auto; display: block; background:#212121;" viewBox="0 0 100 100">
+  <g fill="#e8e8e8">
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.7s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(45 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.6s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(90 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.5s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(135 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.4s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(180 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.3s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(225 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.2s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(270 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.1s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(315 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="0s"/>
+    </rect>
+  </g>
+</svg>
diff --git a/core/misc/loading.svg b/core/misc/loading.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ab3f56a6b9ae917c5cc708cb9b3cadc0f860a58e
--- /dev/null
+++ b/core/misc/loading.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" display="block" preserveAspectRatio="xMidYMid" width="48" height="48" style="shape-rendering: auto; display: block; background:#212121;" viewBox="0 0 100 100">
+  <g fill="#e8e8e8">
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.7s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(45 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.6s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(90 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.5s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(135 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.4s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(180 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.3s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(225 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.2s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(270 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.1s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(315 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="0s"/>
+    </rect>
+  </g>
+</svg>
diff --git a/core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css b/core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
index ed9d202bca8791d9af29949cd01b4109102f16d0..562212dd6cbfec3da3ba0f9714f0f2cd8fce7f06 100644
--- a/core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
+++ b/core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
@@ -63,7 +63,7 @@
   opacity: 0.9;
   border-radius: 7px;
   background-color: #232323;
-  background-image: url(../../../../../../../misc/loading-small.gif);
+  background-image: url(../../../../../../../misc/loading-small.svg);
   background-repeat: no-repeat;
   background-position: center center;
 }
diff --git a/core/tests/Drupal/KernelTests/Core/Theme/ImageTest.php b/core/tests/Drupal/KernelTests/Core/Theme/ImageTest.php
index 297c1111a1743343415badd48c797f11c55db7eb..f9bc01a69eab4066c021aeeabd666596e2648603 100644
--- a/core/tests/Drupal/KernelTests/Core/Theme/ImageTest.php
+++ b/core/tests/Drupal/KernelTests/Core/Theme/ImageTest.php
@@ -55,7 +55,7 @@ protected function setUp(): void {
 
     $this->testImages = [
       'core/misc/druplicon.png',
-      'core/misc/loading.gif',
+      'core/misc/loading.svg',
     ];
   }
 
diff --git a/core/themes/stable9/css/core/components/ajax-progress.module.css b/core/themes/stable9/css/core/components/ajax-progress.module.css
index d5ac09a901ed179a73d12d3c3f3dc4c21b42768e..80633e07d102ef26b6455d49509ea2242189190d 100644
--- a/core/themes/stable9/css/core/components/ajax-progress.module.css
+++ b/core/themes/stable9/css/core/components/ajax-progress.module.css
@@ -39,7 +39,7 @@ tr .ajax-progress-throbber .throbber {
   opacity: 0.9;
   border-radius: 7px;
   background-color: #232323;
-  background-image: url(../../../../../misc/loading-small.gif);
+  background-image: url(../../../../../misc/loading-small.svg);
   background-repeat: no-repeat;
   background-position: center center;
 }
diff --git a/core/themes/starterkit_theme/css/components/dialog.css b/core/themes/starterkit_theme/css/components/dialog.css
index b66ca935eddd605865d0780803c7a27a2aa18c7a..aca6afe2306027adb3e4e977213a47d2f09e3d90 100644
--- a/core/themes/starterkit_theme/css/components/dialog.css
+++ b/core/themes/starterkit_theme/css/components/dialog.css
@@ -63,7 +63,7 @@
   opacity: 0.9;
   border-radius: 7px;
   background-color: #232323;
-  background-image: url(../../images/icons/loading-small.gif);
+  background-image: url(../../images/icons/loading-small.svg);
   background-repeat: no-repeat;
   background-position: center center;
 }
diff --git a/core/themes/starterkit_theme/images/icons/loading-small.gif b/core/themes/starterkit_theme/images/icons/loading-small.gif
deleted file mode 100644
index 5cbf6e7b75523144e46e36aba2d58263b767b93b..0000000000000000000000000000000000000000
--- a/core/themes/starterkit_theme/images/icons/loading-small.gif
+++ /dev/null
@@ -1,25 +0,0 @@
-GIF89a��Ä��ÿÿÿ÷÷÷ïïïæææÞÞÞÖÖÖÎÎÎÅÅŽ½½µµµ­­­¥¥¥œœœ”””ŒŒŒ„„„{{{ssskkkcccZZZRRRJJJBBB:::111)))!!!ÿÿÿ���!ÿNETSCAPE2.0
���!ù
-��,�������ýà&Žä6MeªŽK,kÊÍG
8@q±h/MG’H:›‹%#£€GcÀ4‹D2a’8ŒÀ@@Àp2‘HfzšH,%Îð¼úx"
-WrIix%pqX1*Ž=##‘–„+£§©¬–¯±™›Ÿ=¡£¥"“•–I™#3gÅ~‘­"	Ï"¾>žwÐ
ÂÉ	kX
(_àS(²As}RTx 
‹(¨oBB4’”xÑZ	%‹qáâŠ�!ù
-��,�������ä 'Ž¤GQeªŽÍ04k<‚Œ\®nU‰“ÀÀ6ñdŠ	'U!¸`D €%�Xe©U(2HŒ	`
Š%)2(*
áìP“†„EÅ¡	b%K`1K:$2$„…P{“(™œž–¢¤¥‘“•˜{"‹©#)1¼¾%À% %	
-#À´k
-¿{¼ÖÊ"Î	â?&Õ*E
ûµôvlÙ×  ·[8Àw+…Á!��!ù
-��,�������Ô 'Ž¤WUeªŽa<k,VDQ¨ÌJGÕ7ŠGó`P6ªƒæYQ4 –ZˆCb4™Œ‚A€‘’”Q•êa^iUÅ�M!‘ºQ‡CºXò#V
-
-n2��Q‘
-91�
’”+–˜š…‡‰1‹q~€=‚„wx:{e+²"
²²%
±Ì"]Ê)Ã<ÎHÉ*9ïH~è1xïð«%ïžú"¸t„��!ù
-��,�������â 'Ž¤gYeªŽ‚@kº‘Öah<Z%V„­ÂñDÙe¡HDfƒ!j…d)¢X,¨"ŠÏ“1
-ƒFj’`:f©
QE¼dIÔ:{*+:k$

u‡"

€‹91
>”
–‡™›>ŠŒŽ	‘€"†‚:ª)E*„¶	)Å%�к#ȍ
�
-Ó"ÉcI	àãä(¾Eð+{öðùÁ¡`­ø.Õ"‘áWŒ�!ù
-��,�������Û 'Ž¤w]eªŽÒ²H뺉—â*×ÓS%Z¶…Â"’<b
c"z$GÏÃ`8¤6F£áÐÌ*>Qâ€0DG›Š–
ѨU,5q@0±Eâ¼ësJ:}aL…G‹9}”‹—„+šœž‰…’#£}‡%±…W1*:"
R)ÂL")ÃD��n¿ËºÞ9ååRë;ñ�ȶ#øõÎª!��!ù
-��,��
����ß 'Ž$å8©®›Ø6p£¶«‡Q–xÅÍ%N‘Ü
-y<RžƒÙl"	ÅÂBQHddz‹…b«²`’*É!MLj”ˆ¤æÙ옵–F=£{2~5^|t
‘‚"‘“•—™9†ˆŠ5" "„*¯~¸$	
»*	2³�É5	d#
-�
”"dÐÆÓÖ	¯
æ
+
-Ì

oI
‰5´»îåƒUcÝ�pK ñ�!ù
-��,�������â 'Ž¤‡aeªŽUk,bP
¡Þ¦¯™ué˜G큫L.ªÌD"±ä&ÇD4a0È’E2éŽ.ȍÇÑh0&bÒ…+¡Œv9È•QI“,JfEsHR2$bvƒ#>#��{
-
-
’�‚2
-¤œ’Ÿƒ¢¤H‘“•ƒ—™#‰‹"#¹$‡"0*	*Ê
+%
{\"	Ê%ÍÁêÒ*åŒNUÈ·¯˜¯ðÈLQÁàŠ�!ù	
-��,�������ä 'Ž¤—eeªŽ×4YkÊÍb&¹‹Ü´8Ž
—Ùx,Œlh&8žŠDRQˆ’ÄQ4

gƒÁ5äA)q_‚&¥‘d°TBP @UF2A1„*;$F$


sŒ

m
1™"Ÿ¡Œ¤¦J‘“•Œ˜š$‹–,+:+„‰%
	y%
*	+
-	m¿Ì#Õ
-É%Í
"Àç—	Ò¾"
Uâ–ôéæ
^ÐÃ¥ÂA!��;
\ No newline at end of file
diff --git a/core/themes/starterkit_theme/images/icons/loading-small.svg b/core/themes/starterkit_theme/images/icons/loading-small.svg
new file mode 100644
index 0000000000000000000000000000000000000000..65ebff8b7582a781067e6bb926886ea63b819d5d
--- /dev/null
+++ b/core/themes/starterkit_theme/images/icons/loading-small.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" display="block" preserveAspectRatio="xMidYMid" width="24" height="24" style="shape-rendering: auto; display: block; background:#212121;" viewBox="0 0 100 100">
+  <g fill="#e8e8e8">
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.7s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(45 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.6s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(90 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.5s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(135 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.4s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(180 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.3s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(225 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.2s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(270 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.1s"/>
+    </rect>
+    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(315 50 50)">
+      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="0s"/>
+    </rect>
+  </g>
+</svg>