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';
@@ -142,7 +142,7 @@ const FooterPrevious = ({ onClick, isDisabled, isLoading, label = 'Previous' }:
  onClick={handleClick}
  >
  <Icon
- icon={CaretLeft}
+ icon={ChevronLeft}
  size='sm'
  sx={t => ({ marginInlineEnd: t.space.$1 })}
  />
@@ -172,7 +172,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

@@ -29,7 +29,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';
@@ -238,8 +238,8 @@ export const CreateAppSubStep = (): JSX.Element => {
  <ClipboardInput
  value={acsUrl}
  readOnly
- copyIcon={ClipboardOutline}
- copiedIcon={Check}
+ copyIcon={Clipboard}
+ copiedIcon={Checkmark}
  />
  </Form.CommonInputWrapper>
  </Form.ControlRow>
@@ -249,8 +249,8 @@ export const CreateAppSubStep = (): JSX.Element => {
  <ClipboardInput
  value={spEntityId}
  readOnly
- copyIcon={ClipboardOutline}
- copiedIcon={Check}
+ copyIcon={Clipboard}
+ copiedIcon={Checkmark}
  />
  </Form.CommonInputWrapper>
  </Form.ControlRow>
@@ -905,7 +905,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 { Drawer } from '@/elements/Drawer';
 import { IconButton } from '@/elements/IconButton';
 import { Pagination } from '@/elements/Pagination';
 import { useClipboard, useSpinDelay } from '@/hooks';
-import { Check, Copy, LinkIcon, RotateLeftRight } from '@/icons';
+import { Checkmark, Copy, Link as LinkIcon, RotateLeftRight } from '@/icons';
 import { common, mqu } from '@/styledSystem';
 import { handleError } from '@/utils/errorHandler';
 
@@ -627,7 +627,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()}
  />
@@ -756,7 +756,7 @@ const OpenTestUrlButton = ({ onTestRunCreated }: OpenTestUrlButtonProps): JSX.El
  {isCreatingTestRun ? (
  <Spinner
  elementDescriptor={descriptors.spinner}
- size='xs'
+ size='sm'
  />
  ) : (
  <Icon

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

@@ -1,5 +1,5 @@
 import { Box, descriptors, Flex, Heading, Icon, Link, localizationKeys, Span, Text } from '@/customizables';
-import { ArrowRightIcon } from '@/icons';
+import { ArrowRight } from '@/icons';
 
 import type { LocalizationKey } from '../../../localization';
 
@@ -134,7 +134,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 => ({

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

@@ -23,7 +23,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 = () => {
@@ -286,7 +286,7 @@ function CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: st
  >
  <Icon
  size='sm'
- icon={hasCopied ? Check : Copy}
+ icon={hasCopied ? Checkmark : Copy}
  aria-hidden
  />
  </Button>