diff --git a/package-lock.json b/package-lock.json
index 67124bbfa7..1b29239074 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15279,6 +15279,11 @@
             "@babel/runtime": "^7.11.2",
             "global": "^4.4.0"
           }
+        },
+        "videojs-font": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
+          "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
         }
       }
     },
@@ -15291,9 +15296,9 @@
       }
     },
     "videojs-font": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
-      "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.0.0.tgz",
+      "integrity": "sha512-sRXrizXF0zBMatXjg2vGpn63G26uH3XqwyZ9PjU2H9xqGm7fRSVYuxOJCUME6us/1rFl9yxkRKk31WTQ7XZkww=="
     },
     "videojs-generate-karma-config": {
       "version": "8.0.1",
diff --git a/package.json b/package.json
index e65d98477a..a9f47b7447 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,7 @@
     "mux.js": "^6.2.0",
     "safe-json-parse": "4.0.0",
     "videojs-contrib-quality-levels": "3.0.0",
-    "videojs-font": "3.2.0",
+    "videojs-font": "4.0.0",
     "videojs-vtt.js": "0.15.4"
   },
   "devDependencies": {
diff --git a/sandbox/icons.html.example b/sandbox/icons.html.example
index f0675593c2..23ff5ca15b 100644
--- a/sandbox/icons.html.example
+++ b/sandbox/icons.html.example
@@ -16,6 +16,7 @@
 
   <ul class="icon-list">
     <li><span class="vjs-icon-play"></span> <code>.vjs-icon-play</code></li>
+    <li><span class="vjs-icon-play-circle"></span> <code>.vjs-icon-play-circle</code></li>
     <li><span class="vjs-icon-pause"></span> <code>.vjs-icon-pause</code></li>
     <li><span class="vjs-icon-volume-mute"></span> <code>.vjs-icon-volume-mute</code></li>
     <li><span class="vjs-icon-volume-low"></span> <code>.vjs-icon-volume-low</code></li>
@@ -23,48 +24,46 @@
     <li><span class="vjs-icon-volume-high"></span> <code>.vjs-icon-volume-high</code></li>
     <li><span class="vjs-icon-fullscreen-enter"></span> <code>.vjs-icon-fullscreen-enter</code></li>
     <li><span class="vjs-icon-fullscreen-exit"></span> <code>.vjs-icon-fullscreen-exit</code></li>
-    <li><span class="vjs-icon-square"></span> <code>.vjs-icon-square</code></li>
     <li><span class="vjs-icon-spinner"></span> <code>.vjs-icon-spinner</code></li>
     <li><span class="vjs-icon-subtitles"></span> <code>.vjs-icon-subtitles</code></li>
     <li><span class="vjs-icon-captions"></span> <code>.vjs-icon-captions</code></li>
+    <li><span class="vjs-icon-hd"></span> <code>.vjs-icon-hd</code></li>
     <li><span class="vjs-icon-chapters"></span> <code>.vjs-icon-chapters</code></li>
+    <li><span class="vjs-icon-downloading"></span> <code>.vjs-icon-downloading</code></li>
+    <li><span class="vjs-icon-file-download"></span> <code>.vjs-icon-file-download</code></li>
+    <li><span class="vjs-icon-file-download-done"></span> <code>.vjs-icon-file-download-download</code></li>
+    <li><span class="vjs-icon-file-download-off"></span> <code>.vjs-icon-file-download-off</code></li>
     <li><span class="vjs-icon-share"></span> <code>.vjs-icon-share</code></li>
     <li><span class="vjs-icon-cog"></span> <code>.vjs-icon-cog</code></li>
+    <li><span class="vjs-icon-square"></span> <code>.vjs-icon-square</code></li>
     <li><span class="vjs-icon-circle"></span> <code>.vjs-icon-circle</code></li>
     <li><span class="vjs-icon-circle-outline"></span> <code>.vjs-icon-circle-outline</code></li>
     <li><span class="vjs-icon-circle-inner-circle"></span> <code>.vjs-icon-circle-inner-circle</code></li>
-
-          <li><span class="play"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="play-circle"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="pause"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="volume-mute"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="volume-low"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="volume-mid"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="volume-high"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="fullscreen-enter"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="fullscreen-exit"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="square"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="spinner"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="subtitles"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="captions"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="chapters"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="share"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="cog"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="circle"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="circle-outline"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="circle-inner-circle"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="hd"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="cancel"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="replay"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="facebook"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="gplus"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="linkedin"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="twitter"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="tumblr"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="pinterest"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="audio-description"></span> <code>.vjs-icon-play</code></li>
-          <li><span class="audio"></span> <code>.vjs-icon-play</code></li>
-
+    <li><span class="vjs-icon-cancel"></span> <code>.vjs-icon-cancel</code></li>
+    <li><span class="vjs-icon-repeat"></span> <code>.vjs-icon-repeat</code></li>
+    <li><span class="vjs-icon-replay"></span> <code>.vjs-icon-replay</code></li>
+    <li><span class="vjs-icon-replay-5"></span> <code>.vjs-icon-replay-5</code></li>
+    <li><span class="vjs-icon-replay-10"></span> <code>.vjs-icon-replay-10</code></li>
+    <li><span class="vjs-icon-replay-30"></span> <code>.vjs-icon-replay-30</code></li>
+    <li><span class="vjs-icon-forward-5"></span> <code>.vjs-icon-forward-5</code></li>
+    <li><span class="vjs-icon-forward-10"></span> <code>.vjs-icon-forward-10</code></li>
+    <li><span class="vjs-icon-forward-30"></span> <code>.vjs-icon-forward-30</code></li>
+    <li><span class="vjs-icon-forward-30"></span> <code>.vjs-icon-forward-30</code></li>
+    <li><span class="vjs-icon-forward-30"></span> <code>.vjs-icon-forward-30</code></li>
+    <li><span class="vjs-icon-forward-30"></span> <code>.vjs-icon-forward-30</code></li>
+    <li><span class="vjs-icon-audio"></span> <code>.vjs-icon-audio</code></li>
+    <li><span class="vjs-icon-next-item"></span> <code>.vjs-next-item</code></li>
+    <li><span class="vjs-icon-previous-item"></span> <code>.vjs-icon-previous-item</code></li>
+    <li><span class="vjs-icon-shuffle"></span> <code>.vjs-icon-shuffle</code></li>
+    <li><span class="vjs-icon-cast"></span> <code>.vjs-icon-cast</code></li>
+    <li><span class="vjs-icon-picture-in-picture-enter"></span> <code>.vjs-icon-picture-in-picture-enter</code></li>
+    <li><span class="vjs-icon-picture-in-picture-exit"></span> <code>.vjs-icon-picture-in-picture-exit</code></li>
+    <li><span class="vjs-icon-facebook"></span> <code>.vjs-icon-facebook</code></li>
+    <li><span class="vjs-icon-linkedin"></span> <code>.vjs-icon-linkedin</code></li>
+    <li><span class="vjs-icon-twitter"></span> <code>.vjs-icon-twitter</code></li>
+    <li><span class="vjs-icon-tumblr"></span> <code>.vjs-icon-tumblr</code></li>
+    <li><span class="vjs-icon-pinterest"></span> <code>.vjs-icon-pinterest</code></li>
+    <li><span class="vjs-icon-audio-description"></span> <code>.vjs-icon-audio-description</code></li>
   </ul>
 </body>
 </html>
diff --git a/src/css/components/_audio.scss b/src/css/components/_audio.scss
index dc07e93e14..c8f064c33d 100644
--- a/src/css/components/_audio.scss
+++ b/src/css/components/_audio.scss
@@ -11,7 +11,7 @@
 // Mark a main-desc-menu-item (main + description) item with a trailing Audio Description icon
 .video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
   font-family: VideoJS;
-  content: " \f11d";
+  content: " \f12e";
   font-size: 1.5em;
   line-height: inherit;
 }
diff --git a/src/css/components/_subs-caps.scss b/src/css/components/_subs-caps.scss
index 89bc353892..859400e9f9 100644
--- a/src/css/components/_subs-caps.scss
+++ b/src/css/components/_subs-caps.scss
@@ -21,7 +21,7 @@
 }
 .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
   font-family: VideoJS;
-  content: "\f10d";
+  content: "\f10c";
   font-size: 1.5em;
   line-height: inherit;
 }