From c85bb6263503ebd335863f413214a775973a1fac Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 9 Dec 2020 20:03:19 +0100
Subject: [PATCH] Replace more icons with SVG, repo search tweaks (#13860)

* Replace more icons with SVG

- Replace remaining icons on admin page with SVG
- Fix vertical menu background on arc-green
- Minor improvments to frontpage repo search
- More icon replacements here and there

* fix integration

* whitespace tweak

* add comment

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
---
 integrations/auth_ldap_test.go                |  8 +--
 public/img/svg/gitea-double-chevron-left.svg  |  1 +
 public/img/svg/gitea-double-chevron-right.svg |  1 +
 templates/admin/auth/list.tmpl                |  4 +-
 templates/admin/config.tmpl                   | 64 +++++++++----------
 templates/admin/emails/list.tmpl              |  6 +-
 templates/admin/monitor.tmpl                  |  4 +-
 templates/admin/notice.tmpl                   |  4 +-
 templates/admin/org/list.tmpl                 |  2 +-
 templates/admin/queue.tmpl                    |  6 +-
 templates/admin/repo/list.tmpl                |  4 +-
 templates/admin/repo/unadopted.tmpl           | 12 ++--
 templates/admin/user/list.tmpl                | 10 +--
 templates/base/paginate.tmpl                  | 16 +++--
 templates/repo/branch/list.tmpl               |  4 +-
 templates/repo/branch_dropdown.tmpl           |  4 +-
 templates/repo/diff/new_review.tmpl           |  8 +--
 .../repo/issue/branch_selector_field.tmpl     |  4 +-
 templates/repo/projects/list.tmpl             |  4 +-
 templates/repo/settings/lfs_pointers.tmpl     |  6 +-
 templates/repo/settings/webhook/list.tmpl     |  9 +--
 templates/user/dashboard/repolist.tmpl        | 44 +++++++++----
 templates/user/settings/applications.tmpl     |  1 +
 .../user/settings/applications_oauth2.tmpl    |  5 +-
 templates/user/settings/grants_oauth2.tmpl    |  4 +-
 templates/user/settings/repos.tmpl            |  4 +-
 web_src/js/index.js                           |  9 ++-
 web_src/less/_base.less                       | 24 ++++++-
 web_src/svg/gitea-double-chevron-left.svg     |  1 +
 web_src/svg/gitea-double-chevron-right.svg    |  1 +
 30 files changed, 166 insertions(+), 108 deletions(-)
 create mode 100644 public/img/svg/gitea-double-chevron-left.svg
 create mode 100644 public/img/svg/gitea-double-chevron-right.svg
 create mode 100644 web_src/svg/gitea-double-chevron-left.svg
 create mode 100644 web_src/svg/gitea-double-chevron-right.svg

diff --git a/integrations/auth_ldap_test.go b/integrations/auth_ldap_test.go
index 156945841..a3ed172ba 100644
--- a/integrations/auth_ldap_test.go
+++ b/integrations/auth_ldap_test.go
@@ -172,14 +172,14 @@ func TestLDAPUserSync(t *testing.T) {
 		assert.Equal(t, u.UserName, strings.TrimSpace(tds.Find("td:nth-child(2) a").Text()))
 		assert.Equal(t, u.Email, strings.TrimSpace(tds.Find("td:nth-child(3) span").Text()))
 		if u.IsAdmin {
-			assert.True(t, tds.Find("td:nth-child(5) i").HasClass("fa-check-square-o"))
+			assert.True(t, tds.Find("td:nth-child(5) svg").HasClass("octicon-check"))
 		} else {
-			assert.True(t, tds.Find("td:nth-child(5) i").HasClass("fa-square-o"))
+			assert.True(t, tds.Find("td:nth-child(5) svg").HasClass("octicon-x"))
 		}
 		if u.IsRestricted {
-			assert.True(t, tds.Find("td:nth-child(6) i").HasClass("fa-check-square-o"))
+			assert.True(t, tds.Find("td:nth-child(6) svg").HasClass("octicon-check"))
 		} else {
-			assert.True(t, tds.Find("td:nth-child(6) i").HasClass("fa-square-o"))
+			assert.True(t, tds.Find("td:nth-child(6) svg").HasClass("octicon-x"))
 		}
 	}
 
diff --git a/public/img/svg/gitea-double-chevron-left.svg b/public/img/svg/gitea-double-chevron-left.svg
new file mode 100644
index 000000000..68d2d9978
--- /dev/null
+++ b/public/img/svg/gitea-double-chevron-left.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg gitea-double-chevron-left" width="16" height="16" aria-hidden="true"><g fill-rule="evenodd"><path d="M7.91 12.77a.75.75 0 01-1.06 0L2.61 8.52a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.2 8l3.72 3.72a.75.75 0 010 1.06z"/><path d="M13.39 12.77a.75.75 0 01-1.06 0L8.08 8.52a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L9.67 8l3.72 3.72a.75.75 0 010 1.06z"/></g></svg>
\ No newline at end of file
diff --git a/public/img/svg/gitea-double-chevron-right.svg b/public/img/svg/gitea-double-chevron-right.svg
new file mode 100644
index 000000000..06ff40fd5
--- /dev/null
+++ b/public/img/svg/gitea-double-chevron-right.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg gitea-double-chevron-right" width="16" height="16" aria-hidden="true"><g fill-rule="evenodd"><path d="M8.09 3.23a.75.75 0 011.06 0l4.24 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L11.8 8 8.08 4.28a.75.75 0 010-1.06z"/><path d="M2.61 3.23a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L6.33 8 2.61 4.28a.75.75 0 010-1.06z"/></g></svg>
\ No newline at end of file
diff --git a/templates/admin/auth/list.tmpl b/templates/admin/auth/list.tmpl
index 851254c09..d5d8aadb5 100644
--- a/templates/admin/auth/list.tmpl
+++ b/templates/admin/auth/list.tmpl
@@ -28,10 +28,10 @@
 							<td>{{.ID}}</td>
 							<td><a href="{{AppSubUrl}}/admin/auths/{{.ID}}">{{.Name}}</a></td>
 							<td>{{.TypeName}}</td>
-							<td><i class="fa fa{{if .IsActived}}-check{{end}}-square-o"></i></td>
+							<td>{{if .IsActived}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
 							<td><span class="poping up" data-content="{{.UpdatedUnix.FormatShort}}" data-variation="tiny">{{.UpdatedUnix.FormatShort}}</span></td>
 							<td><span class="poping up" data-content="{{.CreatedUnix.FormatLong}}" data-variation="tiny">{{.CreatedUnix.FormatShort}}</span></td>
-							<td><a href="{{AppSubUrl}}/admin/auths/{{.ID}}"><i class="fa fa-pencil-square-o"></i></a></td>
+							<td><a href="{{AppSubUrl}}/admin/auths/{{.ID}}">{{svg "octicon-pencil"}}</a></td>
 						</tr>
 					{{end}}
 				</tbody>
diff --git a/templates/admin/config.tmpl b/templates/admin/config.tmpl
index 00ad7a9a0..3fbb80caf 100644
--- a/templates/admin/config.tmpl
+++ b/templates/admin/config.tmpl
@@ -19,9 +19,9 @@
 				<dt>{{.i18n.Tr "admin.config.domain"}}</dt>
 				<dd>{{.Domain}}</dd>
 				<dt>{{.i18n.Tr "admin.config.offline_mode"}}</dt>
-				<dd><i class="fa fa{{if .OfflineMode}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .OfflineMode}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.i18n.Tr "admin.config.disable_router_log"}}</dt>
-				<dd><i class="fa fa{{if .DisableRouterLog}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .DisableRouterLog}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 
 				<div class="ui divider"></div>
 
@@ -67,10 +67,10 @@
 		<div class="ui attached table segment">
 			<dl class="dl-horizontal admin-dl-horizontal">
 				<dt>{{.i18n.Tr "admin.config.ssh_enabled"}}</dt>
-				<dd><i class="fa fa{{if not .SSH.Disabled}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if not .SSH.Disabled}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				{{if not .SSH.Disabled}}
 					<dt>{{.i18n.Tr "admin.config.ssh_start_builtin_server"}}</dt>
-					<dd><i class="fa fa{{if .SSH.StartBuiltinServer}}-check{{end}}-square-o"></i></dd>
+					<dd>{{if not .SSH.StartBuiltinServer}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 					<dt>{{.i18n.Tr "admin.config.ssh_domain"}}</dt>
 					<dd>{{.SSH.Domain}}</dd>
 					<dt>{{.i18n.Tr "admin.config.ssh_port"}}</dt>
@@ -86,7 +86,7 @@
 						<dt>{{.i18n.Tr "admin.config.ssh_keygen_path"}}</dt>
 						<dd>{{.SSH.KeygenPath}}</dd>
 						<dt>{{.i18n.Tr "admin.config.ssh_minimum_key_size_check"}}</dt>
-						<dd><i class="fa fa{{if .SSH.MinimumKeySizeCheck}}-check{{end}}-square-o"></i></dd>
+						<dd>{{if .SSH.MinimumKeySizeCheck}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 						{{if .SSH.MinimumKeySizeCheck}}
 							<dt>{{.i18n.Tr "admin.config.ssh_minimum_key_sizes"}}</dt>
 							<dd>{{.SSH.MinimumKeySizes}}</dd>
@@ -102,7 +102,7 @@
 		<div class="ui attached table segment">
 			<dl class="dl-horizontal admin-dl-horizontal">
 				<dt>{{.i18n.Tr "admin.config.lfs_enabled"}}</dt>
-				<dd><i class="fa fa{{if .LFS.StartServer}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .LFS.StartServer}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				{{if .LFS.StartServer}}
 					<dt>{{.i18n.Tr "admin.config.lfs_content_path"}}</dt>
 					<dd>{{.LFS.Path}}</dd>
@@ -146,36 +146,36 @@
 		<div class="ui attached table segment">
 			<dl class="dl-horizontal admin-dl-horizontal">
 				<dt>{{.i18n.Tr "admin.config.register_email_confirm"}}</dt>
-				<dd><i class="fa fa{{if .Service.RegisterEmailConfirm}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .Service.RegisterEmailConfirm}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.i18n.Tr "admin.config.disable_register"}}</dt>
-				<dd><i class="fa fa{{if .Service.DisableRegistration}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .Service.DisableRegistration}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.i18n.Tr "admin.config.allow_only_external_registration"}}</dt>
-				<dd><i class="fa fa{{if .Service.AllowOnlyExternalRegistration}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .Service.AllowOnlyExternalRegistration}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.i18n.Tr "admin.config.show_registration_button"}}</dt>
-				<dd><i class="fa fa{{if .Service.ShowRegistrationButton}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .Service.ShowRegistrationButton}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.i18n.Tr "admin.config.enable_openid_signup"}}</dt>
-				<dd><i class="fa fa{{if .Service.EnableOpenIDSignUp}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .Service.EnableOpenIDSignUp}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.i18n.Tr "admin.config.enable_openid_signin"}}</dt>
-				<dd><i class="fa fa{{if .Service.EnableOpenIDSignIn}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .Service.EnableOpenIDSignIn}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.i18n.Tr "admin.config.require_sign_in_view"}}</dt>
-				<dd><i class="fa fa{{if .Service.RequireSignInView}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .Service.RequireSignInView}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.i18n.Tr "admin.config.mail_notify"}}</dt>
-				<dd><i class="fa fa{{if .Service.EnableNotifyMail}}-check{{end}}-square-o"></i></dd>
-				{{/*<dt>{{.i18n.Tr "admin.config.disable_key_size_check"}}</dt>
-				<dd><i class="fa fa{{if .Service.DisableMinimumKeySizeCheck}}-check{{end}}-square-o"></i></dd>*/}}
+				<dd>{{if .Service.EnableNotifyMail}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
+				<dt>{{.i18n.Tr "admin.config.disable_key_size_check"}}</dt>
+				<dd>{{if .SSH.MinimumKeySizeCheck}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.i18n.Tr "admin.config.enable_captcha"}}</dt>
-				<dd><i class="fa fa{{if .Service.EnableCaptcha}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .Service.EnableCaptcha}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.i18n.Tr "admin.config.default_keep_email_private"}}</dt>
-				<dd><i class="fa fa{{if .Service.DefaultKeepEmailPrivate}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .Service.DefaultKeepEmailPrivate}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.i18n.Tr "admin.config.default_allow_create_organization"}}</dt>
-				<dd><i class="fa fa{{if .Service.DefaultAllowCreateOrganization}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .Service.DefaultAllowCreateOrganization}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.i18n.Tr "admin.config.enable_timetracking"}}</dt>
-				<dd><i class="fa fa{{if .Service.EnableTimetracking}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .Service.EnableTimetracking}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				{{if .Service.EnableTimetracking}}
 					<dt>{{.i18n.Tr "admin.config.default_enable_timetracking"}}</dt>
-					<dd><i class="fa fa{{if .Service.DefaultEnableTimetracking}}-check{{end}}-square-o"></i></dd>
+					<dd>{{if .Service.DefaultEnableTimetracking}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 					<dt>{{.i18n.Tr "admin.config.default_allow_only_contributors_to_track_time"}}</dt>
-					<dd><i class="fa fa{{if .Service.DefaultAllowOnlyContributorsToTrackTime}}-check{{end}}-square-o"></i></dd>
+					<dd>{{if .Service.DefaultAllowOnlyContributorsToTrackTime}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				{{end}}
 				<dt>{{.i18n.Tr "admin.config.default_visibility_organization"}}</dt>
 				<dd>{{.Service.DefaultOrgVisibility}}</dd>
@@ -183,7 +183,7 @@
 				<dt>{{.i18n.Tr "admin.config.no_reply_address"}}</dt>
 				<dd>{{if .Service.NoReplyAddress}}{{.Service.NoReplyAddress}}{{else}}-{{end}}</dd>
 				<dt>{{.i18n.Tr "admin.config.default_enable_dependencies"}}</dt>
-				<dd><i class="fa fa{{if .Service.DefaultEnableDependencies}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .Service.DefaultEnableDependencies}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<div class="ui divider"></div>
 				<dt>{{.i18n.Tr "admin.config.active_code_lives"}}</dt>
 				<dd>{{.Service.ActiveCodeLives}} {{.i18n.Tr "tool.raw_minutes"}}</dd>
@@ -202,7 +202,7 @@
 				<dt>{{.i18n.Tr "admin.config.deliver_timeout"}}</dt>
 				<dd>{{.Webhook.DeliverTimeout}} {{.i18n.Tr "tool.raw_seconds"}}</dd>
 				<dt>{{.i18n.Tr "admin.config.skip_tls_verify"}}</dt>
-				<dd><i class="fa fa{{if .Webhook.SkipTLSVerify}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .Webhook.SkipTLSVerify}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 			</dl>
 		</div>
 
@@ -212,18 +212,18 @@
 		<div class="ui attached table segment">
 			<dl class="dl-horizontal admin-dl-horizontal">
 				<dt>{{.i18n.Tr "admin.config.mailer_enabled"}}</dt>
-				<dd><i class="fa fa{{if .MailerEnabled}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .MailerEnabled}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				{{if .MailerEnabled}}
 					<dt>{{.i18n.Tr "admin.config.mailer_name"}}</dt>
 					<dd>{{.Mailer.Name}}</dd>
 					{{if eq .Mailer.MailerType "smtp"}}
 						<dt>{{.i18n.Tr "admin.config.mailer_disable_helo"}}</dt>
-						<dd><i class="fa fa{{if .Mailer.DisableHelo}}-check{{end}}-square-o"></i></dd>
+						<dd>{{if .DisableHelo}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 						<dt>{{.i18n.Tr "admin.config.mailer_host"}}</dt>
 						<dd>{{.Mailer.Host}}</dd>
 					{{else if eq .Mailer.MailerType "sendmail"}}
 						<dt>{{.i18n.Tr "admin.config.mailer_use_sendmail"}}</dt>
-						<dd><i class="fa fa-check-square-o"></i></dd>
+						<dd>{{svg "octicon-check"}}</dd>
 						<dt>{{.i18n.Tr "admin.config.mailer_sendmail_path"}}</dt>
 						<dd>{{.Mailer.SendmailPath}}</dd>
 						<dt>{{.i18n.Tr "admin.config.mailer_sendmail_args"}}</dt>
@@ -282,7 +282,7 @@
 				<dt>{{.i18n.Tr "admin.config.session_life_time"}}</dt>
 				<dd>{{.SessionConfig.Maxlifetime}} {{.i18n.Tr "tool.raw_seconds"}}</dd>
 				<dt>{{.i18n.Tr "admin.config.https_only"}}</dt>
-				<dd><i class="fa fa{{if .SessionConfig.Secure}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .SessionConfig.Secure}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 			</dl>
 		</div>
 
@@ -292,10 +292,10 @@
 		<div class="ui attached table segment">
 			<dl class="dl-horizontal admin-dl-horizontal">
 				<dt>{{.i18n.Tr "admin.config.disable_gravatar"}}</dt>
-				<dd><i class="fa fa{{if .DisableGravatar}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .DisableGravatar}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<div class="ui divider"></div>
 				<dt>{{.i18n.Tr "admin.config.enable_federated_avatar"}}</dt>
-				<dd><i class="fa fa{{if .EnableFederatedAvatar}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .EnableFederatedAvatar}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 			</dl>
 		</div>
 
@@ -305,7 +305,7 @@
 		<div class="ui attached table segment">
 			<dl class="dl-horizontal admin-dl-horizontal">
 				<dt>{{.i18n.Tr "admin.config.git_disable_diff_highlight"}}</dt>
-				<dd><i class="fa fa{{if .Git.DisableDiffHighlight}}-check{{end}}-square-o"></i></dd>
+				<dd>{{if .Git.DisableDiffHighlight}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.i18n.Tr "admin.config.git_max_diff_lines"}}</dt>
 				<dd>{{.Git.MaxGitDiffLines}}</dd>
 				<dt>{{.i18n.Tr "admin.config.git_max_diff_line_characters"}}</dt>
@@ -411,7 +411,7 @@
 						<dd>{{$.i18n.Tr "admin.config.routes_to_default_logger"}}</dd>
 					{{end}}
 					<dt>{{$.i18n.Tr "admin.config.xorm_log_sql"}}</dt>
-					<dd><i class="fa fa{{if $.LogSQL}}-check{{end}}-square-o"></i></dd>
+					<dd>{{if $.LogSQL}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				{{else}}
 					<dd>{{$.i18n.Tr "admin.config.disabled_logger"}}</dd>
 				{{end}}
diff --git a/templates/admin/emails/list.tmpl b/templates/admin/emails/list.tmpl
index 752c01044..87421d258 100644
--- a/templates/admin/emails/list.tmpl
+++ b/templates/admin/emails/list.tmpl
@@ -52,17 +52,17 @@
 							<td><a href="{{AppSubUrl}}/{{.Name}}">{{.Name}}</a></td>
 							<td><span class="text truncate">{{.FullName}}</span></td>
 							<td><span class="text email">{{.Email}}</span></td>
-							<td><i class="fa fa{{if .IsPrimary}}-check{{end}}-square-o"></i></td>
+							<td>{{if .IsPrimary}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td><
 							<td>
 								{{if .CanChange}}
 									<a class="link-email-action" href data-uid="{{.UID}}"
 										data-email="{{.Email}}"
 										data-primary="{{if .IsPrimary}}1{{else}}0{{end}}"
 										data-activate="{{if .IsActivated}}0{{else}}1{{end}}">
-										<i class="fa fa{{if .IsActivated}}-check{{end}}-square-o"></i>
+										{{if .IsActivated}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}
 									</a>
 								{{else}}
-									<i class="fa fa{{if .IsActivated}}-check{{end}}-square-o"></i>
+									{{if .IsActivated}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}
 								{{end}}
 							</td>
 						</tr>
diff --git a/templates/admin/monitor.tmpl b/templates/admin/monitor.tmpl
index 5a38b92ee..272ebff6c 100644
--- a/templates/admin/monitor.tmpl
+++ b/templates/admin/monitor.tmpl
@@ -86,7 +86,7 @@
 							<td>{{.Description}}</td>
 							<td>{{DateFmtLong .Start}}</td>
 							<td>{{TimeSince .Start $.Lang}}</td>
-							<td><a class="delete-button" href="" data-url="{{$.Link}}/cancel/{{.PID}}" data-id="{{.PID}}" data-name="{{.Description}}"><i class="close icon text red"></i></a></td>
+							<td><a class="delete-button" href="" data-url="{{$.Link}}/cancel/{{.PID}}" data-id="{{.PID}}" data-name="{{.Description}}">{{svg "octicon-trashcan" 16 "text-red"}}</a></td>
 						</tr>
 					{{end}}
 				</tbody>
@@ -96,7 +96,7 @@
 </div>
 <div class="ui small basic delete modal">
 	<div class="ui icon header">
-		<i class="close icon"></i>
+		{{svg "octicon-x" 16 "close inside"}}
 		{{.i18n.Tr "admin.monitor.process.cancel"}}
 	</div>
 	<div class="content">
diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl
index 3320f5884..f9cda68df 100644
--- a/templates/admin/notice.tmpl
+++ b/templates/admin/notice.tmpl
@@ -30,7 +30,7 @@
 							<td>{{$.i18n.Tr .TrStr}}</td>
 							<td class="view-detail"><span class="notice-description text truncate">{{.Description}}</span></td>
 							<td><span class="notice-created-time poping up" data-content="{{.CreatedUnix.AsTime}}" data-variation="inverted tiny">{{.CreatedUnix.FormatShort}}</span></td>
-							<td><a href="#"><i class="browser icon view-detail"></i></a></td>
+							<td><a href="#">{{svg "octicon-note" 16 "view-detail"}}</a></td>
 						</tr>
 					{{end}}
 				</tbody>
@@ -74,7 +74,7 @@
 </div>
 
 <div class="ui modal admin" id="detail-modal">
-	<i class="close icon inside"></i>
+	{{svg "octicon-x" 16 "close inside"}}
 	<div class="header">{{$.i18n.Tr "admin.notices.view_detail_header"}}</div>
 	<div class="content">
 		<div class="sub header"></div>
diff --git a/templates/admin/org/list.tmpl b/templates/admin/org/list.tmpl
index 92b119d65..e0c9ac39a 100644
--- a/templates/admin/org/list.tmpl
+++ b/templates/admin/org/list.tmpl
@@ -45,7 +45,7 @@
 							<td>{{.NumMembers}}</td>
 							<td>{{.NumRepos}}</td>
 							<td><span title="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</span></td>
-							<td><a href="{{AppSubUrl}}/org/{{.Name}}/settings"><i class="fa fa-pencil-square-o"></i></a></td>
+							<td><a href="{{AppSubUrl}}/org/{{.Name}}/settings">{{svg "octicon-pencil"}}</a></td>
 						</tr>
 					{{end}}
 				</tbody>
diff --git a/templates/admin/queue.tmpl b/templates/admin/queue.tmpl
index 6524c9839..278b24650 100644
--- a/templates/admin/queue.tmpl
+++ b/templates/admin/queue.tmpl
@@ -126,11 +126,11 @@
 				<tbody>
 					{{range .Queue.Workers}}
 					<tr>
-						<td>{{.Workers}}{{if .IsFlusher}}<i class="icon sync-alternate" title="{{.i18n.Tr "admin.monitor.queue.flush"}}"></i>{{end}}</td>
+						<td>{{.Workers}}{{if .IsFlusher}}<span title="{{.i18n.Tr "admin.monitor.queue.flush"}}">{{svg "octicon-sync"}}</span>{{end}}</td>
 						<td>{{DateFmtLong .Start}}</td>
 						<td>{{if .HasTimeout}}{{DateFmtLong .Timeout}}{{else}}-{{end}}</td>
 						<td>
-							<a class="delete-button" href="" data-url="{{$.Link}}/cancel/{{.PID}}" data-id="{{.PID}}" data-name="{{.Workers}}"><i class="close icon text red" title="{{$.i18n.Tr "remove"}}"></i></a>
+							<a class="delete-button" href="" data-url="{{$.Link}}/cancel/{{.PID}}" data-id="{{.PID}}" data-name="{{.Workers}}"><span class="text red" title="{{$.i18n.Tr "remove"}}">{{svg "octicon-trashcan"}}</span></a>
 						</td>
 					</tr>
 					{{else}}
@@ -152,7 +152,7 @@
 </div>
 <div class="ui small basic delete modal">
 	<div class="ui icon header">
-		<i class="close icon"></i>
+		{{svg "octicon-x" 16 "close inside"}}
 		{{.i18n.Tr "admin.monitor.queue.pool.cancel"}}
 	</div>
 	<div class="content">
diff --git a/templates/admin/repo/list.tmpl b/templates/admin/repo/list.tmpl
index fbadfeea7..5f8db3585 100644
--- a/templates/admin/repo/list.tmpl
+++ b/templates/admin/repo/list.tmpl
@@ -52,14 +52,14 @@
 								{{end}}
 							</td>
 							<td><a href="{{AppSubUrl}}/{{.Owner.Name}}/{{.Name}}">{{.Name}}</a></td>
-							<td><i class="fa fa{{if .IsPrivate}}-check{{end}}-square-o"></i></td>
+							<td>{{if .IsPrivate}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
 							<td>{{.NumWatches}}</td>
 							<td>{{.NumStars}}</td>
 							<td>{{.NumForks}}</td>
 							<td>{{.NumIssues}}</td>
 							<td>{{SizeFmt .Size}}</td>
 							<td><span title="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</span></td>
-							<td><a class="delete-button" href="" data-url="{{$.Link}}/delete?page={{$.Page.Paginater.Current}}&sort={{$.SortType}}" data-id="{{.ID}}" data-name="{{.Name}}"><i class="trash icon text red"></i></a></td>
+							<td><a class="delete-button" href="" data-url="{{$.Link}}/delete?page={{$.Page.Paginater.Current}}&sort={{$.SortType}}" data-id="{{.ID}}" data-name="{{.Name}}">{{svg "octicon-trashcan"}}</a></td>
 						</tr>
 					{{end}}
 				</tbody>
diff --git a/templates/admin/repo/unadopted.tmpl b/templates/admin/repo/unadopted.tmpl
index 26c91c315..206ae91f0 100644
--- a/templates/admin/repo/unadopted.tmpl
+++ b/templates/admin/repo/unadopted.tmpl
@@ -30,7 +30,7 @@
                                     <div class="right floated content">
                                         <button class="ui button submit tiny green adopt show-modal" data-modal="#adopt-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-plus"}}</span><span class="label">{{$.i18n.Tr "repo.adopt_preexisting_label"}}</span></button>
                                         <div class="ui basic modal" id="adopt-unadopted-modal-{{$dirI}}">
-                                            <i class="close icon"></i>
+                                            {{svg "octicon-x" 16 "close inside"}}
                                             <div class="header">
                                                 <span class="label">{{$.i18n.Tr "repo.adopt_preexisting"}}</span>
                                             </div>
@@ -43,11 +43,11 @@
                                                 <input type="hidden" name="action" value="adopt">
                                                 <div class="actions">
                                                     <div class="ui red basic inverted cancel button">
-                                                        <i class="remove icon"></i>
+                                                        {{svg "octicon-trashcan" 16 "mr-2"}}
                                                         {{$.i18n.Tr "modal.no"}}
                                                     </div>
                                                     <button class="ui green basic inverted ok button">
-                                                        <i class="checkmark icon"></i>
+                                                        {{svg "octicon-check" 16 "mr-2"}}
                                                         {{$.i18n.Tr "modal.yes"}}
                                                     </button>
                                                 </div>
@@ -55,7 +55,7 @@
                                         </div>
                                         <button class="ui button submit tiny red delete show-modal" data-modal="#delete-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-x"}}</span><span class="label">{{$.i18n.Tr "repo.delete_preexisting_label"}}</span></button>
                                         <div class="ui basic modal" id="delete-unadopted-modal-{{$dirI}}">
-                                            <i class="close icon"></i>
+                                            {{svg "octicon-x" 16 "close inside"}}
                                             <div class="header">
                                                 <span class="label">{{$.i18n.Tr "repo.delete_preexisting"}}</span>
                                             </div>
@@ -68,11 +68,11 @@
                                                 <input type="hidden" name="action" value="delete">
                                                 <div class="actions">
                                                     <div class="ui red basic inverted cancel button">
-                                                        <i class="remove icon"></i>
+                                                        {{svg "octicon-trashcan" 16 "mr-2"}}
                                                         {{$.i18n.Tr "modal.no"}}
                                                     </div>
                                                     <button class="ui green basic inverted ok button">
-                                                        <i class="checkmark icon"></i>
+                                                        {{svg "octicon-check" 16 "mr-2"}}
                                                         {{$.i18n.Tr "modal.yes"}}
                                                     </button>
                                                 </div>
diff --git a/templates/admin/user/list.tmpl b/templates/admin/user/list.tmpl
index dafeadaf9..661d38cb0 100644
--- a/templates/admin/user/list.tmpl
+++ b/templates/admin/user/list.tmpl
@@ -41,10 +41,10 @@
 							<td>{{.ID}}</td>
 							<td><a href="{{AppSubUrl}}/{{.Name}}">{{.Name}}</a></td>
 							<td><span class="text truncate email">{{.Email}}</span></td>
-							<td><i class="fa fa{{if .IsActive}}-check{{end}}-square-o"></i></td>
-							<td><i class="fa fa{{if .IsAdmin}}-check{{end}}-square-o"></i></td>
-							<td><i class="fa fa{{if .IsRestricted}}-check{{end}}-square-o"></i></td>
-							<td><i class="fa fa{{if index $.UsersTwoFaStatus .ID}}-check{{end}}-square-o"></i></td>
+							<td>{{if .IsActive}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
+							<td>{{if .IsAdmin}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
+							<td>{{if .IsRestricted}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
+							<td>{{if index $.UsersTwoFaStatus .ID}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
 							<td>{{.NumRepos}}</td>
 							<td><span title="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</span></td>
 							{{if .LastLoginUnix}}
@@ -52,7 +52,7 @@
 							{{else}}
 								<td><span>{{$.i18n.Tr "admin.users.never_login"}}</span></td>
 							{{end}}
-							<td><a href="{{$.Link}}/{{.ID}}"><i class="fa fa-pencil-square-o"></i></a></td>
+							<td><a href="{{$.Link}}/{{.ID}}">{{svg "octicon-pencil"}}</a></td>
 						</tr>
 					{{end}}
 				</tbody>
diff --git a/templates/base/paginate.tmpl b/templates/base/paginate.tmpl
index da07fd2ba..a9ed8f12e 100644
--- a/templates/base/paginate.tmpl
+++ b/templates/base/paginate.tmpl
@@ -3,9 +3,13 @@
 	{{if gt .TotalPages 1}}
 		<div class="center page buttons">
 			<div class="ui borderless pagination menu">
-				<a class="{{if .IsFirst}}disabled{{end}} item navigation" {{if not .IsFirst}}href="{{$.Link}}{{if $paginationLink}}?{{$paginationLink}}{{end}}"{{end}}><i class="angle double left icon"></i><span class="navigation_label">&nbsp;{{$.i18n.Tr "admin.first_page"}}</span></a>
+				<a class="{{if .IsFirst}}disabled{{end}} item navigation" {{if not .IsFirst}}href="{{$.Link}}{{if $paginationLink}}?{{$paginationLink}}{{end}}"{{end}}>
+					{{svg "gitea-double-chevron-left" 16 "mr-2"}}
+					<span class="navigation_label">{{$.i18n.Tr "admin.first_page"}}</span>
+				</a>
 				<a class="{{if not .HasPrevious}}disabled{{end}} item navigation" {{if .HasPrevious}}href="{{$.Link}}?page={{.Previous}}{{if $paginationLink}}&{{$paginationLink}}{{end}}"{{end}}>
-					<i class="left arrow icon"></i><span class="navigation_label">&nbsp;{{$.i18n.Tr "repo.issues.previous"}}</span>
+					{{svg "octicon-chevron-left" 16 "mr-2"}}
+					<span class="navigation_label">{{$.i18n.Tr "repo.issues.previous"}}</span>
 				</a>
 				{{range .Pages}}
 					{{if eq .Num -1}}
@@ -15,9 +19,13 @@
 					{{end}}
 				{{end}}
 				<a class="{{if not .HasNext}}disabled{{end}} item navigation" {{if .HasNext}}href="{{$.Link}}?page={{.Next}}{{if $paginationLink}}&{{$paginationLink}}{{end}}"{{end}}>
-					<span class="navigation_label">{{$.i18n.Tr "repo.issues.next"}}&nbsp;</span><i class="icon right arrow"></i>
+					<span class="navigation_label">{{$.i18n.Tr "repo.issues.next"}}</span>
+					{{svg "octicon-chevron-right" 16 "ml-2"}}
+				</a>
+				<a class="{{if .IsLast}}disabled{{end}} item navigation" {{if not .IsLast}}href="{{$.Link}}?page={{.TotalPages}}{{if $paginationLink}}&{{$paginationLink}}{{end}}"{{end}}>
+					<span class="navigation_label">{{$.i18n.Tr "admin.last_page"}}</span>
+					{{svg "gitea-double-chevron-right" 16 "ml-2"}}
 				</a>
-				<a class="{{if .IsLast}}disabled{{end}} item navigation" {{if not .IsLast}}href="{{$.Link}}?page={{.TotalPages}}{{if $paginationLink}}&{{$paginationLink}}{{end}}"{{end}}><span class="navigation_label">{{$.i18n.Tr "admin.last_page"}}&nbsp;</span><i class="angle double right icon"></i></a>
 			</div>
 		</div>
 	{{end}}
diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 85a95739a..cf7c22462 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -115,7 +115,9 @@
 											{{if .IsDeleted}}
 												<a class="ui basic jump button icon poping up undo-button" href data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID | urlquery}}&name={{.DeletedBranch.Name | urlquery}}" data-content="{{$.i18n.Tr "repo.branch.restore" (.Name)}}" data-variation="tiny inverted" data-position="top right"><span class="text blue">{{svg "octicon-reply"}}</span></a>
 											{{else}}
-												<a class="ui basic jump button icon poping up delete-branch-button" href data-url="{{$.Link}}/delete?name={{.Name | urlquery}}" data-content="{{$.i18n.Tr "repo.branch.delete" (.Name)}}" data-variation="tiny inverted" data-position="top right" data-name="{{.Name}}"><i class="trash icon text red"></i></a>
+												<a class="ui basic jump button icon poping up delete-branch-button" href data-url="{{$.Link}}/delete?name={{.Name | urlquery}}" data-content="{{$.i18n.Tr "repo.branch.delete" (.Name)}}" data-variation="tiny inverted" data-position="top right" data-name="{{.Name}}">
+													{{svg "octicon-trashcan"}}
+												</a>
 											{{end}}
 										{{end}}
 									</td>
diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index 81229c0ef..5dd0553d4 100644
--- a/templates/repo/branch_dropdown.tmpl
+++ b/templates/repo/branch_dropdown.tmpl
@@ -26,12 +26,12 @@
 					<div class="two column row">
 						<a class="reference column" href="#" @click="mode = 'branches'; focusSearchField()">
 							<span class="text" :class="{black: mode == 'branches'}">
-								{{svg "octicon-git-branch"}} {{.i18n.Tr "repo.branches"}}
+								{{svg "octicon-git-branch" 16 "mr-2"}}{{.i18n.Tr "repo.branches"}}
 							</span>
 						</a>
 						<a class="reference column" href="#" @click="mode = 'tags'; focusSearchField()">
 							<span class="text" :class="{black: mode == 'tags'}">
-								<i class="reference tags icon"></i> {{.i18n.Tr "repo.tags"}}
+								{{svg "octicon-tag" 16 "mr-2"}}{{.i18n.Tr "repo.tags"}}
 							</span>
 						</a>
 					</div>
diff --git a/templates/repo/diff/new_review.tmpl b/templates/repo/diff/new_review.tmpl
index b3f735a7f..630436941 100644
--- a/templates/repo/diff/new_review.tmpl
+++ b/templates/repo/diff/new_review.tmpl
@@ -7,10 +7,10 @@
 		<div class="ui clearing segment">
 			<form class="ui form" action="{{.Link}}/reviews/submit" method="post">
 			{{.CsrfTokenHtml}}
-			    <input type="hidden" name="commit_id" value="{{.AfterCommitID}}"/>
-				<i class="ui right floated link icon close"></i>
-				<div class="header">
-				{{$.i18n.Tr "repo.diff.review.header"}}
+				<input type="hidden" name="commit_id" value="{{.AfterCommitID}}"/>
+				<div class="header df ac pb-3">
+					<div class="f1">{{$.i18n.Tr "repo.diff.review.header"}}</div>
+					<a class="muted close px-3">{{svg "octicon-x" 16}}</a>
 				</div>
 				<div class="ui field">
 					<textarea name="content" tabindex="0" rows="2"
diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl
index 469e72d21..4d9137fe7 100644
--- a/templates/repo/issue/branch_selector_field.tmpl
+++ b/templates/repo/issue/branch_selector_field.tmpl
@@ -20,12 +20,12 @@
 				<div class="two column row">
 					<a class="reference column" href="#" data-target="#branch-list">
 						<span class="text black">
-							{{svg "octicon-git-branch"}} {{.i18n.Tr "repo.branches"}}
+							{{svg "octicon-git-branch" 16 "mr-2"}}{{.i18n.Tr "repo.branches"}}
 						</span>
 					</a>
 					<a class="reference column" href="#" data-target="#tag-list">
 						<span class="text">
-							<i class="reference tags icon"></i> {{.i18n.Tr "repo.tags"}}
+							{{svg "octicon-tag" 16 "mr-2"}}{{.i18n.Tr "repo.tags"}}
 						</span>
 					</a>
 				</div>
diff --git a/templates/repo/projects/list.tmpl b/templates/repo/projects/list.tmpl
index 080137f70..6ea936e8b 100644
--- a/templates/repo/projects/list.tmpl
+++ b/templates/repo/projects/list.tmpl
@@ -14,11 +14,11 @@
 		{{template "base/alert" .}}
 		<div class="ui compact tiny menu">
 			<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open">
-				{{svg "octicon-project"}}
+				{{svg "octicon-project" 16 "mr-2"}}
 				{{.i18n.Tr "repo.issues.open_tab" .OpenCount}}
 			</a>
 			<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=closed">
-				{{svg "octicon-check"}}
+				{{svg "octicon-check" 16 "mr-2"}}
 				{{.i18n.Tr "repo.milestones.close_tab" .ClosedCount}}
 			</a>
 		</div>
diff --git a/templates/repo/settings/lfs_pointers.tmpl b/templates/repo/settings/lfs_pointers.tmpl
index 8a50c1bdf..bf23062ae 100644
--- a/templates/repo/settings/lfs_pointers.tmpl
+++ b/templates/repo/settings/lfs_pointers.tmpl
@@ -58,9 +58,9 @@
 							<td>
 								<a class="ui blue show-panel button" href="{{$.LFSFilesLink}}/find?oid={{.Oid}}&size={{.Size}}&sha={{.SHA}}">{{$.i18n.Tr "repo.settings.lfs_findcommits"}}</a>
 							</td>
-							<td><i class="fa fa{{if .InRepo}}-check{{end}}-square-o"></i></td>
-							<td><i class="fa fa{{if .Exists}}-check{{end}}-square-o"></i></td>
-							<td><i class="fa fa{{if .Accessible}}-check{{end}}-square-o"></i></td>
+							<td>{{if .InRepo}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
+							<td>{{if .Exists}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
+							<td>{{if .Accessible}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
 						</tr>
 					{{end}}
 				</tbody>
diff --git a/templates/repo/settings/webhook/list.tmpl b/templates/repo/settings/webhook/list.tmpl
index 47ed37cc3..2bff27a76 100644
--- a/templates/repo/settings/webhook/list.tmpl
+++ b/templates/repo/settings/webhook/list.tmpl
@@ -41,19 +41,20 @@
 		<div class="item">
 			{{.Description | Str2html}}
 		</div>
+		<div class="ui divider"></div>
 		{{range .Webhooks}}
-			<div class="item">
+			<div class="item p-2">
 				{{if eq .LastStatus 1}}
 					<span class="text green">{{svg "octicon-check"}}</span>
 				{{else if eq .LastStatus 2}}
 					<span class="text red">{{svg "octicon-alert"}}</span>
 				{{else}}
-					<span class="text grey">{{svg "octicon-dot-fill"}}</span>
+					<span class="text grey mr-3">{{svg "octicon-dot-fill"}}</span>
 				{{end}}
 				<a class="dont-break-out" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
 				<div class="ui right">
-					<span class="text blue"><a href="{{$.BaseLink}}/{{.ID}}"><i class="fa fa-pencil"></i></a></span>
-					<span class="text red"><a class="delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}"><i class="fa fa-times"></i></a></span>
+					<span class="text blue px-2"><a href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a></span>
+					<span class="text red px-2"><a class="delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trashcan"}}</a></span>
 				</div>
 			</div>
 		{{end}}
diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl
index 46c735071..e790dad83 100644
--- a/templates/user/dashboard/repolist.tmpl
+++ b/templates/user/dashboard/repolist.tmpl
@@ -44,15 +44,24 @@
 								<a @click="toggleArchivedFilter()">
 									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.i18n.Tr "home.show_both_archived_unarchived"}}" v-if="archivedFilter === 'both'">
 										<input type="checkbox">
-										<label><i class="archive icon archived-icon"></i>{{.i18n.Tr "home.show_archived"}}</label>
+										<label>
+											{{svg "octicon-archive" 16 "mr-2"}}
+											{{.i18n.Tr "home.show_archived"}}
+										</label>
 									</div>
 									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.i18n.Tr "home.show_only_unarchived"}}" v-if="archivedFilter === 'unarchived'">
 										<input type="checkbox">
-										<label><i class="archive icon archived-icon"></i>{{.i18n.Tr "home.show_archived"}}</label>
+										<label>
+											{{svg "octicon-archive" 16 "mr-2"}}
+											{{.i18n.Tr "home.show_archived"}}
+										</label>
 									</div>
 									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.i18n.Tr "home.show_only_archived"}}" v-if="archivedFilter === 'archived'">
 										<input type="checkbox">
-										<label><i class="archive icon archived-icon"></i>{{.i18n.Tr "home.show_archived"}}</label>
+										<label>
+											{{svg "octicon-archive" 16 "mr-2"}}
+											{{.i18n.Tr "home.show_archived"}}
+										</label>
 									</div>
 								</a>
 							</div>
@@ -60,15 +69,24 @@
 								<a @click="togglePrivateFilter()">
 									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_both_private_public"}}" v-if="privateFilter === 'both'">
 										<input type="checkbox">
-										<label>{{svg "octicon-lock"}}{{.i18n.Tr "home.show_private"}}</label>
+										<label>
+											{{svg "octicon-lock" 16 "mr-2"}}
+											{{.i18n.Tr "home.show_private"}}
+										</label>
 									</div>
 									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_only_public"}}" v-if="privateFilter === 'public'">
 										<input type="checkbox">
-										<label>{{svg "octicon-lock"}}</svg>{{.i18n.Tr "home.show_private"}}</label>
+										<label>
+											{{svg "octicon-lock" 16 "mr-2"}}
+											{{.i18n.Tr "home.show_private"}}
+										</label>
 									</div>
 									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_only_private"}}" v-if="privateFilter === 'private'">
 										<input type="checkbox">
-										<label>{{svg "octicon-lock"}}</svg>{{.i18n.Tr "home.show_private"}}</label>
+											<label>
+												{{svg "octicon-lock" 16 "mr-2"}}
+												{{.i18n.Tr "home.show_private"}}
+											</label>
 									</div>
 								</a>
 							</div>
@@ -102,10 +120,12 @@
 				<ul class="repo-owner-name-list">
 					<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
 						<a class="df ac sb" :href="suburl + '/' + repo.full_name">
-							<div class="f1 df ac">
+							<div class="f1">
 								<component v-bind:is="repoIcon(repo)" size="16"></component>
 								<strong class="text truncate item-name">${repo.full_name}</strong>
-								<i v-if="repo.archived" class="archive icon archived-icon"></i>
+								<span v-if="repo.archived">
+									{{svg "octicon-archive" 16 "ml-2"}}
+								</span>
 							</div>
 							<div class="text light grey df ac">
 								${repo.stars_count}
@@ -118,20 +138,20 @@
 							<div class="ui borderless pagination menu narrow">
 								<a class="item navigation" :class="{'disabled': page === 1}"
 									@click="changePage(1)" title="{{$.i18n.Tr "admin.first_page"}}">
-									<i class="angle double left icon"></i>
+									{{svg "gitea-double-chevron-left" 16 "mr-2"}}
 								</a>
 								<a class="item navigation" :class="{'disabled': page === 1}"
 									@click="changePage(page - 1)" title="{{$.i18n.Tr "repo.issues.previous"}}">
-									<i class="left arrow icon"></i>
+									{{svg "octicon-chevron-left" 16 "mr-2"}}
 								</a>
 								<a class="active item">${page}</a>
 								<a class="item navigation" :class="{'disabled': page === finalPage}"
 									@click="changePage(page + 1)" title="{{$.i18n.Tr "repo.issues.next"}}">
-									<i class="icon right arrow"></i>
+									{{svg "octicon-chevron-right" 16 "ml-2"}}
 								</a>
 								<a class="item navigation" :class="{'disabled': page === finalPage}"
 									@click="changePage(finalPage)" title="{{$.i18n.Tr "admin.last_page"}}">
-									<i class="angle double right icon"></i>
+									{{svg "gitea-double-chevron-right" 16 "ml-2"}}
 								</a>
 							</div>
 						</div>
diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index 21ea14d5d..5f5f96d4e 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -15,6 +15,7 @@
 					<div class="item">
 						<div class="right floated content">
 								<button class="ui red tiny button delete-button" id="delete-token" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+									{{svg "octicon-trashcan" 16 "mr-2"}}
 									{{$.i18n.Tr "settings.delete_token"}}
 								</button>
 						</div>
diff --git a/templates/user/settings/applications_oauth2.tmpl b/templates/user/settings/applications_oauth2.tmpl
index 65b9da495..1796d2571 100644
--- a/templates/user/settings/applications_oauth2.tmpl
+++ b/templates/user/settings/applications_oauth2.tmpl
@@ -9,13 +9,14 @@
 		{{range $app := .Applications}}
 			<div class="item">
 				<div class="right floated content">
-					<a href="{{$.Link}}/oauth2/{{$app.ID}}" class="ui primary tiny icon button">
-						<i class="pencil alternate icon"></i>
+					<a href="{{$.Link}}/oauth2/{{$app.ID}}" class="ui primary tiny button">
+						{{svg "octicon-pencil" 16 "mr-2"}}
 						{{$.i18n.Tr "settings.oauth2_application_edit"}}
 					</a>
 					<button class="ui red tiny button delete-button" id="remove-gitea-oauth2-application"
 							data-url="{{AppSubUrl}}/user/settings/applications/oauth2/delete"
 							data-id="{{$app.ID}}">
+						{{svg "octicon-trashcan" 16 "mr-2"}}
 						{{$.i18n.Tr "settings.delete_key"}}
 					</button>
 				</div>
diff --git a/templates/user/settings/grants_oauth2.tmpl b/templates/user/settings/grants_oauth2.tmpl
index 4dc5b9446..0b635ae0a 100644
--- a/templates/user/settings/grants_oauth2.tmpl
+++ b/templates/user/settings/grants_oauth2.tmpl
@@ -15,7 +15,7 @@
 						{{$.i18n.Tr "settings.revoke_key"}}
 					</button>
 				</div>
-				<i class="big key icon"></i>
+				{{svg "octicon-key"}}
 				<div class="content">
 					<strong>{{$grant.Application.Name}}</strong>
 					<div class="activity meta">
@@ -29,7 +29,7 @@
 
 <div class="ui small basic delete modal" id="revoke-gitea-oauth2-grant">
 	<div class="ui icon header">
-		<i class="shield alternate icon"></i>
+		{{svg "octicon-shield" 16 "mr-2"}}
 		{{.i18n.Tr "settings.revoke_oauth2_grant"}}
 	</div>
 	<div class="content">
diff --git a/templates/user/settings/repos.tmpl b/templates/user/settings/repos.tmpl
index 312b19349..5633b8cc3 100644
--- a/templates/user/settings/repos.tmpl
+++ b/templates/user/settings/repos.tmpl
@@ -39,7 +39,7 @@
 											{{if $.allowAdopt}}
 												<button class="ui button submit tiny green adopt show-modal" data-modal="#adopt-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-plus"}}</span><span class="label">{{$.i18n.Tr "repo.adopt_preexisting_label"}}</span></button>
 												<div class="ui basic modal" id="adopt-unadopted-modal-{{$dirI}}">
-													<i class="close icon"></i>
+													{{svg "octicon-x" 16 "close inside"}}
 													<div class="header">
 														<span class="label">{{$.i18n.Tr "repo.adopt_preexisting"}}</span>
 													</div>
@@ -66,7 +66,7 @@
 											{{if $.allowDelete}}
 												<button class="ui button submit tiny red delete show-modal" data-modal="#delete-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-x"}}</span><span class="label">{{$.i18n.Tr "repo.delete_preexisting_label"}}</span></button>
 												<div class="ui basic modal" id="delete-unadopted-modal-{{$dirI}}">
-													<i class="close icon"></i>
+													{{svg "octicon-x" 16 "close inside"}}
 													<div class="header">
 														<span class="label">{{$.i18n.Tr "repo.delete_preexisting"}}</span>
 													</div>
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 2cb928b20..496495a1c 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1262,11 +1262,10 @@ function initPullRequestReview() {
   $('.btn-review').on('click', function (e) {
     e.preventDefault();
     $(this).closest('.dropdown').find('.menu').toggle('visible');
-  }).closest('.dropdown').find('.link.close')
-    .on('click', function (e) {
-      e.preventDefault();
-      $(this).closest('.menu').toggle('visible');
-    });
+  }).closest('.dropdown').find('.close').on('click', function (e) {
+    e.preventDefault();
+    $(this).closest('.menu').toggle('visible');
+  });
 
   $('.add-code-comment').on('click', function (e) {
     if ($(e.target).hasClass('btn-add-single')) return; // https://github.com/go-gitea/gitea/issues/4745
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index be43bfbe3..2cecd59c9 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -253,7 +253,8 @@ a.muted:hover,
   border-right-color: var(--color-primary);
 }
 
-.ui.menu {
+.ui.menu,
+.ui.vertical.menu {
   background: var(--color-menu);
   border-color: var(--color-secondary);
 }
@@ -272,6 +273,7 @@ a.muted:hover,
 
 .ui.menu .active.item,
 .ui.menu .active.item:hover,
+.ui.vertical.menu .active.item,
 .ui.vertical.menu .active.item:hover {
   color: var(--color-text);
   background: var(--color-active);
@@ -332,6 +334,15 @@ a.muted:hover,
   background: var(--color-hover);
 }
 
+.ui.menu .ui.dropdown .menu > .selected.item {
+  color: var(--color-text) !important;
+  background: var(--color-hover) !important;
+}
+
+.ui.dropdown .menu > .message:not(.ui) {
+  color: var(--color-text-light-2);
+}
+
 .ui.secondary.menu .dropdown.item:hover,
 .ui.secondary.menu .link.item:hover,
 .ui.secondary.menu a.item:hover {
@@ -451,8 +462,15 @@ a.ui.card:hover,
   background: var(--color-body);
 }
 
+.ui.modal > .header {
+  border-color: var(--color-secondary);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+
 .ui.modal > .close.inside,
 .ui.fullscreen.modal > .close {
+  top: 11px; /* align modal close icon, for example admin notices */
   color: var(--body-color);
 }
 
@@ -1048,6 +1066,10 @@ a.ui.card:hover,
   }
 }
 
+.ui.dropdown .scrolling.menu {
+  border-color: var(--color-secondary);
+}
+
 footer {
   background-color: var(--color-footer);
   border-top: 1px solid var(--color-secondary);
diff --git a/web_src/svg/gitea-double-chevron-left.svg b/web_src/svg/gitea-double-chevron-left.svg
new file mode 100644
index 000000000..c223e7300
--- /dev/null
+++ b/web_src/svg/gitea-double-chevron-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill-rule="evenodd"><path d="M7.91 12.77a.75.75 0 01-1.06 0L2.61 8.52a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.2 8l3.72 3.72a.75.75 0 010 1.06z"/><path d="M13.39 12.77a.75.75 0 01-1.06 0L8.08 8.52a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L9.67 8l3.72 3.72a.75.75 0 010 1.06z"/></g></svg>
\ No newline at end of file
diff --git a/web_src/svg/gitea-double-chevron-right.svg b/web_src/svg/gitea-double-chevron-right.svg
new file mode 100644
index 000000000..fd510e88d
--- /dev/null
+++ b/web_src/svg/gitea-double-chevron-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill-rule="evenodd"><path d="M8.09 3.23a.75.75 0 011.06 0l4.24 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L11.8 8 8.08 4.28a.75.75 0 010-1.06z"/><path d="M2.61 3.23a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L6.33 8 2.61 4.28a.75.75 0 010-1.06z"/></g></svg>
\ No newline at end of file