Displays a standardized logo of a third party.
<ProviderIcon provider="okta" />
| Prop | Type | Default |
|---|---|---|
provider | | "access-people-hr"
| "adp"
| "apple"
| "auth0"
| "aws"
| "azure"
| "bamboohr"
| "breathe-hr"
| "bubble"
| "cas"
| "cezanne-hr"
| "classlink"
| "clerk"
| "cloudflare"
| "cyberark"
| "datadog"
| "duo"
| "firebase"
| "fourth"
| "github"
| "google"
| "hibob"
| "jumpcloud"
| "keycloak"
| "lastpass"
| "login-gov"
| "microsoft"
| "miniorange"
| "net-iq"
| "next-auth"
| "okta"
| "onelogin"
| "oracle"
| "personio"
| "ping-identity"
| "react-native-expo"
| "rippling"
| "salesforce"
| "shibboleth"
| "simple-saml-php"
| "splunk"
| "supabase"
| "vmware"
| "workday" | — |
size | "1" | "2" | "3" | "4" | "4" |
This component is based on the div element and supports common margin props m, mx, my, ml, mr, mt, mb. View source
Use the provider prop to render a different logo. The visual weight of the logos is normalized between providers so that it feels even.
<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="breathe-hr" /> <ProviderIcon provider="bubble" /> <ProviderIcon provider="cas" /> <ProviderIcon provider="cezanne-hr" /> <ProviderIcon provider="classlink" /> <ProviderIcon provider="clerk" /> <ProviderIcon provider="cloudflare" /> <ProviderIcon provider="cyberark" /> <ProviderIcon provider="datadog" /> <ProviderIcon provider="duo" /> <ProviderIcon provider="firebase" /> <ProviderIcon provider="fourth" /> <ProviderIcon provider="github" /> <ProviderIcon provider="google" /> <ProviderIcon provider="google-cloud" /> <ProviderIcon provider="hibob" /> <ProviderIcon provider="jumpcloud" /> <ProviderIcon provider="keycloak" /> <ProviderIcon provider="lastpass" /> <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="salesforce" /> <ProviderIcon provider="shibboleth" /> <ProviderIcon provider="simple-saml-php" /> <ProviderIcon provider="splunk" /> <ProviderIcon provider="supabase" /> <ProviderIcon provider="vmware" /> <ProviderIcon provider="workday" /> </Flex>
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.
<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.
<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>