diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index e960f7fe175..1b102b11d88 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -37,7 +37,7 @@
 		<div class="item">
 		<div class="ui icon input">
 		<input class="searchbox" type="text" placeholder="{{.i18n.Tr "search_project"}}">
-		<i class="search icon"></i>
+		<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
 		</div>
 		</div>
 	*/}}
diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index 9ef32d9e907..a7eafa3874f 100644
--- a/templates/repo/branch_dropdown.tmpl
+++ b/templates/repo/branch_dropdown.tmpl
@@ -18,7 +18,7 @@
 		</div>
 		<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
 			<div class="ui icon search input">
-				<i class="filter icon"></i>
+				<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
 				<input name="search" ref="searchField" v-model="searchTerm" @keydown="keydown($event)" placeholder="{{.i18n.Tr "repo.filter_branch_and_tag"}}...">
 			</div>
 			<div class="header branch-tag-choice">
diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl
index 920ff120f79..7daafa3e2a6 100644
--- a/templates/repo/diff/compare.tmpl
+++ b/templates/repo/diff/compare.tmpl
@@ -21,7 +21,7 @@
 				</div>
 				<div class="menu">
 					<div class="ui icon search input">
-						<i class="filter icon"></i>
+						<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
 						<input name="search" placeholder="{{.i18n.Tr "repo.pulls.filter_branch"}}...">
 					</div>
 					<div class="scrolling menu">
@@ -54,7 +54,7 @@
 				</div>
 				<div class="menu">
 					<div class="ui icon search input">
-						<i class="filter icon"></i>
+						<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
 						<input name="search" placeholder="{{.i18n.Tr "repo.pulls.filter_branch"}}...">
 					</div>
 					<div class="scrolling menu">
diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl
index 0facc96bcbf..469e72d2134 100644
--- a/templates/repo/issue/branch_selector_field.tmpl
+++ b/templates/repo/issue/branch_selector_field.tmpl
@@ -12,7 +12,7 @@
 	</div>
 	<div class="menu">
 		<div class="ui icon search input">
-			<i class="filter icon"></i>
+			<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
 			<input name="search" placeholder="{{.i18n.Tr "repo.filter_branch_and_tag"}}...">
 		</div>
 		<div class="header">
diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl
index 6c354f17603..9540716e544 100644
--- a/templates/repo/issue/new_form.tmpl
+++ b/templates/repo/issue/new_form.tmpl
@@ -49,7 +49,7 @@
 					<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_labels_title"}}</div>
 					{{if or .Labels .OrgLabels}}
 					<div class="ui icon search input">
-						<i class="search icon"></i>
+						<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_labels"}}">
 					</div>
 					{{end}}
@@ -94,7 +94,7 @@
 					<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_milestone_title"}}</div>
 					{{if or .OpenMilestones .ClosedMilestones}}
 					<div class="ui icon search input">
-						<i class="search icon"></i>
+						<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_milestones"}}">
 					</div>
 					{{end}}
@@ -151,7 +151,7 @@
 			    <div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_project_title"}}</div>
 			    {{if or .OpenProjects .ClosedProjects}}
 			    <div class="ui icon search input">
-			      <i class="search icon"></i>
+			      <i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
 			      <input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_projects"}}">
 			    </div>
 			    {{end}}
@@ -207,7 +207,7 @@
 					<div class="filter menu" data-id="#assignee_ids">
 						<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_assignees_title"}}</div>
 						<div class="ui icon search input">
-							<i class="search icon"></i>
+							<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
 							<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_assignees"}}">
 						</div>
 						<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index ed897fa14e6..dad4f7e125b 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -16,7 +16,7 @@
 				<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_reviewer_title"}}</div>
 				{{if .Reviewers}}
 					<div class="ui icon search input">
-						<i class="search icon"></i>
+						<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_reviewers"}}">
 					</div>
 				{{end}}
@@ -101,7 +101,7 @@
 				<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_labels_title"}}</div>
 				{{if or .Labels .OrgLabels}}
 				<div class="ui icon search input">
-					<i class="search icon"></i>
+					<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
 					<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_labels"}}">
 				</div>
 				{{end}}
@@ -149,7 +149,7 @@
 				<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_milestone_title"}}</div>
 				{{if or .OpenMilestones .ClosedMilestones}}
 				<div class="ui icon search input">
-					<i class="search icon"></i>
+					<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
 					<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_milestones"}}">
 				</div>
 				{{end}}
@@ -246,7 +246,7 @@
 			<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/assignee">
 				<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_assignees_title"}}</div>
 				<div class="ui icon search input">
-					<i class="search icon"></i>
+					<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
 					<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_assignees"}}">
 				</div>
 				<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index f714f329d32..db551421704 100644
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -61,7 +61,7 @@
                 	</div>
                 	<div class="menu">
                 		<div class="ui icon search input">
-                			<i class="filter icon"></i>
+                			<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
                 			<input name="search" placeholder="{{.i18n.Tr "repo.pulls.filter_branch"}}...">
                 		</div>
                 		<div class="scrolling menu" id="branch-select">
diff --git a/templates/repo/search.tmpl b/templates/repo/search.tmpl
index 56281e80dd9..6aa55677393 100644
--- a/templates/repo/search.tmpl
+++ b/templates/repo/search.tmpl
@@ -7,7 +7,7 @@
 				<div class="ui fluid action input">
 					<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "repo.search.search_repo"}}">
 					<button class="ui button" type="submit">
-						<i class="search icon"></i>
+						<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
 					</button>
 				</div>
 			</form>
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
index 49730dc4bb4..05a85a51687 100644
--- a/templates/repo/wiki/view.tmpl
+++ b/templates/repo/wiki/view.tmpl
@@ -16,7 +16,7 @@
 						</div>
 						<div class="menu">
 							<div class="ui icon search input">
-								<i class="filter icon"></i>
+								<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
 								<input name="search" placeholder="{{.i18n.Tr "repo.wiki.filter_page"}}...">
 							</div>
 							<div class="scrolling menu">
diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl
index 717318634e6..e1b97c8b9c2 100644
--- a/templates/user/dashboard/repolist.tmpl
+++ b/templates/user/dashboard/repolist.tmpl
@@ -29,9 +29,9 @@
 			<div class="ui attached secondary segment repos-search">
 				<div class="ui fluid right action left icon input" :class="{loading: isLoading}">
 					<input @input="searchRepos(reposFilter)" v-model="searchQuery" ref="search" placeholder="{{.i18n.Tr "home.search_repos"}}">
-					<i class="search icon"></i>
-					<div class="ui dropdown button" title="{{.i18n.Tr "home.filter"}}">
-						<i class="icon filter"></i>
+					<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+					<div class="ui dropdown icon button" title="{{.i18n.Tr "home.filter"}}">
+						<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
 						<div class="menu">
 							<div class="item">
 								<a @click="toggleArchivedFilter()">
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 0fc5d573fb4..be9adfa7a4b 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -1,9 +1,9 @@
-.df { display: flex; }
-.ac { align-items: center; }
-.jc { justify-content: center; }
-.js { justify-content: flex-start; }
-.je { justify-content: flex-end; }
-.sb { justify-content: space-between; }
+.df { display: flex !important; }
+.ac { align-items: center !important; }
+.jc { justify-content: center !important; }
+.js { justify-content: flex-start !important; }
+.je { justify-content: flex-end !important; }
+.sb { justify-content: space-between !important; }
 .mono { font-family: var(--fonts-monospace); font-size: .9em; /* compensate for monospace fonts being usually slighty larger */ }
 .rounded { border-radius: var(--border-radius) !important; }
 .word-break { word-wrap: break-word; word-break: break-all; }