Skip to content

feat(ui): update icons #2519

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
renefloor wants to merge 3 commits into
base: feat/design-refresh
Choose a base branch
from
+501 −414
Open

feat(ui): update icons #2519

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a49a7d6
Deprecate old icons and add list of replacements
renefloor Feb 25, 2026
b30a3fb
migrated icons in the sdk
renefloor Feb 25, 2026
dfd2104
chore: Update Goldens
renefloor Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/stream_chat_flutter/example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,8 +316,8 @@ class _ChannelPageState extends State<ChannelPage> {
color: _streamTheme.colorTheme.borders,
),
child: Center(
child: StreamSvgIcon(
icon: StreamSvgIcons.reply,
child: Icon(
context.streamIcons.arrowShareLeft,
size: lerpDouble(0, 18, progress),
color: _streamTheme.colorTheme.accentPrimary,
),
Expand Down
16 changes: 8 additions & 8 deletions packages/stream_chat_flutter/lib/src/attachment/attachment_upload_state_builder.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,8 @@ class _PreparingState extends StatelessWidget {
Align(
alignment: Alignment.topRight,
child: _IconButton(
icon: StreamSvgIcon(
icon: StreamSvgIcons.close,
icon: Icon(
context.streamIcons.crossMedium,
color: StreamChatTheme.of(context).colorTheme.barsBg,
),
onPressed: () => channel.cancelAttachmentUpload(attachmentId),
Expand Down Expand Up @@ -162,8 +162,8 @@ class _InProgressState extends StatelessWidget {
Align(
alignment: Alignment.topRight,
child: _IconButton(
icon: StreamSvgIcon(
icon: StreamSvgIcons.close,
icon: Icon(
context.streamIcons.crossMedium,
color: StreamChatTheme.of(context).colorTheme.barsBg,
),
onPressed: () => channel.cancelAttachmentUpload(attachmentId),
Expand Down Expand Up @@ -201,9 +201,9 @@ class _FailedState extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_IconButton(
icon: StreamSvgIcon(
icon: Icon(
context.streamIcons.arrowRotateClockwise,
size: 14,
icon: StreamSvgIcons.retry,
color: theme.colorTheme.barsBg,
),
onPressed: () {
Expand Down Expand Up @@ -245,8 +245,8 @@ class _SuccessState extends StatelessWidget {
child: CircleAvatar(
backgroundColor: StreamChatTheme.of(context).colorTheme.overlayDark,
maxRadius: 12,
child: StreamSvgIcon(
icon: StreamSvgIcons.check,
child: Icon(
context.streamIcons.checkmark2,
color: StreamChatTheme.of(context).colorTheme.barsBg,
),
),
Expand Down
22 changes: 11 additions & 11 deletions packages/stream_chat_flutter/lib/src/attachment/file_attachment.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/src/attachment/handler/stream_attachment_handler.dart';
import 'package:stream_chat_flutter/src/attachment/thumbnail/file_attachment_thumbnail.dart';
import 'package:stream_chat_flutter/src/icons/stream_svg_icon.dart';
import 'package:stream_chat_flutter/src/indicators/upload_progress_indicator.dart';
import 'package:stream_chat_flutter/src/theme/stream_chat_theme.dart';
import 'package:stream_chat_flutter/src/utils/utils.dart';
import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
import 'package:stream_core_flutter/stream_core_flutter.dart';

/// {@template streamFileAttachment}
/// Displays file attachments that have been sent in a chat.
Expand Down Expand Up @@ -173,8 +173,8 @@ class _Trailing extends StatelessWidget {

if (message.state.isCompleted) {
return IconButton(
icon: StreamSvgIcon(
icon: StreamSvgIcons.cloudDownload,
icon: Icon(
context.streamIcons.arrowDown,
color: theme.colorTheme.textHighEmphasis,
),
visualDensity: VisualDensity.compact,
Expand All @@ -196,8 +196,8 @@ class _Trailing extends StatelessWidget {
preparing: () => Padding(
padding: const EdgeInsets.all(8),
child: _TrailingButton(
icon: StreamSvgIcon(
icon: StreamSvgIcons.close,
icon: Icon(
context.streamIcons.crossMedium,
color: theme.colorTheme.barsBg,
),
fillColor: theme.colorTheme.overlayDark,
Expand All @@ -207,8 +207,8 @@ class _Trailing extends StatelessWidget {
inProgress: (_, __) => Padding(
padding: const EdgeInsets.all(8),
child: _TrailingButton(
icon: StreamSvgIcon(
icon: StreamSvgIcons.close,
icon: Icon(
context.streamIcons.crossMedium,
color: theme.colorTheme.barsBg,
),
fillColor: theme.colorTheme.overlayDark,
Expand All @@ -220,17 +220,17 @@ class _Trailing extends StatelessWidget {
child: CircleAvatar(
backgroundColor: theme.colorTheme.accentPrimary,
maxRadius: 12,
child: StreamSvgIcon(
icon: StreamSvgIcons.check,
child: Icon(
context.streamIcons.checkmark2,
color: theme.colorTheme.barsBg,
),
),
),
failed: (_) => Padding(
padding: const EdgeInsets.all(8),
child: _TrailingButton(
icon: StreamSvgIcon(
icon: StreamSvgIcons.retry,
icon: Icon(
context.streamIcons.arrowRotateClockwise,
color: theme.colorTheme.barsBg,
),
fillColor: theme.colorTheme.overlayDark,
Expand Down
24 changes: 12 additions & 12 deletions packages/stream_chat_flutter/lib/src/attachment_actions_modal/attachment_actions_modal.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,9 @@ class AttachmentActionsModal extends StatelessWidget {
_buildButton(
context,
context.translations.replyLabel,
StreamSvgIcon(
Icon(
context.streamIcons.arrowShareLeft,
size: 24,
icon: StreamSvgIcons.reply,
color: theme.colorTheme.textLowEmphasis,
),
onReply,
Expand All @@ -122,9 +122,9 @@ class AttachmentActionsModal extends StatelessWidget {
_buildButton(
context,
context.translations.showInChatLabel,
StreamSvgIcon(
Icon(
context.streamIcons.eyeOpen,
size: 24,
icon: StreamSvgIcons.eye,
color: theme.colorTheme.textHighEmphasis,
),
onShowMessage,
Expand All @@ -135,9 +135,9 @@ class AttachmentActionsModal extends StatelessWidget {
attachment.type == AttachmentType.video
? context.translations.saveVideoLabel
: context.translations.saveImageLabel,
StreamSvgIcon(
Icon(
context.streamIcons.bookmark,
size: 24,
icon: StreamSvgIcons.save,
color: theme.colorTheme.textLowEmphasis,
),
() {
Expand Down Expand Up @@ -195,9 +195,9 @@ class AttachmentActionsModal extends StatelessWidget {
_buildButton(
context,
context.translations.deleteLabel.sentenceCase,
StreamSvgIcon(
Icon(
context.streamIcons.trashBin,
size: 24,
icon: StreamSvgIcons.delete,
color: theme.colorTheme.accentError,
),
() {
Expand Down Expand Up @@ -328,8 +328,8 @@ class AttachmentActionsModal extends StatelessWidget {
? SizedBox(
height: 100,
width: 100,
child: StreamSvgIcon(
icon: StreamSvgIcons.error,
child: Icon(
context.streamIcons.exclamationCircle1,
color: theme.colorTheme.disabled,
),
)
Expand All @@ -338,8 +338,8 @@ class AttachmentActionsModal extends StatelessWidget {
key: const Key('completedIcon'),
height: 160,
width: 160,
child: StreamSvgIcon(
icon: StreamSvgIcons.check,
child: Icon(
context.streamIcons.checkmark2,
color: theme.colorTheme.disabled,
),
)
Expand Down
28 changes: 14 additions & 14 deletions packages/stream_chat_flutter/lib/src/autocomplete/stream_command_autocomplete_options.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ class StreamCommandAutocompleteOptions extends StatelessWidget {
return ListTile(
dense: true,
horizontalTitleGap: 0,
leading: StreamSvgIcon(
icon: StreamSvgIcons.lightning,
leading: Icon(
context.streamIcons.thunder,
color: colorTheme.accentPrimary,
size: 28,
),
Expand Down Expand Up @@ -107,20 +107,20 @@ class _CommandIcon extends StatelessWidget {
return CircleAvatar(
backgroundColor: _streamChatTheme.colorTheme.accentPrimary,
radius: 12,
child: const StreamSvgIcon(
child: Icon(
context.streamIcons.peopleRemove,
size: 16,
color: Colors.white,
icon: StreamSvgIcons.userRemove,
),
);
case 'flag':
return CircleAvatar(
backgroundColor: _streamChatTheme.colorTheme.accentPrimary,
radius: 12,
child: const StreamSvgIcon(
child: Icon(
context.streamIcons.flag2,
size: 14,
color: Colors.white,
icon: StreamSvgIcons.flag,
),
);
case 'imgur':
Expand All @@ -138,40 +138,40 @@ class _CommandIcon extends StatelessWidget {
return CircleAvatar(
backgroundColor: _streamChatTheme.colorTheme.accentPrimary,
radius: 12,
child: const StreamSvgIcon(
child: Icon(
context.streamIcons.mute,
size: 16,
color: Colors.white,
icon: StreamSvgIcons.mute,
),
);
case 'unban':
return CircleAvatar(
backgroundColor: _streamChatTheme.colorTheme.accentPrimary,
radius: 12,
child: const StreamSvgIcon(
child: Icon(
context.streamIcons.peopleAdd,
size: 16,
color: Colors.white,
icon: StreamSvgIcons.userAdd,
),
);
case 'unmute':
return CircleAvatar(
backgroundColor: _streamChatTheme.colorTheme.accentPrimary,
radius: 12,
child: const StreamSvgIcon(
child: Icon(
context.streamIcons.volumeFull,
size: 16,
color: Colors.white,
icon: StreamSvgIcons.volumeUp,
),
);
default:
return CircleAvatar(
backgroundColor: _streamChatTheme.colorTheme.accentPrimary,
radius: 12,
child: const StreamSvgIcon(
child: Icon(
context.streamIcons.thunder,
size: 16,
color: Colors.white,
icon: StreamSvgIcons.lightning,
),
);
}
Expand Down
8 changes: 4 additions & 4 deletions packages/stream_chat_flutter/lib/src/bottom_sheets/edit_message_sheet.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,8 @@ class _EditMessageSheetState extends State<EditMessageSheet> {
children: [
Padding(
padding: const EdgeInsets.all(8),
child: StreamSvgIcon(
icon: StreamSvgIcons.edit,
child: Icon(
context.streamIcons.editBig,
color: streamChatThemeData.colorTheme.disabled,
),
),
Expand All @@ -100,8 +100,8 @@ class _EditMessageSheetState extends State<EditMessageSheet> {
),
IconButton(
visualDensity: VisualDensity.compact,
icon: StreamSvgIcon(
icon: StreamSvgIcons.closeSmall,
icon: Icon(
context.streamIcons.crossSmall,
color: streamChatThemeData.colorTheme.textLowEmphasis,
),
onPressed: Navigator.of(context).pop,
Expand Down
4 changes: 2 additions & 2 deletions packages/stream_chat_flutter/lib/src/bottom_sheets/error_alert_sheet.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ class ErrorAlertSheet extends StatelessWidget {
const SizedBox(
height: 26,
),
StreamSvgIcon(
icon: StreamSvgIcons.error,
Icon(
context.streamIcons.exclamationCircle1,
color: _streamChatTheme.colorTheme.accentError,
size: 24,
),
Expand Down
16 changes: 8 additions & 8 deletions packages/stream_chat_flutter/lib/src/bottom_sheets/stream_channel_info_bottom_sheet.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,8 @@ class StreamChannelInfoBottomSheet extends StatelessWidget {
StreamOptionListTile(
leading: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: StreamSvgIcon(
icon: StreamSvgIcons.user,
child: Icon(
context.streamIcons.people,
color: colorTheme.textLowEmphasis,
),
),
Expand All @@ -133,8 +133,8 @@ class StreamChannelInfoBottomSheet extends StatelessWidget {
title: context.translations.leaveGroupLabel,
leading: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: StreamSvgIcon(
icon: StreamSvgIcons.userRemove,
child: Icon(
context.streamIcons.peopleRemove,
color: colorTheme.textLowEmphasis,
),
),
Expand All @@ -144,8 +144,8 @@ class StreamChannelInfoBottomSheet extends StatelessWidget {
StreamOptionListTile(
leading: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: StreamSvgIcon(
icon: StreamSvgIcons.delete,
child: Icon(
context.streamIcons.trashBin,
color: colorTheme.accentError,
),
),
Expand All @@ -156,8 +156,8 @@ class StreamChannelInfoBottomSheet extends StatelessWidget {
StreamOptionListTile(
leading: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: StreamSvgIcon(
icon: StreamSvgIcons.closeSmall,
child: Icon(
context.streamIcons.crossSmall,
color: colorTheme.textLowEmphasis,
),
),
Expand Down
4 changes: 2 additions & 2 deletions packages/stream_chat_flutter/lib/src/channel/channel_list_header.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,10 +170,10 @@ class StreamChannelListHeader extends StatelessWidget implements PreferredSizeWi
ConnectionStatus.disconnected => Colors.grey,
};

return StreamSvgIcon(
return Icon(
context.streamIcons.pencil,
size: 24,
color: color,
icon: StreamSvgIcons.penWrite,
);
},
),
Expand Down
4 changes: 2 additions & 2 deletions packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media_desktop.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,9 +148,9 @@ class _FullScreenMediaDesktopState extends State<FullScreenMediaDesktop> {
videoPackages.values.first.player.stop();
Navigator.of(context).pop();
},
child: const StreamSvgIcon(
child: Icon(
context.streamIcons.crossMedium,
size: 30,
icon: StreamSvgIcons.close,
),
),
),
Expand Down
Loading
Loading