diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 69ca592298c..7e615c56a5e 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -3435,6 +3435,7 @@ body.oe_single_form .oe_single_form_container {
   background: white;
   background: white !important;
   min-width: 100%;
+  padding-right: 9px !important;
 }
 
 .dropdown-menu.state li a, .dropdown-menu.state li a:hover, .dropdown-menu.state li a:focus {
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 384bbcc3638..b034206c926 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -2775,6 +2775,7 @@ body.oe_single_form
     background: white
     background: white !important
     min-width: 100%
+    padding-right: 10px !important
 .dropdown-menu.state li a, .dropdown-menu.state li a:hover, .dropdown-menu.state li a:focus
     text-decoration: none
     color: #333
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index eb92a86dbd1..c9344ae137e 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -2337,9 +2337,9 @@ instance.web.form.DropdownSelection = instance.web.form.FieldChar.extend({
         this._super(field_manager, node);
     },
     prepare_dropdown_selection: function() {
-        return [{ 'name': 'normal', 'state_name': ' In Progress', 'state_class': 'btn-default' },
-                { 'name': 'blocked', 'state_name': ' Blocked', 'state_class': 'btn-danger' },
-                { 'name': 'done', 'state_name': ' Ready', 'state_class': 'btn-success' }]
+        return [{ 'name': 'normal', 'state_name': ' In Progress', 'state_icon': '<img src="/web/static/src/img/icons/gtk-normal.png"/>' },
+                { 'name': 'blocked', 'state_name': ' Blocked', 'state_icon': '<img src="/web/static/src/img/icons/gtk-no.png"/>' },
+                { 'name': 'done', 'state_name': ' Ready', 'state_icon': '<img src="/web/static/src/img/icons/gtk-yes.png"/>' }]
     },
     render_value: function() {
         var self = this;
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 6a0253d386b..505f3e5c02d 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1011,9 +1011,9 @@
 <t t-name="DropdownSelection">
     <span class="btn-group">
         <t t-foreach="states" t-as="rec">
-            <a t-att-class="'btn btn-xs '+ rec.state_class" t-if="widget.get('value') === rec.name"  t-att-title="rec.state_name" >
-                <t t-raw="rec.state_name"/>
-                <a t-att-class="'oe_legend btn btn-xs dropdown-toggle '+rec.state_class" data-toggle="dropdown">
+            <a t-att-class="'btn btn-default btn-xs'" t-if="widget.get('value') === rec.name" t-att-title="rec.state_name" >
+                <t t-raw="rec.state_icon"/>
+                <a t-att-class="'oe_legend btn btn-default btn-xs dropdown-toggle'" data-toggle="dropdown">
                 <span class="caret"></span>
                 <span class="sr-only">Toggle Dropdown</span> </a>
             </a>
@@ -1021,7 +1021,10 @@
         <ul class="dropdown-menu state" role="menu">
             <t t-foreach="states" t-as="rec">
                 <t t-if="widget.get('value') !== rec.name">
-                    <li class="oe_legend" t-att-data-value="rec.name" ><a href="#"><t t-raw="rec.state_name" /></a></li>
+                    <li class="oe_legend" t-att-data-value="rec.name" ><a href="#">
+                        <t t-raw="rec.state_icon" />
+                        <t t-raw="rec.state_name" /></a>
+                    </li>
                 </t>
             </t>
         </ul>
diff --git a/addons/web_kanban/static/src/js/kanban.js b/addons/web_kanban/static/src/js/kanban.js
index e8343034e62..09920738e19 100644
--- a/addons/web_kanban/static/src/js/kanban.js
+++ b/addons/web_kanban/static/src/js/kanban.js
@@ -1319,9 +1319,9 @@ instance.web_kanban.DropdownSelection = instance.web_kanban.AbstractField.extend
         this.parent = parent;
     },
     prepare_dropdown_selection: function() {
-        return [{ 'name': 'normal', 'state_name': ' In Progress', 'state_class': 'btn-default' },
-                { 'name': 'blocked', 'state_name': ' Blocked', 'state_class': 'btn-danger' },
-                { 'name': 'done', 'state_name': ' Ready', 'state_class': 'btn-success' }]
+        return [{ 'name': 'normal', 'state_name': ' In Progress', 'state_icon': '<img src="/web/static/src/img/icons/gtk-normal.png"/>' },
+                { 'name': 'blocked', 'state_name': ' Blocked', 'state_icon': '<img src="/web/static/src/img/icons/gtk-no.png"/>' },
+                { 'name': 'done', 'state_name': ' Ready', 'state_icon': '<img src="/web/static/src/img/icons/gtk-yes.png"/>' }]
     },
     renderElement: function() {
         var self = this;