diff --git a/html/src/app.js b/html/src/app.js
index 422234db..455b0320 100644
--- a/html/src/app.js
+++ b/html/src/app.js
@@ -5581,6 +5581,7 @@ import gameLogService from './service/gamelog.js'
             ]
         }
     };
+    $app.data.VRCPlusIconsTable = {};
     $app.data.visits = 0;
     $app.data.openVR = configRepository.getBool('openVR');
     $app.data.openVRAlways = configRepository.getBool('openVRAlways');
@@ -7442,6 +7443,83 @@ import gameLogService from './service/gamelog.js'
         D.visible = false;
     };
 
+    $app.methods.displayVRCPlusIconsTable = function () {
+        var params = {
+            n: 100,
+            tag: 'icon'
+        };
+        API.refreshVRCPlusIconsTableData(params);
+    };
+
+    API.refreshVRCPlusIconsTableData = function (params) {
+        return this.call(`files`, {
+            method: 'GET',
+            params
+        }).then((json) => {
+            var args = {
+                json,
+                params
+            };
+            this.$emit('FILES', args);
+            return args;
+        });
+    };
+
+    API.$on('FILES', function (args) {
+        $app.VRCPlusIconsTable = args.json;
+    });
+
+    $app.methods.setVRCPlusIcon = function (userIcon) {
+        if (userIcon != '') {
+            userIcon = `https://api.vrchat.cloud/api/1/file/${userIcon}/1`;
+        }
+        API.setVRCPlusIcon({
+            userIcon: userIcon
+        }).then((args) => {
+            this.$message({
+                message: 'Icon changed',
+                type: 'success'
+            });
+            return args;
+        });
+    };
+
+    API.setVRCPlusIcon = function (params) {
+        return this.call(`users/${this.currentUser.id}`, {
+            method: 'PUT',
+            params
+        }).then((json) => {
+            var args = {
+                json,
+                params
+            };
+            this.$emit('USER:CURRENT:SAVE', args);
+            return args;
+        });
+    };
+
+    $app.methods.deleteVRCPlusIcon = function (userIcon) {
+        API.deleteVRCPlusIcon(userIcon).then((args) => {
+            this.$message({
+                message: 'Icon deleted',
+                type: 'success'
+            });
+            this.displayVRCPlusIconsTable();
+            return args;
+        });
+    };
+
+    API.deleteVRCPlusIcon = function (userIcon) {
+        return this.call(`file/${userIcon}`, {
+            method: 'DELETE'
+        }).then((json) => {
+            var args = {
+                json
+            };
+            return args;
+        });
+    };
+
     $app = new Vue($app);
     window.$app = $app;
 })();
diff --git a/html/src/app.scss b/html/src/app.scss
index 746d00ee..a58f9f4f 100644
--- a/html/src/app.scss
+++ b/html/src/app.scss
@@ -362,6 +362,26 @@ a {
     color: #606266;
 }
 
+.x-friend-item > .vrcplus-icon {
+    border: 4px solid #dcdfe6;
+    border-radius: 50%;
+    margin: 0;
+    width: 120px;
+    height: 120px;
+}
+
+.x-friend-item > .current-vrcplus-icon {
+    border:4px solid #67c23a;
+    border-radius:50%;
+}
+
+.x-friend-item > .vrcplus-icon > img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
 .x-dialog > .el-dialog {
     max-width: 100%;
     margin-bottom: 10px;
diff --git a/html/src/index.pug b/html/src/index.pug
index 3a218f1d..116cf4a8 100644
--- a/html/src/index.pug
+++ b/html/src/index.pug
@@ -440,6 +440,15 @@ html
                                 template(v-once #default="scope")
                                     span {{ scope.row.updated_at | formatDate('YYYY-MM-DD HH24:MI:SS') }}
                             el-table-column(label="Name" prop="displayName")
+                    div(v-if="API.currentUser.$isVRCPlus" style="margin-top:30px")
+                        span(style="font-weight:bold") VRCPlus Icons
+                        el-button(type="default" @click="displayVRCPlusIconsTable()" size="mini" icon="el-icon-refresh" circle style="margin-left:5px")
+                        el-button(type="default" @click="setVRCPlusIcon('')" size="mini" icon="el-icon-close" circle style="margin:0")
+                        br
+                        .x-friend-item(v-for="icon in VRCPlusIconsTable" :key="icon.id" style="display:inline-block;")
+                            .vrcplus-icon(style="" @click="setVRCPlusIcon(icon.id)" :class="{ 'current-vrcplus-icon': 'https://api.vrchat.cloud/api/1/file/' + icon.id + '/1' === API.currentUser.userIcon }")
+                                img.avatar(v-if="icon.versions[1].file.url" v-lazy="icon.versions[1].file.url")
+                            el-button(type="default" @click="deleteVRCPlusIcon(icon.id)" size="mini" icon="el-icon-delete" circle style="float:right;")
                     div(style="margin-top:30px")
                         span(style="font-weight:bold") Current User JSON
                         el-button(type="default" @click="refreshCurrentUserTreeData()" size="mini" icon="el-icon-refresh" circle style="margin-left:5px")