diff --git a/addons/mass_mailing/static/image_shapes/basic/circle.svg b/addons/mass_mailing/static/image_shapes/basic/circle.svg
new file mode 100644
index 00000000000..03bd8874acc
--- /dev/null
+++ b/addons/mass_mailing/static/image_shapes/basic/circle.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
+	<defs>
+		<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
+			<use xlink:href="#filterPath" fill="none"></use>
+		</clipPath>
+		<path id="filterPath" d="M0.5,1C-0.1667,0.9795-0.1667,0.0203,0.5,0C1.1667,0.0205,1.1667,0.9797,0.5,1z"></path>
+	</defs>
+	<svg viewBox="0 0 1 1" width="800" height="600" id="preview" preserveAspectRatio="none">
+		<use xlink:href="#filterPath" fill="darkgrey"></use>
+	</svg>
+	<image xlink:href="" clip-path="url(#clip-path)"></image>
+</svg>
diff --git a/addons/mass_mailing/static/image_shapes/basic/slanted.svg b/addons/mass_mailing/static/image_shapes/basic/slanted.svg
new file mode 100644
index 00000000000..976cdccb97c
--- /dev/null
+++ b/addons/mass_mailing/static/image_shapes/basic/slanted.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="600">
+
+<defs><clipPath id="clip-path" clipPathUnits="objectBoundingBox"><use xlink:href="#filterPath" fill="none"></use></clipPath><path id="filterPath" d="M0.4128,0h0.5872L0.5872,1H0L0.4128,0z"></path></defs><svg viewBox="0 0 1 1" width="800" height="600" id="preview" preserveAspectRatio="none"><use xlink:href="#filterPath" fill="darkgrey"></use></svg><image xlink:href="" clip-path="url(#clip-path)"></image></svg>
\ No newline at end of file
diff --git a/addons/mass_mailing/static/image_shapes/basic/triangle.svg b/addons/mass_mailing/static/image_shapes/basic/triangle.svg
new file mode 100644
index 00000000000..2376040b055
--- /dev/null
+++ b/addons/mass_mailing/static/image_shapes/basic/triangle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="600">
+
+<defs><clipPath id="clip-path" clipPathUnits="objectBoundingBox"><use xlink:href="#filterPath" fill="none"></use></clipPath><path id="filterPath" d="M1,1L0,0h1V1z"></path></defs><svg viewBox="0 0 1 1" width="800" height="600" id="preview" preserveAspectRatio="none"><use xlink:href="#filterPath" fill="darkgrey"></use></svg><image xlink:href="" clip-path="url(#clip-path)"></image></svg>
\ No newline at end of file
diff --git a/addons/mass_mailing/static/src/scss/themes/theme_default.scss b/addons/mass_mailing/static/src/scss/themes/theme_default.scss
index d73b9a832bc..6045ea078f3 100644
--- a/addons/mass_mailing/static/src/scss/themes/theme_default.scss
+++ b/addons/mass_mailing/static/src/scss/themes/theme_default.scss
@@ -103,30 +103,6 @@ div.col:not([align]) {
           width: $width;
           height: $height;
         }
-
-        $size: 2rem;
-
-        &.rounded-circle,
-        &.rounded,
-        &.rounded-0,
-        &.rounded-leaf,
-        &.img-thumbnail,
-        &.shadow {
-            display: inline-block;
-            vertical-align: middle;
-            text-align: center;
-            // fa-1x is not ouput
-            width: $size;
-            height: $size;
-            line-height: $size;
-            @for $i from 2 through 5 {
-                &.fa-#{$i}x {
-                    width: $size + $i;
-                    height: $size + $i;
-                    line-height: $size + $i;
-                }
-            }
-        }
     }
     // Background Images
     .oe_img_bg {
diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index 3b424e2f707..8292191fa63 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -346,10 +346,52 @@
             t-att-data-variable="radius_variable"/>
 </template>
 
+<template id="snippet_options_extra_shapes" inherit_id="web_editor.snippet_options">
+    <xpath expr="//div[hasclass('o_we_image_shape')]//we-select-page[hasclass('o_we_basic_shapes')]" position="inside">
+        <we-button data-set-img-shape="mass_mailing/basic/circle" data-select-label="Circle"/>
+        <we-button data-set-img-shape="mass_mailing/basic/triangle" data-select-label="Triangle"/>
+        <we-button data-set-img-shape="mass_mailing/basic/slanted" data-select-label="Slanted"/>
+    </xpath>
+    <xpath expr="//div[hasclass('o_we_image_shape')]//we-select-page[hasclass('o_we_basic_shapes')]" position="attributes">
+        <attribute name="t-if">True</attribute>
+    </xpath>
+</template>
+
+<template id="snippet_options_image_styles" inherit_id="web_editor.snippet_options">
+    <xpath expr="//div[hasclass('o_we_image_options')]" position="replace">
+        <div data-selector="span.fa, i.fa, img">
+            <we-select string="Alignment" data-state-to-first-class="true">
+                <we-button data-select-class="" title="Unalign">None</we-button>
+                <we-button data-select-class="float-start" title="Align Left">Left</we-button>
+                <we-button data-select-class="mx-auto d-block" title="Align Center">Center</we-button>
+                <we-button data-select-class="float-end" title="Align Right">Right</we-button>
+            </we-select>
+
+            <t t-call="mass_mailing.snippet_options_border_line_widgets">
+                <t t-set="label">Border</t>
+                <t t-set="with_bs_class" t-value="True"></t>
+            </t>
+
+            <we-input string="Round Corners"
+            data-select-style="0" data-css-property="border-radius"
+            data-unit="px" data-extra-class="rounded"
+            t-att-data-variable="radius_variable"/>
+
+            <we-row string="Padding ⭤">
+                <we-input data-select-style="" data-unit="px" data-css-property="padding-left"/>
+                <we-input data-select-style="" data-unit="px" data-css-property="padding-right"/>
+            </we-row>
+            <we-row string="Padding ↕">
+                <we-input data-select-style="" data-unit="px" data-css-property="padding-top"/>
+                <we-input data-select-style="" data-unit="px" data-css-property="padding-bottom"/>
+            </we-row>
+        </div>
+    </xpath>
+</template>
 <!-- Snippet themes Options -->
 <template id="snippet_options">
     <t t-set="no_animations" t-value="True"/>
-    <t t-call="web_editor.snippet_options"/>
+    <t t-call="mass_mailing.snippet_options_extra_shapes"/>
     <t t-out="0"/>
 
     <!-- Border | Columns -->
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 411de1faa00..986c0b3d81a 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -458,18 +458,22 @@
         <div class="o_we_image_shape">
             <we-row string="Shape" class="o_we_full_row">
                 <we-select-pager data-name="shape_img_opt" class="o_we_select_grid o_we_fake_transparent_background">
-                    <we-select-page string="Basics" t-if="not no_animations">
-                        <we-button data-set-img-shape="web_editor/basic/bsc_square_1" data-select-label="Square 1" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/basic/bsc_square_2" data-select-label="Square 2" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/basic/bsc_square_3" data-select-label="Square 3" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/basic/bsc_square_4" data-select-label="Square 4" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/basic/bsc_square_5" data-select-label="Square 5" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/basic/bsc_square_6" data-select-label="Square 6" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/basic/bsc_square_rounded_1" data-select-label="Square Rounded 1" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/basic/bsc_square_rounded_2" data-select-label="Square Rounded 2" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/basic/bsc_organic_1" data-select-label="Organic Soft" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/basic/bsc_organic_2" data-select-label="Organic Medium" data-animated="true"/>
-                        <we-button data-set-img-shape="web_editor/basic/bsc_organic_3" data-select-label="Organic Hard" data-animated="true"/>
+                    <!-- This page only contains animated shapes by default. If
+                    using xpath to add non-animated shapes, also use xpath to
+                    remove the t-if on the page. This is why individual options
+                    also have that t-if.  -->
+                    <we-select-page class="o_we_basic_shapes" string="Basics" t-if="not no_animations">
+                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_1" data-select-label="Square 1" data-animated="true"/>
+                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_2" data-select-label="Square 2" data-animated="true"/>
+                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_3" data-select-label="Square 3" data-animated="true"/>
+                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_4" data-select-label="Square 4" data-animated="true"/>
+                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_5" data-select-label="Square 5" data-animated="true"/>
+                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_6" data-select-label="Square 6" data-animated="true"/>
+                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_rounded_1" data-select-label="Square Rounded 1" data-animated="true"/>
+                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_rounded_2" data-select-label="Square Rounded 2" data-animated="true"/>
+                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_organic_1" data-select-label="Organic Soft" data-animated="true"/>
+                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_organic_2" data-select-label="Organic Medium" data-animated="true"/>
+                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_organic_3" data-select-label="Organic Hard" data-animated="true"/>
                     </we-select-page>
                     <we-select-page string="Solids">
                         <we-button data-set-img-shape="web_editor/solid/blob_1_solid_rd" data-select-label="Blob Solid 1" />
@@ -588,7 +592,7 @@
         </we-button-group>
     </div>
 
-    <div data-selector="span.fa, i.fa, img" data-exclude="[data-oe-type='image'] > img, [data-oe-xpath]">
+    <div data-selector="span.fa, i.fa, img" data-exclude="[data-oe-type='image'] > img, [data-oe-xpath]" class="o_we_image_options">
         <we-select string="Alignment" data-state-to-first-class="true">
             <we-button data-select-class="" title="Unalign">None</we-button>
             <we-button data-select-class="float-start" title="Align Left">Left</we-button>