diff --git a/client/scss/components/_dropdown.scss b/client/scss/components/_dropdown.scss
index 677814c634..1898b12c7d 100644
--- a/client/scss/components/_dropdown.scss
+++ b/client/scss/components/_dropdown.scss
@@ -39,10 +39,6 @@
 }
 
 .c-dropdown__togle--icon {
-  &:before {
-    display: none; // TODO: remove when iconfont styles are removed
-  }
-
   .icon {
     @include svg-icon(1em, middle);
   }
diff --git a/client/src/entrypoints/admin/core.js b/client/src/entrypoints/admin/core.js
index 192fb065aa..5f2415646b 100644
--- a/client/src/entrypoints/admin/core.js
+++ b/client/src/entrypoints/admin/core.js
@@ -308,11 +308,8 @@ if (!wagtail.ui) {
 const DROPDOWN_SELECTOR = '[data-dropdown]';
 const LISTING_TITLE_SELECTOR = '[data-listing-page-title]';
 const LISTING_ACTIVE_CLASS = 'listing__item--active';
-const ICON_DOWN = 'icon-arrow-down';
-const ICON_UP = 'icon-arrow-up';
 const IS_OPEN = 'is-open';
 const clickEvent = 'click';
-const TOGGLE_SELECTOR = '[data-dropdown-toggle]';
 const ARIA = 'aria-hidden';
 const keys = {
   ESC: 27,
@@ -426,15 +423,12 @@ DropDown.prototype = {
     e.preventDefault();
     const el = this.el;
     const $parent = this.$parent;
-    const toggle = el.querySelector(TOGGLE_SELECTOR);
 
     this.state.isOpen = true;
     this.registry.closeAllExcept(this);
 
     el.classList.add(IS_OPEN);
     el.setAttribute(ARIA, false);
-    toggle.classList.remove(ICON_DOWN);
-    toggle.classList.add(ICON_UP);
     document.addEventListener(clickEvent, this.clickOutsideDropDown, false);
     $parent.addClass(LISTING_ACTIVE_CLASS);
   },
@@ -444,11 +438,8 @@ DropDown.prototype = {
 
     const el = this.el;
     const $parent = this.$parent;
-    const toggle = el.querySelector(TOGGLE_SELECTOR);
     document.removeEventListener(clickEvent, this.clickOutsideDropDown, false);
     el.classList.remove(IS_OPEN);
-    toggle.classList.add(ICON_DOWN);
-    toggle.classList.remove(ICON_UP);
     el.setAttribute(ARIA, true);
     $parent.removeClass(LISTING_ACTIVE_CLASS);
   },
diff --git a/wagtail/admin/templates/wagtailadmin/pages/listing/_button_with_dropdown.html b/wagtail/admin/templates/wagtailadmin/pages/listing/_button_with_dropdown.html
index 771a0d80f9..d7b08ae675 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/listing/_button_with_dropdown.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/listing/_button_with_dropdown.html
@@ -2,7 +2,7 @@
 <div {{ self.attrs }} class="c-dropdown  {% if is_parent %}t-inverted{% else %}t-default{% endif %} {{ classes|join:' ' }}" data-dropdown>
     <a href="javascript:void(0)" aria-label="{{ title }}" class="c-dropdown__button u-btn-current {{button_classes|join:' ' }}">
         {{ label }}
-        <div data-dropdown-toggle class="o-icon c-dropdown__toggle c-dropdown__togle--icon [ icon icon-arrow-down ]">
+        <div data-dropdown-toggle class="o-icon c-dropdown__toggle c-dropdown__togle--icon">
             {% icon name="arrow-down" %}{% icon name="arrow-up" %}
         </div>
     </a>
diff --git a/wagtail/admin/templates/wagtailadmin/shared/locale_selector.html b/wagtail/admin/templates/wagtailadmin/shared/locale_selector.html
index 65c9f04890..bc0406f48a 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/locale_selector.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/locale_selector.html
@@ -5,7 +5,7 @@
         <a href="javascript:void(0)" aria-label="{{ locale.get_display_name }}" class="c-dropdown__button u-btn-current w-no-underline">
             {% icon name="site" classname="default" %}
             {{ locale.get_display_name }}
-            <div data-dropdown-toggle class="o-icon c-dropdown__toggle c-dropdown__togle--icon [ icon icon-arrow-down ]">
+            <div data-dropdown-toggle class="o-icon c-dropdown__toggle c-dropdown__togle--icon">
                 {% icon name="arrow-down" %}{% icon name="arrow-up" %}
             </div>
         </a>
diff --git a/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html b/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
index 09df9d3ff8..4f2b08fe78 100644
--- a/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
+++ b/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
@@ -360,7 +360,7 @@
 
                 <div class="col3">
                     <div class="dropdown dropup dropdown-button match-width">
-                        <button value="drop up" class="button icon icon-view">icon dropup</button>
+                        <button value="drop up" class="button">{% icon name="view" %}icon dropup</button>
                         <div class="dropdown-toggle">{% icon name="arrow-up" %}</div>
                         <ul>
                             <li><a href="#">item 1</a></li>
@@ -386,7 +386,7 @@
                 <div class="col3">
                     <div class="dropdown dropdown-button dropdown-button--white">
                         <a href="#" class="button" value="drop down">White drop down</a>
-                        <div class="dropdown-toggle icon icon-arrow-down"></div>
+                        <div class="dropdown-toggle">{% icon name="arrow-down" %}</div>
                         <ul>
                             <li><a href="#">items should not exceed button match-width</a></li>
                             <li><a href="#">item 2</a></li>
@@ -410,7 +410,7 @@
                 <div class="c-dropdown t-default" data-dropdown="">
                     <a class="c-dropdown__button  u-btn-current">
                         More
-                        <div data-dropdown-toggle="" class="o-icon  c-dropdown__toggle c-dropdown__togle--icon  [ icon icon-arrow-down ]">
+                        <div data-dropdown-toggle="" class="o-icon  c-dropdown__toggle c-dropdown__togle--icon">
                             {% icon name="arrow-down" %}
                             {% icon name="arrow-up" %}
                         </div>
@@ -449,7 +449,7 @@
                 <div class="c-dropdown t-inverted" data-dropdown="">
                     <a class="c-dropdown__button  u-btn-current">
                         More
-                        <div data-dropdown-toggle="" class="o-icon  c-dropdown__toggle c-dropdown__togle--icon  [ icon icon-arrow-down ]">
+                        <div data-dropdown-toggle="" class="o-icon  c-dropdown__toggle c-dropdown__togle--icon">
                             {% icon name="arrow-down" %}
                             {% icon name="arrow-up" %}
                         </div>