diff --git a/web/packages/gallery/components/viewer/icons.tsx b/web/packages/gallery/components/viewer/icons.tsx
index d3739be83d..a0a295a498 100644
--- a/web/packages/gallery/components/viewer/icons.tsx
+++ b/web/packages/gallery/components/viewer/icons.tsx
@@ -23,6 +23,10 @@ const paths = {
     error: '<path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8" transform="translate(7, 5.7) scale(0.85)"',
     // "@mui/icons-material/Edit"
     edit: '<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z" transform="translate(3, 3) scale(0.97)"',
+    // "@mui/icons-material/FavoriteBorderRounded"
+    favorite: '<path d="M19.66 3.99c-2.64-1.8-5.9-.96-7.66 1.1-1.76-2.06-5.02-2.91-7.66-1.1-1.4.96-2.28 2.58-2.34 4.29-.14 3.88 3.3 6.99 8.55 11.76l.1.09c.76.69 1.93.69 2.69-.01l.11-.1c5.25-4.76 8.68-7.87 8.55-11.75-.06-1.7-.94-3.32-2.34-4.28M12.1 18.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05" transform="translate(3, 3)"',
+    // "@mui/icons-material/FavoriteRounded"
+    unfavorite: '<path d="M13.35 20.13c-.76.69-1.93.69-2.69-.01l-.11-.1C5.3 15.27 1.87 12.16 2 8.28c.06-1.7.93-3.33 2.34-4.29 2.64-1.8 5.9-.96 7.66 1.1 1.76-2.06 5.02-2.91 7.66-1.1 1.41.96 2.28 2.59 2.34 4.29.14 3.88-3.3 6.99-8.55 11.76z" transform="translate(3, 3)"',
 };
 
 /**
diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts
index a40458c5f2..5510456b0a 100644
--- a/web/packages/gallery/components/viewer/photoswipe.ts
+++ b/web/packages/gallery/components/viewer/photoswipe.ts
@@ -53,20 +53,17 @@ export interface FileViewerFileAnnotation {
     /**
      * `true` if this file has been marked as a favorite by the user.
      *
-     * It will not be provided if favorite functionality is not available.
-     *
+     * The toggle favorite button will not be shown if this is not defined.
      * Otherwise it determines the toggle state of the toggle favorite button.
      */
-    isFavorite?: boolean;
+    isFavorite?: boolean | undefined;
     /**
      * `true` if this is an image which can be edited.
      *
-     * It will not be provided if editing is not available.
-     *
-     * Otherwise the edit button is shown when this is true. See also the
+     * The edit button is shown when this is true. See also the
      * {@link onEditImage} option for {@link FileViewerPhotoSwipe} constructor.
      */
-    isEditableImage?: boolean;
+    isEditableImage?: boolean | undefined;
 }
 
 type FileViewerPhotoSwipeOptions = {
@@ -83,9 +80,10 @@ type FileViewerPhotoSwipeOptions = {
      * Called when the user activates the toggle favorite action on a file.
      *
      * If this callback is not provided, then the toggle favorite button is not
-     * shown. If this callback is provided, then the current toggle state of the
-     * favorite button is determined by the {@link isFavorite} property of
-     * {@link FileViewerFileAnnotation} for the file.
+     * shown. If this callback is provided, then the favorite button is shown if
+     * the {@link isFavorite} property of {@link FileViewerFileAnnotation} for
+     * the file is provided. In that case, the value of the {@link isFavorite}
+     * property will determine the current toggle state of the favorite button.
      */
     onToggleFavorite?: (annotatedFile: FileViewerAnnotatedFile) => void;
     /**
@@ -438,25 +436,51 @@ export class FileViewerPhotoSwipe {
             });
 
             if (onToggleFavorite) {
+                // Only one of these two will end up being shown, so they can
+                // safely share the same order.
                 pswp.ui.registerElement({
                     name: "favorite",
-                    title: t("favorite"),
-                    order: 15,
+                    title: t("favorite_key"),
+                    order: 8,
                     isButton: true,
                     html: createPSRegisterElementIconHTML("favorite"),
                     onClick: withCurrentAnnotatedFile(onToggleFavorite),
                     onInit: (buttonElement, pswp) => {
-                        // TODO:
-                        // pswp.on("change", () =>
-                        //     buttonElement.classList.toggle(
-                        //         "pswp--ui-visible",
-                        //         currentFileAnnotation().isFavorite,
-                        //     ),
-                        // );
+                        pswp.on("change", () =>
+                            buttonElement.classList.toggle(
+                                "pswp--ui-visible",
+                                currentFileAnnotation().isFavorite === false,
+                            ),
+                        );
+                    },
+                });
+                pswp.ui.registerElement({
+                    name: "unfavorite",
+                    title: t("unfavorite_key"),
+                    order: 8,
+                    isButton: true,
+                    html: createPSRegisterElementIconHTML("unfavorite"),
+                    onClick: withCurrentAnnotatedFile(onToggleFavorite),
+                    onInit: (buttonElement, pswp) => {
+                        pswp.on("change", () =>
+                            buttonElement.classList.toggle(
+                                "pswp--ui-visible",
+                                currentFileAnnotation().isFavorite === true,
+                            ),
+                        );
                     },
                 });
             }
 
+            pswp.ui.registerElement({
+                name: "info",
+                title: t("info"),
+                order: 9,
+                isButton: true,
+                html: createPSRegisterElementIconHTML("info"),
+                onClick: withCurrentAnnotatedFile(onViewInfo),
+            });
+
             if (onEditImage) {
                 pswp.ui.registerElement({
                     name: "edit",
@@ -471,21 +495,12 @@ export class FileViewerPhotoSwipe {
                         pswp.on("change", () =>
                             buttonElement.classList.toggle(
                                 "pswp--ui-visible",
-                                currentFileAnnotation().isEditableImage,
+                                !!currentFileAnnotation().isEditableImage,
                             ),
                         );
                     },
                 });
             }
-
-            pswp.ui.registerElement({
-                name: "info",
-                title: t("info"),
-                order: 17,
-                isButton: true,
-                html: createPSRegisterElementIconHTML("info"),
-                onClick: withCurrentAnnotatedFile(onViewInfo),
-            });
         });
 
         // Modify the default UI elements.