Provider Icon

<Flex gap="6" p="4" wrap="wrap">
  <ProviderIcon provider="access-people-hr" />
  <ProviderIcon provider="adp" />
  <ProviderIcon provider="apple" />
  <ProviderIcon provider="aws" />
  <ProviderIcon provider="auth0" />
  <ProviderIcon provider="azure" />
  <ProviderIcon provider="bamboohr" />
  <ProviderIcon provider="bitbucket" />
  <ProviderIcon provider="breathe-hr" />
  <ProviderIcon provider="bubble" />
  <ProviderIcon provider="cas" />
  <ProviderIcon provider="cezanne-hr" />
  <ProviderIcon provider="classlink" />
  <ProviderIcon provider="clerk" />
  <ProviderIcon provider="clever" />
  <ProviderIcon provider="cloudflare" />
  <ProviderIcon provider="cyberark" />
  <ProviderIcon provider="datadog" />
  <ProviderIcon provider="duo" />
  <ProviderIcon provider="firebase" />
  <ProviderIcon provider="fourth" />
  <ProviderIcon provider="github" />
  <ProviderIcon provider="gitlab" />
  <ProviderIcon provider="google" />
  <ProviderIcon provider="google-cloud" />
  <ProviderIcon provider="hibob" />
  <ProviderIcon provider="intuit" />
  <ProviderIcon provider="jumpcloud" />
  <ProviderIcon provider="keycloak" />
  <ProviderIcon provider="lastpass" />
  <ProviderIcon provider="linkedin" />
  <ProviderIcon provider="login-gov" />
  <ProviderIcon provider="microsoft" />
  <ProviderIcon provider="miniorange" />
  <ProviderIcon provider="net-iq" />
  <ProviderIcon provider="next-auth" />
  <ProviderIcon provider="okta" />
  <ProviderIcon provider="onelogin" />
  <ProviderIcon provider="oracle" />
  <ProviderIcon provider="personio" />
  <ProviderIcon provider="ping-identity" />
  <ProviderIcon provider="react-native-expo" />
  <ProviderIcon provider="rippling" />
  <ProviderIcon provider="sailpoint" />
  <ProviderIcon provider="salesforce" />
  <ProviderIcon provider="shibboleth" />
  <ProviderIcon provider="simple-saml-php" />
  <ProviderIcon provider="slack" />
  <ProviderIcon provider="splunk" />
  <ProviderIcon provider="supabase" />
  <ProviderIcon provider="vmware" />
  <ProviderIcon provider="workday" />
  <ProviderIcon provider="xero" />
</Flex>

<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>

<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>

<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>