diff --git a/src/components/views/groups/GroupInviteTile.js b/src/components/views/groups/GroupInviteTile.js
index 508788d1c7..d97464e8ca 100644
--- a/src/components/views/groups/GroupInviteTile.js
+++ b/src/components/views/groups/GroupInviteTile.js
@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
@@ -27,6 +28,10 @@ export default React.createClass({
         group: PropTypes.object.isRequired,
     },
 
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
     onClick: function(e) {
         dis.dispatch({
             action: 'view_group',
@@ -39,8 +44,10 @@ export default React.createClass({
         const EmojiText = sdk.getComponent('elements.EmojiText');
 
         const groupName = this.props.group.name || this.props.group.groupId;
+        const httpAvatarUrl = this.props.group.avatarUrl ?
+            this.context.matrixClient.mxcUrlToHttp(this.props.group.avatarUrl, 24, 24) : null;
 
-        const av = <BaseAvatar name={groupName} width={24} height={24} url={this.props.group.avatarUrl} />;
+        const av = <BaseAvatar name={groupName} width={24} height={24} url={httpAvatarUrl} />;
 
         const label = <EmojiText
             element="div"