diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 8f6473a181..4a1332be8c 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -607,8 +607,8 @@ module.exports = React.createClass({
                     <div className="mx_UserSettings_profileInputCell">
                         <input type="text" key={val.address} id={id} value={val.address} disabled />
                     </div>
-                    <div className="mx_UserSettings_threepidButton">
-                        <img src="img/icon_context_delete.svg" width="14" height="14" alt="Remove" onClick={this.onRemoveThreepidClicked.bind(this, val)} />
+                    <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
+                        <img src="img/cancel-small.svg" width="14" height="14" alt="Remove" onClick={this.onRemoveThreepidClicked.bind(this, val)} />
                     </div>
                 </div>
             );
@@ -630,7 +630,7 @@ module.exports = React.createClass({
                             blurToCancel={ false }
                             onValueChanged={ this.onAddThreepidClicked } />
                     </div>
-                    <div className="mx_UserSettings_threepidButton">
+                    <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
                          <img src="img/plus.svg" width="14" height="14" alt="Add" onClick={ this.onAddThreepidClicked.bind(this, undefined, true) }/>
                     </div>
                 </div>
@@ -711,7 +711,7 @@ module.exports = React.createClass({
                         </div>
                         <div className="mx_UserSettings_avatarPicker_edit">
                             <label htmlFor="avatarInput" ref="file_label">
-                                <img src="img/camera.svg"
+                                <img src="img/camera.svg" className="mx_filterFlipColor"
                                     alt="Upload avatar" title="Upload avatar"
                                     width="17" height="15" />
                             </label>
diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index 5935298634..6543f2a17d 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -281,7 +281,7 @@ module.exports = React.createClass({
                                     onValueChanged={ self.onAliasChanged.bind(self, localDomain, i) }
                                     editable={ self.props.canSetAliases }
                                     initialValue={ alias } />
-                                <div className="mx_RoomSettings_deleteAlias">
+                                <div className="mx_RoomSettings_deleteAlias mx_filterFlipColor">
                                      { deleteButton }
                                 </div>
                             </div>
@@ -297,7 +297,7 @@ module.exports = React.createClass({
                                 placeholder={ "New address (e.g. #foo:" + localDomain + ")" }
                                 blurToCancel={ false }
                                 onValueChanged={ self.onAliasAdded } />
-                            <div className="mx_RoomSettings_addAlias">
+                            <div className="mx_RoomSettings_addAlias mx_filterFlipColor">
                                  <img src="img/plus.svg" width="14" height="14" alt="Add"
                                       onClick={ self.onAliasAdded.bind(self, undefined) }/>
                             </div>
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 4dfb95f5d0..113224666d 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -222,20 +222,22 @@ export default class MessageComposer extends React.Component {
             </div>
         );
 
-        let e2eimg, e2etitle;
+        let e2eImg, e2eTitle, e2eClass;
 
         if (MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId)) {
             // FIXME: show a /!\ if there are untrusted devices in the room...
-            e2eimg = 'img/e2e-verified.svg';
-            e2etitle = 'Encrypted room';
+            e2eImg = 'img/e2e-verified.svg';
+            e2eTitle = 'Encrypted room';
+            e2eClass = 'mx_MessageComposer_e2eIcon';
         } else {
-            e2eimg = 'img/e2e-unencrypted.svg';
-            e2etitle = 'Unencrypted room';
+            e2eImg = 'img/e2e-unencrypted.svg';
+            e2eTitle = 'Unencrypted room';
+            e2eClass = 'mx_MessageComposer_e2eIcon mx_filterFlipColor';
         }
 
         controls.push(
-            <img key="e2eIcon" className="mx_MessageComposer_e2eIcon" src={e2eimg} width="12" height="12"
-                alt={e2etitle} title={e2etitle}
+            <img key="e2eIcon" className={e2eClass} src={e2eImg} width="12" height="12"
+                alt={e2eTitle} title={e2eTitle}
             />
         );
         var callButton, videoCallButton, hangupButton;
@@ -331,6 +333,7 @@ export default class MessageComposer extends React.Component {
                 const disabled = !this.state.inputState.isRichtextEnabled && 'underline' === name;
                 const className = classNames("mx_MessageComposer_format_button", {
                     mx_MessageComposer_format_button_disabled: disabled,
+                    mx_filterFlipColor: true,
                 });
                 return <img className={className}
                             title={name}
@@ -355,11 +358,11 @@ export default class MessageComposer extends React.Component {
                             <div style={{flex: 1}}></div>
                             <img title={`Turn Markdown ${this.state.inputState.isRichtextEnabled ? 'on' : 'off'}`}
                                  onMouseDown={this.onToggleMarkdownClicked}
-                                className="mx_MessageComposer_formatbar_markdown"
+                                className="mx_MessageComposer_formatbar_markdown mx_filterFlipColor"
                                 src={`img/button-md-${!this.state.inputState.isRichtextEnabled}.png`} />
                             <img title="Hide Text Formatting Toolbar"
                                  onClick={this.onToggleFormattingClicked}
-                                 className="mx_MessageComposer_formatbar_cancel"
+                                 className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
                                  src="img/icon-text-cancel.svg" />
                         </div>
                     </div>: null
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 634939331f..bf936a2c13 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -719,7 +719,7 @@ export default class MessageComposerInput extends React.Component {
                         selection={selection} />
                 </div>
                 <div className={className}>
-                    <img className="mx_MessageComposer_input_markdownIndicator"
+                    <img className="mx_MessageComposer_input_markdownIndicator mx_filterFlipColor"
                          onMouseDown={this.onMarkdownToggleClicked}
                          title={`Markdown is ${this.state.isRichtextEnabled ? 'disabled' : 'enabled'}`}
                          src={`img/button-md-${!this.state.isRichtextEnabled}.png`} />
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index a066bfd337..e345918f07 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -183,7 +183,7 @@ module.exports = React.createClass({
             );
 
             save_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</div>;
-            cancel_button = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>;
+            cancel_button = <div className="mx_RoomHeader_cancelButton mx_filterFlipColor" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>;
         }
 
         if (this.props.saving) {