diff --git a/packages/managed-auth-react/src/components/icons.tsx b/packages/managed-auth-react/src/components/icons.tsx
index a9a368d..431bc57 100644
--- a/packages/managed-auth-react/src/components/icons.tsx
+++ b/packages/managed-auth-react/src/components/icons.tsx
@@ -227,6 +227,30 @@ export const GitHubMark = (p: IconProps) => (
   </svg>
 );
 
+export const GitLabMark = (p: IconProps) => (
+  <svg viewBox="0 0 24 24" aria-hidden="true" {...p}>
+    <path d="M12 23.054l3.684-11.335H8.316L12 23.054z" fill="#E24329" />
+    <path d="M12 23.054L8.316 11.719H1.647L12 23.054z" fill="#FC6D26" />
+    <path
+      d="M1.647 11.719L.253 16.01a.95.95 0 00.346 1.062L12 23.054 1.647 11.719z"
+      fill="#FCA326"
+    />
+    <path
+      d="M1.647 11.719h6.669L5.633.926a.477.477 0 00-.908 0L1.647 11.719z"
+      fill="#E24329"
+    />
+    <path d="M12 23.054l3.684-11.335h6.669L12 23.054z" fill="#FC6D26" />
+    <path
+      d="M22.353 11.719l1.394 4.291a.95.95 0 01-.346 1.062L12 23.054l10.353-11.335z"
+      fill="#FCA326"
+    />
+    <path
+      d="M22.353 11.719h-6.669l2.683-10.793a.477.477 0 01.908 0l3.078 10.793z"
+      fill="#E24329"
+    />
+  </svg>
+);
+
 export const MicrosoftMark = (p: IconProps) => (
   <svg viewBox="0 0 24 24" aria-hidden="true" {...p}>
     <path d="M1 1h10.5v10.5H1V1z" fill="#F25022" />
diff --git a/packages/managed-auth-react/src/components/sso-provider.tsx b/packages/managed-auth-react/src/components/sso-provider.tsx
index 87a2421..27eb5c8 100644
--- a/packages/managed-auth-react/src/components/sso-provider.tsx
+++ b/packages/managed-auth-react/src/components/sso-provider.tsx
@@ -1,9 +1,10 @@
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 import {
   AppleMark,
   BuildingIcon,
   FacebookMark,
   GitHubMark,
+  GitLabMark,
   GoogleMark,
   KeyIcon,
   MicrosoftMark,
@@ -14,27 +15,73 @@ export interface SSOProviderInfo {
   icon: ReactNode;
 }
 
+const BUILTIN_PROVIDERS: Record<
+  string,
+  { label: string; Icon: (p: { className?: string }) => ReactNode }
+> = {
+  google: { label: "Google", Icon: GoogleMark },
+  github: { label: "GitHub", Icon: GitHubMark },
+  gitlab: { label: "GitLab", Icon: GitLabMark },
+  microsoft: { label: "Microsoft", Icon: MicrosoftMark },
+  azure: { label: "Microsoft", Icon: MicrosoftMark },
+  facebook: { label: "Facebook", Icon: FacebookMark },
+  apple: { label: "Apple", Icon: AppleMark },
+  passkey: { label: "Passkey", Icon: KeyIcon },
+  sso: { label: "SSO", Icon: BuildingIcon },
+  saml: { label: "SSO", Icon: BuildingIcon },
+};
+
+function slugify(provider: string): string {
+  return provider.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+
+function titleCase(provider: string): string {
+  return provider
+    .split(/[\s_-]+/)
+    .filter(Boolean)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+    .join(" ");
+}
+
+function CDNProviderIcon({ provider }: { provider: string }) {
+  const [erroredSlug, setErroredSlug] = useState<string | null>(null);
+  const slug = slugify(provider);
+  const letter = provider.trim().charAt(0).toUpperCase() || "?";
+
+  if (!slug || erroredSlug === slug) {
+    return (
+      <span className="kma-sso-icon kma-sso-icon--letter" aria-hidden="true">
+        {letter}
+      </span>
+    );
+  }
+
+  return (
+    <img
+      src={`https://cdn.simpleicons.org/${slug}`}
+      alt=""
+      className="kma-sso-icon"
+      onError={() => setErroredSlug(slug)}
+    />
+  );
+}
+
 export function getSSOProviderInfo(provider: string): SSOProviderInfo {
-  const p = provider.toLowerCase();
-  if (p.includes("google"))
-    return { label: "Google", icon: <GoogleMark className="kma-sso-icon" /> };
-  if (p.includes("github"))
-    return { label: "GitHub", icon: <GitHubMark className="kma-sso-icon" /> };
-  if (p.includes("microsoft") || p.includes("azure"))
-    return {
-      label: "Microsoft",
-      icon: <MicrosoftMark className="kma-sso-icon" />,
-    };
-  if (p.includes("facebook"))
+  const slug = slugify(provider);
+
+  const builtinKey = Object.keys(BUILTIN_PROVIDERS).find((k) =>
+    slug.includes(k),
+  );
+  if (builtinKey) {
+    const builtin = BUILTIN_PROVIDERS[builtinKey];
     return {
-      label: "Facebook",
-      icon: <FacebookMark className="kma-sso-icon" />,
+      label: builtin.label,
+      icon: <builtin.Icon className="kma-sso-icon" />,
     };
-  if (p.includes("apple"))
-    return { label: "Apple", icon: <AppleMark className="kma-sso-icon" /> };
-  if (p.includes("saml") || p.includes("sso"))
-    return { label: "SSO", icon: <BuildingIcon className="kma-sso-icon" /> };
-  if (p.includes("passkey"))
-    return { label: "Passkey", icon: <KeyIcon className="kma-sso-icon" /> };
-  return { label: provider, icon: null };
+  }
+
+  return {
+    label: titleCase(provider),
+    icon: <CDNProviderIcon provider={provider} />,
+  };
 }
diff --git a/packages/managed-auth-react/src/styles/styles.css b/packages/managed-auth-react/src/styles/styles.css
index ff3a2d5..c871c5e 100644
--- a/packages/managed-auth-react/src/styles/styles.css
+++ b/packages/managed-auth-react/src/styles/styles.css
@@ -510,6 +510,18 @@
   height: 1.25rem;
 }
 
+.kma-sso-icon--letter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--kma-color-muted, #6b7280);
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
 /* ---------- Form / Input ---------- */
 
 .kma-form {