diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 4948ac852..809c6384c 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -15,6 +15,7 @@
 @import "./matrix-react-sdk/structures/_UserSettings.scss";
 @import "./matrix-react-sdk/structures/login/_Login.scss";
 @import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss";
+@import "./matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss";
 @import "./matrix-react-sdk/views/dialogs/_BugReportDialog.scss";
 @import "./matrix-react-sdk/views/dialogs/_ChatCreateOrReuseChatDialog.scss";
 @import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss";
diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss b/src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss
new file mode 100644
index 000000000..a15f8eaa6
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss
@@ -0,0 +1,43 @@
+/*
+Copyright 2017 Travis Ralston
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_MemberPresenceAvatar {
+    display: inline-block;
+    position: relative;
+}
+
+.mx_MemberPresenceAvatar_status {
+    display: block;
+    width: 10px;
+    height: 10px;
+    border-radius: 10px;
+
+    position: absolute;
+    bottom: -2px;
+    right: -3px;
+}
+
+.mx_MemberPresenceAvatar_status_online {
+    background-color: $presence-online;
+}
+
+.mx_MemberPresenceAvatar_status_unavailable {
+    background-color: $presence-unavailable;
+}
+
+.mx_MemberPresenceAvatar_status_offline {
+    background-color: $presence-offline;
+}
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index a13c517bd..44c5440a5 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -114,6 +114,11 @@ $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
 $e2e-unverified-color: #e8bf37;
 $e2e-warning-color: #ba6363;
 
+// presence
+$presence-online: #60de00;
+$presence-unavailable: #deb800;
+$presence-offline: #b7b7b7;
+
 /*** ImageView ***/
 $lightbox-bg-color: #454545;
 $lightbox-fg-color: #ffffff;