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

@@ -3,9 +3,12 @@ import { useUser } from '@clerk/shared/react/index';
 import { Action } from '../elements/Actions';
 import { Add } 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 = Add, ...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/common/EmailLinkStatusCard.tsx

@@ -6,7 +6,7 @@ import { Col, descriptors, Flex, Flow, Icon, localizationKeys, Spinner, Text } f
 import { Card } from '../elements/Card';
 import { useCardState } from '../elements/contexts';
 import { Header } from '../elements/Header';
-import { ExclamationTriangle, SwitchArrows, TickShield } from '../icons';
+import { ArrowLeftRight, ExclamationTriangle, ShieldCheck } from '../icons';
 import type { InternalTheme } from '../styledSystem';
 import { animations } from '../styledSystem';
 
@@ -19,8 +19,8 @@ type EmailLinkStatusCardProps = React.PropsWithChildren<{
 }>;
 
 const StatusToIcon: Record<Exclude<EmailLinkUIStatus, 'loading'>, React.ComponentType> = {
-  verified: TickShield,
-  verified_switch_tab: SwitchArrows,
+  verified: ShieldCheck,
+  verified_switch_tab: ArrowLeftRight,
   expired: ExclamationTriangle,
   failed: ExclamationTriangle,
   client_mismatch: ExclamationTriangle,

packages/ui/src/common/organizations/OrganizationPreview.tsx

@@ -7,7 +7,7 @@ import { OrganizationPreview } from '@/ui/elements/OrganizationPreview';
 import { PreviewButton } from '@/ui/elements/PreviewButton';
 
 import { Box, Button, Col, descriptors, Flex, Spinner } from '../../customizables';
-import { SwitchArrowRight } from '../../icons';
+import { ArrowRight } from '../../icons';
 import type { ThemableCssProp } from '../../styledSystem';
 import { common } from '../../styledSystem';
 
@@ -132,7 +132,7 @@ export const OrganizationPreviewButton = (props: OrganizationPreviewButtonProps)
   return (
     <PreviewButton
       sx={[sharedStyles]}
-      icon={SwitchArrowRight}
+      icon={ArrowRight}
       {...props}
     />
   );

packages/ui/src/components/APIKeys/CopyAPIKeyModal.tsx

@@ -6,7 +6,7 @@ import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
 import { useClipboard } from '@/ui/hooks';
-import { Check, ClipboardOutline } from '@/ui/icons';
+import { Checkmark, Clipboard } from '@/ui/icons';
 import { localizationKeys } from '@/ui/localization';
 import { useFormControl } from '@/ui/utils/useFormControl';
 
@@ -82,8 +82,8 @@ export const CopyAPIKeyModal = ({
                     value={apiKeySecret}
                     readOnly
                     sx={{ width: '100%' }}
-                    copyIcon={ClipboardOutline}
-                    copiedIcon={Check}
+                    copyIcon={Clipboard}
+                    copiedIcon={Checkmark}
                   />
                 </Form.CommonInputWrapper>
               </Form.ControlRow>

packages/ui/src/components/ConfigureSSO/elements/Step.tsx

@@ -12,7 +12,7 @@ import {
   Text,
   useLocalizations,
 } from '@/customizables';
-import { CaretLeft, CaretRight } from '@/icons';
+import { ChevronLeft, ChevronRight } from '@/icons';
 import { common, type PropsOfComponent } from '@/styledSystem';
 
 import { ProfileCardFooter } from './ProfileCard';
@@ -133,7 +133,7 @@ const FooterPrevious = ({ onClick, isDisabled, isLoading, label = 'Previous' }:
       onClick={handleClick}
     >
       <Icon
-        icon={CaretLeft}
+        icon={ChevronLeft}
         size='sm'
         sx={t => ({ marginInlineEnd: t.space.$1 })}
       />
@@ -163,7 +163,7 @@ const FooterContinue = ({ onClick, isDisabled, isLoading, label = 'Continue' }:
     >
       {labelText}
       <Icon
-        icon={CaretRight}
+        icon={ChevronRight}
         size='sm'
         sx={t => ({ marginInlineStart: t.space.$1 })}
       />

packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Box, descriptors, Flex, Icon, SimpleButton, Text } from '@/customizables';
-import { CaretRight, Check } from '@/icons';
+import { ChevronRight, Checkmark } from '@/icons';
 
 import type { StepperItemProps, StepperProps } from './types';
 
@@ -24,7 +24,7 @@ const Root = ({ children }: StepperProps): JSX.Element => {
           {index < items.length - 1 && (
             <Icon
               elementDescriptor={descriptors.configureSSOStepperSeparator}
-              icon={CaretRight}
+              icon={ChevronRight}
               size='md'
               colorScheme='neutral'
             />
@@ -77,8 +77,9 @@ const Item = ({
       >
         {isCompleted && !isCurrent ? (
           <Icon
-            icon={Check}
-            sx={theme => ({ width: theme.sizes.$2, height: theme.sizes.$2, color: theme.colors.$white })}
+            icon={Checkmark}
+            size='sm'
+            sx={theme => ({ color: theme.colors.$white })}
           />
         ) : (
           <Text
@@ -127,7 +128,7 @@ const Skeleton = ({ totalSteps = 4 }: SkeletonProps): JSX.Element => (
         {index < totalSteps - 1 && (
           <Icon
             elementDescriptor={descriptors.configureSSOStepperSeparator}
-            icon={CaretRight}
+            icon={ChevronRight}
             size='md'
             colorScheme='neutral'
             sx={{ opacity: 0.16 }}

packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx

@@ -28,7 +28,7 @@ import { useCardState } from '@/elements/contexts';
 import { Field } from '@/elements/FieldControl';
 import { Form } from '@/elements/Form';
 import { SegmentedControl } from '@/elements/SegmentedControl';
-import { Check, ClipboardOutline, Close, Upload } from '@/icons';
+import { Checkmark, Clipboard, Close, ArrowUpTray } from '@/icons';
 import type { FormControlState } from '@/ui/utils/useFormControl';
 import { useFormControl } from '@/ui/utils/useFormControl';
 import { handleError } from '@/utils/errorHandler';
@@ -201,8 +201,8 @@ export const CreateAppSubStep = (): JSX.Element => {
               <ClipboardInput
                 value={acsUrl}
                 readOnly
-                copyIcon={ClipboardOutline}
-                copiedIcon={Check}
+                copyIcon={Clipboard}
+                copiedIcon={Checkmark}
               />
             </Form.CommonInputWrapper>
           </Form.ControlRow>
@@ -212,8 +212,8 @@ export const CreateAppSubStep = (): JSX.Element => {
               <ClipboardInput
                 value={spEntityId}
                 readOnly
-                copyIcon={ClipboardOutline}
-                copiedIcon={Check}
+                copyIcon={Clipboard}
+                copiedIcon={Checkmark}
               />
             </Form.CommonInputWrapper>
           </Form.ControlRow>
@@ -896,7 +896,7 @@ const ManualEntryPanel = ({
                   onClick={() => certInputRef.current?.click()}
                 >
                   <Icon
-                    icon={Upload}
+                    icon={ArrowUpTray}
                     size='sm'
                     colorScheme='neutral'
                     sx={t => ({ marginInlineEnd: t.space.$1 })}

packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx

@@ -33,7 +33,7 @@ import { IconButton } from '@/elements/IconButton';
 import { Pagination } from '@/elements/Pagination';
 import { ProfileSection } from '@/elements/Section';
 import { useClipboard } from '@/hooks';
-import { Check, Copy, RotateLeftRight } from '@/icons';
+import { Checkmark, Copy, RotateLeftRight } from '@/icons';
 import { common, mqu } from '@/styledSystem';
 import { handleError } from '@/utils/errorHandler';
 
@@ -122,7 +122,7 @@ export const TestConfigurationStep = (): JSX.Element => {
                   >
                     <Icon
                       icon={RotateLeftRight}
-                      size='sm'
+                      size='md'
                       colorScheme='neutral'
                     />
                     <Text
@@ -625,7 +625,7 @@ const FullMessageBlock = ({ message }: { message: string }): JSX.Element => {
           variant='ghost'
           colorScheme='neutral'
           size='xs'
-          icon={hasCopied ? Check : Copy}
+          icon={hasCopied ? Checkmark : Copy}
           aria-label={copyLabel}
           onClick={() => onCopy()}
         />
@@ -749,12 +749,12 @@ const CopyTestUrlButton = ({ onTestRunCreated }: CopyTestUrlButtonProps): JSX.El
       {isCreatingTestRun ? (
         <Spinner
           elementDescriptor={descriptors.spinner}
-          size='xs'
+          size='sm'
         />
       ) : (
         <Icon
-          icon={hasCopied ? Check : Copy}
-          size='sm'
+          icon={hasCopied ? Checkmark : Copy}
+          size='md'
           colorScheme='neutral'
         />
       )}

packages/ui/src/components/ConfigureSSO/steps/TestRunHowToFixSection.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex, Heading, Icon, Link, localizationKeys, Span, Text } from '@/customizables';
-import { ArrowRightIcon } from '@/icons';
+import { ArrowRight } from '@/icons';
 
 import type { LocalizationKey } from '../../../localization';
 
@@ -132,7 +132,7 @@ export const TestRunHowToFixSection = ({ errorCode }: TestRunHowToFixSectionProp
             )}
           />
           <Icon
-            icon={ArrowRightIcon}
+            icon={ArrowRight}
             size='sm'
           />
         </Link>

packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx

@@ -16,7 +16,7 @@ import { useFormControl } from '@/ui/utils/useFormControl';
 
 import { useWizard, Wizard } from '../../common';
 import { Col, Icon } from '../../customizables';
-import { Upload } from '../../icons';
+import { ArrowUpTray } from '../../icons';
 import type { LocalizationKey } from '../../localization';
 import { localizationKeys } from '../../localization';
 import { InviteMembersForm } from '../OrganizationProfile/InviteMembersForm';
@@ -157,7 +157,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
                   icon={
                     <Icon
                       size='md'
-                      icon={Upload}
+                      icon={ArrowUpTray}
                       sx={t => ({
                         color: t.colors.$colorMutedForeground,
                         transitionDuration: t.transitionDuration.$controls,

packages/ui/src/components/OAuthConsent/OrgSelect.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 
 import { Box, Icon, Image, Text } from '@/ui/customizables';
 import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
-import { Check } from '@/ui/icons';
+import { Checkmark } from '@/ui/icons';
 import { common } from '@/ui/styledSystem';
 
 export type OrgOption = {
@@ -66,8 +66,7 @@ export function OrgSelect({ options, value, onChange }: OrgSelectProps) {
           </Text>
           {isSelected && (
             <Icon
-              icon={Check}
-              size='sm'
+              icon={Checkmark}
               sx={theme => ({ color: theme.colors.$primary500 })}
             />
           )}

packages/ui/src/components/OrganizationProfile/InviteMembersScreen.tsx

@@ -8,7 +8,7 @@ import { SuccessPage } from '@/ui/elements/SuccessPage';
 import { useWizard, Wizard } from '../../common';
 import { descriptors, Flex, localizationKeys, Text } from '../../customizables';
 import { useActionContext } from '../../elements/Action/ActionRoot';
-import { Email } from '../../icons';
+import { Envelope } from '../../icons';
 import { InviteMembersForm } from './InviteMembersForm';
 type InviteMembersScreenProps = {
   onReset?: () => void;
@@ -57,7 +57,7 @@ export const InvitationsSentMessage = () => {
       <IconCircle
         boxElementDescriptor={descriptors.invitationsSentIconBox}
         iconElementDescriptor={descriptors.invitationsSentIcon}
-        icon={Email}
+        icon={Envelope}
       />
       <Text localizationKey={localizationKeys('organizationProfile.invitePage.successMessage')} />
     </Flex>

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

@@ -12,7 +12,7 @@ import { NotificationCountBadge, withProtect } from '../../common';
 import { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';
 import { descriptors, Flex, localizationKeys } from '../../customizables';
 import { RootBox } from '../../elements/RootBox';
-import { CogFilled } from '../../icons';
+import { Cog } from '../../icons';
 import type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';
 import { OrganizationActionList } from './OtherOrganizationActions';
 
@@ -101,7 +101,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
         iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('manageOrganization')}
         iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}
         iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}
-        icon={CogFilled}
+        icon={Cog}
         label={localizationKeys('organizationSwitcher.action__manageOrganization')}
         onClick={() => handleItemClick()}
         trailing={<NotificationCountBadgeManageButton />}

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/OrganizationSwitcher/UserInvitationSuggestionList.tsx

@@ -16,7 +16,7 @@ import { InfiniteListSpinner } from '../../common';
 import { useAcceptedInvitations } from '../../contexts';
 import { Box, Button, descriptors, Flex, localizationKeys, Text } from '../../customizables';
 import { useInView } from '../../hooks';
-import { SwitchArrowRight } from '../../icons';
+import { ArrowRight } from '../../icons';
 import type { PropsOfComponent } from '../../styledSystem';
 import { common } from '../../styledSystem';
 import { organizationListParams, populateCacheUpdateItem } from './utils';
@@ -178,7 +178,7 @@ const InvitationPreview = withCardStateProvider(
       return (
         <PreviewButton
           elementDescriptor={descriptors.organizationSwitcherPreviewButton}
-          icon={SwitchArrowRight}
+          icon={ArrowRight}
           onClick={acceptedOrganization ? () => onOrganizationClick(acceptedOrganization) : undefined}
           role='menuitem'
         >

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

@@ -10,7 +10,7 @@ import { InfiniteListSpinner } from '../../common';
 import { useOrganizationSwitcherContext } from '../../contexts';
 import { Box, descriptors, localizationKeys } from '../../customizables';
 import { useInView } from '../../hooks';
-import { SwitchArrowRight } from '../../icons';
+import { ArrowRight } from '../../icons';
 import { common } from '../../styledSystem';
 import { organizationListParams } from './utils';
 
@@ -81,7 +81,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
         <PreviewButton
           elementDescriptor={descriptors.organizationSwitcherPreviewButton}
           elementId={descriptors.organizationSwitcherPreviewButton.setId('personal')}
-          icon={SwitchArrowRight}
+          icon={ArrowRight}
           onClick={onPersonalWorkspaceClick}
           role='menuitem'
         >
@@ -97,7 +97,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
           key={organization.id}
           elementDescriptor={descriptors.organizationSwitcherPreviewButton}
           elementId={descriptors.organizationSwitcherPreviewButton.setId('organization')}
-          icon={SwitchArrowRight}
+          icon={ArrowRight}
           onClick={() => onOrganizationClick(organization)}
           role='menuitem'
           sx={t => ({