diff --git a/templates/admin/hook_new.tmpl b/templates/admin/hook_new.tmpl
index 1abdd4c813a..e72e7bba620 100644
--- a/templates/admin/hook_new.tmpl
+++ b/templates/admin/hook_new.tmpl
@@ -11,29 +11,7 @@
 				{{.locale.Tr "admin.defaulthooks.update_webhook"}}
 			{{end}}
 			<div class="ui right">
-				{{if eq .HookType "gitea"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/gitea.svg">
-				{{else if eq .HookType "gogs"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/gogs.ico">
-				{{else if eq .HookType "slack"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/slack.png">
-				{{else if eq .HookType "discord"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/discord.png">
-				{{else if eq .HookType "dingtalk"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/dingtalk.ico">
-				{{else if eq .HookType "telegram"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/telegram.png">
-				{{else if eq .HookType "msteams"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/msteams.png">
-				{{else if eq .HookType "feishu"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/feishu.png">
-				{{else if eq .HookType "matrix"}}
-					{{svg "gitea-matrix" 26}}
-				{{else if eq .HookType "wechatwork"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/wechatwork.png">
-				{{else if eq .HookType "packagist"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/packagist.png">
-				{{end}}
+				{{template "shared/webhook/icon" .}}
 			</div>
 		</h4>
 		<div class="ui attached segment">
diff --git a/templates/org/settings/hook_new.tmpl b/templates/org/settings/hook_new.tmpl
index 1bf74fb7ba0..4a1323568ab 100644
--- a/templates/org/settings/hook_new.tmpl
+++ b/templates/org/settings/hook_new.tmpl
@@ -3,29 +3,7 @@
 				<h4 class="ui top attached header">
 					{{if .PageIsSettingsHooksNew}}{{.locale.Tr "repo.settings.add_webhook"}}{{else}}{{.locale.Tr "repo.settings.update_webhook"}}{{end}}
 					<div class="ui right">
-						{{if eq .HookType "gitea"}}
-							<img width="26" height="26" src="{{AssetUrlPrefix}}/img/gitea.svg">
-						{{else if eq .HookType "gogs"}}
-							<img width="26" height="26" src="{{AssetUrlPrefix}}/img/gogs.ico">
-						{{else if eq .HookType "slack"}}
-							<img width="26" height="26" src="{{AssetUrlPrefix}}/img/slack.png">
-						{{else if eq .HookType "discord"}}
-							<img width="26" height="26" src="{{AssetUrlPrefix}}/img/discord.png">
-						{{else if eq .HookType "dingtalk"}}
-							<img width="26" height="26" src="{{AssetUrlPrefix}}/img/dingtalk.ico">
-						{{else if eq .HookType "telegram"}}
-							<img width="26" height="26" src="{{AssetUrlPrefix}}/img/telegram.png">
-						{{else if eq .HookType "msteams"}}
-							<img width="26" height="26" src="{{AssetUrlPrefix}}/img/msteams.png">
-						{{else if eq .HookType "feishu"}}
-							<img width="26" height="26" src="{{AssetUrlPrefix}}/img/feishu.png">
-						{{else if eq .HookType "matrix"}}
-							{{svg "gitea-matrix" 26}}
-						{{else if eq .HookType "wechatwork"}}
-							<img width="26" height="26" src="{{AssetUrlPrefix}}/img/wechatwork.png">
-						{{else if eq .HookType "packagist"}}
-							<img width="26" height="26" src="{{AssetUrlPrefix}}/img/packagist.png">
-						{{end}}
+						{{template "shared/webhook/icon" .}}
 					</div>
 				</h4>
 				<div class="ui attached segment">
diff --git a/templates/repo/settings/webhook/base_list.tmpl b/templates/repo/settings/webhook/base_list.tmpl
index 663fde1528f..06610a2e55e 100644
--- a/templates/repo/settings/webhook/base_list.tmpl
+++ b/templates/repo/settings/webhook/base_list.tmpl
@@ -5,37 +5,48 @@
 			<div class="ui primary tiny button">{{.locale.Tr "repo.settings.add_webhook"}}</div>
 			<div class="menu">
 				<a class="item" href="{{.BaseLinkNew}}/gitea/new">
-					<img width="20" height="20" src="{{AssetUrlPrefix}}/img/gitea.svg">{{.locale.Tr "repo.settings.web_hook_name_gitea"}}
+					{{template "shared/webhook/icon" (dict "HookType" "gitea" "Size" 20)}}
+					{{.locale.Tr "repo.settings.web_hook_name_gitea"}}
 				</a>
 				<a class="item" href="{{.BaseLinkNew}}/gogs/new">
-					<img width="20" height="20" src="{{AssetUrlPrefix}}/img/gogs.ico">{{.locale.Tr "repo.settings.web_hook_name_gogs"}}
+					{{template "shared/webhook/icon" (dict "HookType" "gogs" "Size" 20)}}
+					{{.locale.Tr "repo.settings.web_hook_name_gogs"}}
 				</a>
 				<a class="item" href="{{.BaseLinkNew}}/slack/new">
-					<img width="20" height="20" src="{{AssetUrlPrefix}}/img/slack.png">{{.locale.Tr "repo.settings.web_hook_name_slack"}}
+					{{template "shared/webhook/icon" (dict "HookType" "slack" "Size" 20)}}
+					{{.locale.Tr "repo.settings.web_hook_name_slack"}}
 				</a>
 				<a class="item" href="{{.BaseLinkNew}}/discord/new">
-					<img width="20" height="20" src="{{AssetUrlPrefix}}/img/discord.png">{{.locale.Tr "repo.settings.web_hook_name_discord"}}
+					{{template "shared/webhook/icon" (dict "HookType" "discord" "Size" 20)}}
+					{{.locale.Tr "repo.settings.web_hook_name_discord"}}
 				</a>
 				<a class="item" href="{{.BaseLinkNew}}/dingtalk/new">
-					<img width="20" height="20" src="{{AssetUrlPrefix}}/img/dingtalk.ico">{{.locale.Tr "repo.settings.web_hook_name_dingtalk"}}
+					{{template "shared/webhook/icon" (dict "HookType" "dingtalk" "Size" 20)}}
+					{{.locale.Tr "repo.settings.web_hook_name_dingtalk"}}
 				</a>
 				<a class="item" href="{{.BaseLinkNew}}/telegram/new">
-					<img width="20" height="20" src="{{AssetUrlPrefix}}/img/telegram.png">{{.locale.Tr "repo.settings.web_hook_name_telegram"}}
+					{{template "shared/webhook/icon" (dict "HookType" "telegram" "Size" 20)}}
+					{{.locale.Tr "repo.settings.web_hook_name_telegram"}}
 				</a>
 				<a class="item" href="{{.BaseLinkNew}}/msteams/new">
-					<img width="20" height="20" src="{{AssetUrlPrefix}}/img/msteams.png">{{.locale.Tr "repo.settings.web_hook_name_msteams"}}
+					{{template "shared/webhook/icon" (dict "HookType" "msteams" "Size" 20)}}
+					{{.locale.Tr "repo.settings.web_hook_name_msteams"}}
 				</a>
 				<a class="item" href="{{.BaseLinkNew}}/feishu/new">
-					<img width="20" height="20" src="{{AssetUrlPrefix}}/img/feishu.png">{{.locale.Tr "repo.settings.web_hook_name_feishu_or_larksuite"}}
+					{{template "shared/webhook/icon" (dict "HookType" "feishu" "Size" 20)}}
+					{{.locale.Tr "repo.settings.web_hook_name_feishu_or_larksuite"}}
 				</a>
 				<a class="item" href="{{.BaseLinkNew}}/matrix/new">
-					{{svg "gitea-matrix" 20 "img"}}{{.locale.Tr "repo.settings.web_hook_name_matrix"}}
+					{{template "shared/webhook/icon" (dict "HookType" "matrix" "Size" 20)}}
+					{{.locale.Tr "repo.settings.web_hook_name_matrix"}}
 				</a>
 				<a class="item" href="{{.BaseLinkNew}}/wechatwork/new">
-					<img width="20" height="20" src="{{AssetUrlPrefix}}/img/wechatwork.png">{{.locale.Tr "repo.settings.web_hook_name_wechatwork"}}
+					{{template "shared/webhook/icon" (dict "HookType" "wechatwork" "Size" 20)}}
+					{{.locale.Tr "repo.settings.web_hook_name_wechatwork"}}
 				</a>
 				<a class="item" href="{{.BaseLinkNew}}/packagist/new">
-					<img width="20" height="20" src="{{AssetUrlPrefix}}/img/packagist.png">{{.locale.Tr "repo.settings.web_hook_name_packagist"}}
+					{{template "shared/webhook/icon" (dict "HookType" "packagist" "Size" 20)}}
+					{{.locale.Tr "repo.settings.web_hook_name_packagist"}}
 				</a>
 			</div>
 		</div>
diff --git a/templates/repo/settings/webhook/new.tmpl b/templates/repo/settings/webhook/new.tmpl
index 73d6726a575..1b047422217 100644
--- a/templates/repo/settings/webhook/new.tmpl
+++ b/templates/repo/settings/webhook/new.tmpl
@@ -3,29 +3,7 @@
 		<h4 class="ui top attached header">
 			{{if .PageIsSettingsHooksNew}}{{.locale.Tr "repo.settings.add_webhook"}}{{else}}{{.locale.Tr "repo.settings.update_webhook"}}{{end}}
 			<div class="ui right">
-				{{if eq .HookType "gitea"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/gitea.svg">
-				{{else if eq .HookType "gogs"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/gogs.ico">
-				{{else if eq .HookType "slack"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/slack.png">
-				{{else if eq .HookType "discord"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/discord.png">
-				{{else if eq .HookType "dingtalk"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/dingtalk.ico">
-				{{else if eq .HookType "telegram"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/telegram.png">
-				{{else if eq .HookType "msteams"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/msteams.png">
-				{{else if eq .HookType "feishu"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/feishu.png">
-				{{else if eq .HookType "matrix"}}
-					{{svg "gitea-matrix" 26}}
-				{{else if eq .HookType "wechatwork"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/wechatwork.png">
-				{{else if eq .HookType "packagist"}}
-					<img width="26" height="26" src="{{AssetUrlPrefix}}/img/packagist.png">
-				{{end}}
+				{{template "shared/webhook/icon" .}}
 			</div>
 		</h4>
 		<div class="ui attached segment">
diff --git a/templates/shared/webhook/icon.tmpl b/templates/shared/webhook/icon.tmpl
new file mode 100644
index 00000000000..84f9de266fa
--- /dev/null
+++ b/templates/shared/webhook/icon.tmpl
@@ -0,0 +1,27 @@
+{{$size := 26}}
+{{if .Size}}
+	{{$size = .Size}}
+{{end}}
+{{if eq .HookType "gitea"}}
+	<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/gitea.svg">
+{{else if eq .HookType "gogs"}}
+	<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/gogs.ico">
+{{else if eq .HookType "slack"}}
+	<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/slack.png">
+{{else if eq .HookType "discord"}}
+	<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/discord.png">
+{{else if eq .HookType "dingtalk"}}
+	<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/dingtalk.ico">
+{{else if eq .HookType "telegram"}}
+	<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/telegram.png">
+{{else if eq .HookType "msteams"}}
+	<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/msteams.png">
+{{else if eq .HookType "feishu"}}
+	<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/feishu.png">
+{{else if eq .HookType "matrix"}}
+	{{svg "gitea-matrix" $size "img"}}
+{{else if eq .HookType "wechatwork"}}
+	<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/wechatwork.png">
+{{else if eq .HookType "packagist"}}
+	<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/packagist.png">
+{{end}}
diff --git a/templates/user/settings/hook_new.tmpl b/templates/user/settings/hook_new.tmpl
index ac32cdd8c8b..83ae4801b49 100644
--- a/templates/user/settings/hook_new.tmpl
+++ b/templates/user/settings/hook_new.tmpl
@@ -4,29 +4,7 @@
 				<h4 class="ui top attached header">
 				{{if .PageIsSettingsHooksNew}}{{.locale.Tr "repo.settings.add_webhook"}}{{else}}{{.locale.Tr "repo.settings.update_webhook"}}{{end}}
 				<div class="ui right">
-					{{if eq .HookType "gitea"}}
-						<img width="26" height="26" src="{{AssetUrlPrefix}}/img/gitea.svg">
-					{{else if eq .HookType "gogs"}}
-						<img width="26" height="26" src="{{AssetUrlPrefix}}/img/gogs.ico">
-					{{else if eq .HookType "slack"}}
-						<img width="26" height="26" src="{{AssetUrlPrefix}}/img/slack.png">
-					{{else if eq .HookType "discord"}}
-						<img width="26" height="26" src="{{AssetUrlPrefix}}/img/discord.png">
-					{{else if eq .HookType "dingtalk"}}
-						<img width="26" height="26" src="{{AssetUrlPrefix}}/img/dingtalk.ico">
-					{{else if eq .HookType "telegram"}}
-						<img width="26" height="26" src="{{AssetUrlPrefix}}/img/telegram.png">
-					{{else if eq .HookType "msteams"}}
-						<img width="26" height="26" src="{{AssetUrlPrefix}}/img/msteams.png">
-					{{else if eq .HookType "feishu"}}
-						<img width="26" height="26" src="{{AssetUrlPrefix}}/img/feishu.png">
-					{{else if eq .HookType "matrix"}}
-						<img width="26" height="26" src="{{AssetUrlPrefix}}/img/matrix.svg">
-					{{else if eq .HookType "wechatwork"}}
-						<img width="26" height="26" src="{{AssetUrlPrefix}}/img/wechatwork.png">
-					{{else if eq .HookType "packagist"}}
-						<img width="26" height="26" src="{{AssetUrlPrefix}}/img/packagist.png">
-					{{end}}
+					{{template "shared/webhook/icon" .}}
 				</div>
 			</h4>
 			<div class="ui attached segment">