diff --git a/help-beta/src/components/NavigationSteps.astro b/help-beta/src/components/NavigationSteps.astro
index f70e366e86..4a80ceb88c 100644
--- a/help-beta/src/components/NavigationSteps.astro
+++ b/help-beta/src/components/NavigationSteps.astro
@@ -169,7 +169,7 @@ type RelativeLinkInfo = {
 const default_template_for_relative_links = `
 <ol>
   <li>Click on the <strong>gear</strong> (${RawZulipIconGear}) icon in the upper right corner of the web or desktop app.</li>
-  <li>Select {item}.</li>
+  <li class="navigation-step-relative-type">Select {item}.</li>
 </ol>
 `;
 
@@ -184,27 +184,27 @@ const relative_link_mapping: Record<
     gear: {
         data: {
             "channel-settings": {
-                label: `${RawZulipIconHash} Channel settings`,
+                label: `${RawZulipIconHash}Channel settings`,
                 relative_link: "/#channels/subscribed",
             },
             settings: {
-                label: `${RawZulipIconTool} Personal Settings`,
+                label: `${RawZulipIconTool}Personal Settings`,
                 relative_link: "/#settings/profile",
             },
             "organization-settings": {
-                label: `${RawZulipIconBuilding} Organization settings`,
+                label: `${RawZulipIconBuilding}Organization settings`,
                 relative_link: "/#organization/organization-profile",
             },
             "group-settings": {
-                label: `${RawZulipIconUserGroupCog} Group settings`,
+                label: `${RawZulipIconUserGroupCog}Group settings`,
                 relative_link: "/#groups/your",
             },
             stats: {
-                label: `${RawZulipIconBarChart} Usage statistics`,
+                label: `${RawZulipIconBarChart}Usage statistics`,
                 relative_link: "/stats",
             },
             integrations: {
-                label: `${RawZulipIconGitPullRequest} Integrations`,
+                label: `${RawZulipIconGitPullRequest}Integrations`,
                 relative_link: "/integrations/",
             },
             "about-zulip": {
@@ -218,11 +218,11 @@ const relative_link_mapping: Record<
     "gear-billing": {
         data: {
             plans: {
-                label: `${RawZulipIconRocket} Plans and pricing`,
+                label: `${RawZulipIconRocket}Plans and pricing`,
                 relative_link: "/plans/",
             },
             billing: {
-                label: `${RawZulipIconCreditCard} Billing`,
+                label: `${RawZulipIconCreditCard}Billing`,
                 relative_link: "/billing/",
             },
         },
@@ -232,26 +232,26 @@ const relative_link_mapping: Record<
     help: {
         data: {
             "keyboard-shortcuts": {
-                label: `${RawZulipIconKeyboard} Keyboard shortcuts`,
+                label: `${RawZulipIconKeyboard}Keyboard shortcuts`,
                 relative_link: "/#keyboard-shortcuts",
             },
             "message-formatting": {
-                label: `${RawZulipIconEdit} Message formatting`,
+                label: `${RawZulipIconEdit}Message formatting`,
                 relative_link: "/#message-formatting",
             },
             "search-filters": {
-                label: `${RawZulipIconManageSearch} Search filters`,
+                label: `${RawZulipIconManageSearch}Search filters`,
                 relative_link: "/#search-operators",
             },
             "about-zulip": {
-                label: `${RawZulipIconInfo} About Zulip`,
+                label: `${RawZulipIconInfo}About Zulip`,
                 relative_link: "/#about-zulip",
             },
         },
         template: `
 <ol>
   <li>Click on the <strong>Help menu</strong> (${RawZulipIconHelp}) icon in the upper right corner of the app.</li>
-  <li>Select {item}.</li>
+  <li class="navigation-step-relative-type">Select {item}.</li>
 </ol>
 `,
         is_link_relative: () => SHOW_RELATIVE_LINKS,
diff --git a/help-beta/src/styles/main.css b/help-beta/src/styles/main.css
index 96b9f4ed52..58fa477cf9 100644
--- a/help-beta/src/styles/main.css
+++ b/help-beta/src/styles/main.css
@@ -57,6 +57,14 @@
     fill: currentcolor;
 }
 
+.navigation-step-relative-type .zulip-unplugin-icon {
+    /* There's no space between the icon and text for navigation
+    step labels because of any text decoration rules when these
+    steps have a relative link. So we add a right margin to the
+    icon to add the white space without any text decoration. */
+    margin-right: 4px;
+}
+
 .aside-icon-lightbulb {
     /* We need to make the fill transparent for the bulb to look hollow
        and the default vertical-align of text-bottom was not looking