diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index fcfa7e10b9..40495aee28 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -42,7 +42,8 @@
 								class="flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base p-2 rounded"
 								:href="provider.auth_url"
 							>
-								Login with {{ provider.provider_name }}
+								<img class="h-4 w-4" :src="provider.icon" :alt="provider.provider_name" />
+								<span>Login with {{ provider.provider_name }}</span>
 							</a>
 						</div>
 					</template>
@@ -159,5 +160,5 @@ async function submit(e) {
 const authProviders = createResource({
 	url: "hrms.api.oauth.oauth_providers",
 	auto: true,
-});
+})
 </script>
diff --git a/hrms/api/oauth.py b/hrms/api/oauth.py
index 317af986ac..d5db2268ad 100644
--- a/hrms/api/oauth.py
+++ b/hrms/api/oauth.py
@@ -20,20 +20,13 @@ def oauth_providers():
 		if not client_secret:
 			continue
 
-		icon = None
-		if provider.icon:
-			if provider.provider_name == "Custom":
-				icon = get_icon_html(provider.icon, small=True)
-			else:
-				icon = f"<img src='{provider.icon}' alt='{provider.provider_name}'>"
-
 		if provider.client_id and provider.base_url and get_oauth_keys(provider.name):
 			out.append(
 				{
 					"name": provider.name,
 					"provider_name": provider.provider_name,
 					"auth_url": get_oauth2_authorize_url(provider.name, "/hrms"),
-					"icon": icon,
+					"icon": provider.icon,
 				}
 			)