refactor(ui): Implement new icon set

.changeset/cozy-suns-heal.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': minor
+---
+
+Migrate to new icon set to create consistency across components.

packages/ui/src/common/CreateOrganizationAction.tsx

@@ -1,11 +1,14 @@
 import { useUser } from '@clerk/shared/react/index';
 
 import { Action } from '../elements/Actions';
-import { Add } from '../icons';
+import { Plus } from '../icons';
 
-type CreateOrganizationActionProps = Omit<React.ComponentProps<typeof Action>, 'icon'>;
+type CreateOrganizationActionProps = Omit<React.ComponentProps<typeof Action>, 'icon'> & {
+  icon?: React.ComponentProps<typeof Action>['icon'];
+};
 
 export const CreateOrganizationAction = (props: CreateOrganizationActionProps) => {
+  const { icon = Plus, ...rest } = props;
   const { user } = useUser();
 
   if (!user?.createOrganizationEnabled) {
@@ -14,8 +17,8 @@ export const CreateOrganizationAction = (props: CreateOrganizationActionProps) =
 
   return (
     <Action
-      {...props}
-      icon={Add}
+      {...rest}
+      icon={icon}
     />
   );
 };

packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx

@@ -5,6 +5,7 @@ import { UserInvitationSuggestionList } from './UserInvitationSuggestionList';
 import type { UserMembershipListProps } from './UserMembershipList';
 import { UserMembershipList } from './UserMembershipList';
 import { CreateOrganizationAction } from '@/common/CreateOrganizationAction';
+import { Add } from '@/icons';
 
 export interface OrganizationActionListProps extends UserMembershipListProps {
   onCreateOrganizationClick: React.MouseEventHandler;
@@ -21,6 +22,7 @@ const CreateOrganizationButton = ({
       iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('createOrganization')}
       iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}
       iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('createOrganization')}
+      icon={Add}
       label={localizationKeys('organizationSwitcher.action__createOrganization')}
       onClick={onCreateOrganizationClick}
       sx={t => ({

packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx

@@ -10,7 +10,7 @@ import { Form } from '@/elements/Form';
 import { FormButtonContainer } from '@/elements/FormButtons';
 import { PreviewButton } from '@/elements/PreviewButton';
 import { type VerificationCodeCardProps, VerificationCodeContent } from '@/elements/VerificationCodeCard';
-import { Add } from '@/icons';
+import { Plus } from '@/icons';
 import { Button, Col, descriptors, Flex, Flow, localizationKeys, Text } from '@/ui/customizables';
 import { Card } from '@/ui/elements/Card';
 import { Header } from '@/ui/elements/Header';
@@ -321,7 +321,7 @@ const SmsCodeScreen = withCardStateProvider((props: SmsCodeScreenProps) => {
               label={localizationKeys('taskSetupMfa.smsCode.addPhoneNumber')}
               block
               onClick={onAddPhoneClick}
-              icon={Add}
+              icon={Plus}
               elementDescriptor={descriptors.taskSetupMfaPhoneSelectionAddPhoneAction}
               sx={t => ({
                 borderTopWidth: t.borderWidths.$normal,

packages/ui/src/components/SignIn/SignInAccountSwitcher.tsx

@@ -8,7 +8,7 @@ import { UserPreview } from '@/ui/elements/UserPreview';
 import { withRedirectToAfterSignIn } from '../../common';
 import { useEnvironment, useSignInContext, useSignOutContext } from '../../contexts';
 import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
-import { Add, SwitchArrowRight } from '../../icons';
+import { Plus, SwitchArrowRight } from '../../icons';
 import { SignOutAllActions } from '../UserButton/SessionActions';
 import { useMultisessionActions } from '../UserButton/useMultisessionActions';
 
@@ -73,7 +73,7 @@ const SignInAccountSwitcherInternal = () => {
                 iconBoxElementId={descriptors.accountSwitcherActionButtonIconBox.setId('addAccount')}
                 iconElementDescriptor={descriptors.accountSwitcherActionButtonIcon}
                 iconElementId={descriptors.accountSwitcherActionButtonIcon.setId('addAccount')}
-                icon={Add}
+                icon={Plus}
                 label={localizationKeys('signIn.accountSwitcher.action__addAccount')}
                 onClick={handleAddAccountClicked}
                 iconSx={t => ({

packages/ui/src/elements/Card/CardContent.tsx

@@ -60,12 +60,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
           variant='ghost'
           aria-label='Close modal'
           onClick={toggle}
-          icon={
-            <Icon
-              icon={Close}
-              size='xs'
-            />
-          }
+          icon={<Icon icon={Close} />}
           sx={t => ({
             color: t.colors.$colorMutedForeground,
             zIndex: t.zIndices.$modal,

packages/ui/src/elements/OrganizationPreview.tsx

@@ -48,7 +48,7 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
     <Flex
       elementDescriptor={descriptors.organizationPreview}
       elementId={descriptors.organizationPreview.setId(elementId)}
-      gap={3}
+      gap={4}
       align='center'
       as='span'
       sx={[{ minWidth: '0' }, sx]}

packages/ui/src/elements/PhoneInput/index.tsx

@@ -231,7 +231,6 @@ const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
     >
       <Icon
         icon={Check}
-        size='sm'
         sx={{ visibility: isSelected ? 'visible' : 'hidden' }}
       />
       <Text