diff --git a/web/styles/components.css b/web/styles/components.css
index b8ff014c87..5b4ad51225 100644
--- a/web/styles/components.css
+++ b/web/styles/components.css
@@ -64,7 +64,8 @@ a.no-style {
 }
 
 a.no-underline,
-a.no-underline:hover {
+a.no-underline:hover,
+a.no-underline:focus {
     text-decoration: none;
 }
 
diff --git a/web/styles/message_header.css b/web/styles/message_header.css
index d6667b5274..711985eca2 100644
--- a/web/styles/message_header.css
+++ b/web/styles/message_header.css
@@ -258,13 +258,6 @@
     flex-grow: 1;
     align-items: center;
 
-    .external-topic-link {
-        /* Vertically center the external link
-           icon inside its containing anchor. */
-        display: flex;
-        align-items: center;
-    }
-
     .change_visibility_policy {
         cursor: pointer;
 
diff --git a/web/templates/recipient_row.hbs b/web/templates/recipient_row.hbs
index 1bae8e7bb1..5d220060e7 100644
--- a/web/templates/recipient_row.hbs
+++ b/web/templates/recipient_row.hbs
@@ -40,9 +40,13 @@
 
             {{! exterior links (e.g. to a trac ticket) }}
             {{#each topic_links}}
-                <a href="{{this.url}}" target="_blank" rel="noopener noreferrer" class="external-topic-link recipient-bar-control no-underline">
-                    <i class="fa fa-external-link-square recipient_bar_icon" data-tippy-content="Open {{this.text}}" aria-label="{{t 'External link' }}"></i>
-                </a>
+                {{#with this}}
+                    {{!-- TODO: Find a way to use the icon_button component with <a> tags,
+                    instead of copying over the icon button styles via the utility classes. --}}
+                    <a href="{{url}}" target="_blank" rel="noopener noreferrer" class="recipient-bar-control recipient-bar-control-icon no-underline icon-button icon-button-neutral" data-tippy-content="{{t 'Open {text}' }}" aria-label="{{t 'Open {text}' }}" tabindex="0">
+                        <i class="zulip-icon zulip-icon-external-link" aria-hidden="true"></i>
+                    </a>
+                {{/with}}
             {{/each}}
 
             {{! edit topic pencil icon }}