From 5ad47423e28791c8f3de4f410cbb191b7fc3fb4e Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Mon, 25 Feb 2019 19:37:24 +0100
Subject: [PATCH] display flag in language picker

---
 .../Header/components/LanguagePicker/index.js          | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Header/components/LanguagePicker/index.js b/src/components/Header/components/LanguagePicker/index.js
index c444fe11..62ec5363 100644
--- a/src/components/Header/components/LanguagePicker/index.js
+++ b/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}