diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 6100e564f2..31b604d70a 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -5,6 +5,7 @@ Changelog
 ~~~~~~~~~~~~~~~~~
 
  * Added support for Python 3.9
+ * Switch pagination icons to use SVG instead of icon fonts (Scott Cranfill)
  * Fix: Stop menu icon overlapping the breadcrumb on small viewport widths in page editor (Karran Besen)
  * Fix: Make sure document chooser pagination preserves the selected collection when moving between pages (Alex Sa)
 
diff --git a/docs/releases/2.12.rst b/docs/releases/2.12.rst
index 1d608d0b96..9f0f3e33d0 100644
--- a/docs/releases/2.12.rst
+++ b/docs/releases/2.12.rst
@@ -15,6 +15,7 @@ Other features
 ~~~~~~~~~~~~~~
 
  * Added support for Python 3.9
+ * Switch pagination icons to use SVG instead of icon fonts (Scott Cranfill)
 
 
 Bug fixes
diff --git a/wagtail/admin/templates/wagtailadmin/pages/listing/_pagination.html b/wagtail/admin/templates/wagtailadmin/pages/listing/_pagination.html
index b9f7dd3f5b..03c0327d67 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/listing/_pagination.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/listing/_pagination.html
@@ -11,12 +11,18 @@ Pagination for page listings. Used by the `{% paginate %}` template tag.
     <ul>
         <li class="prev">
             {% if page.has_previous %}
-                <a data-page="{{ page.previous_page_number }}" href="{{ base_url }}{% pagination_querystring page.previous_page_number page_key=page_key %}" class="icon icon-arrow-left {{ classnames }}">{% trans "Previous" %}</a>
+                <a data-page="{{ page.previous_page_number }}" href="{{ base_url }}{% pagination_querystring page.previous_page_number page_key=page_key %}" class="{{ classnames }}">
+                    {% icon name="arrow-left" class_name="default" %}
+                    {% trans "Previous" %}
+                </a>
             {% endif %}
         </li>
         <li class="next">
             {% if page.has_next %}
-                <a data-page="{{ page.next_page_number }}" href="{{ base_url }}{% pagination_querystring page.next_page_number page_key=page_key %}" class="icon icon-arrow-right-after {{ classnames }}">{% trans "Next" %}</a>
+                <a data-page="{{ page.next_page_number }}" href="{{ base_url }}{% pagination_querystring page.next_page_number page_key=page_key %}" class="{{ classnames }}">
+                    {% trans "Next" %}
+                    {% icon name="arrow-right" class_name="default" %}
+                </a>
             {% endif %}
         </li>
     </ul>
diff --git a/wagtail/admin/templates/wagtailadmin/shared/ajax_pagination_nav.html b/wagtail/admin/templates/wagtailadmin/shared/ajax_pagination_nav.html
index db20b29999..0863820753 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/ajax_pagination_nav.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/ajax_pagination_nav.html
@@ -6,12 +6,18 @@
     <ul>
         <li class="prev">
             {% if items.has_previous %}
-                <a href="#" data-page="{{ items.previous_page_number }}" class="icon icon-arrow-left">{% trans 'Previous' %}</a>
+                <a href="#" data-page="{{ items.previous_page_number }}">
+                    {% icon name="arrow-left" class_name="default" %}
+                    {% trans 'Previous' %}
+                </a>
             {% endif %}
         </li>
         <li class="next">
             {% if items.has_next %}
-                <a href="#" data-page="{{ items.next_page_number }}" class="icon icon-arrow-right-after">{% trans 'Next' %}</a>
+                <a href="#" data-page="{{ items.next_page_number }}">
+                    {% trans 'Next' %}
+                    {% icon name="arrow-right" class_name="default" %}
+                </a>
             {% endif %}
         </li>
     </ul>
diff --git a/wagtail/admin/templates/wagtailadmin/shared/pagination_nav.html b/wagtail/admin/templates/wagtailadmin/shared/pagination_nav.html
index d57e06fb54..c0753c92e3 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/pagination_nav.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/pagination_nav.html
@@ -18,12 +18,18 @@
     <ul>
         <li class="prev">
             {% if items.has_previous %}
-                <a href="{{ url_to_use }}{% querystring p=items.previous_page_number %}" class="icon icon-arrow-left">{% trans 'Previous' %}</a>
+                <a href="{{ url_to_use }}{% querystring p=items.previous_page_number %}">
+                    {% icon name="arrow-left" class_name="default" %}
+                    {% trans 'Previous' %}
+                </a>
             {% endif %}
         </li>
         <li class="next">
             {% if items.has_next %}
-                <a href="{{ url_to_use }}{% querystring p=items.next_page_number %}" class="icon icon-arrow-right-after">{% trans 'Next' %}</a>
+                <a href="{{ url_to_use }}{% querystring p=items.next_page_number %}">
+                    {% trans 'Next' %}
+                    {% icon name="arrow-right" class_name="default" %}
+                </a>
             {% endif %}
         </li>
     </ul>
diff --git a/wagtail/contrib/modeladmin/templatetags/modeladmin_tags.py b/wagtail/contrib/modeladmin/templatetags/modeladmin_tags.py
index 3498055b0d..ec28196f32 100644
--- a/wagtail/contrib/modeladmin/templatetags/modeladmin_tags.py
+++ b/wagtail/contrib/modeladmin/templatetags/modeladmin_tags.py
@@ -101,11 +101,13 @@ def result_list(context):
 def pagination_link_previous(current_page, view):
     if current_page.has_previous():
         previous_page_number0 = current_page.previous_page_number() - 1
+        tpl = get_template('wagtailadmin/shared/icon.html')
+        icon_svg = tpl.render({'name': 'arrow-left', 'class_name': 'default'})
         return format_html(
-            '<li class="prev"><a href="%s" class="icon icon-arrow-left">%s'
-            '</a></li>' %
-            (view.get_query_string({view.PAGE_VAR: previous_page_number0}),
-                _('Previous'))
+            '<li class="prev"><a href="{}">{} {}</a></li>',
+            view.get_query_string({view.PAGE_VAR: previous_page_number0}),
+            icon_svg,
+            _('Previous')
         )
     return ''
 
@@ -114,11 +116,13 @@ def pagination_link_previous(current_page, view):
 def pagination_link_next(current_page, view):
     if current_page.has_next():
         next_page_number0 = current_page.next_page_number() - 1
+        tpl = get_template('wagtailadmin/shared/icon.html')
+        icon_svg = tpl.render({'name': 'arrow-right', 'class_name': 'default'})
         return format_html(
-            '<li class="next"><a href="%s" class="icon icon-arrow-right-after"'
-            '>%s</a></li>' %
-            (view.get_query_string({view.PAGE_VAR: next_page_number0}),
-                _('Next'))
+            '<li class="next"><a href="{}">{} {}</a></li>',
+            view.get_query_string({view.PAGE_VAR: next_page_number0}),
+            _('Next'),
+            icon_svg
         )
     return ''