Use the provider prop to render a different logo. The visual weight of the logos is normalized between providers so that it feels even. The gallery below renders every slug from ALL_ICONS, so new additions show up automatically.

 <Flex gap="6" p="4" wrap="wrap">
  {ALL_ICON_SLUGS.map((slug) => (
    <Tooltip key={slug} content={ALL_ICONS[slug].name}>
      <ProviderIcon provider={slug} />
    </Tooltip>
  ))}
</Flex>

Sizes

Use the size prop to control the size of the icon.

 <Flex align="center" gap="4">
  <ProviderIcon size="1" provider="google" />
  <ProviderIcon size="2" provider="google" />
  <ProviderIcon size="3" provider="google" />
  <ProviderIcon size="4" provider="google" />
</Grid>

Provider icon should be always used along with the name of the provider. Sizes 1 – 3 are typically paired directly with text.

Azure Active Directory

 <Flex direction="column" gap="3">
  <Flex align="center" gap="2">
    <ProviderIcon size="1" provider="azure" />
    <Text size="1">Azure Active Directory</Text>
  </Flex>
  <Flex align="center" gap="2">
    <ProviderIcon size="2" provider="azure" />
    <Text size="2">Azure Active Directory</Text>
  </Flex>
  <Flex align="center" gap="2">
    <ProviderIcon size="3" provider="azure" />
    <Text size="3">Azure Active Directory</Text>
  </Flex>
</Flex>

Size 4 is typically used as a supporting graphic in a card.

NextAuth.js

Create a Next.js application with WorkOS SSO and NextAuth.js.

 <Card size="3" style={{ maxWidth: 360 }}>
  <Flex align="center" gap="4" justify="between">
    <Box>
      <Heading as="h3" size="3" mb="1" trim="start">
        NextAuth.js
      </Heading>
      <Text color="gray" size="2" trim="end">
        Create a Next.js application with WorkOS SSO and NextAuth.js.
      </Text>
    </Box>
    <ProviderIcon mr="-2" size="4" provider="next-auth" />
  </Flex>
</Card>