diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 500d6495f7..41dcde44fc 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -100,6 +100,7 @@ module.exports = React.createClass({
 
     render: function() {
         var MemberList = sdk.getComponent('rooms.MemberList');
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
         var buttonGroup;
         var panel;
 
@@ -127,12 +128,12 @@ module.exports = React.createClass({
             buttonGroup =
                     <div className="mx_RightPanel_headerButtonGroup">
                         <div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
-                            <object className="mx_Svg" type="image/svg+xml" data="img/members.svg" width="17" height="22"/>
+                            <TintableSvg src="img/members.svg" width="17" height="22"/>
                             { membersBadge }
                             { membersHighlight }
                         </div>
                         <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files">
-                            <object className="mx_Svg" type="image/svg+xml" data="img/files.svg" width="17" height="22"/>
+                            <TintableSvg src="img/files.svg" width="17" height="22"/>
                             { filesHighlight }
                         </div>
                     </div>;
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 52b4d4520e..c036ccd674 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -267,12 +267,12 @@ var RoomSubList = React.createClass({
     },
 
     _getHeaderJsx: function() {
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");        
         return (
             <h2 onClick={ this.onClick } className="mx_RoomSubList_label">
                 { this.props.collapsed ? '' : this.props.label }
-                <object type="image/svg+xml" className="mx_RoomSubList_chevron mx_Svg"
-                    onLoad={ this.onSvgLoad }
-                    data={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
+                <TintableSvg className="mx_RoomSubList_chevron"
+                    src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
                     width="10" height="10" />
             </h2>
         );