diff --git a/src/components/EmojiPicker/EmojiSkinToneList.js b/src/components/EmojiPicker/EmojiSkinToneList.js
index f8e2595368c5..45dc28755592 100644
--- a/src/components/EmojiPicker/EmojiSkinToneList.js
+++ b/src/components/EmojiPicker/EmojiSkinToneList.js
@@ -67,7 +67,7 @@ class EmojiSkinToneList extends Component {
                                 styles.alignItemsCenter,
                             ]}
                         >
-                            <Text style={[styles.emojiText, styles.ph2, styles.emojiItem]}>
+                            <Text style={[styles.emojiText, styles.ph2, styles.emojiItem, styles.textNoWrap]}>
                                 {selectedEmoji.code}
                             </Text>
                             <Text style={[styles.emojiSkinToneTitle]}>
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index 4d066a08f22b..459e904a0bba 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -52,6 +52,10 @@ const BaseHTMLEngineProvider = (props) => {
     // We need to memoize this prop to make it referentially stable.
     const defaultTextProps = useMemo(() => ({selectable: props.textSelectable}), [props.textSelectable]);
 
+    // We need to pass multiple system-specific fonts for emojis but
+    // we can't apply multiple fonts at once so we need to pass fallback fonts.
+    const fallbackFonts = {'GTAmericaExp-Regular': fontFamily.EMOJI_TEXT_FONT};
+
     return (
         <TRenderEngineProvider
             customHTMLElementModels={customHTMLElementModels}
@@ -59,6 +63,7 @@ const BaseHTMLEngineProvider = (props) => {
             tagsStyles={styles.webViewStyles.tagStyles}
             enableCSSInlineProcessing={false}
             systemFonts={_.values(fontFamily)}
+            fallbackFonts={fallbackFonts}
         >
             <RenderHTMLConfigProvider
                 defaultTextProps={defaultTextProps}
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index ae62f0010789..4d4d444ffd81 100644
--- a/src/pages/home/report/ReportActionItemFragment.js
+++ b/src/pages/home/report/ReportActionItemFragment.js
@@ -117,6 +117,7 @@ const ReportActionItemFragment = (props) => {
             }
             return (
                 <Text
+                    family="EMOJI_TEXT_FONT"
                     selectable={!canUseTouchScreen() || !props.isSmallScreenWidth}
                     style={[EmojiUtils.containsOnlyEmojis(text) ? styles.onlyEmojisText : undefined, styles.ltr]}
                 >
diff --git a/src/styles/fontFamily/emoji/index.js b/src/styles/fontFamily/emoji/index.js
new file mode 100644
index 000000000000..5a1a79984b43
--- /dev/null
+++ b/src/styles/fontFamily/emoji/index.js
@@ -0,0 +1,5 @@
+// In windows and ubuntu, we need these system fonts for emojis to work properly
+// otherwise few of them will appear as black and white
+const emojiFont = 'GTAmericaExp-Regular, Segoe UI Emoji, Noto Color Emoji';
+
+export default emojiFont;
diff --git a/src/styles/fontFamily/emoji/index.native.js b/src/styles/fontFamily/emoji/index.native.js
new file mode 100644
index 000000000000..741981bb514f
--- /dev/null
+++ b/src/styles/fontFamily/emoji/index.native.js
@@ -0,0 +1,3 @@
+const emojiFont = 'GTAmericaExp-Regular';
+
+export default emojiFont;
diff --git a/src/styles/fontFamily/index.js b/src/styles/fontFamily/index.js
index 5c7ef62497a0..33b4fb53f30f 100644
--- a/src/styles/fontFamily/index.js
+++ b/src/styles/fontFamily/index.js
@@ -1,4 +1,5 @@
 import bold from '../bold';
+import emojiFont from './emoji';
 
 const fontFamily = {
     GTA_ITALIC: 'GTAmericaExp-RgIt',
@@ -9,6 +10,7 @@ const fontFamily = {
     MONOSPACE_ITALIC: 'GTAmericaExpMono-RgIt',
     MONOSPACE_BOLD: 'GTAmericaExpMono-Bd',
     MONOSPACE_BOLD_ITALIC: 'GTAmericaExpMono-BdIt',
+    EMOJI_TEXT_FONT: emojiFont,
 };
 
 export default fontFamily;
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 36a4d7eaea40..1b93109fb606 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1397,7 +1397,7 @@ const styles = {
         backgroundColor: themeColors.componentBG,
         borderColor: themeColors.border,
         color: themeColors.text,
-        fontFamily: fontFamily.GTA,
+        fontFamily: fontFamily.EMOJI_TEXT_FONT,
         fontSize: variables.fontSizeNormal,
         borderWidth: 0,
         borderRadius: 0,
@@ -1474,7 +1474,7 @@ const styles = {
 
     // Emoji Picker Styles
     emojiText: {
-        fontFamily: fontFamily.GTA_BOLD,
+        fontFamily: fontFamily.EMOJI_TEXT_FONT,
         textAlign: 'center',
         fontSize: variables.emojiSize,
         ...spacing.pv0,