diff --git a/website/client/src/components/ui/sprite.vue b/website/client/src/components/ui/sprite.vue
index 556d64c950..ad4b91655e 100644
--- a/website/client/src/components/ui/sprite.vue
+++ b/website/client/src/components/ui/sprite.vue
@@ -10,6 +10,9 @@ export default {
     imageName: {
       type: String,
     },
+    prefix: {
+      type: String,
+    },
   },
   methods: {
     imageUrl () {
@@ -17,8 +20,13 @@ export default {
         return '';
       }
       let name = this.imageName;
+      console.log(this.imageName);
       if (name.indexOf(' ') !== -1) {
-        name = name.split(' ')[1];
+        const components = name.split(' ');
+        name = components[components.length - 1];
+      }
+      if (this.prefix) {
+        name = `${this.prefix}_${name}`;
       }
       return `https://habitica-assets.s3.amazonaws.com/mobileApp/images/${name}.png`;
     },
diff --git a/website/client/src/mixins/avatarEditUtilities.js b/website/client/src/mixins/avatarEditUtilities.js
index 00539be959..e8b847c40e 100644
--- a/website/client/src/mixins/avatarEditUtilities.js
+++ b/website/client/src/mixins/avatarEditUtilities.js
@@ -31,7 +31,7 @@ export const avatarEditorUtilities = { // eslint-disable-line import/prefer-defa
       option.key = key;
       option.pathKey = pathKey;
       option.active = userPreference === key;
-      option.class = this.createClass(type, subType, key);
+      option.imageName = this.createImageName(type, subType, key);
       option.click = optionParam => (option.gemLocked ? this.unlock(`${optionParam.pathKey}.${key}`) : this.set({ [`preferences.${optionParam.pathKey}`]: optionParam.key }));
       return option;
     },
@@ -56,8 +56,10 @@ export const avatarEditorUtilities = { // eslint-disable-line import/prefer-defa
 
       return option;
     },
-    createClass (type, subType, key) {
-      let str = `${type} ${subType} `;
+    createImageName (type, subType, key) {
+      let str = '';
+
+      console.log(type, subType, key);
 
       switch (type) {
         case 'shirt': {
@@ -77,7 +79,7 @@ export const avatarEditorUtilities = { // eslint-disable-line import/prefer-defa
           break;
         }
         case 'skin': {
-          str += `skin skin_${key}`;
+          str += `skin_${key}`;
           break;
         }
         default: {