Modify OAuth login ui and fix display name, iconurl related logic (#25030)

Close #24808 

Co-Authour @wxiaoguang @silverwind 

1. Most svgs are found from https://worldvectorlogo.com/ , and some are
from conversion of png to svg. (facebook and nextcloud). And also
changed `templates/user/settings/security/accountlinks.tmpl`.

2. Fixed display name and iconurl related logic

# After

<img width="1436" alt="Screen Shot 2023-06-05 at 14 09 05"
src="https://github.com/go-gitea/gitea/assets/17645053/a5db39d8-1ab0-4676-82a4-fba60a1d1f84">

On mobile

<img width="378" alt="Screen Shot 2023-06-05 at 14 09 46"
src="https://github.com/go-gitea/gitea/assets/17645053/71d0f51b-baac-4f48-8ca2-ae0e013bd62e">


user/settings/security/accountlinks (The dropdown might be improved
later)

<img width="973" alt="Screen Shot 2023-06-01 at 10 01 44"
src="https://github.com/go-gitea/gitea/assets/17645053/27010e7e-2785-4fc5-8c49-b06621898f37">

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

44 files changed, 80 insertions, 270 deletions

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 195252c47d..9528708623 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -4,7 +4,8 @@ explore = Explore
 help = Help
 logo = Logo
 sign_in = Sign In
-sign_in_with = Sign In With
+sign_in_with_provider = Sign in with %s
+sign_in_or = or
 sign_out = Sign Out
 sign_up = Register
 link_account = Link Account
diff --git a/public/img/auth/azuread.png b/public/img/auth/azuread.png
deleted file mode 100644
index 1adbf15e28..0000000000
--- a/public/img/auth/azuread.png
+++ /dev/null
diff --git a/public/img/auth/azuread.svg b/public/img/auth/azuread.svg
new file mode 100644
index 0000000000..6b69abcba4
--- /dev/null
+++ b/public/img/auth/azuread.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" class="svg gitea-azuread" width="16" height="16" aria-hidden="true"><defs><linearGradient id="gitea-azuread__a" x1="13.25" x2="8.62" y1="13.02" y2="4.25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1988d9"/><stop offset=".9" stop-color="#54aef0"/></linearGradient><linearGradient id="gitea-azuread__b" x1="11.26" x2="14.46" y1="10.47" y2="15.99" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#54aef0"/><stop offset=".29" stop-color="#4fabee"/><stop offset=".51" stop-color="#41a2e9"/><stop offset=".74" stop-color="#2a93e0"/><stop offset=".88" stop-color="#1988d9"/></linearGradient></defs><path fill="#50e6ff" d="m1.01 10.19 7.92 5.14 8.06-5.16L18 11.35l-9.07 5.84L0 11.35l1.01-1.16z"/><path fill="#fff" d="M1.61 9.53 8.93.81l7.47 8.73-7.47 4.72-7.32-4.73z"/><path fill="#50e6ff" d="M8.93.81v13.45L1.61 9.53 8.93.81z"/><path fill="url(#gitea-azuread__a)" d="M8.93.81v13.45l7.47-4.72L8.93.81z"/><path fill="#53b1e0" d="m8.93 7.76 7.47 1.78-7.47 4.72v-6.5z"/><path fill="#9cebff" d="M8.93 14.26 1.61 9.53l7.32-1.77v6.5z"/><path fill="url(#gitea-azuread__b)" d="M8.93 17.19 18 11.35l-1.01-1.18-8.06 5.16v1.86z"/></svg>
\ No newline at end of file
diff --git a/public/img/auth/azureadv2.png b/public/img/auth/azureadv2.png
deleted file mode 100644
index 1adbf15e28..0000000000
--- a/public/img/auth/azureadv2.png
+++ /dev/null
diff --git a/public/img/auth/azureadv2.svg b/public/img/auth/azureadv2.svg
new file mode 100644
index 0000000000..7dbd8ea625
--- /dev/null
+++ b/public/img/auth/azureadv2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" class="svg gitea-azureadv2" width="16" height="16" aria-hidden="true"><defs><linearGradient id="gitea-azureadv2__a" x1="13.25" x2="8.62" y1="13.02" y2="4.25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1988d9"/><stop offset=".9" stop-color="#54aef0"/></linearGradient><linearGradient id="gitea-azureadv2__b" x1="11.26" x2="14.46" y1="10.47" y2="15.99" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#54aef0"/><stop offset=".29" stop-color="#4fabee"/><stop offset=".51" stop-color="#41a2e9"/><stop offset=".74" stop-color="#2a93e0"/><stop offset=".88" stop-color="#1988d9"/></linearGradient></defs><path fill="#50e6ff" d="m1.01 10.19 7.92 5.14 8.06-5.16L18 11.35l-9.07 5.84L0 11.35l1.01-1.16z"/><path fill="#fff" d="M1.61 9.53 8.93.81l7.47 8.73-7.47 4.72-7.32-4.73z"/><path fill="#50e6ff" d="M8.93.81v13.45L1.61 9.53 8.93.81z"/><path fill="url(#gitea-azureadv2__a)" d="M8.93.81v13.45l7.47-4.72L8.93.81z"/><path fill="#53b1e0" d="m8.93 7.76 7.47 1.78-7.47 4.72v-6.5z"/><path fill="#9cebff" d="M8.93 14.26 1.61 9.53l7.32-1.77v6.5z"/><path fill="url(#gitea-azureadv2__b)" d="M8.93 17.19 18 11.35l-1.01-1.18-8.06 5.16v1.86z"/></svg>
\ No newline at end of file
diff --git a/public/img/auth/bitbucket.png b/public/img/auth/bitbucket.png
deleted file mode 100644
index b3d022a5a7..0000000000
--- a/public/img/auth/bitbucket.png
+++ /dev/null
diff --git a/public/img/auth/bitbucket.svg b/public/img/auth/bitbucket.svg
new file mode 100644
index 0000000000..d3b15a9dc6
--- /dev/null
+++ b/public/img/auth/bitbucket.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 256 295" class="svg gitea-bitbucket" width="16" height="16" aria-hidden="true"><g fill="#205081"><path d="M128 0C57.732 0 .012 18.822.012 42.663c0 6.274 15.057 95.364 21.331 130.498 2.51 16.312 43.918 38.898 106.657 38.898 62.74 0 102.893-22.586 106.657-38.898 6.274-35.134 21.331-124.224 21.331-130.498C254.734 18.822 198.268 0 128 0zm0 183.199c-22.586 0-40.153-17.567-40.153-40.153s17.567-40.153 40.153-40.153 40.153 17.567 40.153 40.153c0 21.331-17.567 40.153-40.153 40.153zm0-127.988c-45.172 0-81.561-7.53-81.561-17.567 0-10.039 36.389-17.567 81.561-17.567 45.172 0 81.561 7.528 81.561 17.567 0 10.038-36.389 17.567-81.561 17.567z"/><path d="M220.608 207.04c-2.51 0-3.764 1.255-3.764 1.255s-31.37 25.096-87.835 25.096c-56.466 0-87.835-25.096-87.835-25.096s-2.51-1.255-3.765-1.255c-2.51 0-5.019 1.255-5.019 5.02v1.254c5.02 26.35 8.784 45.172 8.784 47.682 3.764 18.822 41.408 33.88 86.58 33.88s82.816-15.058 86.58-33.88c0-2.51 3.765-21.332 8.784-47.682v-1.255c1.255-2.51 0-5.019-2.51-5.019z"/><circle cx="128" cy="141.791" r="20.077"/></g></svg>
\ No newline at end of file
diff --git a/public/img/auth/discord.png b/public/img/auth/discord.png
deleted file mode 100644
index db0e70d5d4..0000000000
--- a/public/img/auth/discord.png
+++ /dev/null
diff --git a/public/img/auth/discord.svg b/public/img/auth/discord.svg
new file mode 100644
index 0000000000..ea64a39f6e
--- /dev/null
+++ b/public/img/auth/discord.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 293" class="svg gitea-discord" width="16" height="16" aria-hidden="true"><path fill="#7289DA" d="M226.011 0H29.99C13.459 0 0 13.458 0 30.135v197.778c0 16.677 13.458 30.135 29.989 30.135h165.888l-7.754-27.063 18.725 17.408 17.7 16.384L256 292.571V30.135C256 13.458 242.542 0 226.011 0zm-56.466 191.05s-5.266-6.291-9.655-11.85c19.164-5.413 26.478-17.408 26.478-17.408-5.998 3.95-11.703 6.73-16.823 8.63-7.314 3.073-14.336 5.12-21.211 6.291-14.044 2.633-26.917 1.902-37.888-.146-8.339-1.61-15.507-3.95-21.504-6.29-3.365-1.317-7.022-2.926-10.68-4.974-.438-.293-.877-.439-1.316-.732a2.022 2.022 0 0 1-.585-.438c-2.633-1.463-4.096-2.487-4.096-2.487s7.022 11.703 25.6 17.261c-4.388 5.56-9.801 12.142-9.801 12.142-32.33-1.024-44.617-22.235-44.617-22.235 0-47.104 21.065-85.285 21.065-85.285 21.065-15.799 41.106-15.36 41.106-15.36l1.463 1.756C80.75 77.53 68.608 89.088 68.608 89.088s3.218-1.755 8.63-4.242c15.653-6.876 28.088-8.777 33.208-9.216.877-.147 1.609-.293 2.487-.293a123.776 123.776 0 0 1 29.55-.292c13.896 1.609 28.818 5.705 44.031 14.043 0 0-11.556-10.971-36.425-18.578l2.048-2.34s20.041-.44 41.106 15.36c0 0 21.066 38.18 21.066 85.284 0 0-12.435 21.211-44.764 22.235zm-68.023-68.316c-8.338 0-14.92 7.314-14.92 16.237 0 8.924 6.728 16.238 14.92 16.238 8.339 0 14.921-7.314 14.921-16.238.147-8.923-6.582-16.237-14.92-16.237m53.394 0c-8.339 0-14.922 7.314-14.922 16.237 0 8.924 6.73 16.238 14.922 16.238 8.338 0 14.92-7.314 14.92-16.238 0-8.923-6.582-16.237-14.92-16.237"/></svg>
\ No newline at end of file
diff --git a/public/img/auth/dropbox.png b/public/img/auth/dropbox.png
deleted file mode 100644
index c2f4c90974..0000000000
--- a/public/img/auth/dropbox.png
+++ /dev/null
diff --git a/public/img/auth/dropbox.svg b/public/img/auth/dropbox.svg
new file mode 100644
index 0000000000..e75e7cc8cf
--- /dev/null
+++ b/public/img/auth/dropbox.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="25 24.999 850 790.592" class="svg gitea-dropbox" width="16" height="16" aria-hidden="true"><g fill="#007ee5"><path d="M275.037 24.999 25 188.255l172.886 138.448L450 171.023zM25 465.16l250.037 163.256L450 482.374l-252.114-155.67zm425 17.214 174.963 146.042L875 465.16 702.114 326.703z"/><path d="M875 188.255 624.963 24.999 450 171.024l252.114 155.68zM450.513 513.797l-175.476 145.61-75.09-49.028v54.959L450.513 815.59 701.08 665.338v-54.96l-75.09 49.029z"/></g></svg>
\ No newline at end of file
diff --git a/public/img/auth/facebook.png b/public/img/auth/facebook.png
deleted file mode 100644
index 80aa5183ac..0000000000
--- a/public/img/auth/facebook.png
+++ /dev/null
diff --git a/public/img/auth/facebook.svg b/public/img/auth/facebook.svg
new file mode 100644
index 0000000000..8163e2a966
--- /dev/null
+++ b/public/img/auth/facebook.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd" viewBox="0 0 128 128" class="svg gitea-facebook" width="16" height="16" aria-hidden="true"><path fill="#395b97" d="M93.5 8.5c-1.452.802-3.118 1.302-5 1.5L10 88.5c-.198 1.882-.698 3.548-1.5 5a551.581 551.581 0 0 1-.5-56c2.5-17.167 12.333-27 29.5-29.5a551.581 551.581 0 0 1 56 .5Z" style="opacity:.995"/><path fill="#366098" d="M93.5 8.5c15.888 4.225 24.555 14.558 26 31a676.749 676.749 0 0 0-1.5 37l-35 35a32.438 32.438 0 0 0-.5 8 441.615 441.615 0 0 1-1-42h14a379.883 379.883 0 0 0 3-17h-17c-2.5-13.83 3.166-19.83 17-18v-16c-25.755-3.243-36.755 8.09-33 34h-14v17h14v42c-9.34.166-18.673 0-28-.5-15.451-1.953-25.118-10.453-29-25.5.802-1.452 1.302-3.118 1.5-5L88.5 10c1.882-.198 3.548-.698 5-1.5Z" style="opacity:.976"/><path fill="#346499" d="M119.5 39.5c.167 16.67 0 33.337-.5 50-3.622 20.245-15.788 30.245-36.5 30a32.438 32.438 0 0 1 .5-8l35-35c.169-12.507.669-24.84 1.5-37Z" style="opacity:.918"/></svg>
\ No newline at end of file
diff --git a/public/img/auth/gitea.png b/public/img/auth/gitea.png
deleted file mode 100644
index 30d3313594..0000000000
--- a/public/img/auth/gitea.png
+++ /dev/null
diff --git a/public/img/auth/gitea.svg b/public/img/auth/gitea.svg
new file mode 100644
index 0000000000..f9015a31bd
--- /dev/null
+++ b/public/img/auth/gitea.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="svg gitea-gitea" width="16" height="16" aria-hidden="true"><path fill="#fff" d="m395.9 484.2-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12z"/><g fill="#609926"><path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6zM125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1zm300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1z"/><path d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8-1.9 8 2 16.3 9.1 20 7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3 7.8 4 17.4 1.7 22.5-5.3 5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4z"/></g></svg>
\ No newline at end of file
diff --git a/public/img/auth/github.png b/public/img/auth/github.png
deleted file mode 100644
index 1fa19c55d2..0000000000
--- a/public/img/auth/github.png
+++ /dev/null
diff --git a/public/img/auth/github.svg b/public/img/auth/github.svg
new file mode 100644
index 0000000000..0e5bf3b4d6
--- /dev/null
+++ b/public/img/auth/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="svg octicon-mark-github" width="16" height="16" aria-hidden="true"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"/></svg>
\ No newline at end of file
diff --git a/public/img/auth/gitlab.png b/public/img/auth/gitlab.png
deleted file mode 100644
index ca30b45901..0000000000
--- a/public/img/auth/gitlab.png
+++ /dev/null
diff --git a/public/img/auth/gitlab.svg b/public/img/auth/gitlab.svg
new file mode 100644
index 0000000000..742370ac9a
--- /dev/null
+++ b/public/img/auth/gitlab.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="svg gitea-gitlab" width="16" height="16" aria-hidden="true"><path fill="#E24329" d="m31.462 12.779-.045-.115-4.35-11.35a1.137 1.137 0 0 0-.447-.541 1.163 1.163 0 0 0-1.343.071c-.187.15-.322.356-.386.587l-2.94 9.001h-11.9l-2.941-9a1.138 1.138 0 0 0-1.045-.84 1.153 1.153 0 0 0-1.13.72L.579 12.68l-.045.113a8.09 8.09 0 0 0 2.68 9.34l.016.012.038.03 6.635 4.967 3.28 2.484 1.994 1.51a1.35 1.35 0 0 0 1.627 0l1.994-1.51 3.282-2.484 6.673-4.997.018-.013a8.088 8.088 0 0 0 2.69-9.352Z"/><path fill="#FC6D26" d="m31.462 12.779-.045-.115a14.748 14.748 0 0 0-5.856 2.634l-9.553 7.24A11225.6 11225.6 0 0 0 22.1 27.14l6.673-4.997.019-.013a8.09 8.09 0 0 0 2.67-9.352Z"/><path fill="#FCA326" d="m9.908 27.14 3.275 2.485 1.994 1.51a1.35 1.35 0 0 0 1.627 0l1.994-1.51 3.282-2.484s-2.835-2.14-6.092-4.603l-6.08 4.603Z"/><path fill="#FC6D26" d="M6.435 15.305A14.712 14.712 0 0 0 .58 12.672l-.045.113a8.09 8.09 0 0 0 2.68 9.347l.016.012.038.03 6.635 4.967 6.105-4.603-9.573-7.233Z"/></svg>
\ No newline at end of file
diff --git a/public/img/auth/google.png b/public/img/auth/google.png
deleted file mode 100644
index e2cfb67435..0000000000
--- a/public/img/auth/google.png
+++ /dev/null
diff --git a/public/img/auth/google.svg b/public/img/auth/google.svg
new file mode 100644
index 0000000000..dbb741897c
--- /dev/null
+++ b/public/img/auth/google.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" class="svg gitea-google" width="16" height="16" aria-hidden="true"><defs><path id="gitea-google__a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="gitea-google__b"><use xlink:href="#gitea-google__a" overflow="visible"/></clipPath><path fill="#FBBC05" d="M0 37V11l17 13z" clip-path="url(#gitea-google__b)"/><path fill="#EA4335" d="m0 11 17 13 7-6.1L48 14V0H0z" clip-path="url(#gitea-google__b)"/><path fill="#34A853" d="m0 37 30-23 7.9 1L48 0v48H0z" clip-path="url(#gitea-google__b)"/><path fill="#4285F4" d="M48 48 17 24l-4-3 35-10z" clip-path="url(#gitea-google__b)"/></svg>
\ No newline at end of file
diff --git a/public/img/auth/mastodon.png b/public/img/auth/mastodon.png
deleted file mode 100644
index 67254aad4c..0000000000
--- a/public/img/auth/mastodon.png
+++ /dev/null
diff --git a/public/img/auth/mastodon.svg b/public/img/auth/mastodon.svg
new file mode 100644
index 0000000000..f21f1e1375
--- /dev/null
+++ b/public/img/auth/mastodon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.41 0.22 747.62 801.45" class="svg gitea-mastodon" width="16" height="16" aria-hidden="true"><path fill="#3088d4" d="M729.94 479.5c-10.96 56.4-98.17 118.12-198.34 130.08-52.23 6.23-103.66 11.96-158.49 9.44-89.68-4.1-160.45-21.4-160.45-21.4 0 8.73.54 17.04 1.62 24.81 11.66 88.52 87.76 93.82 159.84 96.29 72.76 2.49 137.55-17.94 137.55-17.94l2.99 65.79s-50.89 27.32-141.55 32.35c-50 2.75-112.07-1.26-184.37-20.39C31.94 737.02 4.97 569.86.85 400.26-.41 349.9.37 302.42.37 262.7.37 89.27 113.99 38.44 113.99 38.44 171.28 12.12 269.59 1.06 371.79.22h2.52c102.19.84 200.57 11.9 257.86 38.22 0 0 113.62 50.83 113.62 224.26 0 0 1.42 127.96-15.85 216.8"/><path fill="#fff" d="M611.77 276.16v209.99h-83.2V282.33c0-42.97-18.07-64.77-54.23-64.77-39.98 0-60.01 25.86-60.01 77.02v111.57h-82.71V294.58c0-51.16-20.04-77.02-60.01-77.02-36.16 0-54.24 21.8-54.24 64.77v203.82h-83.19V276.16c0-42.92 10.93-77.03 32.88-102.26 22.63-25.23 52.27-38.17 89.07-38.17 42.57 0 74.81 16.37 96.12 49.1l20.72 34.74 20.73-34.74c21.31-32.73 53.55-49.1 96.12-49.1 36.79 0 66.44 12.94 89.07 38.17 21.95 25.23 32.88 59.34 32.88 102.26z"/></svg>
\ No newline at end of file
diff --git a/public/img/auth/microsoftonline.png b/public/img/auth/microsoftonline.png
deleted file mode 100644
index a8129dce29..0000000000
--- a/public/img/auth/microsoftonline.png
+++ /dev/null
diff --git a/public/img/auth/microsoftonline.svg b/public/img/auth/microsoftonline.svg
new file mode 100644
index 0000000000..72ef94eabb
--- /dev/null
+++ b/public/img/auth/microsoftonline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2075 2499.8" class="svg gitea-microsoftonline" width="16" height="16" aria-hidden="true"><path fill="#eb3c00" d="M0 2016.6V496.8L1344.4 0 2075 233.7v2045.9l-730.6 220.3L0 2016.6l1344.4 161.8V409.2L467.6 613.8v1198.3z"/></svg>
\ No newline at end of file
diff --git a/public/img/auth/nextcloud.png b/public/img/auth/nextcloud.png
deleted file mode 100644
index 635806813a..0000000000
--- a/public/img/auth/nextcloud.png
+++ /dev/null
diff --git a/public/img/auth/nextcloud.svg b/public/img/auth/nextcloud.svg
new file mode 100644
index 0000000000..900dfa630a
--- /dev/null
+++ b/public/img/auth/nextcloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd" viewBox="0 0 128 128" class="svg gitea-nextcloud" width="16" height="16" aria-hidden="true"><path fill="#0382c9" d="M12.5-.5h102a796.486 796.486 0 0 0 7 4.5 68.97 68.97 0 0 1 6 8.5v102a785.54 785.54 0 0 0-4.5 7 68.927 68.927 0 0 1-8.5 6h-102a779.088 779.088 0 0 0-7-4.5 68.94 68.94 0 0 1-6-8.5v-102a789.852 789.852 0 0 0 4.5-7 68.982 68.982 0 0 1 8.5-6Z" style="opacity:.997"/><path fill="#fafcfe" d="M55.5 37.5c16.649-2.824 28.149 3.51 34.5 19 6.704-10.658 15.537-12.825 26.5-6.5 9.555 10.007 9.222 19.673-1 29-10.492 5.063-18.992 2.897-25.5-6.5C83.734 86.553 72.9 92.72 57.5 91c-9.864-2.843-16.697-9.01-20.5-18.5-6.582 9.277-15.082 11.444-25.5 6.5-10.222-9.327-10.555-18.993-1-29 10.809-5.923 19.642-3.756 26.5 6.5 3.713-8.878 9.88-15.211 18.5-19Z" style="opacity:1"/><path fill="#0b83c9" d="M58.5 47.5c17.163-.677 23.996 7.323 20.5 24-6.538 9.38-15.038 11.546-25.5 6.5-10.605-12.356-8.939-22.523 5-30.5Z" style="opacity:1"/><path fill="#1986cb" d="M18.5 56.5c7.7-.138 10.867 3.529 9.5 11-4.041 4.813-8.375 5.146-13 1-1.407-4.857-.24-8.857 3.5-12Z" style="opacity:1"/><path fill="#2088cb" d="M103.5 56.5c7.801.619 10.635 4.619 8.5 12-4.709 4.27-9.042 3.936-13-1-1.607-5.062-.107-8.728 4.5-11Z" style="opacity:1"/></svg>
\ No newline at end of file
diff --git a/public/img/auth/openid_connect.svg b/public/img/auth/openid_connect.svg
deleted file mode 100644
index b4df684ed9..0000000000
--- a/public/img/auth/openid_connect.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="6095" height="2826"><path fill="#636363" d="M3454 2822c-49-3-91-16-124-39a191 191 0 01-83-138c-2-12-2-42 0-55a193 193 0 0174-130c40-31 90-46 154-46 28 0 52 3 77 9l58 15-3 9c-5 15-9 37-11 61l-1 12c-1 1-11 2-14 1-2-1-2-3-2-17 0-23-2-32-13-43-17-18-46-26-94-26-23 0-35 1-53 5-43 9-74 34-95 76-12 24-17 48-19 82-1 37 6 72 20 101 8 17 17 29 32 43 29 29 64 45 108 50 16 2 54 1 69-2 24-4 46-12 65-24l8-5 1 2 2 4-5 12c-5 14-5 13-24 21a272 272 0 01-127 22zm297 0a118 118 0 01-66-32c-25-25-38-60-38-102 0-18 1-28 5-42 12-47 50-84 98-94 35-8 71-5 99 9 45 23 70 68 68 124-2 39-17 73-44 98a151 151 0 01-122 39zm60-21c19-7 36-22 44-43 8-19 11-45 9-75-2-36-11-63-26-85a75 75 0 00-63-33c-14 0-23 2-34 8-11 5-25 18-30 29-9 17-12 30-13 58 0 29 3 50 11 75 10 33 27 53 51 63 16 7 35 8 51 3zm914 19c-52-5-90-32-106-78-6-18-7-27-7-53 0-22 0-25 2-37 5-21 14-42 23-54 11-15 42-35 66-43 14-5 25-7 42-7 30 0 54 9 74 28 12 12 20 26 25 44 4 15 5 38 3 49-1 4-1 4-17 7-21 3-40 4-103 4l-63 1v10a102 102 0 0031 77c19 18 51 28 79 24 15-1 25-5 45-15 18-9 18-9 19-7 2 2 2 3-1 8l-4 10c-1 3-3 4-10 8a154.1 154.1 0 01-98 24zm64-158c11-1 11-1 9-22-2-29-7-44-20-57a57 57 0 00-45-18c-20 0-33 6-46 19-9 9-14 17-18 30-3 10-6 29-6 38l1 7 4 1c9 1 103 3 121 2zm213 158c-51-4-88-32-104-77-11-33-10-79 2-110 11-29 24-41 65-64 20-11 29-15 41-18 9-3 11-3 33-3 24 0 32 1 47 5l20 10c1 1 0 5-1 18a718 718 0 00-6 52l-7 1c-8 0-7 2-9-18l-3-17c-3-7-18-16-37-21-8-3-10-3-26-3-19 0-27 1-39 7-21 11-34 34-38 66-1 12-1 37 2 49 8 48 31 79 66 91 25 8 51 7 79-5 14-6 16-6 18-2l2 3-5 8-7 10-31 13c-17 5-43 7-62 5zm215-3c-22-3-37-18-42-39v-179l-1-3-20 1c-23 0-22 0-22-6 0-3 2-5 9-8 12-4 32-14 33-15l1-43v-41l9-4c5-1 15-6 23-10 11-5 14-7 16-6 4 2 4 3 3 19l-5 78v9l39-1h38c1 1 0 6-2 13l-2 12h-36c-27 0-36 1-37 2l-1 82v82l2 6c7 14 19 20 41 20 9 0 21-2 27-4 2-1 2 0 3 2 3 7 3 6-10 17l-15 12c-10 4-38 6-51 4zm-1271-4l-1-7 1-6 15-1c21 0 24-2 27-16 2-11 2-178 0-186s-4-9-25-10h-17v-15l11-2c24-3 47-9 62-15 14-6 15-6 17-4l1 7a552 552 0 00-1 41l27-21c24-21 25-21 32-23 18-6 39-7 55-4 18 4 35 12 46 23 9 9 15 22 18 35 2 9 2 14 3 88 1 79 1 87 5 94 3 7 7 8 24 8l16 1v14h-4a824 824 0 00-90-1l1-33c2-44 1-142-1-153-5-21-23-37-47-42-10-2-27-2-36 1-21 6-41 22-46 38-4 13-4 21-4 87 1 63 2 74 5 81 3 6 6 7 24 7 10 0 16 1 16 2v12h-21a1546 1546 0 00-113 0zm329 0v-12c0-1 3-2 15-2 13 0 15 0 19-2 5-3 8-6 9-16 2-9 3-151 1-170-1-23-2-24-27-24l-17-1v-13l8-2a322 322 0 0081-22c2 0 3 4 2 17v33c1 0 13-9 26-21 24-20 25-21 32-23a112 112 0 0169 0c30 10 47 29 52 60 1 4 2 34 2 83 1 79 1 88 5 94 3 6 7 7 24 7l16 1v14h-4a819 819 0 00-91 0l2-37c2-48 1-138-1-149-4-16-14-29-27-36-12-6-20-8-35-8-17 0-23 1-36 7-15 8-27 20-31 33-4 12-4 19-4 86 1 65 2 75 5 81 3 7 7 8 24 8l16 1v14l-16-1a2243 2243 0 00-119 0z"/><path fill="#f6921e" d="M3321 2460c-6862 990-3431 495 0 0zm-560 285c-1.4-327-1.1-654 1-981 38-1.2 76-.8 114 1l1 48c0 52 0 51 6 40 14-26 37-50 62-65 29-19 72-33 118-38 19-3 68-3 88 0 65 8 116 30 164 70 70 61 114 165 118 280 5 153-46 275-143 339-43 29-90 44-147 49-20 2-62 1-79-2-50-7-89-21-122-42-25-17-43-34-57-56l-7-8-1 181-1 183-57 1zm367-359c38-4 67-16 95-39 48-38 76-100 85-188 2-21 2-65 0-82-9-84-40-147-91-186-27-21-58-34-96-39h-63a188 188 0 00-134 80c-34 48-51 110-51 187 0 122 44 209 126 249 23 11 47 17 82 20zm-984 109a431 431 0 01-285-127 528 528 0 01-141-335c-2-19-2-78 0-98 11-138 61-255 143-338a433 433 0 01325-127 432 432 0 01369 177 601 601 0 01-12 689 435 435 0 01-297 158c-18 2-85 3-102 1zm66-108a300 300 0 00258-161 530 530 0 0032-410c-25-80-71-143-130-184-44-29-86-44-140-50-50-6-104-1-148 12-48 15-98 47-133 85-39 44-68 101-84 164-13 51-17 86-17 141a489 489 0 0049 227c33 65 79 113 139 144 50 25 108 36 174 32zm-987-1043l-1-1145 194-97L1630-2v2302c-1 2-405 193-408 193zm2579 1144c-45-5-81-14-115-31-56-27-99-69-130-124-24-43-41-101-48-166-11-93 5-180 46-253a328 328 0 01242-164c18-3 67-3 87 0 64 8 109 27 156 69 26 22 47 50 66 82a440 440 0 0154 252l-266 1h-265v15c0 45 13 91 34 125 32 51 85 83 151 92 16 2 53 2 68 0 35-4 61-13 86-30a163 163 0 0063-93l4-13h57l57-1v5l-11 43c-15 43-35 78-63 107-45 46-102 73-177 83-17 2-78 3-96 1zm234-444c0-16-7-44-15-65-21-54-61-94-115-116-42-16-98-17-142-2-15 6-36 16-49 25-11 8-28 24-37 35a231 231 0 00-49 129l204 1h204zm205 75l1-355h108l1 57 1 55c1 0 3-2 9-12 12-19 30-41 45-54 18-16 34-27 55-37 39-19 82-27 135-25 52 1 90 9 124 27a175 175 0 0180 82c14 26 21 51 26 94 2 17 2 17 3 270v253h-116l-1-253v-252l-3-11c-6-30-18-52-37-70-27-27-66-39-115-37-36 1-65 8-91 20-58 28-95 83-105 158-3 21-4 51-4 248v197h-116zm748-135v-491l72 1h72v980h-144zm296 489l-1-490 1-489h383c157 9 277 66 347 166 39 57 64 130 73 217 4 36 5 41 5 86-1 45-1 64-5 100-18 160-75 269-175 336a514 514 0 01-244 74c-25 2-384 2-384 0zm385-110c62-5 109-22 159-55 43-29 78-75 100-133 18-45 26-84 31-140 2-19 2-94 0-114-4-51-11-90-22-124a263 263 0 00-233-190c-29-3-40-4-166-4h-124v761h119z"/><path fill="#babbbd" d="M1149 753a1672 1672 0 00-842 317 917 917 0 00-215 232 610 610 0 00-92 367c11 114 54 220 129 321 138 183 376 334 670 422a2101 2101 0 00423 81v-257l-24-3c-168-24-324-74-451-144a786 786 0 01-236-192c-45-57-77-119-92-181-16-63-16-128-1-191 17-69 50-133 103-196 16-20 59-62 81-81a927 927 0 01230-141 1354 1354 0 01316-94l3-1V883c.2-43.3-.1-86.7-1-130zm555 0h-1l-1 130 1 129 6 1 26 5c98 19 194 48 280 86 37 16 107 52 107 55l-108 62a7663.5 7663.5 0 00-109 63l97 21 689 150-56-583a5534 5534 0 00-208 115l-17-9a1836 1836 0 00-706-225z"/></svg>
diff --git a/public/img/auth/twitter.png b/public/img/auth/twitter.png
deleted file mode 100644
index 9d3d89a4af..0000000000
--- a/public/img/auth/twitter.png
+++ /dev/null
diff --git a/public/img/auth/twitter.svg b/public/img/auth/twitter.svg
new file mode 100644
index 0000000000..096b9add2b
--- /dev/null
+++ b/public/img/auth/twitter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="-89.009 -46.884 643.937 446.884" class="svg gitea-twitter" width="16" height="16" aria-hidden="true"><path fill="#1da1f2" fill-rule="nonzero" d="M154.729 400c185.669 0 287.205-153.876 287.205-287.312 0-4.37-.089-8.72-.286-13.052A205.304 205.304 0 0 0 492 47.346c-18.087 8.044-37.55 13.458-57.968 15.899 20.841-12.501 36.84-32.278 44.389-55.852a202.42 202.42 0 0 1-64.098 24.511C395.903 12.276 369.679 0 340.641 0c-55.744 0-100.948 45.222-100.948 100.965 0 7.925.887 15.631 2.619 23.025-83.895-4.223-158.287-44.405-208.074-105.504A100.739 100.739 0 0 0 20.57 69.24c0 35.034 17.82 65.961 44.92 84.055a100.172 100.172 0 0 1-45.716-12.63c-.015.424-.015.837-.015 1.29 0 48.903 34.794 89.734 80.982 98.986a101.036 101.036 0 0 1-26.617 3.553c-6.493 0-12.821-.639-18.971-1.82 12.851 40.122 50.115 69.319 94.296 70.135-34.549 27.089-78.07 43.224-125.371 43.224A204.9 204.9 0 0 1 0 354.634c44.674 28.645 97.72 45.359 154.734 45.359"/></svg>
\ No newline at end of file
diff --git a/public/img/auth/yandex.png b/public/img/auth/yandex.png
deleted file mode 100644
index 3414ad4249..0000000000
--- a/public/img/auth/yandex.png
+++ /dev/null
diff --git a/public/img/auth/yandex.svg b/public/img/auth/yandex.svg
new file mode 100644
index 0000000000..a128e8ad40
--- /dev/null
+++ b/public/img/auth/yandex.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="svg gitea-yandex" width="16" height="16" aria-hidden="true"><path fill="#e52620" d="M49.07 0c.524.405.262.88.095 1.333l-6.643 18.095-8.047 22.12a4.21 4.21 0 0 0-.262 1.429v19.81c0 1.2-.024 1.2-1.214 1.2-1.238 0-2.476-.048-3.714.024-.786.024-1.07-.238-1.048-1.024l.024-7.333V42.928c0-.5-.07-1.048-.262-1.524L14.976 7.333c-.095-.262-.238-.476-.357-.714v-.5c.38-.12.762-.3 1.143-.3l4.12-.024s1.357 0 1.81 1.286l9.7 27.31.405.976.333-1.095 1.905-6.976 8.5-26.31c.12-.333.405-.62.62-.93L49.07 0z"/></svg>
\ No newline at end of file
diff --git a/services/auth/signin.go b/services/auth/signin.go
index 2af15c4133..1095b27fe2 100644
--- a/services/auth/signin.go
+++ b/services/auth/signin.go
@@ -61,7 +61,7 @@ func UserSignIn(username, password string) (*user_model.User, *auth.Source, erro
 			}
 
 			if !source.IsActive {
-				return nil, nil, oauth2.ErrAuthSourceNotActived
+				return nil, nil, oauth2.ErrAuthSourceNotActivated
 			}
 
 			authenticator, ok := source.Cfg.(PasswordAuthenticator)
diff --git a/services/auth/source/oauth2/providers.go b/services/auth/source/oauth2/providers.go
index 7ba370855a..0aa83ba494 100644
--- a/services/auth/source/oauth2/providers.go
+++ b/services/auth/source/oauth2/providers.go
@@ -19,7 +19,7 @@ import (
 type Provider interface {
 	Name() string
 	DisplayName() string
-	Image() string
+	IconURL() string
 	CustomURLSettings() *CustomURLSettings
 }
 
@@ -34,23 +34,28 @@ type GothProvider interface {
 	GothProviderCreator
 }
 
-// ImagedProvider provide an overridden image setting for the provider
-type ImagedProvider struct {
+// AuthSourceProvider provides a provider for an AuthSource. Multiple auth sources could use the same registered GothProvider
+// So each auth source should have its own DisplayName and IconURL for display.
+// The Name is the GothProvider's name, to help to find the GothProvider to sign in.
+// The DisplayName is the auth source config's name, site admin set it on the admin page, the IconURL can also be set there.
+type AuthSourceProvider struct {
 	GothProvider
-	image string
+	sourceName, iconURL string
 }
 
-// Image returns the image path for this provider
-func (i *ImagedProvider) Image() string {
-	return i.image
+func (p *AuthSourceProvider) Name() string {
+	return p.GothProvider.Name()
 }
 
-// NewImagedProvider is a constructor function for the ImagedProvider
-func NewImagedProvider(image string, provider GothProvider) *ImagedProvider {
-	return &ImagedProvider{
-		GothProvider: provider,
-		image:        image,
+func (p *AuthSourceProvider) DisplayName() string {
+	return p.sourceName
+}
+
+func (p *AuthSourceProvider) IconURL() string {
+	if p.iconURL != "" {
+		return p.iconURL
 	}
+	return p.GothProvider.IconURL()
 }
 
 // Providers contains the map of registered OAuth2 providers in Gitea (based on goth)
@@ -95,11 +100,13 @@ func GetActiveOAuth2Providers() ([]string, map[string]Provider, error) {
 	var orderedKeys []string
 	providers := make(map[string]Provider)
 	for _, source := range authSources {
-		prov := gothProviders[source.Cfg.(*Source).Provider]
-		if source.Cfg.(*Source).IconURL != "" {
-			prov = &ImagedProvider{prov, source.Cfg.(*Source).IconURL}
+		oauth2Cfg, ok := source.Cfg.(*Source)
+		if !ok {
+			log.Error("Invalid OAuth2 source config: %v", oauth2Cfg)
+			continue
 		}
-		providers[source.Name] = prov
+		gothProv := gothProviders[oauth2Cfg.Provider]
+		providers[source.Name] = &AuthSourceProvider{GothProvider: gothProv, sourceName: source.Name, iconURL: oauth2Cfg.IconURL}
 		orderedKeys = append(orderedKeys, source.Name)
 	}
 
@@ -138,8 +145,7 @@ func ClearProviders() {
 	goth.ClearProviders()
 }
 
-// ErrAuthSourceNotActived login source is not actived error
-var ErrAuthSourceNotActived = errors.New("auth source is not actived")
+var ErrAuthSourceNotActivated = errors.New("auth source is not activated")
 
 // used to create different types of goth providers
 func createProvider(providerName string, source *Source) (goth.Provider, error) {
@@ -150,7 +156,7 @@ func createProvider(providerName string, source *Source) (goth.Provider, error)
 
 	p, ok := gothProviders[source.Provider]
 	if !ok {
-		return nil, ErrAuthSourceNotActived
+		return nil, ErrAuthSourceNotActivated
 	}
 
 	provider, err = p.CreateGothProvider(providerName, callbackURL, source)
diff --git a/services/auth/source/oauth2/providers_base.go b/services/auth/source/oauth2/providers_base.go
index 61654d8eaa..c8e41430ab 100644
--- a/services/auth/source/oauth2/providers_base.go
+++ b/services/auth/source/oauth2/providers_base.go
@@ -3,6 +3,8 @@
 
 package oauth2
 
+import "code.gitea.io/gitea/modules/setting"
+
 // BaseProvider represents a common base for Provider
 type BaseProvider struct {
 	name        string
@@ -19,9 +21,14 @@ func (b *BaseProvider) DisplayName() string {
 	return b.displayName
 }
 
-// Image returns an image path for this provider
-func (b *BaseProvider) Image() string {
-	return "/assets/img/auth/" + b.name + ".png"
+// IconURL returns an icon path for this provider
+// Use svg for default icons, providers_openid has its own IconURL function
+func (b *BaseProvider) IconURL() string {
+	name := b.name
+	if b.name == "gplus" {
+		name = "google"
+	}
+	return setting.AppSubURL + "/assets/img/auth/" + name + ".svg"
 }
 
 // CustomURLSettings returns the custom url settings for this provider
@@ -29,4 +36,4 @@ func (b *BaseProvider) CustomURLSettings() *CustomURLSettings {
 	return nil
 }
 
-var _ (Provider) = &BaseProvider{}
+var _ Provider = &BaseProvider{}
diff --git a/services/auth/source/oauth2/providers_custom.go b/services/auth/source/oauth2/providers_custom.go
index b5fe179441..65cf538ad7 100644
--- a/services/auth/source/oauth2/providers_custom.go
+++ b/services/auth/source/oauth2/providers_custom.go
@@ -49,7 +49,7 @@ func NewCustomProvider(name, displayName string, customURLSetting *CustomURLSett
 	}
 }
 
-var _ (GothProvider) = &CustomProvider{}
+var _ GothProvider = &CustomProvider{}
 
 func init() {
 	RegisterGothProvider(NewCustomProvider(
diff --git a/services/auth/source/oauth2/providers_openid.go b/services/auth/source/oauth2/providers_openid.go
index 2433cd3c7f..c394058d6f 100644
--- a/services/auth/source/oauth2/providers_openid.go
+++ b/services/auth/source/oauth2/providers_openid.go
@@ -24,9 +24,9 @@ func (o *OpenIDProvider) DisplayName() string {
 	return "OpenID Connect"
 }
 
-// Image returns an image path for this provider
-func (o *OpenIDProvider) Image() string {
-	return "/assets/img/auth/openid_connect.svg"
+// IconURL returns an icon path for this provider
+func (o *OpenIDProvider) IconURL() string {
+	return setting.AppSubURL + "/assets/img/svg/gitea-openid.svg"
 }
 
 // CreateGothProvider creates a GothProvider from this Provider
@@ -48,7 +48,7 @@ func (o *OpenIDProvider) CustomURLSettings() *CustomURLSettings {
 	return nil
 }
 
-var _ (GothProvider) = &OpenIDProvider{}
+var _ GothProvider = &OpenIDProvider{}
 
 func init() {
 	RegisterGothProvider(&OpenIDProvider{})
diff --git a/services/auth/source/oauth2/providers_simple.go b/services/auth/source/oauth2/providers_simple.go
index 731c1b59a9..e95323a62a 100644
--- a/services/auth/source/oauth2/providers_simple.go
+++ b/services/auth/source/oauth2/providers_simple.go
@@ -48,7 +48,7 @@ func NewSimpleProvider(name, displayName string, scopes []string, newFn SimplePr
 	}
 }
 
-var _ (GothProvider) = &SimpleProvider{}
+var _ GothProvider = &SimpleProvider{}
 
 func init() {
 	RegisterGothProvider(
@@ -69,13 +69,13 @@ func init() {
 		}))
 
 	// named gplus due to legacy gplus -> google migration (Google killed Google+). This ensures old connections still work
-	RegisterGothProvider(NewImagedProvider("/assets/img/auth/google.png", NewSimpleProvider("gplus", "Google", []string{"email"},
+	RegisterGothProvider(NewSimpleProvider("gplus", "Google", []string{"email"},
 		func(clientKey, secret, callbackURL string, scopes ...string) goth.Provider {
 			if setting.OAuth2Client.UpdateAvatar || setting.OAuth2Client.EnableAutoRegistration {
 				scopes = append(scopes, "profile")
 			}
 			return google.New(clientKey, secret, callbackURL, scopes...)
-		})))
+		}))
 
 	RegisterGothProvider(NewSimpleProvider("twitter", "Twitter", nil,
 		func(clientKey, secret, callbackURL string, scopes ...string) goth.Provider {
diff --git a/templates/user/auth/signin_inner.tmpl b/templates/user/auth/signin_inner.tmpl
index 8d9375de75..22cb620bfe 100644
--- a/templates/user/auth/signin_inner.tmpl
+++ b/templates/user/auth/signin_inner.tmpl
@@ -53,29 +53,17 @@
 	{{end}}
 
 	{{if and .OrderedOAuth2Names .OAuth2Providers}}
-	<hr class="ui divider"/>
 	<div id="oauth2-login-navigator">
-		<div id="oauth2-login-navigator-inner" class="gt-df gt-jc">
-			<span class="gt-self-center gt-mr-3">{{.locale.Tr "sign_in_with"}}</span>
-			<div class="gt-df gt-fw gt-gap-4">
+		<div class="gt-df gt-fc gt-jc">
+			<div class="ui horizontal divider">
+				{{.locale.Tr "sign_in_or"}}
+			</div>
+			<div id="oauth2-login-navigator-inner" class="gt-df gt-fc gt-fw gt-ac gt-gap-3">
 				{{range $key := .OrderedOAuth2Names}}
 					{{$provider := index $.OAuth2Providers $key}}
-					<a class="{{$provider.Name}} silenced oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}" data-tooltip-content="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}">
-						{{if eq $provider.Name "github"}}
-							{{svg "octicon-mark-github" 40}}
-						{{else if eq $provider.Name "gitlab"}}
-							{{svg "gitea-gitlab" 40}}
-						{{else if eq $provider.Name "openidConnect"}}
-							{{svg "gitea-openid" 40}}
-						{{else}}
-							<img
-								class="gt-object-contain"
-								width="40"
-								height="40"
-								alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
-								src="{{AppSubUrl}}{{$provider.Image}}"
-							>
-						{{end}}
+					<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
+						<img class="gt-mr-3" width="20" height="20" src="{{$provider.IconURL}}" alt="{{$provider.DisplayName}}">
+						{{$.locale.Tr "sign_in_with_provider" $provider.DisplayName}}
 					</a>
 				{{end}}
 			</div>
diff --git a/templates/user/settings/security/accountlinks.tmpl b/templates/user/settings/security/accountlinks.tmpl
index b9f8af34c7..e7a685bb9f 100644
--- a/templates/user/settings/security/accountlinks.tmpl
+++ b/templates/user/settings/security/accountlinks.tmpl
@@ -8,7 +8,7 @@
 					{{range $key := .OrderedOAuth2Names}}
 						{{$provider := index $.OAuth2Providers $key}}
 						<a class="item" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
-							<img width="20" height="20" src="{{AppSubUrl}}{{$provider.Image}}" alt="{{$provider.DisplayName}}">
+							<img class="gt-mr-3" width="20" height="20" src="{{$provider.IconURL}}" alt="{{$provider.DisplayName}}">
 							{{$provider.DisplayName}}
 						</a>
 					{{end}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index b56e7b68d6..1c7a239188 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -468,6 +468,10 @@ a.label,
   padding-bottom: 7.42px !important;
 }
 
+.ui.divider {
+  color: var(--color-text);
+}
+
 .ui.divider:not(.vertical,.horizontal) {
   border-top-color: var(--color-secondary) !important;
   border-bottom: none !important;
diff --git a/web_src/css/form.css b/web_src/css/form.css
index dfa7208ca2..a6106016b5 100644
--- a/web_src/css/form.css
+++ b/web_src/css/form.css
@@ -309,7 +309,8 @@ textarea:focus,
   .user.reset.password form .inline.field > textarea,
   .user.link-account form .inline.field > textarea,
   .user.signin form .inline.field > textarea,
-  .user.signup form .inline.field > textarea {
+  .user.signup form .inline.field > textarea,
+  .oauth-login-link {
     width: 50%;
   }
 }
@@ -364,7 +365,8 @@ textarea:focus,
   .user.reset.password form input,
   .user.link-account form input,
   .user.signin form input,
-  .user.signup form input {
+  .user.signup form input,
+  .oauth-login-link {
     width: 100% !important;
   }
 }
diff --git a/web_src/fomantic/_site/globals/site.variables b/web_src/fomantic/_site/globals/site.variables
index dcd9c2f08c..b09fb90b71 100644
--- a/web_src/fomantic/_site/globals/site.variables
+++ b/web_src/fomantic/_site/globals/site.variables
@@ -7,3 +7,4 @@
 @disabledOpacity: var(--opacity-disabled);
 @variationPopupTooltip: false;
 @linkHoverUnderline: underline;
+@variationButtonSocial: false;
diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css
index 40d8b4e138..47510dbc9e 100644
--- a/web_src/fomantic/build/semantic.css
+++ b/web_src/fomantic/build/semantic.css
@@ -439,219 +439,6 @@
   border-bottom-right-radius: 0;
 }
 
-/*-------------------
-         Social
-  --------------------*/
-
-/* Facebook */
-
-.ui.facebook.button {
-  background-color: #3B5998;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.facebook.button:hover {
-  background-color: #304d8a;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.facebook.button:active {
-  background-color: #2d4373;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-/* Twitter */
-
-.ui.twitter.button {
-  background-color: #1DA1F2;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.twitter.button:hover {
-  background-color: #0298f3;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.twitter.button:active {
-  background-color: #0c85d0;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-/* Google Plus */
-
-.ui.google.plus.button {
-  background-color: #DD4B39;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.google.plus.button:hover {
-  background-color: #e0321c;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.google.plus.button:active {
-  background-color: #c23321;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-/* Linked In */
-
-.ui.linkedin.button {
-  background-color: #0077B5;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.linkedin.button:hover {
-  background-color: #00669c;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.linkedin.button:active {
-  background-color: #005582;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-/* YouTube */
-
-.ui.youtube.button {
-  background-color: #FF0000;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.youtube.button:hover {
-  background-color: #e60000;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.youtube.button:active {
-  background-color: #cc0000;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-/* Instagram */
-
-.ui.instagram.button {
-  background-color: #49769C;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.instagram.button:hover {
-  background-color: #3d698e;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.instagram.button:active {
-  background-color: #395c79;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-/* Pinterest */
-
-.ui.pinterest.button {
-  background-color: #BD081C;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.pinterest.button:hover {
-  background-color: #ac0013;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-.ui.pinterest.button:active {
-  background-color: #8c0615;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-
-/* VK */
-
-.ui.vk.button {
-  background-color: #45668E;
-  color: #FFFFFF;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.vk.button:hover {
-  background-color: #395980;
-  color: #FFFFFF;
-}
-
-.ui.vk.button:active {
-  background-color: #344d6c;
-  color: #FFFFFF;
-}
-
-/* WhatsApp */
-
-.ui.whatsapp.button {
-  background-color: #25D366;
-  color: #FFFFFF;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.whatsapp.button:hover {
-  background-color: #19c55a;
-  color: #FFFFFF;
-}
-
-.ui.whatsapp.button:active {
-  background-color: #1da851;
-  color: #FFFFFF;
-}
-
-/* Telegram */
-
-.ui.telegram.button {
-  background-color: #0088CC;
-  color: #FFFFFF;
-  background-image: none;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-
-.ui.telegram.button:hover {
-  background-color: #0077b3;
-  color: #FFFFFF;
-}
-
-.ui.telegram.button:active {
-  background-color: #006699;
-  color: #FFFFFF;
-}
-
 /*--------------
      Icon
 ---------------*/