--- a/toolkit/mozapps/extensions/content/aboutaddons.css
+++ b/toolkit/mozapps/extensions/content/aboutaddons.css
@@ -115,22 +115,34 @@ addon-list addon-card > .addon.card {
   line-height: 22px;
   margin-inline-end: 8px;
 }
 
 .addon-badge {
   width: 16px;
   height: 16px;
   background-size: 16px;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-inline-end: 8px;
 }
 
 .addon-badge-private-browsing-allowed {
   background-image: url("chrome://browser/skin/private-browsing.svg");
 }
 
+.addon-badge-recommended {
+  background-color: var(--orange-50);
+  background-image: url("chrome://mozapps/skin/extensions/recommended.svg");
+  background-size: 10px;
+  border-radius: 8px;
+  fill: #fff;
+  -moz-context-properties: fill;
+}
+
 .addon-description {
   font-size: 14px;
   line-height: 20px;
   color: var(--in-content-deemphasized-text);
   font-weight: 400;
 }
 
 /* Prevent the content from wrapping unless expanded. */

--- a/toolkit/mozapps/extensions/content/aboutaddons.html
+++ b/toolkit/mozapps/extensions/content/aboutaddons.html
@@ -55,19 +55,22 @@
     <template name="card">
       <div class="card addon">
         <img class="card-heading-image">
         <div class="addon-card-collapsed">
           <img class="card-heading-icon addon-icon">
           <div class="card-contents">
             <div class="addon-name-container">
               <span class="addon-name"></span>
+              <div class="addon-badge addon-badge-recommended"
+                   data-l10n-id="addon-badge-recommended"
+                   hidden></div>
               <div class="addon-badge addon-badge-private-browsing-allowed"
-                    data-l10n-id="addon-badge-private-browsing-allowed"
-                    hidden></div>
+                   data-l10n-id="addon-badge-private-browsing-allowed"
+                   hidden></div>
             </div>
             <span class="addon-description"></span>
           </div>
           <div class="more-options-menu">
             <button class="more-options-button ghost-button" action="more-options"></button>
           </div>
         </div>
       </div>

--- a/toolkit/mozapps/extensions/content/aboutaddons.js
+++ b/toolkit/mozapps/extensions/content/aboutaddons.js
@@ -1634,16 +1634,20 @@ class AddonCard extends HTMLElement {
         addon.incognito != "not_allowed") {
       // Keep update synchronous, the badge can appear later.
       isAllowedInPrivateBrowsing(addon).then(isAllowed => {
         card.querySelector(".addon-badge-private-browsing-allowed")
           .hidden = !isAllowed;
       });
     }
 
+    // Show the recommended badge if needed.
+    card.querySelector(".addon-badge-recommended")
+      .hidden = !addon.isRecommended;
+
     // Update description.
     card.querySelector(".addon-description").textContent = addon.description;
 
     // Update the details if they're shown.
     if (this.details) {
       this.details.update();
     }
 

--- a/toolkit/mozapps/extensions/test/browser/browser.ini
+++ b/toolkit/mozapps/extensions/test/browser/browser.ini
@@ -87,16 +87,17 @@ skip-if = os == 'linux' && !debug # Bug 
 [browser_html_list_view_recommendations.js]
 [browser_html_message_bar.js]
 [browser_html_named_deck.js]
 [browser_html_options_ui.js]
 [browser_html_options_ui_in_tab.js]
 [browser_html_plugins.js]
 skip-if = (os == 'win' && processor == 'aarch64') # aarch64 has no plugin support, bug 1525174 and 1547495
 [browser_html_recent_updates.js]
+[browser_html_recommendations.js]
 [browser_html_updates.js]
 [browser_inlinesettings_browser.js]
 skip-if = os == 'mac' || os == 'linux' # Bug 1483347
 [browser_installssl.js]
 skip-if = verify
 [browser_interaction_telemetry.js]
 [browser_langpack_signing.js]
 [browser_legacy.js]

new file mode 100644
--- /dev/null
+++ b/toolkit/mozapps/extensions/test/browser/browser_html_recommendations.js
@@ -0,0 +1,61 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint max-len: ["error", 80] */
+
+"use strict";
+
+add_task(async function setup() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["extensions.htmlaboutaddons.enabled", true]],
+  });
+});
+
+async function checkRecommendedBadge(id, hidden) {
+  function checkBadge() {
+    let card = win.document.querySelector(`addon-card[addon-id="${id}"]`);
+    let badge = card.querySelector(".addon-badge-recommended");
+    is(badge.hidden, hidden, `badge is ${hidden ? "hidden" : "shown"}`);
+    return card;
+  }
+
+  let win = await loadInitialView("extension");
+
+  // Check list view.
+  let card = checkBadge();
+
+  // Load detail view.
+  let loaded = waitForViewLoad(win);
+  card.querySelector('[action="expand"]').click();
+  await loaded;
+
+  // Check detail view.
+  checkBadge();
+
+  await closeView(win);
+}
+
+add_task(async function testNotRecommended() {
+  let id = "not-recommended@mochi.test";
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {applications: {gecko: {id}}},
+    useAddonManager: "temporary",
+  });
+  await extension.startup();
+
+  await checkRecommendedBadge(id, true);
+
+  await extension.unload();
+});
+
+add_task(async function testRecommended() {
+  let id = "recommended@mochi.test";
+  let provider = new MockProvider();
+  provider.createAddons([{
+    id,
+    isRecommended: true,
+    name: "Recommended",
+    type: "extension",
+  }]);
+
+  await checkRecommendedBadge(id, false);
+});

new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/extensions/recommended.svg
@@ -0,0 +1,5 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <g fill="context-fill">
+    <path d="M11.45 0H.55C.25 0 0 .22 0 .5V3c0 1.1.98 2 2.18 2h.05a3.67 3.67 0 0 0 3.22 2.96V9.5h1.1V7.96A3.67 3.67 0 0 0 9.77 5h.05C11.02 5 12 4.1 12 3V.5c0-.28-.24-.5-.55-.5zM1.1 3V1h1.1v3c-.61 0-1.1-.45-1.1-1zm9.82 0c0 .55-.49 1-1.1 1V1h1.1v2zM7.1 10H4.9c-2.72 0-2.72 2-2.72 2h7.64s0-2-2.73-2z"/>
+  </g>
+</svg>

--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -73,16 +73,17 @@
   --grey-90-a30: rgba(12, 12, 13, 0.3);
   --grey-90-a50: rgba(12, 12, 13, 0.5);
   --grey-90-a60: rgba(12, 12, 13, 0.6);
   --green-50: #30e60b;
   --green-60: #12bc00;
   --green-70: #058b00;
   --green-80: #006504;
   --green-90: #003706;
+  --orange-50: #ff9400;
   --purple-70: #6200a4;
   --purple-70-a40: rgba(98, 0, 164, 0.4);
   --red-50: #ff0039;
   --red-50-a30: rgba(255, 0, 57, 0.3);
   --red-60: #d70022;
   --red-70: #a4000f;
   --red-80: #5a0002;
   --red-90: #3e0200;

--- a/toolkit/themes/shared/mozapps.inc.mn
+++ b/toolkit/themes/shared/mozapps.inc.mn
@@ -18,16 +18,17 @@
 
   skin/classic/mozapps/extensions/extensionGeneric-16.svg    (../../shared/extensions/extensionGeneric-16.svg)
   skin/classic/mozapps/extensions/utilities.svg              (../../shared/extensions/utilities.svg)
   skin/classic/mozapps/extensions/alerticon-warning.svg      (../../shared/extensions/alerticon-warning.svg)
   skin/classic/mozapps/extensions/alerticon-error.svg        (../../shared/extensions/alerticon-error.svg)
   skin/classic/mozapps/extensions/alerticon-info-positive.svg (../../shared/extensions/alerticon-info-positive.svg)
   skin/classic/mozapps/extensions/alerticon-info-negative.svg (../../shared/extensions/alerticon-info-negative.svg)
   skin/classic/mozapps/extensions/category-legacy.svg        (../../shared/extensions/category-legacy.svg)
+  skin/classic/mozapps/extensions/recommended.svg            (../../shared/extensions/recommended.svg)
 #ifndef ANDROID
   skin/classic/mozapps/extensions/rating-star.svg            (../../shared/extensions/rating-star.svg)
 #endif
   skin/classic/mozapps/aboutNetworking.css                   (../../shared/aboutNetworking.css)
 #ifndef ANDROID
   skin/classic/mozapps/aboutProfiles.css                     (../../shared/aboutProfiles.css)
 #endif
   skin/classic/mozapps/aboutServiceWorkers.css               (../../shared/aboutServiceWorkers.css)