diff --git a/css/main.scss b/css/main.scss
index 3c822d513..6de4adb98 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -18,6 +18,11 @@
 
 /* Animations END */
 
+/* Flags BEGIN */
+$flagsImagePath: "/images/";
+@import "../node_modules/bc-css-flags/dist/css/bc-css-flags.scss";
+/* Flags END */
+
 /* Fonts BEGIN */
 
 @import 'font';
diff --git a/css/modals/invite/_info.scss b/css/modals/invite/_info.scss
index a2a50262e..3a642f46b 100644
--- a/css/modals/invite/_info.scss
+++ b/css/modals/invite/_info.scss
@@ -140,10 +140,13 @@
         border-bottom: 1px solid #d1dbe8;
     }
 
-    .flag {
-        border-bottom-style: none;
-        width: 30px;
+    .flag-cell {
         vertical-align: top;
+        width: 30px;
+    }
+    .flag {
+        display: block;
+        margin: 5px 5px 0px 5px;
     }
 
     .country {
diff --git a/images/flags.png b/images/flags.png
new file mode 100644
index 000000000..c5df72d92
Binary files /dev/null and b/images/flags.png differ
diff --git a/images/flags@2x.png b/images/flags@2x.png
new file mode 100644
index 000000000..f56257ab6
Binary files /dev/null and b/images/flags@2x.png differ
diff --git a/package-lock.json b/package-lock.json
index c429fd808..07372f134 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3298,6 +3298,11 @@
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
       "dev": true
     },
+    "bc-css-flags": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bc-css-flags/-/bc-css-flags-3.0.0.tgz",
+      "integrity": "sha1-OJWiPppx+VgE6u8V8WXVG5rV4hM="
+    },
     "bcrypt-pbkdf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
diff --git a/package.json b/package.json
index 69fd8be83..a543ebd8f 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@microsoft/microsoft-graph-client": "1.1.0",
     "@webcomponents/url": "0.7.1",
     "amplitude-js": "4.5.2",
+    "bc-css-flags": "3.0.0",
     "dropbox": "4.0.9",
     "i18n-iso-countries": "3.7.8",
     "i18next": "8.4.3",
diff --git a/react/features/invite/components/dial-in-summary/NumbersList.web.js b/react/features/invite/components/dial-in-summary/NumbersList.web.js
index d5a2c4303..3ff9b22fa 100644
--- a/react/features/invite/components/dial-in-summary/NumbersList.web.js
+++ b/react/features/invite/components/dial-in-summary/NumbersList.web.js
@@ -131,26 +131,18 @@ class NumbersList extends Component<Props> {
     }
 
     /**
-     * Renders a div container for a phone number.
+     * Renders a div container for a flag for the country of the phone number.
      *
-     * @param {string} countryCode - The phone number to display.
+     * @param {string} countryCode - The country code flag to display.
      * @private
      * @returns {ReactElement}
      */
     _renderFlag(countryCode) {
-        const OFFSET = 127397;
-
         if (countryCode) {
-            // ensure country code is all caps
-            const cc = countryCode.toUpperCase();
-
-            // return the emoji flag corresponding to country_code or null
-            const countryFlag = /^[A-Z]{2}$/.test(cc)
-                ? String.fromCodePoint(...[ ...cc ]
-                    .map(c => c.charCodeAt() + OFFSET))
-                : null;
-
-            return <td className = 'flag'>{ countryFlag }</td>;
+            return (
+                <td className = 'flag-cell'>
+                    <i className = { `flag iti-flag ${countryCode}` } />
+                </td>);
         }
 
         return null;