diff --git a/package.json b/package.json
index d9bcab31d1..d78a6e017d 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "lodash.bindall": "4.4.0",
     "lodash.omit": "4.5.0",
     "minilog": "3.1.0",
+    "opentype.js": "^1.3.4",
     "parse-color": "1.0.0",
     "prop-types": "^15.5.10",
     "opentype.js": "^1.3.4"
diff --git a/src/components/mode-tools/icons/text-to-shapes.svg b/src/components/mode-tools/icons/text-to-shapes.svg
new file mode 100644
index 0000000000..138d7ecb39
--- /dev/null
+++ b/src/components/mode-tools/icons/text-to-shapes.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(-3, -3) scale(0.8)" id="text" fill="#575E75">
+            <path d="M16,4.35294118 L16,6.85176471 C16,7.04941176 15.8447059,7.20470588 15.6470588,7.20470588 L14.8988235,7.20470588 C14.7576471,7.20470588 14.6164706,7.12 14.5741176,6.99294118 L14.2070588,6.11764706 L11.0588235,6.11764706 L11.0588235,14.2917647 L11.92,14.6164706 C12.0611765,14.6729412 12.16,14.8 12.16,14.9552941 L12.16,15.6470588 C12.16,15.8447059 11.9905882,16 11.8070588,16 L8.20705882,16 C8.02352941,16 7.85411765,15.8447059 7.85411765,15.6470588 L7.85411765,14.9552941 C7.85411765,14.8 7.95294118,14.6729412 8.08,14.6164706 L8.94117647,14.2917647 L8.94117647,6.11764706 L5.80705882,6.11764706 L5.44,6.99294118 C5.38352941,7.12 5.25647059,7.20470588 5.11529412,7.20470588 L4.35294118,7.20470588 C4.16941176,7.20470588 4,7.04941176 4,6.85176471 L4,4.35294118 C4,4.15529412 4.16941176,4 4.35294118,4 L15.6470588,4 C15.8447059,4 16,4.15529412 16,4.35294118" id="text-icon"></path>
+        </g>
+        <g transform="translate(6, 6) scale(0.8)" id="text" stroke="#00c3ff" stroke-width="0.75" fill="white">
+            <path d="M16,4.35294118 L16,6.85176471 C16,7.04941176 15.8447059,7.20470588 15.6470588,7.20470588 L14.8988235,7.20470588 C14.7576471,7.20470588 14.6164706,7.12 14.5741176,6.99294118 L14.2070588,6.11764706 L11.0588235,6.11764706 L11.0588235,14.2917647 L11.92,14.6164706 C12.0611765,14.6729412 12.16,14.8 12.16,14.9552941 L12.16,15.6470588 C12.16,15.8447059 11.9905882,16 11.8070588,16 L8.20705882,16 C8.02352941,16 7.85411765,15.8447059 7.85411765,15.6470588 L7.85411765,14.9552941 C7.85411765,14.8 7.95294118,14.6729412 8.08,14.6164706 L8.94117647,14.2917647 L8.94117647,6.11764706 L5.80705882,6.11764706 L5.44,6.99294118 C5.38352941,7.12 5.25647059,7.20470588 5.11529412,7.20470588 L4.35294118,7.20470588 C4.16941176,7.20470588 4,7.04941176 4,6.85176471 L4,4.35294118 C4,4.15529412 4.16941176,4 4.35294118,4 L15.6470588,4 C15.8447059,4 16,4.15529412 16,4.35294118" id="text-icon"></path>
+        </g>
+        
+        <g transform="translate(-4, 4.5)" id="text" stroke="#575E75" stroke-width="1">
+            <path d="M 8 7 Q 8 12 13 12 Q 8 12 8 7 Z M 13 12 L 10.9 13.6 Z M 13 12 L 11.1 9.9 Z"></path>
+        </g>
+
+        <rect transform="translate(9, 9)" fill="white" stroke="#00c3ff" stroke-width="0.5" stroke-linecap="miter" stroke-linejoin="miter" x="-1" y="-1" width="2" height="2"></rect>
+        <rect transform="translate(9, 11.9)" fill="white" stroke="#00c3ff" stroke-width="0.5" stroke-linecap="miter" stroke-linejoin="miter" x="-1" y="-1" width="2" height="2"></rect>
+        <rect transform="translate(18.7, 11.75)" fill="white" stroke="#00c3ff" stroke-width="0.5" stroke-linecap="miter" stroke-linejoin="miter" x="-1" y="-1" width="2" height="2"></rect>
+        <rect transform="translate(18.7, 9)" fill="white" stroke="#00c3ff" stroke-width="0.5" stroke-linecap="miter" stroke-linejoin="miter" x="-1" y="-1" width="2" height="2"></rect>
+        <rect transform="translate(16, 18.2)" fill="white" stroke="#00c3ff" stroke-width="0.5" stroke-linecap="miter" stroke-linejoin="miter" x="-1" y="-1" width="2" height="2"></rect>
+        <rect transform="translate(12, 18.2)" fill="white" stroke="#00c3ff" stroke-width="0.5" stroke-linecap="miter" stroke-linejoin="miter" x="-1" y="-1" width="2" height="2"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/mode-tools/mode-tools.jsx b/src/components/mode-tools/mode-tools.jsx
index 73d120148d..d1b3f7861d 100644
--- a/src/components/mode-tools/mode-tools.jsx
+++ b/src/components/mode-tools/mode-tools.jsx
@@ -57,6 +57,7 @@ import shapeFilterIcon from './icons/filter.svg';
 import alignLeftIcon from './icons/alignLeft.svg';
 import alignRightIcon from './icons/alignRight.svg';
 import alignCenterIcon from './icons/alignCenter.svg';
+import textToShapesIcon from './icons/text-to-shapes.svg';
 import bitBrushIcon from '../bit-brush-mode/brush.svg';
 import bitEraserIcon from '../bit-eraser-mode/eraser.svg';
 import bitLineIcon from '../bit-line-mode/line.svg';
@@ -784,6 +785,13 @@ const ModeToolsComponent = props => {
                             onClick={props.onTextAlignRight}
                         />
                     </InputGroup>
+                    <InputGroup className={classNames(styles.modDashedBorder, styles.modLabeledIconHeight)}>
+                        <LabeledIconButton
+                            imgSrc={textToShapesIcon}
+                            title={'Convert'}
+                            onClick={props.onTextAlignLeft}
+                        />
+                    </InputGroup>
                 </div>
             );
         case Modes.BIT_RECT: