diff --git a/src/components/panels/AfcPanel.vue b/src/components/panels/AfcPanel.vue
index 196a8e818..9bb91229c 100644
--- a/src/components/panels/AfcPanel.vue
+++ b/src/components/panels/AfcPanel.vue
@@ -79,12 +79,12 @@
                                          style="padding: 5px; width: 50%;"
                                          :key="index"
                                          @click="openChangeSpoolDialog(spool)">
-                                        <FilamentReelIcon v-if="spool.load"
+                                        <FilamentReelIcon v-if="spool.prep"
                                                           :color="spool.color"
-                                                          style="width: 100%; float: left"/>
-                                        <FilamentReelIcon v-else
-                                                          style="width: 100%; float: left"
-                                                          :color='spool.empty'/>
+                                                          style="float: left"/>
+                                        <FilamentReelIcon v-else
+                                                          :color="'transparent'"
+                                                          style="float: left"/>
                                     </div>
                                     <div class="spool-header">
                                         <span style="color:red" v-if="!spool.load && !spool.prep && !spool.tool_loaded">
@@ -160,7 +160,7 @@ import BaseMixin from "@/components/mixins/base"
 import Panel from "@/components/ui/Panel.vue"
 import { mdiAdjust, mdiRefresh, mdiDotsVertical } from "@mdi/js"
 import AfcChangeSpoolDialog from "@/components/dialogs/AfcChangeSpoolDialog.vue"
-import FilamentReelIcon from '@/components/ui/FilamentReelIcon.vue'
+import FilamentReelIcon from '@/components/ui/FilamentReelIcon.vue'
 import SpoolIcon from "@/components/ui/SpoolIcon.vue"
 import { AFCRoot } from '@/store/server/afc'
 import BoxTurtleIcon from "@/components/ui/BoxTurtleIcon.vue"
@@ -171,7 +171,7 @@ import InfinityIcon from '@/components/ui/InfinityIcon.vue'
         Panel,
         AfcChangeSpoolDialog,
         SpoolIcon,
-        FilamentReelIcon,
+        FilamentReelIcon,
         BoxTurtleIcon,
         InfinityIcon
     },
diff --git a/src/components/ui/FilamentReelEmptyIcon.vue b/src/components/ui/FilamentReelEmptyIcon.vue
new file mode 100644
index 000000000..8bd183235
--- /dev/null
+++ b/src/components/ui/FilamentReelEmptyIcon.vue
@@ -0,0 +1,35 @@
+<template>
+    <svg x="0px" y="0px"viewBox="0 0 487.04 487.04" xml:space="preserve" @click="clickSpool">
+    <path :style="styleCircle" style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" vector-effect="non-scaling-stroke" transform="matrix(.58757 0 0 3.94769 197.135 250.047)" d="M0-63.27c34.925 0 63.27 28.345 63.27 63.27 0 34.925-28.345 63.27-63.27 63.27-34.925 0-63.27-28.345-63.27-63.27 0-34.925 28.345-63.27 63.27-63.27z" />
+    <path :style="styleCircle" style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" vector-effect="non-scaling-stroke" transform="matrix(.38158 0 0 3.46232 197.135 250.047)" d="m197.17,146.24c-.11,0-.21.01-.32.03v-.03H37.18l.21,207.07h159.68s.07,0,.11,0c8.51,0,15.41-46.38,15.41-103.53s-6.9-103.53-15.41-103.53Z"/>
+    <path :style="styleCircle" style="stroke:#000;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" vector-effect="non-scaling-stroke" transform="matrix(2.07364 0 0 3.3577 117.295 250.047)" d="m197.17,146.24c-.11,0-.21.01-.32.03v-.03H37.18l.21,207.07h159.68s.07,0,.11,0c8.51,0,15.41-46.38,15.41-103.53s-6.9-103.53-15.41-103.53Z" />
+    <g transform="matrix(.58757 0 0 3.94769 37.454 250.047)">
+    <path :style="styleCircle" style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1;filter:url(#a)" vector-effect="non-scaling-stroke" d="M0-63.27c34.925 0 63.27 28.345 63.27 63.27 0 34.925-28.345 63.27-63.27 63.27-34.925 0-63.27-28.345-63.27-63.27 0-34.925 28.345-63.27 63.27-63.27z" />
+    <path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" vector-effect="non-scaling-stroke" transform="scale(.41452)" d="M0-63.27c34.925 0 63.27 28.345 63.27 63.27 0 34.925-28.345 63.27-63.27 63.27-34.925 0-63.27-28.345-63.27-63.27 0-34.925 28.345-63.27 63.27-63.27z" />
+    </g>
+</svg>
+</template>
+
+<script lang="ts">
+    import Component from 'vue-class-component'
+    import { Mixins, Prop } from 'vue-property-decorator'
+    import BaseMixin from '@/components/mixins/base'
+
+    @Component({})
+    export default class SpoolIcon extends Mixins(BaseMixin) {
+        @Prop({ required: false, default: '#ff0' })
+        declare readonly color: string
+
+        get styleFilament() {
+            return { fill: this.color }
+        }
+
+        get styleCircle() {
+            return { fill: '#b58950' }
+        }
+
+        clickSpool() {
+            this.$emit('click-spool')
+        }
+    }
+</script>
diff --git a/src/components/ui/FilamentReelIcon.vue b/src/components/ui/FilamentReelIcon.vue
index 21634c8a4..0496d7035 100644
--- a/src/components/ui/FilamentReelIcon.vue
+++ b/src/components/ui/FilamentReelIcon.vue
@@ -1,83 +1,85 @@
-<template>
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        x="0px"
-        y="0px"
-        viewBox="0 0 487.04 487.04"
-        xml:space="preserve"
-        @click="clickSpool">
-    >
-        <desc>Created with Fabric.js 5.3.0</desc>
-        <path
-            id="path1"
-            stroke-linecap="round"
-            d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z"
-            transform="matrix(0.58757483,0,0,3.9476902,197.13549,250.04675)"
-            :style="secondaryColor"
-        />
-        <path
-            id="path2"
-            stroke-linecap="round"
-            d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z"
-            transform="matrix(0.38157612,0,0,3.4623174,197.13549,250.04674)"
-            :style="secondaryColor"
-        />
-        <path
-            id="path3"
-            stroke-linecap="round"
-            d="M -38.50267 -65.24064 L 38.502680000000005 -65.24064 L 38.502680000000005 65.24064 L -38.50267 65.24064 z"
-            transform="matrix(2.073642,0,0,3.3577086,117.29471,250.04674)"
-            :style="colorReel"
-        />
-        <g
-            id="OvgM38-6CZm9R47a1TDIX"
-            transform="matrix(0.58757483,0,0,3.9476902,37.453957,250.04674)"
-        >
-            <filter id="SVGID_1" width="1.272" height="1.114" x="-.057" y="-.057">
-                <feGaussianBlur id="feGaussianBlur3" in="SourceAlpha" stdDeviation="3" />
-                <feOffset id="feOffset3" dx="20" dy="0" result="oBlur" />
-                <feFlood id="feFlood3" flood-color="#000" flood-opacity="0.67" />
-                <feComposite id="feComposite3" in2="oBlur" operator="in" />
-                <feMerge id="feMerge4">
-                    <feMergeNode id="feMergeNode3" />
-                    <feMergeNode id="feMergeNode4" in="SourceGraphic" />
-                </feMerge>
-            </filter>
-            <path
-                id="path4"
-                stroke-linecap="round"
-                d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z"
-                transform="translate(8.4959392e-7)"
-                :style="secondaryColor"
-            />
-        </g>
-    </svg>
-</template>
-
-<script lang="ts">
-import Component from 'vue-class-component'
-import { Mixins, Prop } from 'vue-property-decorator'
-import BaseMixin from '@/components/mixins/base'
-
-@Component({})
-export default class FilamentReelIcon extends Mixins(BaseMixin){
-    @Prop({ required: false, default: '#ff0'})
-    declare readonly color: string
-
-    get colorReel() {
-        return { fill: this.color }
-    }
-
-    get secondaryColor() {
-        return {fill:"#c08f4f"}
-    }
-
-    clickSpool() {
-        this.$emit('click-spool')
-    }
-}
-</script>
-
-<style scoped>
-
-</style>
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg"
+         x="0px"
+         y="0px"
+         viewBox="0 0 499.8 499.8"
+         xml:space="preserve"
+         @click="clickSpool">
+    <desc>Converted from Adobe Illustrator SVG</desc>
+  
+    <path id="spool_right_rim"
+          d="M202.1,0.3h-5v2.3C179,19,165,123.6,165,250s14,231.1,32.2,247.5v2.3h5
+          c20.5,0,37.2-111.9,37.2-249.8S222.7,0.3,202.1,0.3z"
+          :style="spoolRim" />
+  
+    <path id="spool_right"
+          d="M197.1,0.3c20.5,0,37.2,111.9,37.2,249.8s-16.7,249.8-37.2,249.8S160,387.9,160,250
+          S176.6,0.3,197.1,0.3z"
+          :style="spoolColor" />
+  
+    <path id="spool_tube"
+          d="M194.6,166.9L194.6,166.9L49.1,167l0,0c6.9,0,12.4,37.2,12.4,83.2c0,44.1-5.1,80.3-11.6,83
+          l144.7,0l0,0c6.9,0,12.4-37.2,12.4-83.2C207,204.2,201.4,166.9,194.6,166.9z"
+          :style="spoolTube" />
+  
+    <path id="filament_base"
+          d="M35,31c18.8-12.1,138-10.4,162.1,0c24.9,10.4,41.1,398.9,0,438.1
+          c-37.2,12.2-147.7,11.4-162.1,0C22,458.8,16.2,43,35,31z"
+          :style="colorReel" />
+  
+    <path id="spool_left_rim"
+          d="M42.5,0.3h-5v2.3C19.3,19,5.3,123.6,5.3,250s14,231.1,32.2,247.5v2.3h5
+          c20.5,0,37.2-111.9,37.2-249.8S63,0.3,42.5,0.3z"
+          :style="spoolRim" />
+  
+    <path id="spool_left"
+          d="M37.5,0.3C58,0.3,74.6,112.2,74.6,250S58,499.8,37.5,499.8S0.3,387.9,0.3,250
+          S16.9,0.3,37.5,0.3z"
+          :style="spoolColor" />
+  
+    <path id="spool_hole"
+          d="M35.5,171.6c6.5,0,11.6,35.1,11.6,78.4s-5.3,78.4-11.6,78.4S23.9,293.3,23.9,250
+          S29,171.6,35.5,171.6z"
+          :style="spoolHole" />
+    </svg>
+</template>
+
+
+<script lang="ts">
+    import Component from 'vue-class-component'
+    import { Mixins, Prop } from 'vue-property-decorator'
+    import BaseMixin from '@/components/mixins/base'
+
+    @Component({})
+    export default class FilamentReelIcon extends Mixins(BaseMixin) {
+        @Prop({ required: false, default: '#ff0' })
+        declare readonly color: string
+
+        get colorReel() {
+            return { fill: this.color }
+        }
+
+        get spoolColor() {
+            return { fill: "#c08f4f" }
+        }
+
+        get spoolHole() {
+            return { fill: "#231a0f" }
+        }
+
+        get spoolTube() {
+            return { fill: "#594226" }
+        }
+
+        get spoolRim() {
+            return { fill: "#9b7242" }
+        }
+
+        clickSpool() {
+            this.$emit('click-spool')
+        }
+    }
+</script>
+
+<style scoped>
+</style>