The Problem

You've forgotten to return the icon from the second then and obviously didn't pass the returned data from the second then into the third then to use them.

How to fix it

return the icon or your whole data from the second then to use it on the third one:

fetch(api)
   .then(response => { return response.json(); })
   .then(data => {
       console.log(data.weather[0].icon)
       const {temp} = data.main;
       const {description} = data.weather[0];
       const {icon} = data.weather[0]; 
       temperatureDescription.textContent = description;
       temperatureDegree.textContent = Math.floor(temp - 273.15);
       locationTimezone.textContent = data.name;
       
       return icon  // -----> here
    })
    .then(function(icon){   // ----> pass the returned data to the function param to use it in this function
        displayWeather();
        locationIcon.innerHTML = `<img src="https://res.cloudinary.com/dybrtotf1/image/upload/v1634954533/icons/${icon}.png">`;
    });
})();

Optionally

It seems that the third then changing is redundant, you can do the same with the second then, in this code snippet, I removed the unwanted parts:

fetch(api)
   .then(response => response.json())
   .then(data => {
       const {temp} = data.main;
       const {icon, description} = data.weather[0];

       temperatureDescription.textContent = description;
       temperatureDegree.textContent = Math.floor(temp - 273.15);
       locationTimezone.textContent = data.name;
       locationIcon.innerHTML = `<img src="https://res.cloudinary.com/dybrtotf1/image/upload/v1634954533/icons/${icon}.png">`
       
       displayWeather();

   })
   .catch(error => console.log(error)) 
})();

Note: always use the catch block with the asynchronous actions to catch the errors and do the proper actions in the failure case. here I just logged the error message, you can customize this section by adding the desired functionality.