diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar_user.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar_user.dart
index c46728942f..d16003eec4 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar_user.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar_user.dart
@@ -86,6 +86,7 @@ class SidebarUser extends StatelessWidget {
           backgroundColor: Colors.transparent,
           child: FlowySvg(
             FlowySvgData('emoji/$iconUrl'),
+            blendMode: null,
           ),
         ),
       ),
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_user_view.dart b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_user_view.dart
index 3da7e41ae9..7f94c5ff4f 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_user_view.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_user_view.dart
@@ -318,6 +318,7 @@ class _CurrentIcon extends StatelessWidget {
             child: FlowySvg(
               FlowySvgData('emoji/$iconUrl'),
               size: _iconSize,
+              blendMode: null,
             ),
           ),
         ),
@@ -388,7 +389,11 @@ class IconOption extends StatelessWidget {
       borderRadius: Corners.s6Border,
       hoverColor: Theme.of(context).colorScheme.tertiaryContainer,
       onTap: () => setIcon(iconUrl),
-      child: FlowySvg(emoji, size: _iconSize),
+      child: FlowySvg(
+        emoji,
+        size: _iconSize,
+        blendMode: null,
+      ),
     );
   }
 }
diff --git a/frontend/appflowy_flutter/packages/flowy_svg/lib/src/flowy_svg.dart b/frontend/appflowy_flutter/packages/flowy_svg/lib/src/flowy_svg.dart
index a0528d2ca0..630ce77e8f 100644
--- a/frontend/appflowy_flutter/packages/flowy_svg/lib/src/flowy_svg.dart
+++ b/frontend/appflowy_flutter/packages/flowy_svg/lib/src/flowy_svg.dart
@@ -32,14 +32,19 @@ class FlowySvg extends StatelessWidget {
   /// The size of the svg
   final Size? size;
 
-  /// The color of the svg
+  /// The color of the svg.
+  ///
+  /// This property will not be applied to the underlying svg widget if the
+  /// blend mode is null, but the blend mode defaults to [BlendMode.srcIn]
+  /// if it is not explicitly set to null.
   final Color? color;
 
-  /// If true a color filter is applied to the SVG, otherwise not applied.
+  /// The blend mode applied to the svg.
   ///
-  /// Defaults to true
-  ///
-  final BlendMode blendMode;
+  /// If the blend mode is null then the icon color will not be applied.
+  /// Set both the icon color and blendMode in order to apply color to the
+  /// svg widget.
+  final BlendMode? blendMode;
 
   @override
   Widget build(BuildContext context) {
@@ -48,7 +53,11 @@ class FlowySvg extends StatelessWidget {
     final child = SvgPicture.asset(
       _normalized(),
       colorFilter:
-          iconColor != null ? ColorFilter.mode(iconColor, blendMode)
+          iconColor != null && blendMode != null
+          ? ColorFilter.mode(
+              iconColor,
+              blendMode!,
+            )
           : null,
     );