feat(Icons): migrate SDK icons to Phosphor icon set#3075
Merged
Conversation
Replace 88 icon SVGs with new Phosphor-based assets from the design system export. Rename 55 icon constants to match the new naming convention (e.g. IconTrashBin → IconDelete, IconPaperPlane → IconSend). Old names preserved as `// was:` comments for traceability. Update all imports, SCSS class references, test snapshots, and the vite example app to match the new names. Resolves REACT-936
|
Size Change: -89.7 kB (-12.62%) 👏 Total Size: 621 kB 📦 View Changed
ℹ️ View Unchanged
|
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## master #3075 +/- ##
==========================================
- Coverage 79.24% 79.12% -0.13%
==========================================
Files 426 426
Lines 12234 12162 -72
Branches 3918 3917 -1
==========================================
- Hits 9695 9623 -72
Misses 2539 2539 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Replace Line/Flat-20 fallbacks with proper 16×16 flat SVGs now that they are available in the design export. Removes viewBox overrides.
Remove icon constants that are not used anywhere in the SDK or examples. Reduces icons.tsx from 130 to 59 exports.
Replace Flat/16 (filled path) icons with Line (stroke-based, 20×20)
variants. This gives icons a consistent 1.5px stroke weight that can
be adjusted via the strokeWidth attribute rather than being baked into
path geometry.
- Update BaseIcon default viewBox from 0 0 16 16 → 0 0 20 20
- Add fill='none' on stroke-based paths to prevent CSS fill override
- Add { viewBox: '0 0 16 16' } override on 8 legacy icons that still
use 16×16 coordinate paths
github-actions bot
pushed a commit
that referenced
this pull request
Mar 30, 2026
## [14.0.0-beta.4](v14.0.0-beta.3...v14.0.0-beta.4) (2026-03-30) ### ⚠ BREAKING CHANGES * Importing styles from `stream-chat-react/dist/css/v2/*` would no longer work, import from `stream-chat-react/dist/css/*` instead. ### Bug Fixes * clean up CSS build output ([#3072](#3072)) ([f06846d](f06846d)) ### Features * **Icons:** migrate SDK icons to Phosphor icon set ([#3075](#3075)) ([30c1bee](30c1bee))
|
🎉 This PR is included in version 14.0.0-beta.4 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 Goal
Migrate all SDK icons to the new Phosphor-based icon set from the design system, replacing legacy SVGs with consistent, standardized assets. Use Line (stroke-based) variants for controllable stroke weight. Remove unused icon exports to reduce bundle size.
Resolves REACT-936
🛠 Implementation details
Icon SVG replacements (77 Line + 11 other):
strokeWidth="1.5"that can be adjusted via attribute rather than being baked into path geometryBaseIcondefault viewBox updated from0 0 16 16→0 0 20 20to match Line icons{ viewBox: '0 0 16 16' }overridefill='none'to prevent CSSfill: currentColorfrom filling outlinesplay-fill,message-bubble-fill, etc.) stripfill="black"to inheritcurrentColorIconGiphyupdated separately in its own file (brand colors preserved, hardcodedviewBox='0 0 16 16')Icon constant renames (55 total):
Key renames:
IconTrashBin→IconDelete,IconPaperPlane→IconSend,IconCrossMedium→IconXmark,IconMicrophone→IconVoice,IconBookmark→IconSave,IconBubbles→IconMessageBubbles,IconBubble2ChatMessage→IconMessageBubble,IconBubbleText6ChatMessage→IconThread,IconLoadingCircle→IconLoading,IconPlaySolid→IconPlayFill,IconPause→IconPauseFillOld names preserved as
// was:comments for traceability. Icons with name collisions (e.g. multiple checkmark variants mapping tocheckmark) keep their original const name but receive the updated SVG.CSS class name updates:
Renamed constants change the auto-derived CSS classes (via
toIconClass). Updated all SCSS selectors accordingly (e.g..str-chat__icon--microphone→.str-chat__icon--voice).Unchanged icons (7):
Icons used in code but not in the mapping are annotated with
// no new icon mapping:IconArrowDown,IconArrowRight,IconExclamationTriangle,IconEyeOpen,IconBubbleText6SolidChatMessage. PlusIconLayoutAlignLeftandIconThunderwhich had Line matches and were switched.Removed unused icons (71):
The following icon exports were removed as they had zero references anywhere in the SDK or examples:
IconApiAggregate,IconApples,IconArrowsRepeatLeftRight,IconAtSolid,IconAccount(wasIconPeopleCircle),IconBrowserAISparkle,IconBubble3Solid,IconBubbleAnnotation2ChatMessage,IconBubbleWideSparkleChatMessage,IconCalendar1,IconCallCancel,IconCar1,IconCat,IconCheckmark2Small,IconChevronGrabberVerticalSelector,IconChevronTop,IconCircleCheck,IconCircleQuestionmark,IconCircleQuestionmarkFilled,IconClockSolid,IconCode,IconCodeBrackets,IconCodeEditorInsert,IconCompass,IconCreditCard2Billing,IconDotsGrid1x3Vertical,IconEditBigSolid,IconEmojiAdd(wasIconEmojiAddReaction),IconEmojiSad,IconExclamationTriangleFill(wasIconExclamationTriangle1),IconExport(wasIconShareRedirectLink),IconFilledCircleInfoTooltip,IconFilter1,IconGauge,IconGoogle,IconHashtagChannel,IconHeart2,IconHistory,IconInvite,IconLayoutGrid1,IconLimits,IconLineChart3,IconLock,IconMention(wasIconAt),IconNewspaper2,IconOrganization,IconPaperPlaneTopRight,IconParagraphsText,IconPencil,IconPeople2,IconPeopleCopy,IconPeopleEditUserRights,IconPersona,IconPresentation(wasIconLayersBehind),IconSearchText,IconSettingsSliderVer,IconShapesPlusCloseSquareCircle,IconShapesTriangleSquareCircle,IconShield,IconSpreadsheet(wasIconTable),IconSquareCircleTopRightFeeds,IconStopFill(wasIconStop),IconTeam,IconTennis,IconTextToImageURLEnrichment,IconTrending4,IconUnlock(wasIconUnlocked),IconUsers,IconVoiceAndVideo,IconVoiceHigh,IconWebhookThis reduces
icons.tsxfrom 130 to 59 exports.🎨 UI Changes
All icon visuals change from the legacy set to Phosphor Line icons with 1.5px stroke weight.
BaseIcondefault viewBox is now0 0 20 20. No layout or sizing changes — icons still use1emsizing via CSS andcurrentColorfor theming.