diff --git a/browser/components/translation/translation-infobar.xml b/browser/components/translation/translation-infobar.xml
index de793c47ef2e..7db064a00899 100644
--- a/browser/components/translation/translation-infobar.xml
+++ b/browser/components/translation/translation-infobar.xml
@@ -21,7 +21,7 @@
     <content>
       <xul:hbox class="notification-inner outset" flex="1" xbl:inherits="type">
         <xul:hbox anonid="details" align="center" flex="1">
-          <xul:image anonid="messageImage" class="messageImage" xbl:inherits="src=image,type,value"/>
+          <xul:image anonid="messageImage" class="messageImage"/>
           <xul:deck anonid="translationStates" selectedIndex="0">
 
             <!-- offer to translate -->
@@ -107,6 +107,15 @@
           if (activeElt && deck.contains(activeElt))
             activeElt.blur();
 
+          let stateName;
+          for (let name of ["OFFER", "TRANSLATING", "TRANSLATED", "ERROR"]) {
+            if (this.translation["STATE_" + name] == val) {
+              stateName = name.toLowerCase();
+              break;
+            }
+          }
+          this.setAttribute("state", stateName);
+
           deck.selectedIndex = val;
           ]]>
         </setter>
diff --git a/browser/themes/linux/jar.mn b/browser/themes/linux/jar.mn
index 2d3cb2d7caf3..5116b3d1ce11 100644
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -180,6 +180,7 @@ browser.jar:
   skin/classic/browser/tabview/stack-expander.png     (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png            (tabview/tabview.png)
   skin/classic/browser/tabview/tabview.css            (tabview/tabview.css)
+  skin/classic/browser/translating-16.png             (../shared/translation/translating-16.png)
   skin/classic/browser/translation-16.png             (../shared/translation/translation-16.png)
 * skin/classic/browser/devtools/common.css            (../shared/devtools/common.css)
 * skin/classic/browser/devtools/dark-theme.css        (../shared/devtools/dark-theme.css)
diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn
index 1cf896bb82c6..23b0eb974126 100644
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -297,6 +297,8 @@ browser.jar:
   skin/classic/browser/tabview/stack-expander.png           (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png                  (tabview/tabview.png)
   skin/classic/browser/tabview/tabview.css                  (tabview/tabview.css)
+  skin/classic/browser/translating-16.png                   (../shared/translation/translating-16.png)
+  skin/classic/browser/translating-16@2x.png                (../shared/translation/translating-16@2x.png)
   skin/classic/browser/translation-16.png                   (../shared/translation/translation-16.png)
   skin/classic/browser/translation-16@2x.png                (../shared/translation/translation-16@2x.png)
 * skin/classic/browser/devtools/common.css                  (../shared/devtools/common.css)
diff --git a/browser/themes/shared/translation/infobar.inc.css b/browser/themes/shared/translation/infobar.inc.css
index b5345fc2f8a2..44c9b4c78b04 100644
--- a/browser/themes/shared/translation/infobar.inc.css
+++ b/browser/themes/shared/translation/infobar.inc.css
@@ -15,6 +15,17 @@ notification[value="translation"] .messageImage {
   }
 }
 
+notification[value="translation"][state="translating"] .messageImage {
+  list-style-image: url(chrome://browser/skin/translating-16.png);
+  -moz-image-region: auto;
+}
+
+@media (min-resolution: 1.25dppx) {
+  notification[value="translation"][state="translating"] .messageImage {
+    list-style-image: url(chrome://browser/skin/translating-16@2x.png);
+  }
+}
+
 notification[value="translation"] {
   min-height: 40px;
 }
diff --git a/browser/themes/shared/translation/translating-16.png b/browser/themes/shared/translation/translating-16.png
new file mode 100644
index 000000000000..71ca37c22a27
Binary files /dev/null and b/browser/themes/shared/translation/translating-16.png differ
diff --git a/browser/themes/shared/translation/translating-16@2x.png b/browser/themes/shared/translation/translating-16@2x.png
new file mode 100644
index 000000000000..ab6184047ec6
Binary files /dev/null and b/browser/themes/shared/translation/translating-16@2x.png differ
diff --git a/browser/themes/windows/jar.mn b/browser/themes/windows/jar.mn
index 3b08ae96cfbc..5f0ab69cc38b 100644
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -217,6 +217,7 @@ browser.jar:
         skin/classic/browser/tabview/tabview.png                    (tabview/tabview.png)
         skin/classic/browser/tabview/tabview-inverted.png           (tabview/tabview-inverted.png)
         skin/classic/browser/tabview/tabview.css                    (tabview/tabview.css)
+        skin/classic/browser/translating-16.png                     (../shared/translation/translating-16.png)
         skin/classic/browser/translation-16.png                     (../shared/translation/translation-16.png)
 *       skin/classic/browser/devtools/common.css                    (../shared/devtools/common.css)
 *       skin/classic/browser/devtools/dark-theme.css                (../shared/devtools/dark-theme.css)
@@ -607,6 +608,7 @@ browser.jar:
         skin/classic/aero/browser/tabview/tabview.png                (tabview/tabview.png)
         skin/classic/aero/browser/tabview/tabview-inverted.png       (tabview/tabview-inverted.png)
         skin/classic/aero/browser/tabview/tabview.css                (tabview/tabview.css)
+        skin/classic/aero/browser/translating-16.png                 (../shared/translation/translating-16.png)
         skin/classic/aero/browser/translation-16.png                 (../shared/translation/translation-16.png)
 *       skin/classic/aero/browser/devtools/common.css                (../shared/devtools/common.css)
 *       skin/classic/aero/browser/devtools/dark-theme.css            (../shared/devtools/dark-theme.css)