diff --git a/res/css/structures/_MyGroups.scss b/res/css/structures/_MyGroups.scss
index 6d140721c8..b6c82aa366 100644
--- a/res/css/structures/_MyGroups.scss
+++ b/res/css/structures/_MyGroups.scss
@@ -44,13 +44,29 @@ limitations under the License.
 
 .mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
     margin-right: 13px;
-    height: 50px;
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    background-color: $roomheader-addroom-color;
+    position: relative;
+
+    &:before {
+        background-color: $accent-fg-color;
+        mask: url('../../img/icons-create-room.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 80%;
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
 }
 
-.mx_MyGroups_headerCard_button object {
-    /* Otherwise the SVG object absorbs clicks and the button doesn't work */
-    pointer-events: none;
-}
+
+
 
 .mx_MyGroups_headerCard_header {
     font-weight: bold;
diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index edb50fcedb..3ad1a00361 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -112,7 +112,6 @@ export default withMatrixClient(React.createClass({
             <div className='mx_MyGroups_header'>
                 <div className="mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick}>
-                        <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
                     </AccessibleButton>
                     <div className="mx_MyGroups_headerCard_content">
                         <div className="mx_MyGroups_headerCard_header">