diff --git a/code/datums/components/crafting/crafting.dm b/code/datums/components/crafting/crafting.dm
index b9c3275a411..35392298990 100644
--- a/code/datums/components/crafting/crafting.dm
+++ b/code/datums/components/crafting/crafting.dm
@@ -487,14 +487,24 @@
 		get_asset_datum(/datum/asset/spritesheet/crafting),
 		get_asset_datum(/datum/asset/spritesheet/crafting/cooking),
 	)
-///
+
 /datum/component/personal_crafting/proc/build_crafting_data(datum/crafting_recipe/recipe)
 	var/list/data = list()
 	var/list/atoms = mode ? GLOB.cooking_recipes_atoms : GLOB.crafting_recipes_atoms
 
 	data["ref"] = "[REF(recipe)]"
 	var/atom/atom = recipe.result
-	data["result"] = atoms.Find(atom)
+
+	//load sprite sheets and select the correct one based on the mode
+	var/static/list/sprite_sheets
+	if(isnull(sprite_sheets))
+		sprite_sheets = ui_assets()
+	var/datum/asset/spritesheet/sheet = sprite_sheets[mode ? 2 : 1]
+
+	//infer icon size of this atom
+	var/atom_id = atoms.Find(atom)
+	var/icon_size = sheet.icon_size_id("a[atom_id]")
+	data["icon"] = "[icon_size] a[atom_id]"
 
 	var/recipe_data = recipe.crafting_ui_data()
 	for(var/new_data in recipe_data)
diff --git a/code/modules/asset_cache/assets/crafting.dm b/code/modules/asset_cache/assets/crafting.dm
index 80b95be169f..139616fdc81 100644
--- a/code/modules/asset_cache/assets/crafting.dm
+++ b/code/modules/asset_cache/assets/crafting.dm
@@ -71,4 +71,4 @@
 	)
 
 	for(var/tool in tool_icons)
-		Insert(tool, tool_icons[tool])
+		Insert(replacetext(tool, " ", ""), tool_icons[tool])
diff --git a/tgui/packages/tgui/interfaces/PersonalCrafting.tsx b/tgui/packages/tgui/interfaces/PersonalCrafting.tsx
index 700f883b9f6..5b1662fcb01 100644
--- a/tgui/packages/tgui/interfaces/PersonalCrafting.tsx
+++ b/tgui/packages/tgui/interfaces/PersonalCrafting.tsx
@@ -105,7 +105,7 @@ type Material = {
 
 type Recipe = {
   ref: string;
-  result: number;
+  icon: string;
   name: string;
   desc: string;
   category: string;
@@ -606,12 +606,7 @@ const RecipeContentCompact = ({ item, craftable, busy, mode }, context) => {
     <Section>
       <Stack my={-0.75}>
         <Stack.Item>
-          <Box
-            className={classes([
-              mode ? 'cooking32x32' : 'crafting32x32',
-              'a' + item.result,
-            ])}
-          />
+          <Box className={item.icon} />
         </Stack.Item>
         <Stack.Item grow>
           <Stack>
@@ -725,16 +720,11 @@ const RecipeContent = ({ item, craftable, busy, mode, diet }, context) => {
         <Stack.Item>
           <Box width={'64px'} height={'64px'} mr={1}>
             <Box
-              width={'32px'}
-              height={'32px'}
               style={{
-                'transform': 'scale(2)',
+                'transform': 'scale(1.5)',
               }}
               m={'16px'}
-              className={classes([
-                mode ? 'cooking32x32' : 'crafting32x32',
-                'a' + item.result,
-              ])}
+              className={item.icon}
             />
           </Box>
         </Stack.Item>
@@ -896,7 +886,7 @@ const ToolContent = ({ tool }) => {
         inline
         my={-1}
         mr={0.5}
-        className={classes(['crafting32x32', tool])}
+        className={classes(['crafting32x32', tool.replace(/ /g, '')])}
       />
       <Box inline verticalAlign="middle">
         {tool}