display flag in language picker

src/components/Header/components/LanguagePicker/index.js

@@ -15,12 +15,12 @@ const SelectWrapper = styled.div`
 
 const SelectIcon = styled.span`
     padding: 0px 6px;
-    margin-right: -20px;
+    margin-right: -38px;
 `;
 
 const StyledSelect = styled.select`
     height: 100%;
-    padding-left: 20px;
+    padding-left: 32px;
     border: 0;
     background: transparent;
     cursor: pointer;
@@ -33,7 +33,11 @@ const StyledSelect = styled.select`
 
 const LanguagePicker = ({ language, fetchLocale }: Props) => (
     <SelectWrapper>
-        <SelectIcon role="img" aria-label="Select language">🌎</SelectIcon>
+        <SelectIcon role="img" aria-label="Select language">
+            <svg width="32" height="24">
+                <image xlinkHref={`l10n/flags/${language}.svg`} width="32" height="24" />
+            </svg>
+        </SelectIcon>
         <StyledSelect
             onChange={e => fetchLocale(e.target.value)}
             value={language}