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

@@ -4,7 +4,7 @@ import { InfiniteListSpinner } from '@/ui/common/InfiniteListSpinner';
 import { Box, Icon, Image, Text } from '@/ui/customizables';
 import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
 import { useInView } from '@/ui/hooks/useInView';
-import { Check } from '@/ui/icons';
+import { Checkmark } from '@/ui/icons';
 import { common } from '@/ui/styledSystem';
 
 export type OrgOption = {
@@ -78,8 +78,7 @@ export function OrgSelect({ options, value, onChange, hasMore, onLoadMore }: Org
           </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 => ({

packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx

@@ -22,7 +22,7 @@ import {
   useLocalizations,
 } from '../../customizables';
 import { useClipboard } from '../../hooks';
-import { Check, Copy } from '../../icons';
+import { Checkmark, Copy } from '../../icons';
 import { useRouter } from '../../router';
 
 export const PaymentAttemptPage = () => {
@@ -283,7 +283,7 @@ function CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: st
     >
       <Icon
         size='sm'
-        icon={hasCopied ? Check : Copy}
+        icon={hasCopied ? Checkmark : Copy}
         aria-hidden
       />
     </Button>

packages/ui/src/components/PaymentMethods/PaymentMethodRow.tsx

@@ -1,7 +1,7 @@
 import type { BillingPaymentMethodResource, RemoveFunctions } from '@clerk/shared/types';
 
 import { Badge, descriptors, Flex, Icon, localizationKeys, Text } from '../../customizables';
-import { CreditCard, GenericPayment } from '../../icons';
+import { Archive, CreditCard } from '../../icons';
 
 export const PaymentMethodRow = ({
   paymentMethod,
@@ -16,7 +16,7 @@ export const PaymentMethodRow = ({
       elementDescriptor={descriptors.paymentMethodRow}
     >
       <Icon
-        icon={paymentMethod.paymentType === 'card' ? CreditCard : GenericPayment}
+        icon={paymentMethod.paymentType === 'card' ? CreditCard : Archive}
         sx={t => ({ alignSelf: 'center', color: t.colors.$colorMutedForeground })}
         elementDescriptor={descriptors.paymentMethodRowIcon}
       />

packages/ui/src/components/PricingTable/PricingTableDefault.tsx

@@ -28,7 +28,7 @@ import {
   Text,
   useLocalizations,
 } from '../../customizables';
-import { Check, Plus, User, Users } from '../../icons';
+import { Checkmark, Plus, UserCircle, Users } from '../../icons';
 import { common, InternalThemeProvider } from '../../styledSystem';
 import { SubscriptionBadge } from '../Subscriptions/badge';
 import { getPricingFooterState } from './utils/pricing-footer-state';
@@ -553,7 +553,7 @@ const CardFeaturesList = React.forwardRef<HTMLDivElement, CardFeaturesListProps>
             })}
           >
             <Icon
-              icon={Check}
+              icon={Checkmark}
               colorScheme='neutral'
               size='sm'
               aria-hidden
@@ -626,7 +626,7 @@ const CardFeaturesListSeatCost = ({ plan }: { plan: BillingPlanResource }) => {
       const tier = seatUnitPrice.tiers[0];
       const rows: Array<{
         elementId: string;
-        icon: typeof User | typeof Users;
+        icon: typeof UserCircle | typeof Users;
         text: ReturnType<typeof localizationKeys>;
         additionalText?: ReturnType<typeof localizationKeys>;
         additionalTooltipText?: string;
@@ -635,7 +635,7 @@ const CardFeaturesListSeatCost = ({ plan }: { plan: BillingPlanResource }) => {
       if (tier.feePerBlock.amount !== 0 && plan.hasBaseFee) {
         rows.push({
           elementId: 'seats',
-          icon: User,
+          icon: UserCircle,
           text: localizationKeys('billing.pricingTable.seatCost.perSeat', {
             feePerBlockAmount: formatTierFee(tier),
             periodAbbreviation,
@@ -683,7 +683,7 @@ const CardFeaturesListSeatCost = ({ plan }: { plan: BillingPlanResource }) => {
         return [
           {
             elementId: 'seats',
-            icon: User,
+            icon: UserCircle,
             text: localizationKeys('billing.pricingTable.seatCost.includedSeats', {
               includedSeats: includedTier.endsAfterBlock,
             }),

packages/ui/src/components/PricingTable/PricingTableMatrix.tsx

@@ -21,7 +21,7 @@ import {
   useLocalizations,
 } from '../../customizables';
 import { usePrefersReducedMotion } from '../../hooks';
-import { Check, InformationCircle } from '../../icons';
+import { Checkmark, InformationCircle } from '../../icons';
 import { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';
 
 interface PricingTableMatrixProps {
@@ -396,7 +396,7 @@ export function PricingTableMatrix({
                       >
                         {hasFeature && (
                           <Icon
-                            icon={Check}
+                            icon={Checkmark}
                             colorScheme='neutral'
                             size='sm'
                             aria-label={t(localizationKeys('billing.pricingTable.included'))}

packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx

@@ -15,7 +15,7 @@ import { FormButtonContainer } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
 import { Header } from '@/ui/elements/Header';
 import { IconButton } from '@/ui/elements/IconButton';
-import { Upload } from '@/ui/icons';
+import { ArrowUpTray } from '@/ui/icons';
 import { createSlug } from '@/ui/utils/createSlug';
 import { handleError } from '@/ui/utils/errorHandler';
 import { useFormControl } from '@/ui/utils/useFormControl';
@@ -136,7 +136,7 @@ export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) =
                 icon={
                   <Icon
                     size='md'
-                    icon={Upload}
+                    icon={ArrowUpTray}
                     sx={t => ({
                       color: t.colors.$colorMutedForeground,
                       transitionDuration: t.transitionDuration.$controls,

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/SessionTasks/tasks/TaskSetupMfa/TOTPCodeFlowScreen.tsx

@@ -12,7 +12,7 @@ import { Form } from '@/elements/Form';
 import { FormButtonContainer } from '@/elements/FormButtons';
 import { FormContainer } from '@/elements/FormContainer';
 import { FullHeightLoader } from '@/elements/FullHeightLoader';
-import { Check, ClipboardOutline } from '@/icons';
+import { Checkmark, Clipboard } from '@/icons';
 import { Button, Col, descriptors, localizationKeys, Text } from '@/ui/customizables';
 import { Card } from '@/ui/elements/Card';
 import { SuccessPage } from '@/ui/elements/SuccessPage';
@@ -95,8 +95,8 @@ export const AddAuthenticatorApp = withCardStateProvider((props: AddAuthenticato
 
                 <ClipboardInput
                   value={totp.secret}
-                  copyIcon={ClipboardOutline}
-                  copiedIcon={Check}
+                  copyIcon={Clipboard}
+                  copiedIcon={Checkmark}
                 />
               </>
             )}