getting there, thanks Shadow

code/modules/asset_cache/asset_list_items.dm

@@ -445,16 +445,16 @@
 	for(var/datum/robot_sprite/S as anything in typesof(/datum/robot_sprite))
 		if(!S.name)
 			continue
-		var/icon/I_S = icon(S.sprite_icon, S.sprite_icon_state, SOUTH)
 		var/icon/I_N = icon(S.sprite_icon, S.sprite_icon_state, NORTH)
+		var/icon/I_S = icon(S.sprite_icon, S.sprite_icon_state, SOUTH)
 		var/icon/I_W = icon(S.sprite_icon, S.sprite_icon_state, WEST)
 		var/icon/I_E = icon(S.sprite_icon, S.sprite_icon_state, EAST)
-		var/icon/I_SE = icon(S.sprite_icon, "[S.sprite_icon_state]-eyes", SOUTH)
-		if(I_SE)
-			I_S.Blend(I_SE, ICON_OVERLAY)
 		var/icon/I_NE = icon(S.sprite_icon, "[S.sprite_icon_state]-eyes", NORTH)
 		if(I_NE)
 			I_N.Blend(I_NE, ICON_OVERLAY)
+		var/icon/I_SE = icon(S.sprite_icon, "[S.sprite_icon_state]-eyes", SOUTH)
+		if(I_SE)
+			I_S.Blend(I_SE, ICON_OVERLAY)
 		var/icon/I_WE = icon(S.sprite_icon, "[S.sprite_icon_state]-eyes", WEST)
 		if(I_WE)
 			I_W.Blend(I_WE, ICON_OVERLAY)
@@ -462,10 +462,10 @@
 		if(I_EE)
 			I_E.Blend(I_EE, ICON_OVERLAY)
 		var/imgid = sanitize_css_class_name("[S.type]")
-		Insert(imgid + "_S", I_S)
-		Insert(imgid + "_N", I_N)
-		Insert(imgid + "_W", I_W)
-		Insert(imgid + "_E", I_E)
+		Insert(imgid + "N", I_N)
+		Insert(imgid + "S", I_S)
+		Insert(imgid + "W", I_W)
+		Insert(imgid + "E", I_E)
 
 
 //Cloning pod sprites for UIs

code/modules/mob/living/silicon/robot/robot_ui_module.dm

@@ -48,6 +48,7 @@
 	var/list/data = ..()
 
 	var/mob/living/silicon/robot/R = host
+	var/datum/asset/spritesheet/robot_icons/spritesheet = get_asset_datum(/datum/asset/spritesheet/robot_icons)
 
 	if(selected_module)
 		data["selected_module"]  = selected_module
@@ -72,9 +73,10 @@
 
 		data["possible_sprites"] = available_sprites
 		data["sprite_datum"] = sprite_datum
-		data["asset"] = null
+		data["sprite_datum_class"] = null
 		if(sprite_datum)
-			data["asset"] = sanitize_css_class_name("[sprite_datum.type]")
+			data["sprite_datum_class"] = sanitize_css_class_name("[sprite_datum.type]")
+			data["sprite_datum_size"] = spritesheet.icon_size_id(data["sprite_datum_class"] + "S") // just get the south icon's size, the rest will be the same
 
 	return data
 

tgui/packages/tgui/interfaces/RobotChoose/IconSection.tsx

@@ -1,10 +1,13 @@
-import { resolveAsset } from 'tgui/assets';
 import { useBackend } from 'tgui/backend';
-import { Button, Image, Section, Stack } from 'tgui-core/components';
+import { Box, Button, Section, Stack } from 'tgui-core/components';
+import { classes } from 'tgui-core/react';
 
-export const IconSection = (props: { sprite?: string | null }) => {
+export const IconSection = (props: {
+  sprite?: string | null;
+  size?: string;
+}) => {
   const { act } = useBackend();
-  const { sprite } = props;
+  const { sprite, size } = props;
 
   return (
     <Section
@@ -18,39 +21,19 @@ export const IconSection = (props: { sprite?: string | null }) => {
         </Button>
       }
     >
-      {!!sprite && (
+      {!!sprite && !!size && (
         <>
           <Stack.Item>
-            <Image
-              src={resolveAsset(sprite + '_N')}
-              style={{
-                width: '100%',
-              }}
-            />
+            <Box className={classes([size, sprite + 'N'])} />
           </Stack.Item>
           <Stack.Item>
-            <Image
-              src={resolveAsset(sprite + '_S')}
-              style={{
-                width: '100%',
-              }}
-            />
+            <Box className={classes([size, sprite + 'S'])} />
           </Stack.Item>
           <Stack.Item>
-            <Image
-              src={resolveAsset(sprite + '_W')}
-              style={{
-                width: '100%',
-              }}
-            />
+            <Box className={classes([size, sprite + 'W'])} />
           </Stack.Item>
           <Stack.Item>
-            <Image
-              src={resolveAsset(sprite + '_E')}
-              style={{
-                width: '100%',
-              }}
-            />
+            <Box className={classes([size, sprite + 'E'])} />
           </Stack.Item>
         </>
       )}

tgui/packages/tgui/interfaces/RobotChoose/index.tsx

@@ -16,7 +16,8 @@ export const RobotChoose = (props) => {
     selected_module,
     sprite_datum,
     theme,
-    asset,
+    sprite_datum_class,
+    sprite_datum_size,
   } = data;
 
   return (
@@ -33,7 +34,7 @@ export const RobotChoose = (props) => {
             sortable={possible_sprites}
             selected={sprite_datum}
           />
-          <IconSection sprite={asset} />
+          <IconSection sprite={sprite_datum_class} size={sprite_datum_size} />
         </Stack>
       </Window.Content>
     </Window>

tgui/packages/tgui/interfaces/RobotChoose/types.ts

@@ -4,7 +4,8 @@ export type Data = {
   theme?: string;
   selected_module?: string;
   sprite_datum?: string | null;
-  asset?: string | null;
+  sprite_datum_class?: string | null;
+  sprite_datum_size?: string;
 };
 
 export type spriteOption = { sprite: string; belly: boolean; type: string };