You can simplify and improve the readability of your code by restructuring the ternary operator and using a fallback for undefined item.color in a more concise way:

const custom_icon = 'icon2';
const status_color_to_icon_name = {
  white: 'info',
  orange: 'major',
};
const default_icon_name = 'icon1';

<Icon 
  name={
    item.color === 'red' 
      ? custom_icon 
      : status_color_to_icon_name[item.color] || default_icon_name
  } 
  color={item.color || 'defaultColor'} 
/>

If we actually try to debug it:

const items = [{
    id: 1,
    color: 'red'
  },
  {
    id: 2,
    color: 'blue'
  },
  {
    id: 3,
    color: 'white'
  },
  {
    id: 4,
    color: 'orange'
  },
  // and etc
];

const custom_icon = 'icon2';
const default_icon_name = 'icon1';

const status_color_to_icon_name = {
  white: 'info',
  orange: 'major',
  blue: 'neutral',
};

items.forEach((item) => {
  const icon_name = item.color === 'red' ?
    custom_icon :
    status_color_to_icon_name[item.color] || default_icon_name;

  console.log(`Item ID: ${item.id}, Color: ${item.color}, Icon: ${icon_name}`);
});

So, the ternary operator: item.color === 'red' ? custom_icon : ... checks if the color is 'red', and if so, logs the custom_icon.

Fallback to default_icon_name: status_color_to_icon_name[item.color] || default_icon_name checks the object for the color, and if the color is not found (e.g., blue or unknown), it defaults to default_icon_name.

Your approach is correct, but there is a small typo in your code.
You defined custom_icon but used custom_icon_name

const customIcon = 'icon2';

const statusColorToIconName = {
    white: 'info',
    orange: 'major',
};
const defaultIconName = 'icon1';

const getIconName = (color) => {
    if (color === 'red') {
        return customIcon;
    }
    return statusColorToIconName[color] || defaultIconName;
};

<Icon name={getIconName(item.color)} color={item.color}/>