# Forecast Icon Hosting

**URL:** <https://community.tempest.earth/t/forecast-icon-hosting/20748>\
**Category:** Feature Requests\
**Tags:** api, tempest\
**Created:** [April 27, 2023, 9:15pm UTC](https://community.tempest.earth/t/forecast-icon-hosting/20748 "2023-04-27T21:15:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![matt6](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@matt6](https://community.tempest.earth/u/matt6)\
**Post date:** [April 27, 2023, 9:15pm UTC](https://community.tempest.earth/t/forecast-icon-hosting/20748/1 "2023-04-27T21:15:36Z")

</div>

Weatherflow should host current condition icons on the web where developers can use them in custom integrations using a standard URL format that matches the returned icon name, like [weatherflow.com/icons/clear-day.png](http://weatherflow.com/icons/clear-day.png) or something similar for each.

These Possible Icon Values:

- clear-day
- clear-night
- cloudy
- foggy
- partly-cloudy-day
- partly-cloudy-night
- possibly-rainy-day
- possibly-rainy-night
- possibly-sleet-day
- possibly-sleet-night
- possibly-snow-day
- possibly-snow-night
- possibly-thunderstorm-day
- possibly-thunderstorm-night
- rainy
- sleet
- snow
- thunderstorm

[https://weatherflow.github.io/Tempest/api/swagger/](https://weatherflow.github.io/Tempest/api/swagger/)

---

<div class="post-metadata">

**Author:** ![matt6](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@matt6](https://community.tempest.earth/u/matt6)\
**Post date:** [April 27, 2023, 9:23pm UTC](https://community.tempest.earth/t/forecast-icon-hosting/20748/2 "2023-04-27T21:23:22Z")

</div>

As it stands now, I have hosted my own set of icons and named them to match and use the following code to access them.

```auto
<script defer>
  // Fetch weather current conditions from API
  const options = {method: 'GET', headers: {accept: 'application/json'}};
    fetch('https://swd.weatherflow.com/swd/rest/better_forecast?station_id={snip}&units_temp=c&units_wind=mps&units_pressure=mb&units_precip=mm&units_distance=km&api_key={snip}', options)
      .then(response => response.json())
      .then(response => {
        const currentConditions = response.current_conditions;
        const currentConditionsText = currentConditions.conditions;
        const currentConditionsIcon = currentConditions.icon;
        const imageSrc = `/images/${currentConditionsIcon}.png`;
        document.getElementById('conditions').textContent = currentConditionsText;
        document.getElementById('conditions-icon').setAttribute('src', imageSrc);
    })
    .catch(err => console.error(err));
  </script>

<img id="conditions-icon" src="" alt="" style="display: block; margin-left: auto; margin-right: auto;">

```