diff --git a/haxe/ui/_module/styles/default/textinputs.css b/haxe/ui/_module/styles/default/textinputs.css
index 247e29d2d..7b68fccee 100644
--- a/haxe/ui/_module/styles/default/textinputs.css
+++ b/haxe/ui/_module/styles/default/textinputs.css
@@ -65,12 +65,15 @@
     color: $normal-text-color;
     border: 1px solid $normal-border-color;
     border-radius: 2px;
-    padding: 1px;
+    padding: 2px 5px;
+    padding-bottom: 4px;
     filter: $normal-inner-shadow;
     background-color: $tertiary-background-color;
     initial-width: 150px;
     initial-height: 100px;
     content-type: auto;
+    icon-position: right;
+    spacing: 5px;
 }
 
 .textarea.required-value {
@@ -99,4 +102,19 @@
 .textarea:disabled {
     border-color: $disabled-border-color;
     color: $disabled-text-color;
-}
\ No newline at end of file
+}
+
+.textarea .decorator {
+    padding: 0px 8px;
+    background: $normal-background-color-start $normal-background-color-end vertical;
+    border-radius: $normal-border-radius;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    border-left: $normal-border-size solid $normal-border-color;
+    include-in-layout: false;
+}
+
+.textarea .decorator .image {
+    vertical-align:center;
+    margin-top: -1px;
+}
diff --git a/haxe/ui/components/TextArea.hx b/haxe/ui/components/TextArea.hx
index 669aa2f9d..c19682cc2 100644
--- a/haxe/ui/components/TextArea.hx
+++ b/haxe/ui/components/TextArea.hx
@@ -78,6 +78,9 @@ class TextArea extends InteractiveComponent implements IFocusable {
     **/
     @:call(ScrollToBottom)                  public function scrollToBottom();
 
+    @:clonable @:behaviour(IconBehaviour)   public var icon:String;
+    @:style(layout)                         public var iconPosition:String;
+
     //***********************************************************************************************************
     // Validation
     //***********************************************************************************************************
@@ -105,7 +108,23 @@ class TextArea extends InteractiveComponent implements IFocusable {
 //***********************************************************************************************************
 @:dox(hide) @:noCompletion
 private class TextAreaLayout extends DefaultLayout {
+    private var iconPosition(get, null):String;
+    private function get_iconPosition():String {
+        if (component.style.iconPosition == null) {
+            return "left";
+        }
+        return component.style.iconPosition;
+    }
+
     private override function repositionChildren() {
+        var decorator = findComponent(Decorator);
+        var decoratorWidth:Float = 0;
+        if (decorator != null) {
+            decorator.left = _component.width - decorator.width - borderSize;
+            decorator.top = borderSize;
+            decoratorWidth = decorator.width;
+        }
+
         var hscroll:Component = component.findComponent(HorizontalScroll, false);
         var vscroll:Component = component.findComponent(VerticalScroll, false);
 
@@ -117,13 +136,29 @@ private class TextAreaLayout extends DefaultLayout {
             hscroll.top = ucy - hscroll.componentHeight + paddingBottom;
         }
 
+        var vscrollWidth:Float = 0;
         if (vscroll != null && hidden(vscroll) == false) {
-            vscroll.left = ucx - vscroll.componentWidth + paddingRight + paddingLeft - borderSize;
+            vscroll.left = ucx - vscroll.componentWidth + paddingRight + paddingLeft - borderSize - decoratorWidth;
             vscroll.top = borderSize;
+            vscrollWidth = vscroll.componentWidth;
+        }
+
+        var icon:Image = component.findComponent(Image, false);
+        var xpos:Float = paddingLeft;
+        if (icon != null) {
+            switch (iconPosition) {
+                case "left":
+                    icon.left = xpos + 3;
+                    icon.top = (component.componentHeight / 2) - (icon.componentHeight / 2);
+                    xpos += icon.componentWidth + horizontalSpacing;
+                case "right":
+                    icon.left = component.componentWidth - icon.componentWidth - paddingRight - 3 - vscrollWidth - decoratorWidth;
+                    icon.top = (component.componentHeight / 2) - (icon.componentHeight / 2);
+            }
         }
 
         if (component.hasTextInput() == true) {
-            component.getTextInput().left = paddingLeft + 2;
+            component.getTextInput().left = xpos + 2;
             component.getTextInput().top = paddingTop + 2;
         }
     }
@@ -131,6 +166,19 @@ private class TextAreaLayout extends DefaultLayout {
     private override function resizeChildren() {
         //super.resizeChildren();
 
+        var offset:Float = 0;
+        var decorator = findComponent(Decorator);
+        if (decorator != null) {
+            var cy = _component.height - (borderSize * 2);
+            decorator.height = cy;
+            offset += decorator.width;
+        }
+
+        var icon:Image = component.findComponent(Image, false);
+        if (icon != null) {
+            offset += icon.width;
+        }
+
         var hscroll:Component = component.findComponent(HorizontalScroll, false);
         var vscroll:Component = component.findComponent(VerticalScroll, false);
 
@@ -141,15 +189,13 @@ private class TextAreaLayout extends DefaultLayout {
 
         if (vscroll != null && hidden(vscroll) == false) {
             vscroll.height = usableSize.height - ((borderSize) * 2) + paddingTop + paddingBottom;
+            offset += vscroll.width;
         }
 
         if (component.hasTextInput() == true) {
             var size:Size = usableSize;
-            #if !pixijs
-            component.getTextInput().width = size.width - 4 - ((borderSize - 1) * 2);
-            component.getTextInput().height = size.height - 4 - ((borderSize - 1) * 2);
-            #end
-
+            component.getTextInput().width = size.width - 0 - ((borderSize - 1) * 2) - offset;
+            component.getTextInput().height = size.height - 0 - ((borderSize - 1) * 2);
         }
     }
 
@@ -248,6 +294,26 @@ private class ScrollToBottom extends Behaviour {
     }
 }
 
+@:dox(hide) @:noCompletion
+private class IconBehaviour extends DataBehaviour {
+    public override function validateData() {
+        var textarea:TextArea = cast(_component, TextArea);
+        var icon:Image = textarea.findComponent(Image, false);
+        if ((_value == null || _value.isNull) && icon != null) {
+            textarea.removeComponent(icon);
+        } else {
+            if (icon == null) {
+                icon = new Image();
+                icon.id = "textarea-icon";
+                icon.addClass("icon");
+                icon.scriptAccess = false;
+                textarea.addComponentAt(icon, 0);
+            }
+            icon.resource = _value.toString();
+        }
+    }
+}
+
 //***********************************************************************************************************
 // Helpers
 //***********************************************************************************************************
diff --git a/haxe/ui/components/TextField.hx b/haxe/ui/components/TextField.hx
index 67d33f9ba..020157f47 100644
--- a/haxe/ui/components/TextField.hx
+++ b/haxe/ui/components/TextField.hx
@@ -104,6 +104,15 @@ private class TextFieldLayout extends DefaultLayout {
     private override function repositionChildren() {
         var icon:Image = component.findComponent(Image, false);
         var xpos:Float = paddingLeft;
+
+        var decorator = findComponent(Decorator);
+        var decoratorWidth:Float = 0;
+        if (decorator != null) {
+            decorator.left = _component.width - decorator.width - borderSize;
+            decorator.top = borderSize;
+            decoratorWidth = decorator.width;
+        }
+
         if (icon != null) {
             switch (iconPosition) {
                 case "left":
@@ -111,17 +120,11 @@ private class TextFieldLayout extends DefaultLayout {
                     icon.top = (component.componentHeight / 2) - (icon.componentHeight / 2);
                     xpos += icon.componentWidth + horizontalSpacing;
                 case "right":
-                    icon.left = component.componentWidth - icon.componentWidth - paddingRight;
+                    icon.left = component.componentWidth - icon.componentWidth - paddingRight - decoratorWidth;
                     icon.top = (component.componentHeight / 2) - (icon.componentHeight / 2);
             }
         }
 
-        var decorator = findComponent(Decorator);
-        if (decorator != null) {
-            decorator.left = _component.width - decorator.width - borderSize;
-            decorator.top = borderSize;
-        }
-
         if (component.hasTextInput() == true) {
             component.getTextInput().left = xpos;
             component.getTextInput().top = paddingTop + (component.componentHeight / 2) - ((component.getTextInput().height + paddingTop + paddingBottom) / 2);