diff --git a/lib/select_character/widgets/character_icon.dart b/lib/select_character/widgets/character_icon.dart
new file mode 100644
index 00000000..1afb4c6a
--- /dev/null
+++ b/lib/select_character/widgets/character_icon.dart
@@ -0,0 +1,37 @@
+// ignore_for_file: public_member_api_docs
+
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:pinball/select_character/select_character.dart';
+import 'package:pinball_theme/pinball_theme.dart' hide Assets;
+
+class CharacterIcon extends StatelessWidget {
+  const CharacterIcon(
+    this.characterTheme, {
+    Key? key,
+  }) : super(key: key);
+
+  final CharacterTheme characterTheme;
+
+  @override
+  Widget build(BuildContext context) {
+    final currentCharacterTheme =
+        context.select<CharacterThemeCubit, CharacterTheme>(
+      (cubit) => cubit.state.characterTheme,
+    );
+
+    return GestureDetector(
+      onTap: () =>
+          context.read<CharacterThemeCubit>().characterSelected(characterTheme),
+      child: Opacity(
+        opacity: currentCharacterTheme == characterTheme ? 1 : 0.5,
+        child: Padding(
+          padding: const EdgeInsets.all(8),
+          child: characterTheme.icon.image(
+            fit: BoxFit.contain,
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/test/select_character/widgets/character_icon_test.dart b/test/select_character/widgets/character_icon_test.dart
new file mode 100644
index 00000000..60dabba6
--- /dev/null
+++ b/test/select_character/widgets/character_icon_test.dart
@@ -0,0 +1,51 @@
+// ignore_for_file: prefer_const_constructors
+
+import 'package:bloc_test/bloc_test.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mockingjay/mockingjay.dart';
+import 'package:pinball/select_character/select_character.dart';
+import 'package:pinball_theme/pinball_theme.dart';
+
+import '../../helpers/helpers.dart';
+
+void main() {
+  late CharacterThemeCubit characterThemeCubit;
+
+  group('CharacterIcon', () {
+    setUp(() {
+      characterThemeCubit = MockCharacterThemeCubit();
+
+      whenListen(
+        characterThemeCubit,
+        const Stream<CharacterThemeState>.empty(),
+        initialState: const CharacterThemeState.initial(),
+      );
+    });
+
+    testWidgets('renders character icon', (tester) async {
+      const characterTheme = DashTheme();
+
+      await tester.pumpApp(
+        const CharacterIcon(characterTheme),
+        characterThemeCubit: characterThemeCubit,
+      );
+
+      expect(find.image(characterTheme.icon), findsOneWidget);
+    });
+
+    testWidgets('tap on icon calls characterSelected on cubit', (tester) async {
+      const characterTheme = DashTheme();
+
+      await tester.pumpApp(
+        CharacterIcon(characterTheme),
+        characterThemeCubit: characterThemeCubit,
+      );
+
+      await tester.tap(find.byType(CharacterIcon));
+
+      verify(
+        () => characterThemeCubit.characterSelected(characterTheme),
+      ).called(1);
+    });
+  });
+}