diff --git a/frontend/appflowy_flutter/integration_test/desktop/cloud/cloud_runner.dart b/frontend/appflowy_flutter/integration_test/desktop/cloud/cloud_runner.dart
index 0b35cffe51eac..bc994eba99494 100644
--- a/frontend/appflowy_flutter/integration_test/desktop/cloud/cloud_runner.dart
+++ b/frontend/appflowy_flutter/integration_test/desktop/cloud/cloud_runner.dart
@@ -2,6 +2,7 @@ import 'data_migration/data_migration_test_runner.dart'
     as data_migration_test_runner;
 import 'document/document_test_runner.dart' as document_test_runner;
 import 'set_env.dart' as preset_af_cloud_env_test;
+import 'sidebar/sidebar_icon_test.dart' as sidebar_icon_test;
 import 'sidebar/sidebar_move_page_test.dart' as sidebar_move_page_test;
 import 'sidebar/sidebar_rename_untitled_test.dart'
     as sidebar_rename_untitled_test;
@@ -26,4 +27,5 @@ Future<void> main() async {
   // sidebar
   sidebar_move_page_test.main();
   sidebar_rename_untitled_test.main();
+  sidebar_icon_test.main();
 }
diff --git a/frontend/appflowy_flutter/integration_test/desktop/cloud/sidebar/sidebar_icon_test.dart b/frontend/appflowy_flutter/integration_test/desktop/cloud/sidebar/sidebar_icon_test.dart
new file mode 100644
index 0000000000000..d6688ef07fed8
--- /dev/null
+++ b/frontend/appflowy_flutter/integration_test/desktop/cloud/sidebar/sidebar_icon_test.dart
@@ -0,0 +1,62 @@
+import 'dart:convert';
+
+import 'package:appflowy/env/cloud_env.dart';
+import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/icon_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/recent_icons.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/sidebar_space_header.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/space_action_type.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/space_more_popup.dart';
+import 'package:flowy_svg/flowy_svg.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../../../shared/emoji.dart';
+import '../../../shared/util.dart';
+
+void main() {
+  setUpAll(() {
+    IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+    RecentIcons.enable = false;
+  });
+
+  tearDownAll(() {
+    RecentIcons.enable = true;
+  });
+
+  testWidgets('Change slide bar space icon', (tester) async {
+    await tester.initializeAppFlowy(
+      cloudType: AuthenticatorType.appflowyCloudSelfHost,
+    );
+    await tester.tapGoogleLoginInButton();
+    await tester.expectToSeeHomePageWithGetStartedPage();
+    final emojiIconData = await tester.loadIcon();
+    final firstIcon = IconsData.fromJson(jsonDecode(emojiIconData.emoji));
+
+    await tester.hoverOnWidget(
+      find.byType(SidebarSpaceHeader),
+      onHover: () async {
+        final moreOption = find.byType(SpaceMorePopup);
+        await tester.tapButton(moreOption);
+        expect(find.byType(FlowyIconEmojiPicker), findsNothing);
+        await tester.tapSvgButton(SpaceMoreActionType.changeIcon.leftIconSvg);
+        expect(find.byType(FlowyIconEmojiPicker), findsOneWidget);
+      },
+    );
+
+    final icons = find.byWidgetPredicate(
+      (w) => w is FlowySvg && w.svgString == firstIcon.iconContent,
+    );
+    expect(icons, findsOneWidget);
+    await tester.tapIcon(EmojiIconData.icon(firstIcon));
+
+    final spaceHeader = find.byType(SidebarSpaceHeader);
+    final spaceIcon = find.descendant(
+      of: spaceHeader,
+      matching: find.byWidgetPredicate(
+        (w) => w is FlowySvg && w.svgString == firstIcon.iconContent,
+      ),
+    );
+    expect(spaceIcon, findsOneWidget);
+  });
+}
diff --git a/frontend/appflowy_flutter/integration_test/shared/emoji.dart b/frontend/appflowy_flutter/integration_test/shared/emoji.dart
index e3675753e50bf..c2032eef6b569 100644
--- a/frontend/appflowy_flutter/integration_test/shared/emoji.dart
+++ b/frontend/appflowy_flutter/integration_test/shared/emoji.dart
@@ -31,10 +31,7 @@ extension EmojiTestExtension on WidgetTester {
       matching: find.text(PickerTabType.icon.tr),
     );
     expect(iconTab, findsOneWidget);
-    expect(find.byType(FlowyIconPicker), findsNothing);
-    await tap(iconTab);
-    await pumpAndSettle();
-    expect(find.byType(FlowyIconPicker), findsOneWidget);
+    await tapButton(iconTab);
     final selectedSvg = find.descendant(
       of: find.byType(FlowyIconPicker),
       matching: find.byWidgetPredicate(
diff --git a/frontend/appflowy_flutter/lib/shared/icon_emoji_picker/recent_icons.dart b/frontend/appflowy_flutter/lib/shared/icon_emoji_picker/recent_icons.dart
index a6834e3dae9b5..199bb7f725947 100644
--- a/frontend/appflowy_flutter/lib/shared/icon_emoji_picker/recent_icons.dart
+++ b/frontend/appflowy_flutter/lib/shared/icon_emoji_picker/recent_icons.dart
@@ -46,6 +46,10 @@ class RecentIcons {
           .map(
             (e) => RecentIcon.fromJson(jsonDecode(e) as Map<String, dynamic>),
           )
+
+          /// skip the data that is already stored locally but has an empty
+          /// groupName to accommodate the issue of destructive data modifications
+          .skipWhile((e) => e.groupName.isEmpty)
           .toList();
     } catch (e) {
       Log.error('RecentIcons getIcons with :$iconList', e);
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/sidebar_space_header.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/sidebar_space_header.dart
index 03b96c960714f..cf4a2aa5b1df8 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/sidebar_space_header.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/sidebar_space_header.dart
@@ -173,21 +173,22 @@ class _SidebarSpaceHeaderState extends State<SidebarSpaceHeader> {
         await _showRenameDialog();
         break;
       case SpaceMoreActionType.changeIcon:
-        final result = data as EmojiIconData;
-        if (data.type == FlowyIconType.icon) {
-          try {
-            final iconsData = IconsData.fromJson(jsonDecode(result.emoji));
-            context.read<SpaceBloc>().add(
-                  SpaceEvent.changeIcon(
-                    icon: '${iconsData.groupName}/${iconsData.iconName}',
-                    iconColor: iconsData.color,
-                  ),
-                );
-          } on FormatException catch (e) {
-            context
-                .read<SpaceBloc>()
-                .add(const SpaceEvent.changeIcon(icon: ''));
-            Log.warn('SidebarSpaceHeader changeIcon error:$e');
+        if (data is SelectedEmojiIconResult) {
+          if (data.type == FlowyIconType.icon) {
+            try {
+              final iconsData = IconsData.fromJson(jsonDecode(data.emoji));
+              context.read<SpaceBloc>().add(
+                    SpaceEvent.changeIcon(
+                      icon: '${iconsData.groupName}/${iconsData.iconName}',
+                      iconColor: iconsData.color,
+                    ),
+                  );
+            } on FormatException catch (e) {
+              context
+                  .read<SpaceBloc>()
+                  .add(const SpaceEvent.changeIcon(icon: ''));
+              Log.warn('SidebarSpaceHeader changeIcon error:$e');
+            }
           }
         }
         break;