From 66451c3fad5d60119b7e8b771ed137b8b6b939ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B2=81=E6=B1=80?=
 <131967983+lutinglt@users.noreply.github.com>
Date: Thu, 30 Oct 2025 10:49:07 +0800
Subject: [PATCH 1/6] Fix circular spin animation direction
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 鲁汀 <131967983+lutinglt@users.noreply.github.com>
---
 web_src/css/modules/animations.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index deaaf83680bcb..18998fe509b26 100644
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -124,6 +124,6 @@ Ideally in the future we should use a better image for clockwise animation. */
 
 @keyframes circular-spin-keyframes {
   100% {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }

From 5794b0e4e367934af8dae14245b67fe5bc93402f Mon Sep 17 00:00:00 2001
From: lutinglt <lutinglt@users.noreply.github.com>
Date: Thu, 30 Oct 2025 12:27:13 +0800
Subject: [PATCH 2/6] octicon-sync -> gitea-sync

---
 public/assets/img/svg/gitea-sync.svg                  | 1 +
 templates/package/content/arch.tmpl                   | 2 +-
 templates/repo/issue/label_precolors.tmpl             | 2 +-
 templates/repo/issue/sidebar/reviewer_list.tmpl       | 2 +-
 templates/repo/issue/view_content/pull_merge_box.tmpl | 2 +-
 templates/repo/settings/options.tmpl                  | 2 +-
 templates/repo/settings/webhook/history.tmpl          | 2 +-
 web_src/css/modules/animations.css                    | 2 --
 web_src/js/components/RepoActionView.vue              | 4 ++--
 web_src/js/components/RepoCodeFrequency.vue           | 2 +-
 web_src/js/components/RepoContributors.vue            | 2 +-
 web_src/js/components/RepoRecentCommits.vue           | 2 +-
 web_src/js/components/ViewFileTreeItem.vue            | 2 +-
 web_src/js/svg.ts                                     | 2 ++
 web_src/svg/gitea-sync.svg                            | 5 +++++
 15 files changed, 20 insertions(+), 14 deletions(-)
 create mode 100644 public/assets/img/svg/gitea-sync.svg
 create mode 100644 web_src/svg/gitea-sync.svg

diff --git a/public/assets/img/svg/gitea-sync.svg b/public/assets/img/svg/gitea-sync.svg
new file mode 100644
index 0000000000000..3e8a21bfec838
--- /dev/null
+++ b/public/assets/img/svg/gitea-sync.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="svg gitea-sync" width="16" height="16" aria-hidden="true"><path d="M14.295 8.005a.75.75 0 0 0-.834.656 5.5 5.5 0 0 1-9.592 2.97l1.204-1.204A.25.25 0 0 0 4.896 10H1.25a.25.25 0 0 0-.25.25v3.646a.25.25 0 0 0 .427.177l1.38-1.38A7.002 7.002 0 0 0 14.95 8.84a.75.75 0 0 0-.656-.834ZM8 2.5a5.5 5.5 0 0 1 4.131 1.869l-1.204 1.204a.25.25 0 0 0 .177.427h3.646a.25.25 0 0 0 .25-.25V2.104a.25.25 0 0 0-.427-.177l-1.38 1.38A7.002 7.002 0 0 0 1.05 7.16a.75.75 0 0 0 1.49.178A5.5 5.5 0 0 1 8 2.5"/></svg>
\ No newline at end of file
diff --git a/templates/package/content/arch.tmpl b/templates/package/content/arch.tmpl
index 1c568cbb78339..be8e011fcf75b 100644
--- a/templates/package/content/arch.tmpl
+++ b/templates/package/content/arch.tmpl
@@ -9,7 +9,7 @@ SigLevel = Optional TrustAll
 Server = <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/arch/$repo/$arch"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
-				<label>{{svg "octicon-sync"}} {{ctx.Locale.Tr "packages.arch.install"}}</label>
+				<label>{{svg "gitea-sync"}} {{ctx.Locale.Tr "packages.arch.install"}}</label>
 				<div class="markup"><pre class="code-block"><code>pacman -Sy {{.PackageDescriptor.Package.LowerName}}</code></pre></div>
 			</div>
 			<div class="field">
diff --git a/templates/repo/issue/label_precolors.tmpl b/templates/repo/issue/label_precolors.tmpl
index 7be3f40350a45..b931f4b7c99d6 100644
--- a/templates/repo/issue/label_precolors.tmpl
+++ b/templates/repo/issue/label_precolors.tmpl
@@ -1,6 +1,6 @@
 <div class="precolors">
 	<button type="button" class="ui button generate-random-color">
-		{{svg "octicon-sync"}}
+		{{svg "gitea-sync"}}
 	</button>
 	<div>
 		<div class="tw-flex">
diff --git a/templates/repo/issue/sidebar/reviewer_list.tmpl b/templates/repo/issue/sidebar/reviewer_list.tmpl
index 2b5ca80fe7a7d..1e2a59315d130 100644
--- a/templates/repo/issue/sidebar/reviewer_list.tmpl
+++ b/templates/repo/issue/sidebar/reviewer_list.tmpl
@@ -77,7 +77,7 @@
 							<a href="#" class="ui muted icon link-action"
 								data-tooltip-content="{{ctx.Locale.Tr "repo.issues.re_request_review"}}"
 								data-url="{{$pageMeta.RepoLink}}/issues/request_review?action=attach&issue_ids={{$pageMeta.Issue.ID}}&id={{.ItemID}}">
-								{{svg "octicon-sync"}}
+								{{svg "gitea-sync"}}
 							</a>
 						{{end}}
 					{{end}}
diff --git a/templates/repo/issue/view_content/pull_merge_box.tmpl b/templates/repo/issue/view_content/pull_merge_box.tmpl
index 2b943d2069141..7674896eb3fca 100644
--- a/templates/repo/issue/view_content/pull_merge_box.tmpl
+++ b/templates/repo/issue/view_content/pull_merge_box.tmpl
@@ -102,7 +102,7 @@
 				{{template "repo/issue/view_content/update_branch_by_merge" $}}
 			{{else if .Issue.PullRequest.IsChecking}}
 				<div class="item">
-					{{svg "octicon-sync" 16 "circular-spin"}}
+					{{svg "gitea-sync" 16 "circular-spin"}}
 					{{ctx.Locale.Tr "repo.pulls.is_checking"}}
 				</div>
 			{{else if .Issue.PullRequest.IsAncestor}}
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
index b4680431b8acf..09b1ec0a7e959 100644
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@@ -229,7 +229,7 @@
 										{{$.CsrfTokenHtml}}
 										<input type="hidden" name="action" value="push-mirror-sync">
 										<input type="hidden" name="push_mirror_id" value="{{.ID}}">
-										<button class="ui primary tiny button" data-tooltip-content="{{ctx.Locale.Tr "repo.settings.sync_mirror"}}">{{svg "octicon-sync" 14}}</button>
+										<button class="ui primary tiny button" data-tooltip-content="{{ctx.Locale.Tr "repo.settings.sync_mirror"}}">{{svg "gitea-sync" 14}}</button>
 									</form>
 									<form method="post" class="tw-inline-block">
 										{{$.CsrfTokenHtml}}
diff --git a/templates/repo/settings/webhook/history.tmpl b/templates/repo/settings/webhook/history.tmpl
index d27c1fb8b12cd..0535033f9abbe 100644
--- a/templates/repo/settings/webhook/history.tmpl
+++ b/templates/repo/settings/webhook/history.tmpl
@@ -54,7 +54,7 @@
 								<form class="tw-py-2" action="{{$.Link}}/replay/{{.UUID}}" method="post">
 									{{$.CsrfTokenHtml}}
 									<span data-tooltip-content="{{if $.Webhook.IsActive}}{{ctx.Locale.Tr "repo.settings.webhook.replay.description"}}{{else}}{{ctx.Locale.Tr "repo.settings.webhook.replay.description_disabled"}}{{end}}">
-										<button class="ui tiny button tw-mr-0{{if not $.Webhook.IsActive}} disabled{{end}}">{{svg "octicon-sync"}}</button>
+										<button class="ui tiny button tw-mr-0{{if not $.Webhook.IsActive}} disabled{{end}}">{{svg "gitea-sync"}}</button>
 									</span>
 								</form>
 							</div>
diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index 18998fe509b26..2c904e90db565 100644
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -116,8 +116,6 @@ code.language-math.is-loading::after {
   animation-timing-function: ease-in-out;
 }
 
-/* FIXME: `octicon-sync` is counterclockwise, so this animation is also counterclockwise, it looks somewhat strange.
-Ideally in the future we should use a better image for clockwise animation. */
 .circular-spin {
   animation: circular-spin-keyframes 1s linear infinite;
 }
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 24c0f5300c480..a128c674e6c2b 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -520,7 +520,7 @@ export default defineComponent({
                 <span class="job-brief-name tw-mx-2 gt-ellipsis">{{ job.name }}</span>
               </div>
               <span class="job-brief-item-right">
-                <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun tw-mx-2 link-action" :data-url="`${run.link}/jobs/${index}/rerun`" v-if="job.canRerun"/>
+                <SvgIcon name="gitea-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun tw-mx-2 link-action" :data-url="`${run.link}/jobs/${index}/rerun`" v-if="job.canRerun"/>
                 <span class="step-summary-duration">{{ job.duration }}</span>
               </span>
             </a>
@@ -608,7 +608,7 @@ export default defineComponent({
               <!-- If the job is done and the job step log is loaded for the first time, show the loading icon
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->
-              <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="tw-mr-2 circular-spin"/>
+              <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="gitea-sync" class="tw-mr-2 circular-spin"/>
               <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" :class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"/>
               <ActionRunStatus :status="jobStep.status" class="tw-mr-2"/>
 
diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue
index 9afacbbf24948..95f6468be853c 100644
--- a/web_src/js/components/RepoCodeFrequency.vue
+++ b/web_src/js/components/RepoCodeFrequency.vue
@@ -150,7 +150,7 @@ const options: ChartOptions<'line'> = {
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="gitea-sync" class="tw-mr-2 circular-spin"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index c3a32fe3fc462..20bc9b8d10e98 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -381,7 +381,7 @@ export default defineComponent({
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="gitea-sync" class="tw-mr-2 circular-spin"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index 8ca825993b2d2..c1c7da3181336 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -128,7 +128,7 @@ const options: ChartOptions<'bar'> = {
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="gitea-sync" class="tw-mr-2 circular-spin"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
index 5173c7eb46c19..d9319e73e8108 100644
--- a/web_src/js/components/ViewFileTreeItem.vue
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -62,7 +62,7 @@ const onItemClick = (e: MouseEvent) => {
     @click.stop="onItemClick"
   >
     <div v-if="item.entryMode === 'tree'" class="item-toggle">
-      <SvgIcon v-if="isLoading" name="octicon-sync" class="circular-spin"/>
+      <SvgIcon v-if="isLoading" name="gitea-sync" class="circular-spin"/>
       <SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop.prevent="doLoadChildren"/>
     </div>
     <div class="item-content">
diff --git a/web_src/js/svg.ts b/web_src/js/svg.ts
index 2ad9bffd51ac4..4129ee7e611e9 100644
--- a/web_src/js/svg.ts
+++ b/web_src/js/svg.ts
@@ -6,6 +6,7 @@ import giteaDoubleChevronRight from '../../public/assets/img/svg/gitea-double-ch
 import giteaEmptyCheckbox from '../../public/assets/img/svg/gitea-empty-checkbox.svg';
 import giteaExclamation from '../../public/assets/img/svg/gitea-exclamation.svg';
 import giteaRunning from '../../public/assets/img/svg/gitea-running.svg';
+import giteaSync from '../../public/assets/img/svg/gitea-sync.svg';
 import octiconArchive from '../../public/assets/img/svg/octicon-archive.svg';
 import octiconArrowSwitch from '../../public/assets/img/svg/octicon-arrow-switch.svg';
 import octiconBlocked from '../../public/assets/img/svg/octicon-blocked.svg';
@@ -87,6 +88,7 @@ const svgs = {
   'gitea-empty-checkbox': giteaEmptyCheckbox,
   'gitea-exclamation': giteaExclamation,
   'gitea-running': giteaRunning,
+  'gitea-sync': giteaSync,
   'octicon-archive': octiconArchive,
   'octicon-arrow-switch': octiconArrowSwitch,
   'octicon-blocked': octiconBlocked,
diff --git a/web_src/svg/gitea-sync.svg b/web_src/svg/gitea-sync.svg
new file mode 100644
index 0000000000000..01d114c3e7f03
--- /dev/null
+++ b/web_src/svg/gitea-sync.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <g transform="scale(-1,1) translate(-16,0)">
+    <path d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.49 5.49 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5"/>
+  </g>
+</svg>
\ No newline at end of file

From 4030370783e1f9f85f35d7ffb7587a3457306020 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Thu, 30 Oct 2025 12:36:24 +0800
Subject: [PATCH 3/6] Remove unused octiconSync import

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
---
 web_src/js/svg.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web_src/js/svg.ts b/web_src/js/svg.ts
index 4129ee7e611e9..d48723762f2d0 100644
--- a/web_src/js/svg.ts
+++ b/web_src/js/svg.ts
@@ -74,7 +74,6 @@ import octiconSkip from '../../public/assets/img/svg/octicon-skip.svg';
 import octiconStar from '../../public/assets/img/svg/octicon-star.svg';
 import octiconStop from '../../public/assets/img/svg/octicon-stop.svg';
 import octiconStrikethrough from '../../public/assets/img/svg/octicon-strikethrough.svg';
-import octiconSync from '../../public/assets/img/svg/octicon-sync.svg';
 import octiconTable from '../../public/assets/img/svg/octicon-table.svg';
 import octiconTag from '../../public/assets/img/svg/octicon-tag.svg';
 import octiconTrash from '../../public/assets/img/svg/octicon-trash.svg';
@@ -156,7 +155,6 @@ const svgs = {
   'octicon-star': octiconStar,
   'octicon-stop': octiconStop,
   'octicon-strikethrough': octiconStrikethrough,
-  'octicon-sync': octiconSync,
   'octicon-table': octiconTable,
   'octicon-tag': octiconTag,
   'octicon-trash': octiconTrash,

From edcfa544ea60b9f010fc6ee2625f23e71849c623 Mon Sep 17 00:00:00 2001
From: lutinglt <lutinglt@users.noreply.github.com>
Date: Fri, 31 Oct 2025 15:16:12 +0800
Subject: [PATCH 4/6] rollback gitea-sync -> octicon-sync

---
 public/assets/img/svg/gitea-sync.svg                  | 1 -
 templates/package/content/arch.tmpl                   | 2 +-
 templates/repo/issue/label_precolors.tmpl             | 2 +-
 templates/repo/issue/sidebar/reviewer_list.tmpl       | 2 +-
 templates/repo/issue/view_content/pull_merge_box.tmpl | 2 +-
 templates/repo/settings/options.tmpl                  | 2 +-
 templates/repo/settings/webhook/history.tmpl          | 2 +-
 web_src/js/components/RepoActionView.vue              | 4 ++--
 web_src/js/components/RepoCodeFrequency.vue           | 2 +-
 web_src/js/components/RepoContributors.vue            | 2 +-
 web_src/js/components/RepoRecentCommits.vue           | 2 +-
 web_src/js/components/ViewFileTreeItem.vue            | 2 +-
 web_src/js/svg.ts                                     | 4 ++--
 web_src/svg/gitea-sync.svg                            | 5 -----
 14 files changed, 14 insertions(+), 20 deletions(-)
 delete mode 100644 public/assets/img/svg/gitea-sync.svg
 delete mode 100644 web_src/svg/gitea-sync.svg

diff --git a/public/assets/img/svg/gitea-sync.svg b/public/assets/img/svg/gitea-sync.svg
deleted file mode 100644
index 3e8a21bfec838..0000000000000
--- a/public/assets/img/svg/gitea-sync.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="svg gitea-sync" width="16" height="16" aria-hidden="true"><path d="M14.295 8.005a.75.75 0 0 0-.834.656 5.5 5.5 0 0 1-9.592 2.97l1.204-1.204A.25.25 0 0 0 4.896 10H1.25a.25.25 0 0 0-.25.25v3.646a.25.25 0 0 0 .427.177l1.38-1.38A7.002 7.002 0 0 0 14.95 8.84a.75.75 0 0 0-.656-.834ZM8 2.5a5.5 5.5 0 0 1 4.131 1.869l-1.204 1.204a.25.25 0 0 0 .177.427h3.646a.25.25 0 0 0 .25-.25V2.104a.25.25 0 0 0-.427-.177l-1.38 1.38A7.002 7.002 0 0 0 1.05 7.16a.75.75 0 0 0 1.49.178A5.5 5.5 0 0 1 8 2.5"/></svg>
\ No newline at end of file
diff --git a/templates/package/content/arch.tmpl b/templates/package/content/arch.tmpl
index be8e011fcf75b..1c568cbb78339 100644
--- a/templates/package/content/arch.tmpl
+++ b/templates/package/content/arch.tmpl
@@ -9,7 +9,7 @@ SigLevel = Optional TrustAll
 Server = <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/arch/$repo/$arch"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
-				<label>{{svg "gitea-sync"}} {{ctx.Locale.Tr "packages.arch.install"}}</label>
+				<label>{{svg "octicon-sync"}} {{ctx.Locale.Tr "packages.arch.install"}}</label>
 				<div class="markup"><pre class="code-block"><code>pacman -Sy {{.PackageDescriptor.Package.LowerName}}</code></pre></div>
 			</div>
 			<div class="field">
diff --git a/templates/repo/issue/label_precolors.tmpl b/templates/repo/issue/label_precolors.tmpl
index b931f4b7c99d6..7be3f40350a45 100644
--- a/templates/repo/issue/label_precolors.tmpl
+++ b/templates/repo/issue/label_precolors.tmpl
@@ -1,6 +1,6 @@
 <div class="precolors">
 	<button type="button" class="ui button generate-random-color">
-		{{svg "gitea-sync"}}
+		{{svg "octicon-sync"}}
 	</button>
 	<div>
 		<div class="tw-flex">
diff --git a/templates/repo/issue/sidebar/reviewer_list.tmpl b/templates/repo/issue/sidebar/reviewer_list.tmpl
index 1e2a59315d130..2b5ca80fe7a7d 100644
--- a/templates/repo/issue/sidebar/reviewer_list.tmpl
+++ b/templates/repo/issue/sidebar/reviewer_list.tmpl
@@ -77,7 +77,7 @@
 							<a href="#" class="ui muted icon link-action"
 								data-tooltip-content="{{ctx.Locale.Tr "repo.issues.re_request_review"}}"
 								data-url="{{$pageMeta.RepoLink}}/issues/request_review?action=attach&issue_ids={{$pageMeta.Issue.ID}}&id={{.ItemID}}">
-								{{svg "gitea-sync"}}
+								{{svg "octicon-sync"}}
 							</a>
 						{{end}}
 					{{end}}
diff --git a/templates/repo/issue/view_content/pull_merge_box.tmpl b/templates/repo/issue/view_content/pull_merge_box.tmpl
index 7674896eb3fca..2b943d2069141 100644
--- a/templates/repo/issue/view_content/pull_merge_box.tmpl
+++ b/templates/repo/issue/view_content/pull_merge_box.tmpl
@@ -102,7 +102,7 @@
 				{{template "repo/issue/view_content/update_branch_by_merge" $}}
 			{{else if .Issue.PullRequest.IsChecking}}
 				<div class="item">
-					{{svg "gitea-sync" 16 "circular-spin"}}
+					{{svg "octicon-sync" 16 "circular-spin"}}
 					{{ctx.Locale.Tr "repo.pulls.is_checking"}}
 				</div>
 			{{else if .Issue.PullRequest.IsAncestor}}
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
index 09b1ec0a7e959..b4680431b8acf 100644
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@@ -229,7 +229,7 @@
 										{{$.CsrfTokenHtml}}
 										<input type="hidden" name="action" value="push-mirror-sync">
 										<input type="hidden" name="push_mirror_id" value="{{.ID}}">
-										<button class="ui primary tiny button" data-tooltip-content="{{ctx.Locale.Tr "repo.settings.sync_mirror"}}">{{svg "gitea-sync" 14}}</button>
+										<button class="ui primary tiny button" data-tooltip-content="{{ctx.Locale.Tr "repo.settings.sync_mirror"}}">{{svg "octicon-sync" 14}}</button>
 									</form>
 									<form method="post" class="tw-inline-block">
 										{{$.CsrfTokenHtml}}
diff --git a/templates/repo/settings/webhook/history.tmpl b/templates/repo/settings/webhook/history.tmpl
index 0535033f9abbe..d27c1fb8b12cd 100644
--- a/templates/repo/settings/webhook/history.tmpl
+++ b/templates/repo/settings/webhook/history.tmpl
@@ -54,7 +54,7 @@
 								<form class="tw-py-2" action="{{$.Link}}/replay/{{.UUID}}" method="post">
 									{{$.CsrfTokenHtml}}
 									<span data-tooltip-content="{{if $.Webhook.IsActive}}{{ctx.Locale.Tr "repo.settings.webhook.replay.description"}}{{else}}{{ctx.Locale.Tr "repo.settings.webhook.replay.description_disabled"}}{{end}}">
-										<button class="ui tiny button tw-mr-0{{if not $.Webhook.IsActive}} disabled{{end}}">{{svg "gitea-sync"}}</button>
+										<button class="ui tiny button tw-mr-0{{if not $.Webhook.IsActive}} disabled{{end}}">{{svg "octicon-sync"}}</button>
 									</span>
 								</form>
 							</div>
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index a128c674e6c2b..24c0f5300c480 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -520,7 +520,7 @@ export default defineComponent({
                 <span class="job-brief-name tw-mx-2 gt-ellipsis">{{ job.name }}</span>
               </div>
               <span class="job-brief-item-right">
-                <SvgIcon name="gitea-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun tw-mx-2 link-action" :data-url="`${run.link}/jobs/${index}/rerun`" v-if="job.canRerun"/>
+                <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun tw-mx-2 link-action" :data-url="`${run.link}/jobs/${index}/rerun`" v-if="job.canRerun"/>
                 <span class="step-summary-duration">{{ job.duration }}</span>
               </span>
             </a>
@@ -608,7 +608,7 @@ export default defineComponent({
               <!-- If the job is done and the job step log is loaded for the first time, show the loading icon
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->
-              <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="gitea-sync" class="tw-mr-2 circular-spin"/>
+              <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="tw-mr-2 circular-spin"/>
               <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" :class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"/>
               <ActionRunStatus :status="jobStep.status" class="tw-mr-2"/>
 
diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue
index 95f6468be853c..9afacbbf24948 100644
--- a/web_src/js/components/RepoCodeFrequency.vue
+++ b/web_src/js/components/RepoCodeFrequency.vue
@@ -150,7 +150,7 @@ const options: ChartOptions<'line'> = {
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="gitea-sync" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index 20bc9b8d10e98..c3a32fe3fc462 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -381,7 +381,7 @@ export default defineComponent({
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="gitea-sync" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index c1c7da3181336..8ca825993b2d2 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -128,7 +128,7 @@ const options: ChartOptions<'bar'> = {
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="gitea-sync" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
index d9319e73e8108..5173c7eb46c19 100644
--- a/web_src/js/components/ViewFileTreeItem.vue
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -62,7 +62,7 @@ const onItemClick = (e: MouseEvent) => {
     @click.stop="onItemClick"
   >
     <div v-if="item.entryMode === 'tree'" class="item-toggle">
-      <SvgIcon v-if="isLoading" name="gitea-sync" class="circular-spin"/>
+      <SvgIcon v-if="isLoading" name="octicon-sync" class="circular-spin"/>
       <SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop.prevent="doLoadChildren"/>
     </div>
     <div class="item-content">
diff --git a/web_src/js/svg.ts b/web_src/js/svg.ts
index d48723762f2d0..2ad9bffd51ac4 100644
--- a/web_src/js/svg.ts
+++ b/web_src/js/svg.ts
@@ -6,7 +6,6 @@ import giteaDoubleChevronRight from '../../public/assets/img/svg/gitea-double-ch
 import giteaEmptyCheckbox from '../../public/assets/img/svg/gitea-empty-checkbox.svg';
 import giteaExclamation from '../../public/assets/img/svg/gitea-exclamation.svg';
 import giteaRunning from '../../public/assets/img/svg/gitea-running.svg';
-import giteaSync from '../../public/assets/img/svg/gitea-sync.svg';
 import octiconArchive from '../../public/assets/img/svg/octicon-archive.svg';
 import octiconArrowSwitch from '../../public/assets/img/svg/octicon-arrow-switch.svg';
 import octiconBlocked from '../../public/assets/img/svg/octicon-blocked.svg';
@@ -74,6 +73,7 @@ import octiconSkip from '../../public/assets/img/svg/octicon-skip.svg';
 import octiconStar from '../../public/assets/img/svg/octicon-star.svg';
 import octiconStop from '../../public/assets/img/svg/octicon-stop.svg';
 import octiconStrikethrough from '../../public/assets/img/svg/octicon-strikethrough.svg';
+import octiconSync from '../../public/assets/img/svg/octicon-sync.svg';
 import octiconTable from '../../public/assets/img/svg/octicon-table.svg';
 import octiconTag from '../../public/assets/img/svg/octicon-tag.svg';
 import octiconTrash from '../../public/assets/img/svg/octicon-trash.svg';
@@ -87,7 +87,6 @@ const svgs = {
   'gitea-empty-checkbox': giteaEmptyCheckbox,
   'gitea-exclamation': giteaExclamation,
   'gitea-running': giteaRunning,
-  'gitea-sync': giteaSync,
   'octicon-archive': octiconArchive,
   'octicon-arrow-switch': octiconArrowSwitch,
   'octicon-blocked': octiconBlocked,
@@ -155,6 +154,7 @@ const svgs = {
   'octicon-star': octiconStar,
   'octicon-stop': octiconStop,
   'octicon-strikethrough': octiconStrikethrough,
+  'octicon-sync': octiconSync,
   'octicon-table': octiconTable,
   'octicon-tag': octiconTag,
   'octicon-trash': octiconTrash,
diff --git a/web_src/svg/gitea-sync.svg b/web_src/svg/gitea-sync.svg
deleted file mode 100644
index 01d114c3e7f03..0000000000000
--- a/web_src/svg/gitea-sync.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
-  <g transform="scale(-1,1) translate(-16,0)">
-    <path d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.49 5.49 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5"/>
-  </g>
-</svg>
\ No newline at end of file

From f01ae482352b39c7c71826409de535c6b951ddd2 Mon Sep 17 00:00:00 2001
From: lutinglt <lutinglt@users.noreply.github.com>
Date: Fri, 31 Oct 2025 15:18:52 +0800
Subject: [PATCH 5/6] circular-spin: octicon-sync -> gitea-running

---
 templates/repo/issue/view_content/pull_merge_box.tmpl | 2 +-
 web_src/js/components/RepoActionView.vue              | 2 +-
 web_src/js/components/RepoCodeFrequency.vue           | 2 +-
 web_src/js/components/RepoContributors.vue            | 2 +-
 web_src/js/components/RepoRecentCommits.vue           | 2 +-
 web_src/js/components/ViewFileTreeItem.vue            | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/templates/repo/issue/view_content/pull_merge_box.tmpl b/templates/repo/issue/view_content/pull_merge_box.tmpl
index 2b943d2069141..edef303c01cae 100644
--- a/templates/repo/issue/view_content/pull_merge_box.tmpl
+++ b/templates/repo/issue/view_content/pull_merge_box.tmpl
@@ -102,7 +102,7 @@
 				{{template "repo/issue/view_content/update_branch_by_merge" $}}
 			{{else if .Issue.PullRequest.IsChecking}}
 				<div class="item">
-					{{svg "octicon-sync" 16 "circular-spin"}}
+					{{svg "gitea-running" 16 "circular-spin"}}
 					{{ctx.Locale.Tr "repo.pulls.is_checking"}}
 				</div>
 			{{else if .Issue.PullRequest.IsAncestor}}
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 24c0f5300c480..375f2070548a4 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -608,7 +608,7 @@ export default defineComponent({
               <!-- If the job is done and the job step log is loaded for the first time, show the loading icon
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->
-              <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="tw-mr-2 circular-spin"/>
+              <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="gitea-running" class="tw-mr-2 circular-spin"/>
               <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" :class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"/>
               <ActionRunStatus :status="jobStep.status" class="tw-mr-2"/>
 
diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue
index 9afacbbf24948..50fbeaa1e2e56 100644
--- a/web_src/js/components/RepoCodeFrequency.vue
+++ b/web_src/js/components/RepoCodeFrequency.vue
@@ -150,7 +150,7 @@ const options: ChartOptions<'line'> = {
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="gitea-running" class="tw-mr-2 circular-spin"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index c3a32fe3fc462..f3048d1f8511e 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -381,7 +381,7 @@ export default defineComponent({
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="gitea-running" class="tw-mr-2 circular-spin"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index 8ca825993b2d2..53462c86e1274 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -128,7 +128,7 @@ const options: ChartOptions<'bar'> = {
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="gitea-running" class="tw-mr-2 circular-spin"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
index 5173c7eb46c19..baff3d1707123 100644
--- a/web_src/js/components/ViewFileTreeItem.vue
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -62,7 +62,7 @@ const onItemClick = (e: MouseEvent) => {
     @click.stop="onItemClick"
   >
     <div v-if="item.entryMode === 'tree'" class="item-toggle">
-      <SvgIcon v-if="isLoading" name="octicon-sync" class="circular-spin"/>
+      <SvgIcon v-if="isLoading" name="gitea-running" class="circular-spin"/>
       <SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop.prevent="doLoadChildren"/>
     </div>
     <div class="item-content">

From 09606319f98036c9255882a4a002de77be548da9 Mon Sep 17 00:00:00 2001
From: lutinglt <lutinglt@users.noreply.github.com>
Date: Fri, 31 Oct 2025 15:21:23 +0800
Subject: [PATCH 6/6] circular-spin -> rotate-clockwise

---
 templates/repo/actions/status.tmpl                    | 2 +-
 templates/repo/issue/view_content/pull_merge_box.tmpl | 2 +-
 web_src/css/modules/animations.css                    | 6 +++---
 web_src/js/components/ActionRunStatus.vue             | 2 +-
 web_src/js/components/RepoActionView.vue              | 2 +-
 web_src/js/components/RepoCodeFrequency.vue           | 2 +-
 web_src/js/components/RepoContributors.vue            | 2 +-
 web_src/js/components/RepoRecentCommits.vue           | 2 +-
 web_src/js/components/ViewFileTreeItem.vue            | 2 +-
 9 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/templates/repo/actions/status.tmpl b/templates/repo/actions/status.tmpl
index 055bc714c947c..1e5465a97fbd6 100644
--- a/templates/repo/actions/status.tmpl
+++ b/templates/repo/actions/status.tmpl
@@ -16,7 +16,7 @@
 {{else if eq .status "blocked"}}
 	{{svg "octicon-blocked" $size (printf "text yellow %s" $className)}}
 {{else if eq .status "running"}}
-	{{svg "gitea-running" $size (printf "text yellow circular-spin %s" $className)}}
+	{{svg "gitea-running" $size (printf "text yellow rotate-clockwise %s" $className)}}
 {{else}}{{/*failure, unknown*/}}
 	{{svg "octicon-x-circle-fill" $size (printf "text red %s" $className)}}
 {{end}}
diff --git a/templates/repo/issue/view_content/pull_merge_box.tmpl b/templates/repo/issue/view_content/pull_merge_box.tmpl
index edef303c01cae..159910e36eeba 100644
--- a/templates/repo/issue/view_content/pull_merge_box.tmpl
+++ b/templates/repo/issue/view_content/pull_merge_box.tmpl
@@ -102,7 +102,7 @@
 				{{template "repo/issue/view_content/update_branch_by_merge" $}}
 			{{else if .Issue.PullRequest.IsChecking}}
 				<div class="item">
-					{{svg "gitea-running" 16 "circular-spin"}}
+					{{svg "gitea-running" 16 "rotate-clockwise"}}
 					{{ctx.Locale.Tr "repo.pulls.is_checking"}}
 				</div>
 			{{else if .Issue.PullRequest.IsAncestor}}
diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index 2c904e90db565..779339c46b39d 100644
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -116,11 +116,11 @@ code.language-math.is-loading::after {
   animation-timing-function: ease-in-out;
 }
 
-.circular-spin {
-  animation: circular-spin-keyframes 1s linear infinite;
+.rotate-clockwise {
+  animation: rotate-clockwise-keyframes 1s linear infinite;
 }
 
-@keyframes circular-spin-keyframes {
+@keyframes rotate-clockwise-keyframes {
   100% {
     transform: rotate(360deg);
   }
diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue
index 22f79384e30fa..24fae920a8bf0 100644
--- a/web_src/js/components/ActionRunStatus.vue
+++ b/web_src/js/components/ActionRunStatus.vue
@@ -24,7 +24,7 @@ withDefaults(defineProps<{
     <SvgIcon name="octicon-stop" class="text grey" :size="size" :class="className" v-else-if="status === 'cancelled'"/>
     <SvgIcon name="octicon-circle" class="text grey" :size="size" :class="className" v-else-if="status === 'waiting'"/>
     <SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class="className" v-else-if="status === 'blocked'"/>
-    <SvgIcon name="gitea-running" class="text yellow" :size="size" :class="'circular-spin ' + className" v-else-if="status === 'running'"/>
+    <SvgIcon name="gitea-running" class="text yellow" :size="size" :class="'rotate-clockwise ' + className" v-else-if="status === 'running'"/>
     <SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else/><!-- failure, unknown -->
   </span>
 </template>
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 375f2070548a4..300f635793456 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -608,7 +608,7 @@ export default defineComponent({
               <!-- If the job is done and the job step log is loaded for the first time, show the loading icon
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->
-              <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="gitea-running" class="tw-mr-2 circular-spin"/>
+              <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
               <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" :class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"/>
               <ActionRunStatus :status="jobStep.status" class="tw-mr-2"/>
 
diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue
index 50fbeaa1e2e56..efdf2bae713b8 100644
--- a/web_src/js/components/RepoCodeFrequency.vue
+++ b/web_src/js/components/RepoCodeFrequency.vue
@@ -150,7 +150,7 @@ const options: ChartOptions<'line'> = {
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="gitea-running" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index f3048d1f8511e..08d63540e280b 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -381,7 +381,7 @@ export default defineComponent({
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="gitea-running" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index 53462c86e1274..39e86781d112d 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -128,7 +128,7 @@ const options: ChartOptions<'bar'> = {
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="gitea-running" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
index baff3d1707123..06d761dd65311 100644
--- a/web_src/js/components/ViewFileTreeItem.vue
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -62,7 +62,7 @@ const onItemClick = (e: MouseEvent) => {
     @click.stop="onItemClick"
   >
     <div v-if="item.entryMode === 'tree'" class="item-toggle">
-      <SvgIcon v-if="isLoading" name="gitea-running" class="circular-spin"/>
+      <SvgIcon v-if="isLoading" name="gitea-running" class="rotate-clockwise"/>
       <SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop.prevent="doLoadChildren"/>
     </div>
     <div class="item-content">