diff --git a/packages/elements-react/src/theme/default/components/form/social.tsx b/packages/elements-react/src/theme/default/components/form/social.tsx
index a4fe9b0df..9fea96ebd 100644
--- a/packages/elements-react/src/theme/default/components/form/social.tsx
+++ b/packages/elements-react/src/theme/default/components/form/social.tsx
@@ -59,7 +59,12 @@ export function DefaultButtonSocial({
   const oidcNodeCount =
     ui.nodes.filter((node) => node.group === "oidc").length ?? 0
 
-  const Logo = logos[attributes.value]
+  // Ideally, kratos would return the provider name in the context
+  // At the moment it only returns the label (misleadingly named `provider`).
+  // But changing that would be a breaking change.
+  // So we have to extract the provider name from the id, which sometimes might contain a - followed by a unique ID.
+  // TODO(kratos): Add provider to the context
+  const Logo = logos[(attributes.value as string).split("-")[0]]
 
   const showLabel =
     _showLabel ?? (oidcNodeCount % 3 !== 0 && oidcNodeCount % 4 !== 0)