diff --git a/app/assets/javascripts/discourse/app/components/bookmark-icon.js b/app/assets/javascripts/discourse/app/components/bookmark-icon.js
new file mode 100644
index 0000000000..56eab68e72
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/bookmark-icon.js
@@ -0,0 +1,21 @@
+import { isEmpty } from "@ember/utils";
+import { computed } from "@ember/object";
+import Component from "@ember/component";
+import {
+  NO_REMINDER_ICON,
+  WITH_REMINDER_ICON,
+} from "discourse/models/bookmark";
+
+export default class BookmarkIcon extends Component {
+  tagName = "";
+  bookmark = null;
+
+  @computed("bookmark.reminder_at")
+  get icon() {
+    if (!isEmpty(this.bookmark.reminder_at)) {
+      return WITH_REMINDER_ICON;
+    }
+
+    return NO_REMINDER_ICON;
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/initializers/topic-footer-buttons.js b/app/assets/javascripts/discourse/app/initializers/topic-footer-buttons.js
index 83e5a63b40..610bfefe5d 100644
--- a/app/assets/javascripts/discourse/app/initializers/topic-footer-buttons.js
+++ b/app/assets/javascripts/discourse/app/initializers/topic-footer-buttons.js
@@ -1,4 +1,8 @@
 import I18n from "I18n";
+import {
+  NO_REMINDER_ICON,
+  WITH_REMINDER_ICON,
+} from "discourse/models/bookmark";
 import { registerTopicFooterButton } from "discourse/lib/register-topic-footer-button";
 import showModal from "discourse/lib/show-modal";
 
@@ -73,9 +77,9 @@ export default {
       id: "bookmark",
       icon() {
         if (this.topic.bookmarks.some((bookmark) => bookmark.reminder_at)) {
-          return "discourse-bookmark-clock";
+          return WITH_REMINDER_ICON;
         }
-        return "bookmark";
+        return NO_REMINDER_ICON;
       },
       priority: BOOKMARK_PRIORITY,
       classNames() {
diff --git a/app/assets/javascripts/discourse/app/models/bookmark.js b/app/assets/javascripts/discourse/app/models/bookmark.js
index f2f1b2f6d6..56d6e12bdd 100644
--- a/app/assets/javascripts/discourse/app/models/bookmark.js
+++ b/app/assets/javascripts/discourse/app/models/bookmark.js
@@ -20,6 +20,9 @@ export const AUTO_DELETE_PREFERENCES = {
   ON_OWNER_REPLY: 2,
 };
 
+export const NO_REMINDER_ICON = "bookmark";
+export const WITH_REMINDER_ICON = "discourse-bookmark-clock";
+
 const Bookmark = RestModel.extend({
   newBookmark: none("id"),
 
diff --git a/app/assets/javascripts/discourse/app/templates/components/bookmark-icon.hbs b/app/assets/javascripts/discourse/app/templates/components/bookmark-icon.hbs
new file mode 100644
index 0000000000..cbb52a288f
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/templates/components/bookmark-icon.hbs
@@ -0,0 +1 @@
+{{d-icon icon translatedtitle=@bookmark.name}}
diff --git a/app/assets/javascripts/discourse/app/widgets/post-menu.js b/app/assets/javascripts/discourse/app/widgets/post-menu.js
index 9023b0ed76..5d0c7ac74f 100644
--- a/app/assets/javascripts/discourse/app/widgets/post-menu.js
+++ b/app/assets/javascripts/discourse/app/widgets/post-menu.js
@@ -6,6 +6,10 @@ import { h } from "virtual-dom";
 import showModal from "discourse/lib/show-modal";
 import { smallUserAtts } from "discourse/widgets/actions-summary";
 import I18n from "I18n";
+import {
+  NO_REMINDER_ICON,
+  WITH_REMINDER_ICON,
+} from "discourse/models/bookmark";
 
 const LIKE_ACTION = 2;
 const VIBRATE_DURATION = 5;
@@ -359,7 +363,7 @@ registerButton(
       title,
       titleOptions,
       className: classNames.join(" "),
-      icon: attrs.bookmarkReminderAt ? "discourse-bookmark-clock" : "bookmark",
+      icon: attrs.bookmarkReminderAt ? WITH_REMINDER_ICON : NO_REMINDER_ICON,
     };
   }
 );
diff --git a/app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js b/app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js
index 4be4dfbfca..da090a5c32 100644
--- a/app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js
+++ b/app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js
@@ -1,4 +1,8 @@
 import RawHtml from "discourse/widgets/raw-html";
+import {
+  NO_REMINDER_ICON,
+  WITH_REMINDER_ICON,
+} from "discourse/models/bookmark";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import QuickAccessPanel from "discourse/widgets/quick-access-panel";
 import { ajax } from "discourse/lib/ajax";
@@ -8,8 +12,6 @@ import { postUrl } from "discourse/lib/utilities";
 import I18n from "I18n";
 import { htmlSafe } from "@ember/template";
 
-const ICON = "bookmark";
-
 createWidget("no-quick-access-bookmarks", {
   html() {
     return h("div.empty-state", [
@@ -21,7 +23,7 @@ createWidget("no-quick-access-bookmarks", {
             "<p>" +
             htmlSafe(
               I18n.t("user.no_bookmarks_body", {
-                icon: iconHTML(ICON),
+                icon: iconHTML(NO_REMINDER_ICON),
               })
             ) +
             "</p>",
@@ -74,9 +76,9 @@ createWidgetFrom(QuickAccessPanel, "quick-access-bookmarks", {
 
   icon(bookmark) {
     if (bookmark.reminder_at) {
-      return "discourse-bookmark-clock";
+      return WITH_REMINDER_ICON;
     }
-    return ICON;
+    return NO_REMINDER_ICON;
   },
 
   loadBookmarksWithReminders() {
diff --git a/app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.js b/app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.js
new file mode 100644
index 0000000000..4d5134e2df
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.js
@@ -0,0 +1,45 @@
+import Bookmark from "discourse/models/bookmark";
+import componentTest, {
+  setupRenderingTest,
+} from "discourse/tests/helpers/component-test";
+import hbs from "htmlbars-inline-precompile";
+import { discourseModule, exists } from "discourse/tests/helpers/qunit-helpers";
+
+discourseModule("Component | bookmark-icon", function (hooks) {
+  setupRenderingTest(hooks);
+
+  componentTest("with reminder", {
+    template: hbs`{{bookmark-icon bookmark=bookmark}}`,
+
+    beforeEach() {
+      this.set(
+        "bookmark",
+        Bookmark.create({
+          reminder_at: moment(),
+          name: "some name",
+        })
+      );
+    },
+
+    async test(assert) {
+      assert.ok(exists(".d-icon-discourse-bookmark-clock"));
+    },
+  });
+
+  componentTest("no reminder", {
+    template: hbs`{{bookmark-icon bookmark=bookmark}}`,
+
+    beforeEach() {
+      this.set(
+        "bookmark",
+        Bookmark.create({
+          name: "some name",
+        })
+      );
+    },
+
+    async test(assert) {
+      assert.ok(exists(".d-icon-bookmark"));
+    },
+  });
+});