diff --git a/templates/shared/webhook/icon.tmpl b/templates/shared/webhook/icon.tmpl
index a82fceeb6aee..1abfe363f4cf 100644
--- a/templates/shared/webhook/icon.tmpl
+++ b/templates/shared/webhook/icon.tmpl
@@ -5,23 +5,23 @@
 {{if eq .HookType "gitea"}}
 	{{svg "gitea-gitea" $size "img"}}
 {{else if eq .HookType "gogs"}}
-	<img class="{{.Class}}" width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/gogs.ico">
+	<img  width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/gogs.ico">
 {{else if eq .HookType "slack"}}
-	<img class="{{.Class}}" width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/slack.png">
+	<img  width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/slack.png">
 {{else if eq .HookType "discord"}}
-	<img class="{{.Class}}" width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/discord.png">
+	<img  width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/discord.png">
 {{else if eq .HookType "dingtalk"}}
-	<img class="{{.Class}}" width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/dingtalk.ico">
+	<img  width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/dingtalk.ico">
 {{else if eq .HookType "telegram"}}
-	<img class="{{.Class}}" width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/telegram.png">
+	<img  width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/telegram.png">
 {{else if eq .HookType "msteams"}}
-	<img class="{{.Class}}" width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/msteams.png">
+	<img  width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/msteams.png">
 {{else if eq .HookType "feishu"}}
-	<img class="{{.Class}}" width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/feishu.png">
+	<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 class="{{.Class}}" width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/wechatwork.png">
+	<img  width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/wechatwork.png">
 {{else if eq .HookType "packagist"}}
-	<img class="{{.Class}}" width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/packagist.png">
+	<img  width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/packagist.png">
 {{end}}
diff --git a/templates/webhook/new.tmpl b/templates/webhook/new.tmpl
index 324fada6b37c..305133c03a16 100644
--- a/templates/webhook/new.tmpl
+++ b/templates/webhook/new.tmpl
@@ -1,8 +1,8 @@
 <h4 class="ui top attached header">
 	{{.CustomHeaderTitle}}
 	<div class="ui right type dropdown">
-		<div class="text">
-			{{template "shared/webhook/icon" (dict "Size" .ctxData.Size "HookType" .ctxData.HookType "Class" "gt-vm gt-mr-1")}}
+		<div class="text gt-df gt-ac">
+			{{template "shared/webhook/icon" (dict "Size" 20 "HookType" .ctxData.HookType)}}
 			{{ctx.Locale.Tr (print "repo.settings.web_hook_name_" .ctxData.HookType)}}
 		</div>
 		{{svg "octicon-triangle-down" 14 "dropdown icon"}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 198e87c0e202..ff72376a365c 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -413,6 +413,13 @@ ol.ui.list li,
   color: var(--color-text-light-2);
 }
 
+/* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */
+.ui.dropdown > .text > .img {
+  margin-left: 0;
+  float: none;
+  margin-right: 0.78571429rem;
+}
+
 .ui.dropdown > .text > .description,
 .ui.dropdown .menu > .item > .description {
   color: var(--color-text-light-2);