refactor(ui): Implement new icon set

[alexcarpenter]

Description

Migrate to new icon set https://www.figma.com/design/bTar3y0gIglvIxhmZsfHsj/Clerk-Mosaic?node-id=71-567&p=f&m=dev

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Apr 15, 2026 5:15pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 04efa4a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Minor
@clerk/chrome-extension	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 80a0af2a-fc7c-492d-93ec-a523e35605a7

📥 Commits

Reviewing files that changed from the base of the PR and between 6399251 and 04efa4a.

⛔ Files ignored due to path filters (85)

• packages/ui/src/icons/add.svg is excluded by !**/*.svg
• packages/ui/src/icons/archive.svg is excluded by !**/*.svg
• packages/ui/src/icons/arrow-down-tray.svg is excluded by !**/*.svg
• packages/ui/src/icons/arrow-down.svg is excluded by !**/*.svg
• packages/ui/src/icons/arrow-left-bottom.svg is excluded by !**/*.svg
• packages/ui/src/icons/arrow-left-right.svg is excluded by !**/*.svg
• packages/ui/src/icons/arrow-left-top.svg is excluded by !**/*.svg
• packages/ui/src/icons/arrow-left.svg is excluded by !**/*.svg
• packages/ui/src/icons/arrow-right-bottom.svg is excluded by !**/*.svg
• packages/ui/src/icons/arrow-right-button.svg is excluded by !**/*.svg
• packages/ui/src/icons/arrow-right-top.svg is excluded by !**/*.svg
• packages/ui/src/icons/arrow-right.svg is excluded by !**/*.svg
• packages/ui/src/icons/arrow-up-down.svg is excluded by !**/*.svg
• packages/ui/src/icons/arrow-up-tray.svg is excluded by !**/*.svg
• packages/ui/src/icons/arrow-up.svg is excluded by !**/*.svg
• packages/ui/src/icons/arrows-up-down.svg is excluded by !**/*.svg
• packages/ui/src/icons/auth-app.svg is excluded by !**/*.svg
• packages/ui/src/icons/block.svg is excluded by !**/*.svg
• packages/ui/src/icons/building.svg is excluded by !**/*.svg
• packages/ui/src/icons/caret-left.svg is excluded by !**/*.svg
• packages/ui/src/icons/caret-right.svg is excluded by !**/*.svg
• packages/ui/src/icons/chat-alt.svg is excluded by !**/*.svg
• packages/ui/src/icons/check-circle.svg is excluded by !**/*.svg
• packages/ui/src/icons/check.svg is excluded by !**/*.svg
• packages/ui/src/icons/checkmark-circle.svg is excluded by !**/*.svg
• packages/ui/src/icons/checkmark.svg is excluded by !**/*.svg
• packages/ui/src/icons/chevron-down.svg is excluded by !**/*.svg
• packages/ui/src/icons/chevron-left.svg is excluded by !**/*.svg
• packages/ui/src/icons/chevron-right.svg is excluded by !**/*.svg
• packages/ui/src/icons/chevron-up-down.svg is excluded by !**/*.svg
• packages/ui/src/icons/chevron-up.svg is excluded by !**/*.svg
• packages/ui/src/icons/clipboard-outline.svg is excluded by !**/*.svg
• packages/ui/src/icons/clipboard.svg is excluded by !**/*.svg
• packages/ui/src/icons/close.svg is excluded by !**/*.svg
• packages/ui/src/icons/code.svg is excluded by !**/*.svg
• packages/ui/src/icons/cog-filled.svg is excluded by !**/*.svg
• packages/ui/src/icons/cog.svg is excluded by !**/*.svg
• packages/ui/src/icons/copy.svg is excluded by !**/*.svg
• packages/ui/src/icons/credit-card.svg is excluded by !**/*.svg
• packages/ui/src/icons/download.svg is excluded by !**/*.svg
• packages/ui/src/icons/email.svg is excluded by !**/*.svg
• packages/ui/src/icons/envelope.svg is excluded by !**/*.svg
• packages/ui/src/icons/exclamation-circle.svg is excluded by !**/*.svg
• packages/ui/src/icons/exclamation-triangle.svg is excluded by !**/*.svg
• packages/ui/src/icons/eye-slash.svg is excluded by !**/*.svg
• packages/ui/src/icons/eye.svg is excluded by !**/*.svg
• packages/ui/src/icons/files.svg is excluded by !**/*.svg
• packages/ui/src/icons/fingerprint.svg is excluded by !**/*.svg
• packages/ui/src/icons/generic-pay.svg is excluded by !**/*.svg
• packages/ui/src/icons/information-circle.svg is excluded by !**/*.svg
• packages/ui/src/icons/link.svg is excluded by !**/*.svg
• packages/ui/src/icons/lock-arrow.svg is excluded by !**/*.svg
• packages/ui/src/icons/lock-closed.svg is excluded by !**/*.svg
• packages/ui/src/icons/lock-dotted-circle.svg is excluded by !**/*.svg
• packages/ui/src/icons/lock.svg is excluded by !**/*.svg
• packages/ui/src/icons/logo-mark.svg is excluded by !**/*.svg
• packages/ui/src/icons/magnifying-glass.svg is excluded by !**/*.svg
• packages/ui/src/icons/menu.svg is excluded by !**/*.svg
• packages/ui/src/icons/mobile-small.svg is excluded by !**/*.svg
• packages/ui/src/icons/mobile.svg is excluded by !**/*.svg
• packages/ui/src/icons/organization.svg is excluded by !**/*.svg
• packages/ui/src/icons/pen.svg is excluded by !**/*.svg
• packages/ui/src/icons/pencil-edit.svg is excluded by !**/*.svg
• packages/ui/src/icons/plans.svg is excluded by !**/*.svg
• packages/ui/src/icons/plus.svg is excluded by !**/*.svg
• packages/ui/src/icons/print.svg is excluded by !**/*.svg
• packages/ui/src/icons/request-auth.svg is excluded by !**/*.svg
• packages/ui/src/icons/rotate-left-right.svg is excluded by !**/*.svg
• packages/ui/src/icons/shield-check.svg is excluded by !**/*.svg
• packages/ui/src/icons/sign-out.svg is excluded by !**/*.svg
• packages/ui/src/icons/signout.svg is excluded by !**/*.svg
• packages/ui/src/icons/speech-bubble.svg is excluded by !**/*.svg
• packages/ui/src/icons/spinner-jumbo.svg is excluded by !**/*.svg
• packages/ui/src/icons/spinner.svg is excluded by !**/*.svg
• packages/ui/src/icons/switch-arrow-right.svg is excluded by !**/*.svg
• packages/ui/src/icons/switch-arrows.svg is excluded by !**/*.svg
• packages/ui/src/icons/three-dots-circle.svg is excluded by !**/*.svg
• packages/ui/src/icons/three-dots.svg is excluded by !**/*.svg
• packages/ui/src/icons/threeDots.svg is excluded by !**/*.svg
• packages/ui/src/icons/tick-shield.svg is excluded by !**/*.svg
• packages/ui/src/icons/triangle-right.svg is excluded by !**/*.svg
• packages/ui/src/icons/upload.svg is excluded by !**/*.svg
• packages/ui/src/icons/user-circle.svg is excluded by !**/*.svg
• packages/ui/src/icons/user.svg is excluded by !**/*.svg
• packages/ui/src/icons/users.svg is excluded by !**/*.svg

📒 Files selected for processing (10)

• .changeset/cozy-suns-heal.md
• packages/ui/src/common/CreateOrganizationAction.tsx
• packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx
• packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx
• packages/ui/src/components/SignIn/SignInAccountSwitcher.tsx
• packages/ui/src/elements/Card/CardContent.tsx
• packages/ui/src/elements/OrganizationPreview.tsx
• packages/ui/src/elements/PhoneInput/index.tsx
• packages/ui/src/icons/index.ts
• packages/ui/src/primitives/Button.tsx

💤 Files with no reviewable changes (1)

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

---

📝 Walkthrough

Walkthrough

This pull request implements an icon-set migration across the @clerk/ui package. The changes include updating icon references from deprecated assets to new standardized icons (e.g., Add → Plus, Check → Checkmark), remapping 26 icon SVG file paths in the icon barrel export, and adjusting component styling for icon sizing and spacing. The CreateOrganizationAction component's type definition was also modified to accept an optional icon prop rather than explicitly omitting it. A changeset entry documents this as a minor version bump.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: migrating the UI to a new icon set, which is reflected across multiple files.
Description check	✅ Passed	The description is directly related to the changeset, providing a Figma link to the new icon set and relevant context for the migration.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}