diff --git a/packages/mjml-social/src/SocialElement.js b/packages/mjml-social/src/SocialElement.js
index e39f61a44..6952ccdf0 100644
--- a/packages/mjml-social/src/SocialElement.js
+++ b/packages/mjml-social/src/SocialElement.js
@@ -99,6 +99,7 @@ export default class MjSocialElement extends BodyComponent {
 
   static allowedAttributes = {
     align: 'enum(left,center,right)',
+    direction: 'enum(left,right)',
     'background-color': 'color',
     color: 'color',
     'border-radius': 'unit(px)',
@@ -132,6 +133,7 @@ export default class MjSocialElement extends BodyComponent {
   static defaultAttributes = {
     alt: '',
     align: 'left',
+    direction: 'left',
     color: '#000',
     'border-radius': '3px',
     'font-family': 'Ubuntu, Helvetica, Arial, sans-serif',
@@ -232,13 +234,10 @@ export default class MjSocialElement extends BodyComponent {
     } = this.getSocialAttributes()
 
     const hasLink = !!this.getAttribute('href')
+    const direction = this.getAttribute('direction')
 
-    return `
-      <tr
-        ${this.htmlAttributes({
-          class: this.getAttribute('css-class'),
-        })}
-      >
+    const makeIcon = () => {
+      return `
         <td ${this.htmlAttributes({ style: 'td' })}>
           <table
             ${this.htmlAttributes({
@@ -279,6 +278,10 @@ export default class MjSocialElement extends BodyComponent {
             </tbody>
           </table>
         </td>
+      `
+    }
+
+    const makeContent = () => `
         ${
           this.getContent()
             ? `
@@ -303,6 +306,18 @@ export default class MjSocialElement extends BodyComponent {
           `
             : ''
         }
+      `
+
+    const renderLeft = () => `${makeIcon()} ${makeContent()}`
+    const renderRight = () => `${makeContent()} ${makeIcon()}`
+
+    return `
+      <tr
+        ${this.htmlAttributes({
+          class: this.getAttribute('css-class'),
+        })}
+      >
+        ${direction === 'left' ? renderLeft() : renderRight() }
       </tr>
     `
   }