Skip to content

feat(ui): update icon set #91

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 4 commits into
base: main-design-system
Choose a base branch
from
Open

feat(ui): update icon set #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4484a17
update icon set
renefloor Mar 31, 2026
20c82e1
update icon usage
renefloor Mar 31, 2026
ff3605f
fix download and clock
renefloor Mar 31, 2026
cec6468
update wrong and missing icons
renefloor Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
12 changes: 6 additions & 6 deletions apps/design_system_gallery/lib/components/badge/stream_image_source_badge.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,9 @@ Widget buildStreamImageSourceBadgePlayground(BuildContext context) {
final leading = switch (leadingIcon) {
_LeadingOption.giphy => SvgIcon(icons.giphy),
_LeadingOption.imgur => SvgIcon(icons.imgur),
_LeadingOption.fileBend => Icon(icons.fileBend),
_LeadingOption.playSolid => Icon(icons.playSolid),
_LeadingOption.video => Icon(icons.video),
_LeadingOption.file20 => Icon(icons.file20),
_LeadingOption.playFill20 => Icon(icons.playFill20),
_LeadingOption.video20 => Icon(icons.video20),
};

final badge = StreamImageSourceBadge(
Expand Down Expand Up @@ -126,9 +126,9 @@ enum _BadgeVariant {
enum _LeadingOption {
giphy('Giphy (SVG)'),
imgur('Imgur (SVG)'),
fileBend('File Icon'),
playSolid('Play Icon'),
video('Video Icon')
file20('File Icon'),
playFill20('Play Icon'),
video20('Video Icon')
;

const _LeadingOption(this.label);
Expand Down
136 changes: 68 additions & 68 deletions apps/design_system_gallery/lib/components/context_menu/stream_context_menu.dart
View file
Open in desktop

Large diffs are not rendered by default.

32 changes: 16 additions & 16 deletions apps/design_system_gallery/lib/components/message/stream_message_annotation.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,23 +128,23 @@ class _AnnotationTypesSection extends StatelessWidget {
),
),
child: StreamMessageAnnotation(
leading: Icon(icons.bookmark),
leading: Icon(icons.save20),
label: const Text('Saved for later'),
),
),
),
_ExampleCard(
label: 'Pinned',
child: StreamMessageAnnotation(
leading: Icon(icons.pin),
leading: Icon(icons.pin20),
label: const Text('Pinned by Alice'),
),
),
_ExampleCard(
label: 'Reminder (.rich)',
subtitle: 'Bold label + regular timestamp via .rich constructor.',
child: StreamMessageAnnotation.rich(
leading: Icon(icons.bellNotification),
leading: Icon(icons.bell20),
label: 'Reminder set · ',
spans: const [TextSpan(text: 'In 2 hours')],
),
Expand All @@ -162,7 +162,7 @@ class _AnnotationTypesSection extends StatelessWidget {
label: 'Also sent in channel (.rich)',
subtitle: 'Bold label + link-colored span override.',
child: StreamMessageAnnotation.rich(
leading: Icon(icons.arrowUp),
leading: Icon(icons.arrowUp20),
label: 'Also sent in channel · ',
spans: [
TextSpan(
Expand All @@ -176,7 +176,7 @@ class _AnnotationTypesSection extends StatelessWidget {
label: 'Replied to a thread (.rich)',
subtitle: 'Bold label + link-colored span override.',
child: StreamMessageAnnotation.rich(
leading: Icon(icons.arrowUp),
leading: Icon(icons.arrowUp20),
label: 'Replied to a thread · ',
spans: [
TextSpan(
Expand Down Expand Up @@ -211,7 +211,7 @@ class _ThemeOverrideSection extends StatelessWidget {
),
),
child: StreamMessageAnnotation(
leading: Icon(icons.bookmark),
leading: Icon(icons.save20),
label: const Text('Saved for later'),
),
),
Expand All @@ -226,7 +226,7 @@ class _ThemeOverrideSection extends StatelessWidget {
),
),
child: StreamMessageAnnotation(
leading: Icon(icons.pin),
leading: Icon(icons.pin20),
label: const Text('Pinned by Alice'),
),
),
Expand All @@ -235,7 +235,7 @@ class _ThemeOverrideSection extends StatelessWidget {
label: 'Custom spacing',
subtitle: 'Wider gap (12px) between icon and label.',
child: StreamMessageAnnotation(
leading: Icon(icons.bookmark),
leading: Icon(icons.save20),
label: const Text('Saved for later'),
style: StreamMessageAnnotationStyle.from(spacing: 12),
),
Expand Down Expand Up @@ -276,7 +276,7 @@ class _RealWorldSection extends StatelessWidget {
),
),
child: StreamMessageAnnotation(
leading: Icon(icons.bookmark),
leading: Icon(icons.save20),
label: const Text('Saved for later'),
),
),
Expand All @@ -293,7 +293,7 @@ class _RealWorldSection extends StatelessWidget {
spacing: 4,
children: [
StreamMessageAnnotation(
leading: Icon(icons.pin),
leading: Icon(icons.pin20),
label: const Text('Pinned by Alice'),
),
StreamMessageBubble(
Expand All @@ -309,7 +309,7 @@ class _RealWorldSection extends StatelessWidget {
spacing: 4,
children: [
StreamMessageAnnotation.rich(
leading: Icon(icons.bellNotification),
leading: Icon(icons.bell20),
label: 'Reminder set · ',
spans: const [TextSpan(text: 'In 30 minutes')],
),
Expand All @@ -326,7 +326,7 @@ class _RealWorldSection extends StatelessWidget {
spacing: 4,
children: [
StreamMessageAnnotation.rich(
leading: Icon(icons.arrowUp),
leading: Icon(icons.arrowUp20),
label: 'Also sent in channel · ',
spans: [
TextSpan(
Expand Down Expand Up @@ -363,10 +363,10 @@ enum _IconOption {
final String label;

IconData resolve(StreamIcons icons) => switch (this) {
bookmark => icons.bookmark,
pin => icons.pin,
bellNotification => icons.bellNotification,
arrowUp => icons.arrowUp,
bookmark => icons.save20,
pin => icons.pin20,
bellNotification => icons.bell20,
arrowUp => icons.arrowUp20,
translate => Icons.translate,
};
}
Expand Down
22 changes: 11 additions & 11 deletions apps/design_system_gallery/lib/components/message/stream_message_content.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ Widget buildStreamMessageContentPlayground(BuildContext context) {
child: StreamMessageContent(
header: showHeader
? StreamMessageAnnotation(
leading: const Icon(StreamIconData.iconBellNotification),
leading: const Icon(StreamIconData.bell20),
label: Text.rich(
TextSpan(
children: [
Expand All @@ -166,7 +166,7 @@ Widget buildStreamMessageContentPlayground(BuildContext context) {
? StreamMessageMetadata(
timestamp: const Text('09:41'),
username: const Text('Alice'),
status: const Icon(StreamIconData.iconDoupleCheckmark1Small),
status: const Icon(StreamIconData.checks12),
edited: const Text('Edited'),
)
: null,
Expand Down Expand Up @@ -259,7 +259,7 @@ class _SlotCombinationsSection extends StatelessWidget {
label: 'Header + child + footer',
child: StreamMessageContent(
header: StreamMessageAnnotation(
leading: const Icon(StreamIconData.iconBellNotification),
leading: const Icon(StreamIconData.bell20),
label: Text.rich(
TextSpan(
children: [
Expand All @@ -275,7 +275,7 @@ class _SlotCombinationsSection extends StatelessWidget {
footer: StreamMessageMetadata(
timestamp: const Text('09:41'),
username: const Text('Alice'),
status: const Icon(StreamIconData.iconDoupleCheckmark1Small),
status: const Icon(StreamIconData.checks12),
),
child: StreamMessageBubble(
child: StreamMessageText('Has anyone tried the new Flutter update?'),
Expand All @@ -287,7 +287,7 @@ class _SlotCombinationsSection extends StatelessWidget {
child: StreamMessageContent(
footer: StreamMessageMetadata(
timestamp: const Text('09:42'),
status: const Icon(StreamIconData.iconDoupleCheckmark1Small),
status: const Icon(StreamIconData.checks12),
edited: const Text('Edited'),
),
child: StreamMessageBubble(
Expand All @@ -299,7 +299,7 @@ class _SlotCombinationsSection extends StatelessWidget {
label: 'Header + child (no footer)',
child: StreamMessageContent(
header: StreamMessageAnnotation(
leading: const Icon(StreamIconData.iconBookmark),
leading: const Icon(StreamIconData.save20),
label: const Text('Saved for later'),
),
child: StreamMessageBubble(
Expand Down Expand Up @@ -453,11 +453,11 @@ class _FullCompositionSection extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
StreamMessageAnnotation(
leading: const Icon(StreamIconData.iconPin),
leading: const Icon(StreamIconData.pin20),
label: const Text('Pinned'),
),
StreamMessageAnnotation(
leading: const Icon(StreamIconData.iconBellNotification),
leading: const Icon(StreamIconData.bell20),
label: Text.rich(
TextSpan(
children: [
Expand All @@ -475,7 +475,7 @@ class _FullCompositionSection extends StatelessWidget {
footer: StreamMessageMetadata(
timestamp: const Text('09:41'),
username: const Text('Alice'),
status: const Icon(StreamIconData.iconDoupleCheckmark1Small),
status: const Icon(StreamIconData.checks12),
edited: const Text('Edited'),
),
child: StreamReactions.segmented(
Expand Down Expand Up @@ -514,7 +514,7 @@ class _FullCompositionSection extends StatelessWidget {
child: StreamMessageContent(
footer: StreamMessageMetadata(
timestamp: const Text('09:42'),
status: const Icon(StreamIconData.iconDoupleCheckmark1Small),
status: const Icon(StreamIconData.checks12),
),
child: StreamReactions.segmented(
alignment: .end,
Expand Down Expand Up @@ -617,7 +617,7 @@ class _EmojiOnlySection extends StatelessWidget {
child: StreamMessageContent(
footer: StreamMessageMetadata(
timestamp: const Text('09:51'),
status: const Icon(StreamIconData.iconDoupleCheckmark1Small),
status: const Icon(StreamIconData.checks12),
),
child: StreamReactions.segmented(
alignment: .end,
Expand Down
28 changes: 14 additions & 14 deletions apps/design_system_gallery/lib/components/message/stream_message_metadata.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ class _SlotCombinationsSection extends StatelessWidget {
label: 'Timestamp + status',
child: StreamMessageMetadata(
timestamp: const Text('09:41'),
status: const Icon(StreamIconData.iconDoupleCheckmark1Small),
status: const Icon(StreamIconData.checks12),
),
),
_ExampleCard(
Expand All @@ -170,7 +170,7 @@ class _SlotCombinationsSection extends StatelessWidget {
label: 'All slots',
child: StreamMessageMetadata(
timestamp: const Text('09:41'),
status: const Icon(StreamIconData.iconDoupleCheckmark1Small),
status: const Icon(StreamIconData.checks12),
username: const Text('Alice'),
edited: const Text('Edited'),
),
Expand All @@ -194,23 +194,23 @@ class _DeliveryStatusSection extends StatelessWidget {
subtitle: 'Clock icon while message is in transit.',
child: StreamMessageMetadata(
timestamp: const Text('09:41'),
status: const Icon(StreamIconData.iconClock),
status: const Icon(StreamIconData.clock12),
),
),
_ExampleCard(
label: 'Sent',
subtitle: 'Single checkmark after server acknowledgement.',
child: StreamMessageMetadata(
timestamp: const Text('09:41'),
status: const Icon(StreamIconData.iconCheckmark1Small),
status: const Icon(StreamIconData.checkmark12),
),
),
_ExampleCard(
label: 'Delivered',
subtitle: 'Double checkmark when received by recipient.',
child: StreamMessageMetadata(
timestamp: const Text('09:41'),
status: const Icon(StreamIconData.iconDoupleCheckmark1Small),
status: const Icon(StreamIconData.checks12),
),
),
_ExampleCard(
Expand All @@ -222,7 +222,7 @@ class _DeliveryStatusSection extends StatelessWidget {
),
child: StreamMessageMetadata(
timestamp: const Text('09:41'),
status: const Icon(StreamIconData.iconDoupleCheckmark1Small),
status: const Icon(StreamIconData.checks12),
),
),
),
Expand Down Expand Up @@ -290,7 +290,7 @@ class _RealWorldSection extends StatelessWidget {
),
StreamMessageMetadata(
timestamp: const Text('09:42'),
status: const Icon(StreamIconData.iconClock),
status: const Icon(StreamIconData.clock12),
),
],
),
Expand Down Expand Up @@ -320,7 +320,7 @@ class _RealWorldSection extends StatelessWidget {
),
child: StreamMessageMetadata(
timestamp: const Text('09:40'),
status: const Icon(StreamIconData.iconDoupleCheckmark1Small),
status: const Icon(StreamIconData.checks12),
),
),
],
Expand Down Expand Up @@ -351,7 +351,7 @@ class _RealWorldSection extends StatelessWidget {
),
child: StreamMessageMetadata(
timestamp: const Text('09:40'),
status: const Icon(StreamIconData.iconDoupleCheckmark1Small),
status: const Icon(StreamIconData.checks12),
edited: const Text('Edited'),
),
),
Expand Down Expand Up @@ -392,7 +392,7 @@ class _ThemeOverrideSection extends StatelessWidget {
child: StreamMessageMetadata(
timestamp: const Text('09:41'),
username: const Text('Alice'),
status: const Icon(StreamIconData.iconCheckmark1Small),
status: const Icon(StreamIconData.checkmark12),
edited: const Text('Edited'),
style: StreamMessageMetadataStyle.from(spacing: 16),
),
Expand Down Expand Up @@ -540,10 +540,10 @@ class _ExampleCard extends StatelessWidget {
// =============================================================================

enum _StatusOption {
sending('Sending', StreamIconData.iconClock),
sent('Sent', StreamIconData.iconCheckmark1Small),
delivered('Delivered', StreamIconData.iconDoupleCheckmark1Small),
read('Read', StreamIconData.iconDoupleCheckmark1Small)
sending('Sending', StreamIconData.clock12),
sent('Sent', StreamIconData.checkmark12),
delivered('Delivered', StreamIconData.checks12),
read('Read', StreamIconData.checks12)
;

const _StatusOption(this.label, this.iconData);
Expand Down
2 changes: 1 addition & 1 deletion apps/design_system_gallery/lib/components/message/stream_message_text.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -591,7 +591,7 @@ class _RealWorldSection extends StatelessWidget {
subtitle: 'Annotation, bubble, metadata, and reply indicator.',
child: StreamMessageContent(
header: StreamMessageAnnotation(
leading: Icon(context.streamIcons.pin),
leading: Icon(context.streamIcons.pin20),
label: const Text('Pinned by Alice'),
),
footer: Column(
Expand Down
8 changes: 4 additions & 4 deletions apps/design_system_gallery/lib/primitives/icons.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ class _SearchBar extends StatelessWidget {
prefixIcon: Padding(
padding: EdgeInsets.only(left: spacing.md, right: spacing.sm),
child: Icon(
icons.magnifyingGlassSearch,
icons.search20,
size: 20,
color: colorScheme.textTertiary,
),
Expand All @@ -172,8 +172,8 @@ class _SearchBar extends StatelessWidget {
? IconButton(
onPressed: onClear,
icon: Icon(
icons.crossSmall,
size: 18,
icons.xmark16,
size: 16,
color: colorScheme.textTertiary,
),
)
Expand Down Expand Up @@ -272,7 +272,7 @@ class _IconCard extends StatelessWidget {
),
child: Icon(
icon,
size: 24,
size: 20,
color: colorScheme.textPrimary,
),
),
Expand Down
Loading
Loading