diff --git a/lib/ui/viewer/file/file_icons_widget.dart b/lib/ui/viewer/file/file_icons_widget.dart
index 887b0aebe..b4200e57b 100644
--- a/lib/ui/viewer/file/file_icons_widget.dart
+++ b/lib/ui/viewer/file/file_icons_widget.dart
@@ -51,6 +51,18 @@ class ArchiveOverlayIcon extends StatelessWidget {
   }
 }
 
+class LivePhotoOverlayIcon extends StatelessWidget {
+  const LivePhotoOverlayIcon({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const BottomRightOverlayIcon(
+      Icons.album_outlined,
+      baseSize: 18,
+    );
+  }
+}
+
 class VideoOverlayIcon extends StatelessWidget {
   const VideoOverlayIcon({Key? key}) : super(key: key);
 
@@ -67,25 +79,6 @@ class VideoOverlayIcon extends StatelessWidget {
   }
 }
 
-class LivePhotoOverlayIcon extends StatelessWidget {
-  const LivePhotoOverlayIcon({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return const Align(
-      alignment: Alignment.bottomRight,
-      child: Padding(
-        padding: EdgeInsets.only(right: 4, bottom: 4),
-        child: Icon(
-          Icons.album_outlined,
-          size: 14,
-          color: Colors.white, // fixed
-        ),
-      ),
-    );
-  }
-}
-
 class OwnerAvatarOverlayIcon extends StatelessWidget {
   final User user;
   const OwnerAvatarOverlayIcon(this.user, {Key? key}) : super(key: key);
@@ -204,3 +197,72 @@ class BottomLeftOverlayIcon extends StatelessWidget {
     );
   }
 }
+
+/// Icon overlay in the bottom right.
+///
+/// This usually indicates information about the file itself, e.g. whether it is
+/// a live photo, or the duration of the video.
+class BottomRightOverlayIcon extends StatelessWidget {
+  final IconData icon;
+
+  /// Overriddable color. Default is a fixed white.
+  final Color color;
+
+  /// Overriddable default size. This is just the initial hint, the actual size
+  /// is dynamic based on the widget's width (so that we show smaller icons in
+  /// smaller thumbnails).
+  final double baseSize;
+
+  const BottomRightOverlayIcon(
+    this.icon, {
+    Key? key,
+    this.baseSize = 24,
+    this.color = Colors.white, // fixed
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        double inset = 4;
+        double size = baseSize;
+
+        if (constraints.hasBoundedWidth) {
+          final w = constraints.maxWidth;
+          if (w > 120) {
+            size = 24;
+          } else if (w < 75) {
+            inset = 3;
+            size = 16;
+          }
+        }
+
+        return Container(
+          decoration: const BoxDecoration(
+            gradient: LinearGradient(
+              begin: Alignment.bottomRight,
+              end: Alignment.center,
+              colors: [
+                Color.fromRGBO(0, 0, 0, 0.14),
+                Color.fromRGBO(0, 0, 0, 0.05),
+                Color.fromRGBO(0, 0, 0, 0.0),
+              ],
+              stops: [0, 0.6, 1],
+            ),
+          ),
+          child: Align(
+            alignment: Alignment.bottomRight,
+            child: Padding(
+              padding: EdgeInsets.only(bottom: inset, right: inset),
+              child: Icon(
+                icon,
+                size: size,
+                color: color,
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}