use StreamSvgIcon widget

lib/src/back_button.dart

@@ -1,18 +1,15 @@
 import 'package:flutter/material.dart';
-import 'package:stream_chat_flutter/src/stream_icons.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/unread_indicator.dart';
-import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 class StreamBackButton extends StatelessWidget {
   const StreamBackButton({
     Key key,
     this.onPressed,
-    this.icon = Icons.arrow_back_ios_outlined,
     this.showUnreads = false,
   }) : super(key: key);
 
   final VoidCallback onPressed;
-  final IconData icon;
   final bool showUnreads;
 
   @override
@@ -36,9 +33,10 @@ class StreamBackButton extends StatelessWidget {
                 Navigator.of(context).pop();
               }
             },
-            child: Icon(
-              icon ?? StreamIcons.left,
-              size: 24,
+            child: StreamSvgIcon(
+              assetName: 'Icon_left.svg',
+              height: 24,
+              width: 24,
               color: Theme.of(context).brightness == Brightness.dark
                   ? Colors.white
                   : Colors.black,

lib/src/channel_bottom_sheet.dart

@@ -1,7 +1,6 @@
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:stream_chat/stream_chat.dart';
-import 'package:stream_chat_flutter/src/stream_icons.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/utils.dart';
 
 import 'channel_info.dart';
@@ -73,9 +72,10 @@ class ChannelBottomSheet extends StatelessWidget {
                 initialData: channel.isMuted,
                 builder: (context, snapshot) {
                   return ListTile(
-                    leading: Icon(
-                      StreamIcons.mute,
-                      size: 22,
+                    leading: StreamSvgIcon(
+                      assetName: 'Icon_mute.svg',
+                      height: 22,
+                      width: 22,
                       color: StreamChatTheme.of(context).primaryIconTheme.color,
                     ),
                     title: Text('Mute ${channel.isGroup ? 'group' : 'user'}'),
@@ -94,9 +94,10 @@ class ChannelBottomSheet extends StatelessWidget {
             Divider(),
             if (channel.isGroup && !channel.isDistinct)
               ListTile(
-                leading: Icon(
-                  StreamIcons.user_minus,
-                  size: 22,
+                leading: StreamSvgIcon(
+                  assetName: 'Icon_User_deselect.svg',
+                  height: 22,
+                  width: 22,
                   color: Colors.black,
                 ),
                 title: Text('Leave Group'),

lib/src/channel_list_view.dart

@@ -7,6 +7,7 @@ import 'package:flutter_slidable/flutter_slidable.dart';
 import 'package:shimmer/shimmer.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/channels_bloc.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/utils.dart';
 
 import '../stream_chat_flutter.dart';
@@ -200,9 +201,10 @@ class _ChannelListViewState extends State<ChannelListView>
                             children: [
                               Padding(
                                 padding: const EdgeInsets.all(8.0),
-                                child: Icon(
-                                  StreamIcons.message,
-                                  size: 136,
+                                child: StreamSvgIcon(
+                                  assetName: 'Icon_message.svg',
+                                  height: 136,
+                                  width: 136,
                                   color: Color(0xffDBDBDB),
                                 ),
                               ),
@@ -517,7 +519,9 @@ class _ChannelListViewState extends State<ChannelListView>
                   ),
                   IconSlideAction(
                     color: backgroundColor,
-                    icon: StreamIcons.mute,
+                    iconWidget: StreamSvgIcon(
+                      assetName: 'Icon_mute.svg',
+                    ),
                     onTap: () async {
                       if (!channel.isMuted) {
                         await channel.mute();
@@ -529,7 +533,9 @@ class _ChannelListViewState extends State<ChannelListView>
                   if (channel.isGroup && !channel.isDistinct)
                     IconSlideAction(
                       color: backgroundColor,
-                      icon: StreamIcons.user_minus,
+                      iconWidget: StreamSvgIcon(
+                        assetName: 'Icon_User_deselect.svg',
+                      ),
                       onTap: () async {
                         final confirm = await showConfirmationDialog(
                           context,

lib/src/channel_preview.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:jiffy/jiffy.dart';
 import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 
 import '../stream_chat_flutter.dart';
 import 'channel_name.dart';
@@ -152,9 +153,10 @@ class ChannelPreview extends StatelessWidget {
       return Row(
         crossAxisAlignment: CrossAxisAlignment.end,
         children: <Widget>[
-          Icon(
-            StreamIcons.mute,
-            size: 16,
+          StreamSvgIcon(
+            assetName: 'Icon_mute.svg',
+            height: 16,
+            width: 16,
           ),
           Text(
             '  Channel is muted',

lib/src/giphy_attachment.dart

@@ -1,6 +1,7 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 
 import '../stream_chat_flutter.dart';
 import 'attachment_error.dart';
@@ -111,10 +112,11 @@ class GiphyAttachment extends StatelessWidget {
                         ),
                         child: Row(
                           children: [
-                            Icon(
-                              StreamIcons.lightning,
+                            StreamSvgIcon(
+                              assetName: 'Icon_lightning-command runner.svg',
                               color: StreamChatTheme.of(context).accentColor,
-                              size: 16.0,
+                              height: 16.0,
+                              width: 16.0,
                             ),
                             Text(
                               'GIPHY',
@@ -144,9 +146,10 @@ class GiphyAttachment extends StatelessWidget {
                           child: IconButton(
                             padding: const EdgeInsets.all(0),
                             constraints: BoxConstraints.tight(Size(32, 32)),
-                            icon: Icon(
-                              StreamIcons.left,
-                              size: 24.0,
+                            icon: StreamSvgIcon(
+                              assetName: 'Icon_left.svg',
+                              height: 24.0,
+                              width: 24.0,
                             ),
                             splashRadius: 16,
                             onPressed: () {
@@ -172,9 +175,10 @@ class GiphyAttachment extends StatelessWidget {
                           child: IconButton(
                             padding: const EdgeInsets.all(0),
                             constraints: BoxConstraints.tight(Size(32, 32)),
-                            icon: Icon(
-                              StreamIcons.right,
-                              size: 24.0,
+                            icon: StreamSvgIcon(
+                              assetName: 'Icon_right.svg',
+                              height: 24.0,
+                              width: 24.0,
                             ),
                             splashRadius: 16,
                             onPressed: () {
@@ -253,10 +257,11 @@ class GiphyAttachment extends StatelessWidget {
             child: Row(
               mainAxisSize: MainAxisSize.min,
               children: [
-                Icon(
-                  StreamIcons.eye,
+                StreamSvgIcon(
+                  assetName: 'Icon_eye-off.svg',
                   color: Colors.black.withOpacity(0.5),
-                  size: 16.0,
+                  height: 16.0,
+                  width: 16.0,
                 ),
                 SizedBox(
                   width: 8.0,
@@ -326,10 +331,11 @@ class GiphyAttachment extends StatelessWidget {
                   ),
                   child: Row(
                     children: [
-                      Icon(
-                        StreamIcons.lightning,
+                      StreamSvgIcon(
+                        assetName: 'Icon_lightning-command runner.svg',
                         color: Colors.white,
-                        size: 16,
+                        height: 16,
+                        width: 16,
                       ),
                       Text(
                         'GIPHY',

lib/src/media_list_view.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:media_gallery/media_gallery.dart';
-import 'package:stream_chat_flutter/src/stream_icons.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 
 class MediaListView extends StatefulWidget {
   final List<String> selectedIds;
@@ -71,9 +71,10 @@ class _MediaListViewState extends State<MediaListView> {
                         child: CircleAvatar(
                           radius: 12,
                           backgroundColor: Colors.white,
-                          child: Icon(
-                            StreamIcons.check,
-                            size: 24,
+                          child: StreamSvgIcon(
+                            assetName: 'Icon_check.svg',
+                            height: 24,
+                            width: 24,
                             color: Colors.black,
                           ),
                         ),

lib/src/message_actions_modal.dart

@@ -6,7 +6,7 @@ import 'package:flutter/services.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/reaction_picker.dart';
 import 'package:stream_chat_flutter/src/stream_channel.dart';
-import 'package:stream_chat_flutter/src/stream_icons.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 
 import 'message_input.dart';
 import 'message_widget.dart';
@@ -188,8 +188,8 @@ class MessageActionsModal extends StatelessWidget {
         style:
             Theme.of(context).textTheme.headline6.copyWith(color: Colors.red),
       ),
-      leading: Icon(
-        StreamIcons.delete,
+      leading: StreamSvgIcon(
+        assetName: 'Icon_delete.svg',
         color: Colors.red,
       ),
       onTap: () {
@@ -208,8 +208,8 @@ class MessageActionsModal extends StatelessWidget {
         'Copy message',
         style: Theme.of(context).textTheme.headline6,
       ),
-      leading: Icon(
-        StreamIcons.copy,
+      leading: StreamSvgIcon(
+        assetName: 'Icon_copy.svg',
         color: StreamChatTheme.of(context).primaryIconTheme.color,
       ),
       onTap: () async {
@@ -225,8 +225,8 @@ class MessageActionsModal extends StatelessWidget {
         'Edit message',
         style: Theme.of(context).textTheme.headline6,
       ),
-      leading: Icon(
-        StreamIcons.edit,
+      leading: StreamSvgIcon(
+        assetName: 'Icon_edit.svg',
         color: StreamChatTheme.of(context).primaryIconTheme.color,
       ),
       onTap: () async {
@@ -267,9 +267,10 @@ class MessageActionsModal extends StatelessWidget {
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: <Widget>[
                     IconButton(
-                      icon: Icon(
-                        StreamIcons.edit,
-                        size: 22,
+                      icon: StreamSvgIcon(
+                        assetName: 'Icon_edit.svg',
+                        height: 22,
+                        width: 22,
                         color:
                             StreamChatTheme.of(context).primaryIconTheme.color,
                       ),
@@ -323,8 +324,8 @@ class MessageActionsModal extends StatelessWidget {
         'Thread reply',
         style: Theme.of(context).textTheme.headline6,
       ),
-      leading: Icon(
-        StreamIcons.sorting_up,
+      leading: StreamSvgIcon(
+        assetName: 'Icon_Thread_Reply.svg',
         color: StreamChatTheme.of(context).primaryIconTheme.color,
       ),
       onTap: () {

lib/src/message_input.dart

@@ -1,6 +1,5 @@
 import 'dart:async';
 import 'dart:io';
-import 'dart:math';
 
 import 'package:emojis/emoji.dart';
 import 'package:file_picker/file_picker.dart';
@@ -18,6 +17,7 @@ import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/media_list_view.dart';
 import 'package:stream_chat_flutter/src/message_list_view.dart';
 import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/user_avatar.dart';
 import 'package:stream_chat_flutter/src/video_thumbnail.dart';
 import 'package:substring_highlight/substring_highlight.dart';
@@ -284,9 +284,10 @@ class MessageInputState extends State<MessageInput> {
                     crossFadeState: _sendAsDm
                         ? CrossFadeState.showFirst
                         : CrossFadeState.showSecond,
-                    firstChild: Icon(
-                      StreamIcons.check,
-                      size: 16.0,
+                    firstChild: StreamSvgIcon(
+                      assetName: 'Icon_check.svg',
+                      height: 16.0,
+                      width: 16.0,
                       color: Colors.white,
                     ),
                     secondChild: SizedBox(
@@ -330,8 +331,8 @@ class MessageInputState extends State<MessageInput> {
             _actionsShrunk = false;
           });
         },
-        icon: Icon(
-          StreamIcons.circle_left,
+        icon: StreamSvgIcon(
+          assetName: 'Icon_empty_circle_left.svg',
           color: StreamChatTheme.of(context).accentColor,
         ),
       ),
@@ -403,8 +404,8 @@ class MessageInputState extends State<MessageInput> {
                                 _chosenCommand?.name ?? "",
                                 style: TextStyle(color: Colors.white),
                               ),
-                              avatar: Icon(
-                                StreamIcons.lightning,
+                              avatar: StreamSvgIcon(
+                                assetName: 'Icon_lightning-command runner.svg',
                                 color: Colors.white,
                               ),
                             ),
@@ -579,9 +580,11 @@ class MessageInputState extends State<MessageInput> {
                                 children: [
                                   Padding(
                                     padding: const EdgeInsets.symmetric(
-                                        horizontal: 8.0),
-                                    child: Icon(
-                                      StreamIcons.lightning,
+                                      horizontal: 8.0,
+                                    ),
+                                    child: StreamSvgIcon(
+                                      assetName:
+                                          'Icon_lightning-command runner.svg',
                                       color: StreamChatTheme.of(context)
                                           .accentColor,
                                     ),
@@ -619,10 +622,12 @@ class MessageInputState extends State<MessageInput> {
                                   trailing: CircleAvatar(
                                     backgroundColor:
                                         StreamChatTheme.of(context).accentColor,
-                                    child: Icon(
-                                      StreamIcons.lightning,
+                                    child: StreamSvgIcon(
+                                      assetName:
+                                          'Icon_lightning-command runner.svg',
                                       color: Colors.white,
-                                      size: 12.5,
+                                      height: 12.5,
+                                      width: 12.5,
                                     ),
                                     maxRadius: 12,
                                   ),
@@ -656,9 +661,10 @@ class MessageInputState extends State<MessageInput> {
               mainAxisAlignment: MainAxisAlignment.start,
               children: [
                 IconButton(
-                  icon: Icon(
-                    StreamIcons.picture,
-                    size: 24,
+                  icon: StreamSvgIcon(
+                    assetName: 'pictures.svg',
+                    height: 24,
+                    width: 24,
                     color: _filePickerIndex == 0
                         ? StreamChatTheme.of(context).accentColor
                         : Colors.black.withOpacity(0.5),
@@ -670,9 +676,10 @@ class MessageInputState extends State<MessageInput> {
                   },
                 ),
                 IconButton(
-                  icon: Icon(
-                    StreamIcons.folder,
-                    size: 24,
+                  icon: StreamSvgIcon(
+                    assetName: 'files.svg',
+                    height: 24,
+                    width: 24,
                     color: _filePickerIndex == 1
                         ? StreamChatTheme.of(context).accentColor
                         : Colors.black.withOpacity(0.5),
@@ -682,9 +689,8 @@ class MessageInputState extends State<MessageInput> {
                   },
                 ),
                 IconButton(
-                  icon: SvgPicture.asset(
-                    'svgs/icon_camera.svg',
-                    package: 'stream_chat_flutter',
+                  icon: StreamSvgIcon(
+                    assetName: 'Icon_camera.svg',
                     height: 24,
                     width: 24,
                     color: _filePickerIndex == 2
@@ -696,10 +702,11 @@ class MessageInputState extends State<MessageInput> {
                   },
                 ),
                 IconButton(
-                  icon: Icon(
-                    StreamIcons.record,
-                    size: 24,
-                    color: _filePickerIndex == 2
+                  icon: StreamSvgIcon(
+                    assetName: 'Icon_record.svg',
+                    height: 24,
+                    width: 24,
+                    color: _filePickerIndex == 3
                         ? StreamChatTheme.of(context).accentColor
                         : Colors.black.withOpacity(0.5),
                   ),
@@ -993,8 +1000,8 @@ class MessageInputState extends State<MessageInput> {
                                             fontWeight: FontWeight.bold),
                                       ),
                                       subtitle: Text('@${m.userId}'),
-                                      trailing: Icon(
-                                        StreamIcons.at_mention,
+                                      trailing: StreamSvgIcon(
+                                        assetName: 'mentions.svg',
                                         color: StreamChatTheme.of(context)
                                             .accentColor,
                                       ),
@@ -1091,8 +1098,8 @@ class MessageInputState extends State<MessageInput> {
                           Padding(
                             padding:
                                 const EdgeInsets.symmetric(horizontal: 8.0),
-                            child: Icon(
-                              StreamIcons.smile,
+                            child: StreamSvgIcon(
+                              assetName: 'Icon_smile.svg',
                               color: StreamChatTheme.of(context).accentColor,
                             ),
                           ),
@@ -1227,9 +1234,10 @@ class MessageInputState extends State<MessageInput> {
         },
         fillColor: Colors.black.withOpacity(.5),
         child: Center(
-          child: Icon(
-            StreamIcons.close,
-            size: 24,
+          child: StreamSvgIcon(
+            assetName: 'Icon_close.svg',
+            height: 24,
+            width: 24,
             color: Colors.white,
           ),
         ),
@@ -1299,8 +1307,8 @@ class MessageInputState extends State<MessageInput> {
       child: Padding(
         padding:
             const EdgeInsets.only(left: 4.0, right: 8.0, top: 8.0, bottom: 8.0),
-        child: Icon(
-          StreamIcons.lightning,
+        child: StreamSvgIcon(
+          assetName: 'Icon_lightning-command runner.svg',
           color: Color(0xFF000000).withAlpha(128),
         ),
       ),
@@ -1323,8 +1331,8 @@ class MessageInputState extends State<MessageInput> {
         child: Padding(
           padding:
               EdgeInsets.only(left: 8.0, right: padding, top: 8.0, bottom: 8.0),
-          child: Icon(
-            StreamIcons.attach,
+          child: StreamSvgIcon(
+            assetName: 'Icon_attach.svg',
             color: _openFilePickerSection
                 ? StreamChatTheme.of(context).accentColor
                 : Color(0xFF000000).withAlpha(128),
@@ -1594,69 +1602,53 @@ class MessageInputState extends State<MessageInput> {
   }
 
   Widget _buildIdleSendButton(BuildContext context) {
-    return IconTheme(
-      data:
-          StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme,
-      child: Padding(
-        padding: const EdgeInsets.all(8.0),
-        child: Center(
-            child: InkWell(
-          onTap: () {
-            sendMessage();
-          },
-          child: Icon(
-            _getIdleSendIcon(),
-            color: Colors.grey,
-          ),
-        )),
-      ),
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Center(
+          child: InkWell(
+        onTap: () {
+          sendMessage();
+        },
+        child: StreamSvgIcon(
+          assetName: _getIdleSendIcon(),
+          color: Colors.grey,
+        ),
+      )),
     );
   }
 
   Widget _buildSendButton(BuildContext context) {
-    return IconTheme(
-      data:
-          StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme,
-      child: Center(
-        child: Padding(
-          padding: const EdgeInsets.all(8.0),
-          child: InkWell(
-            onTap: () {
-              sendMessage();
-            },
-            child: _getSendIcon(),
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(8.0),
+        child: InkWell(
+          onTap: () {
+            sendMessage();
+          },
+          child: StreamSvgIcon(
+            assetName: _getSendIcon(),
+            color: StreamChatTheme.of(context).accentColor,
           ),
         ),
       ),
     );
   }
 
-  IconData _getIdleSendIcon() {
+  String _getIdleSendIcon() {
     if (_commandEnabled) {
-      return StreamIcons.search;
+      return 'Icon_search.svg';
     } else {
-      return StreamIcons.send_message;
+      return 'Icon_circle_up.svg';
     }
   }
 
-  Widget _getSendIcon() {
+  String _getSendIcon() {
     if (widget.editMessage != null) {
-      return Icon(
-        StreamIcons.check_send,
-        color: StreamChatTheme.of(context).accentColor,
-      );
+      return 'Icon_circle_right.svg';
     } else if (_commandEnabled) {
-      return Icon(
-        StreamIcons.search,
-        color: StreamChatTheme.of(context).accentColor,
-      );
+      return 'Icon_search.svg';
     } else {
-      return Transform.rotate(
-          angle: -pi / 2,
-          child: Icon(
-            StreamIcons.send_message,
-            color: StreamChatTheme.of(context).accentColor,
-          ));
+      return 'Icon_circle_right.svg';
     }
   }
 

lib/src/message_list_view.dart

@@ -6,6 +6,7 @@ import 'package:jiffy/jiffy.dart';
 import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/message_widget.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/system_message.dart';
 import 'package:visibility_detector/visibility_detector.dart';
 
@@ -374,8 +375,8 @@ class _MessageListViewState extends State<MessageListView> {
         children: [
           FloatingActionButton(
             backgroundColor: Colors.white,
-            child: Icon(
-              StreamIcons.down,
+            child: StreamSvgIcon(
+              assetName: 'Icon_down.svg',
               color: Colors.black,
             ),
             onPressed: () {

lib/src/reaction_bubble.dart

@@ -3,6 +3,7 @@ import 'dart:math';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:stream_chat_flutter/src/reaction_icon.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 class ReactionBubble extends StatelessWidget {
@@ -99,14 +100,24 @@ class ReactionBubble extends StatelessWidget {
       padding: const EdgeInsets.symmetric(
         horizontal: 4.0,
       ),
-      child: Icon(
-        reactionIcon?.iconData ?? Icons.help_outline_rounded,
-        size: 16,
-        color: (!highlightOwnReactions ||
-                reaction.user.id == StreamChat.of(context).user.id)
-            ? StreamChatTheme.of(context).accentColor
-            : Colors.black.withOpacity(.5),
-      ),
+      child: reactionIcon != null
+          ? StreamSvgIcon(
+              assetName: reactionIcon.assetName,
+              width: 16,
+              height: 16,
+              color: (!highlightOwnReactions ||
+                      reaction.user.id == StreamChat.of(context).user.id)
+                  ? StreamChatTheme.of(context).accentColor
+                  : Colors.black.withOpacity(.5),
+            )
+          : Icon(
+              Icons.help_outline_rounded,
+              size: 16,
+              color: (!highlightOwnReactions ||
+                      reaction.user.id == StreamChat.of(context).user.id)
+                  ? StreamChatTheme.of(context).accentColor
+                  : Colors.black.withOpacity(.5),
+            ),
     );
   }
 

lib/src/reaction_icon.dart

@@ -1,11 +1,9 @@
-import 'package:flutter/material.dart';
-
 class ReactionIcon {
   final String type;
-  final IconData iconData;
+  final String assetName;
 
   ReactionIcon({
     this.type,
-    this.iconData,
+    this.assetName,
   });
 }

lib/src/reaction_picker.dart

@@ -1,6 +1,6 @@
 import 'package:ezanimation/ezanimation.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/physics.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 
 import '../stream_chat_flutter.dart';
 
@@ -84,9 +84,10 @@ class _ReactionPickerState extends State<ReactionPicker>
                               ..scale(animations[index].value,
                                   animations[index].value)
                               ..rotateZ(1.0 - animations[index].value),
-                            child: Icon(
-                              reactionIcon.iconData,
-                              size: animations[index].value * 24.0,
+                            child: StreamSvgIcon(
+                              assetName: reactionIcon.assetName,
+                              height: animations[index].value * 24.0,
+                              width: animations[index].value * 24.0,
                               color: ownReactionIndex != -1
                                   ? StreamChatTheme.of(context).accentColor
                                   : Theme.of(context)

lib/src/stream_chat_theme.dart

@@ -5,7 +5,6 @@ import 'package:stream_chat_flutter/src/channel_header.dart';
 import 'package:stream_chat_flutter/src/channel_preview.dart';
 import 'package:stream_chat_flutter/src/message_input.dart';
 import 'package:stream_chat_flutter/src/reaction_icon.dart';
-import 'package:stream_chat_flutter/src/stream_icons.dart';
 import 'package:stream_chat_flutter/src/utils.dart';
 
 /// Inherited widget providing the [StreamChatThemeData] to the widget tree
@@ -353,23 +352,23 @@ class StreamChatThemeData {
       reactionIcons: [
         ReactionIcon(
           type: 'love',
-          iconData: StreamIcons.love_reaction,
+          assetName: 'Icon_love_reaction.svg',
         ),
         ReactionIcon(
           type: 'thumbs_up',
-          iconData: StreamIcons.thumbs_up_reaction,
+          assetName: 'Icon_thumbs_up_reaction.svg',
         ),
         ReactionIcon(
           type: 'thumbs_down',
-          iconData: StreamIcons.thumbs_down_reaction,
+          assetName: 'Icon_thumbs_down_reaction.svg',
         ),
         ReactionIcon(
           type: 'lol',
-          iconData: StreamIcons.LOL_reaction,
+          assetName: 'Icon_LOL_reaction.svg',
         ),
         ReactionIcon(
           type: 'wut',
-          iconData: StreamIcons.wut_reaction,
+          assetName: 'Icon_wut_reaction.svg',
         ),
       ],
     );

lib/src/stream_svg_icon.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class StreamSvgIcon extends StatelessWidget {
+  final String assetName;
+  final double width;
+  final double height;
+  final Color color;
+
+  const StreamSvgIcon({
+    Key key,
+    this.assetName,
+    this.width,
+    this.height,
+    this.color,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return kIsWeb
+        ? Image.network(
+            'packages/stream_chat_flutter/svgs/$assetName',
+            width: width,
+            height: height,
+            color: color,
+            fit: BoxFit.cover,
+            alignment: Alignment.center,
+          )
+        : SvgPicture.asset(
+            'lib/svgs/$assetName',
+            package: 'stream_chat_flutter',
+            width: width,
+            height: height,
+            fit: BoxFit.cover,
+            color: color,
+            alignment: Alignment.center,
+          );
+  }
+}

lib/src/thread_header.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:stream_chat/stream_chat.dart';
-import 'package:stream_chat_flutter/src/back_button.dart';
 import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 
 /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/thread_header.png)
 /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/thread_header_paint.png)
@@ -84,9 +84,16 @@ class ThreadHeader extends StatelessWidget implements PreferredSizeWidget {
           child: showBackButton
               ? AspectRatio(
                   aspectRatio: 1,
-                  child: StreamBackButton(
+                  child: IconButton(
                     onPressed: onBackPressed,
-                    icon: Icons.close,
+                    icon: StreamSvgIcon(
+                      assetName: 'Icon_close.svg',
+                      height: 24,
+                      width: 24,
+                      color: Theme.of(context).brightness == Brightness.dark
+                          ? Colors.white
+                          : Colors.black,
+                    ),
                   ),
                 )
               : SizedBox(),

lib/src/user_item.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:jiffy/jiffy.dart';
 import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/user_list_view.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
@@ -73,9 +74,10 @@ class UserItem extends StatelessWidget {
       ),
       trailing: selected
           ? CircleAvatar(
-              child: Icon(
-                StreamIcons.check,
-                size: 20,
+              child: StreamSvgIcon(
+                assetName: 'Icon_check.svg',
+                height: 20,
+                width: 20,
               ),
               radius: 10,
             )