Build A Weather App in HTML, CSS, and JavaScript

Creating a weather app is a great project for beginner web developers. It strengthens your basic skills and shows how to use APIs in JavaScript. You’ll get hands-on experience in fetching and displaying data from external sources. These skills are essential for building real-world applications.

In this blog post, I’ll help you build a beautiful and interactive weather app using HTML, CSS, and JavaScript. This app lets users check the weather for any city or use their current location to get the forecast. It will include real-time weather updates and a 24-hour forecast.

By the end of this guide, you’ll have a fully functional weather app that improves your coding skills and offers a practical tool to use and showcase. Whether you add it to your portfolio or just try out new techniques, this project is an important step in your web development journey.

Table of Contents

Steps to Build Weather App in HTML & JavaScript

To create a functional weather app using HTML, CSS, and JavaScript, follow these straightforward instructions:

Create a folder with any name you like, such as weather-app.
Inside it, create the necessary files: index.html, style.css, and script.js.
Download the Icons folder and place it in your project directory. This folder contains icons for various weather conditions.
In your index.html file, add the essential HTML markup to structure your weather app layout. This includes a search input for city names, a location button, and sections to display the current weather and hourly forecast, all using semantic tags.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather App | CodingNepal</title>
  <!-- Linking Google fonts for icons -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <!-- Search section -->
    <div class="search-section">
      <div class="input-wrapper">
        <span class="material-symbols-rounded">search</span>
        <input type="search" placeholder="Enter a city name" class="search-input">
      </div>
      <button class="location-button">
        <span class="material-symbols-rounded">my_location</span>
      </button>
    </div>

    <!-- No results message -->
    <div class="no-results">
      <img src="icons/no-result.svg" alt="No results found" class="icon">
      <h3 class="title">Something went wrong!</h3>
      <p class="message">We're unable to retrieve the weather details. Ensure you've entered a valid city or try again later.</p>
    </div>

    <!-- Container for displaying weather data -->
    <div class="weather-section">
      <div class="current-weather">
        <img src="icons/no-result.svg" class="weather-icon">
        <h2 class="temperature">00<span>°C</span></h2>
        <h5 class="description">Weather description</h5>
      </div>

      <!-- Hourly weather forecast list -->
      <div class="hourly-weather">
        <ul class="weather-list"></ul>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

In your style.css file, add CSS code to style your weather app and give it a responsive and appealing design. Experiment with different colors, fonts, and backgrounds to create a user-friendly interface.

/* Importing Google Fonts - Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #5f41e4;
}

.container {
  flex-grow: 1;
  overflow: hidden;
  max-width: 425px;
  border-radius: 10px;
  position: relative;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.search-section {
  display: flex;
  gap: 10px;
  padding: 25px;
  align-items: center;
}

.search-section .input-wrapper {
  height: 54px;
  width: 100%;
  position: relative;
}

.search-section .input-wrapper span {
  position: absolute;
  top: 50%;
  left: 17px;
  pointer-events: none;
  transform: translateY(-50%);
}

.search-section .search-input {
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 6px;
  text-transform: uppercase;
  padding: 0 20px 0 50px;
  border: 1px solid #beb0ff;
  background: #fff;
  transition: 0.1s ease;
}

.search-section .search-input:focus {
  border-color: #5f41e4;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.14);
}

.search-section .search-input::placeholder {
  text-transform: none;
}

.search-section .location-button {
  height: 54px;
  width: 56px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #fff;
  color: #5f41e4;
  border: 1px solid #beb0ff;
  transition: 0.3s ease;
}

.search-section .location-button:hover {
  color: #fff;
  background: #5f41e4;
  border-color: #5f41e4;
}

.search-section .location-button span {
  font-size: 1.3rem;
}

.no-results {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  display: none;
  padding: 40px;
  text-align: center;
  align-items: center;
  flex-direction: column;
  transform: translate(-50%, -50%);
  transition: 0.2s ease;
}

body.show-no-results .no-results {
  display: flex;
}

.no-results .title {
  font-weight: 700;
  margin: 25px 0 15px;
}

.no-results .message {
  font-weight: 500;
  line-height: 23px;
}

body.show-no-results .weather-section {
  visibility: hidden;
}

.weather-section .current-weather {
  display: flex;
  padding: 20px 0 50px;
  flex-direction: column;
  align-items: center;
}

.current-weather .weather-icon {
  width: 140px;
  aspect-ratio: 1;
}

.current-weather .temperature {
  font-size: 3.38rem;
  margin: 23px 0;
  display: flex;
}

.current-weather .temperature span {
  font-size: 1.56rem;
  font-weight: 500;
  margin: 5px 0 0 2px;
}

.current-weather .description {
  font-weight: 500;
  font-size: 1.25rem;
}

.hourly-weather {
  padding: 16px 25px;
  border-top: 1px solid #d5ccff;
}

.hourly-weather .weather-list {
  display: flex;
  gap: 41px;
  overflow-x: auto;
  padding-bottom: 16px;
  margin-bottom: -16px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.hourly-weather:hover .weather-list {
  scrollbar-color: #bfbfbf transparent;
}

.hourly-weather .weather-list .weather-item {
  display: flex;
  gap: 7px;
  width: 60px;
  font-weight: 500;
  flex-direction: column;
  align-items: center;
}

.hourly-weather .weather-item .weather-icon {
  width: 28px;
  aspect-ratio: 1;
}

/* Responsive media query code for small screen */
@media (max-width: 624px) {
  body {
    padding: 15px;
  }

  .search-section {
    padding: 20px;
  }

  .no-results {
    padding: 30px;
  }

  .hourly-weather {
    padding: 16px 20px;
  }

  .hourly-weather .weather-list {
    gap: 32px;
  }
}

In your script.js file, add JavaScript code to make your weather app interactive and functional. This code will fetch the current weather and an hourly forecast from an external API and update the DOM to display the data in real-time.

const searchInput = document.querySelector(".search-input");
const locationButton = document.querySelector(".location-button");
const currentWeatherDiv = document.querySelector(".current-weather");
const hourlyWeather = document.querySelector(".hourly-weather .weather-list");

const API_KEY = "YOUR-API-KEY-HERE"; // API key

// Weather codes for mapping to custom icons
const weatherCodes = {
  clear: [1000],
  clouds: [1003, 1006, 1009],
  mist: [1030, 1135, 1147],
  rain: [1063, 1150, 1153, 1168, 1171, 1180, 1183, 1198, 1201, 1240, 1243, 1246, 1273, 1276],
  moderate_heavy_rain: [1186, 1189, 1192, 1195, 1243, 1246],
  snow: [1066, 1069, 1072, 1114, 1117, 1204, 1207, 1210, 1213, 1216, 1219, 1222, 1225, 1237, 1249, 1252, 1255, 1258, 1261, 1264, 1279, 1282],
  thunder: [1087, 1279, 1282],
  thunder_rain: [1273, 1276],
}

// Display the hourly forecast for the next 24 hours
const displayHourlyForecast = (hourlyData) => {
  const currentHour = new Date().setMinutes(0, 0, 0);
  const next24Hours = currentHour + 24 * 60 * 60 * 1000;

  // Filter the hourly data to include only the next 24 hours
  const next24HoursData = hourlyData.filter(({ time }) => {
    const forecastTime = new Date(time).getTime();
    return forecastTime >= currentHour && forecastTime <= next24Hours;
  });

  // Generate HTML for each hourly forecast and display it
  hourlyWeather.innerHTML = next24HoursData.map((item) => {
    const temperature = Math.floor(item.temp_c);
    const time = item.time.split(' ')[1].substring(0, 5);
    const weatherIcon = Object.keys(weatherCodes).find(icon => weatherCodes[icon].includes(item.condition.code));

    return `<li class="weather-item">
            <p class="time">${time}</p>
            <img src="icons/${weatherIcon}.svg" class="weather-icon">
            <p class="temperature">${temperature}°</p>
          </li>`;
  }).join('');
};

// Fetch and display weather details
const getWeatherDetails = async (API_URL) => {
  window.innerWidth <= 768 && searchInput.blur();
  document.body.classList.remove("show-no-results");

  try {
    // Fetch weather data from the API and parse the response as JSON
    const response = await fetch(API_URL);
    const data = await response.json();

    // Extract current weather details
    const temperature = Math.floor(data.current.temp_c);
    const description = data.current.condition.text;
    const weatherIcon = Object.keys(weatherCodes).find(icon => weatherCodes[icon].includes(data.current.condition.code));

    // Update the current weather display
    currentWeatherDiv.querySelector(".weather-icon").src = `icons/${weatherIcon}.svg`;
    currentWeatherDiv.querySelector(".temperature").innerHTML = `${temperature}<span>°C</span>`;
    currentWeatherDiv.querySelector(".description").innerText = description;

    // Combine hourly data from today and tomorrow
    const combinedHourlyData = [...data.forecast?.forecastday[0]?.hour, ...data.forecast?.forecastday[1]?.hour];

    searchInput.value = data.location.name;
    displayHourlyForecast(combinedHourlyData);
  } catch (error) {
    document.body.classList.add("show-no-results");
  }
}

// Set up the weather request for a specific city
const setupWeatherRequest = (cityName) => {
  const API_URL = `https://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${cityName}&days=2`;
  getWeatherDetails(API_URL);
}

// Handle user input in the search box
searchInput.addEventListener("keyup", (e) => {
  const cityName = searchInput.value.trim();

  if (e.key == "Enter" && cityName) {
    setupWeatherRequest(cityName);
  }
});

// Get user's coordinates and fetch weather data for the current location
locationButton.addEventListener("click", () => {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      const API_URL = `https://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${latitude},${longitude}&days=2`;
      getWeatherDetails(API_URL);
      window.innerWidth >= 768 && searchInput.focus();
    },
    () => {
      alert("Location access denied. Please enable permissions to use this feature.");
    }
  );
});

// Initial weather request for London as the default city
setupWeatherRequest("Dhaka");

Important! Your weather app won’t function until you connect it with a weather API. Sign up for a free API key from WeatherAPI and add it to the API_KEY variable in your script.js file. This key allows your app to retrieve real-time and hourly forecasts.
The key will look something like this: 5f2b6b5a24044bcdbbc103609241008.

SVG Icons

icons/clear.svg

<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M37.5588 62.2938C51.0826 62.2938 62.0458 51.3306 62.0458 37.8068C62.0458 24.283 51.0826 13.3198 37.5588 13.3198C24.035 13.3198 13.0718 24.283 13.0718 37.8068C13.0718 51.3306 24.035 62.2938 37.5588 62.2938Z" fill="#FFC107"/>
<path d="M37.5583 10.0551C38.4599 10.0551 39.1908 9.32412 39.1908 8.42254V1.89277C39.1908 0.991191 38.4599 0.260254 37.5583 0.260254C36.6567 0.260254 35.9258 0.991191 35.9258 1.89277V8.42269C35.9259 9.32412 36.6567 10.0551 37.5583 10.0551Z" fill="#FFD54F"/>
<path d="M37.5583 65.5591C36.6567 65.5591 35.9258 66.29 35.9258 67.1916V73.7214C35.9258 74.6229 36.6567 75.3539 37.5583 75.3539C38.4599 75.3539 39.1908 74.6229 39.1908 73.7214V67.1914C39.1908 66.2899 38.4599 65.5591 37.5583 65.5591Z" fill="#FFD54F"/>
<path d="M73.4725 36.1748H66.9426C66.041 36.1748 65.3101 36.9057 65.3101 37.8073C65.3101 38.7089 66.041 39.4398 66.9426 39.4398H73.4725C74.3741 39.4398 75.105 38.7089 75.105 37.8073C75.105 36.9056 74.3741 36.1748 73.4725 36.1748Z" fill="#FFD54F"/>
<path d="M9.80652 37.8071C9.80652 36.9055 9.07558 36.1746 8.174 36.1746H1.64424C0.742656 36.1747 0.0117188 36.9055 0.0117188 37.8071C0.0117188 38.7087 0.742656 39.4396 1.64424 39.4396H8.17415C9.07558 39.4396 9.80652 38.7087 9.80652 37.8071Z" fill="#FFD54F"/>
<path d="M21.4527 13.1763C21.7449 13.6824 22.2853 13.9937 22.8697 13.9925C23.1564 13.9935 23.4383 13.9181 23.6859 13.7738C24.4668 13.3229 24.7341 12.3246 24.2834 11.5438L21.0185 5.88895C20.5626 5.11118 19.5625 4.85024 18.7847 5.30616C18.0141 5.75779 17.7497 6.74492 18.1912 7.52132L21.4527 13.1763Z" fill="#FFD54F"/>
<path d="M53.6645 62.4376C53.2084 61.6599 52.2083 61.3991 51.4305 61.8551C50.6602 62.3069 50.3958 63.2937 50.837 64.0701L54.1019 69.725C54.394 70.2311 54.9344 70.5424 55.5189 70.5411C55.8056 70.5422 56.0875 70.4668 56.3351 70.3224C57.1159 69.8716 57.3833 68.8733 56.9326 68.0924L53.6645 62.4376Z" fill="#FFD54F"/>
<path d="M63.0049 24.7472C63.2915 24.7483 63.5734 24.6728 63.821 24.5285L69.4758 21.2636C70.2747 20.8457 70.5836 19.8593 70.1656 19.0604C69.7477 18.2615 68.7613 17.9527 67.9624 18.3707C67.9217 18.3919 67.882 18.4149 67.8433 18.4395L62.1885 21.7044C61.4077 22.1553 61.1403 23.1537 61.591 23.9344C61.8826 24.4395 62.4214 24.7506 63.0047 24.7506V24.7472H63.0049Z" fill="#FFD54F"/>
<path d="M11.2955 51.0856L5.64067 54.3505C4.85984 54.8013 4.59247 55.7996 5.04318 56.5805C5.33473 57.0855 5.8736 57.3966 6.45685 57.3966C6.7435 57.3977 7.02541 57.3223 7.27303 57.1779L12.9278 53.9131C13.7267 53.4951 14.0356 52.5087 13.6176 51.7098C13.1996 50.911 12.2133 50.6021 11.4144 51.0201C11.3737 51.0413 11.334 51.0643 11.2953 51.0889L11.2955 51.0856Z" fill="#FFD54F"/>
<path d="M5.64047 21.2634L11.2953 24.5283C11.5421 24.672 11.8227 24.7476 12.1083 24.7469C13.0098 24.7469 13.7406 24.016 13.7406 23.1144C13.7406 22.5313 13.4295 21.9925 12.9244 21.7008L7.26962 18.4359C6.50869 17.9523 5.49983 18.1769 5.01621 18.9377C4.53259 19.6985 4.75726 20.7075 5.51804 21.1911C5.55676 21.2158 5.5964 21.2387 5.63711 21.26L5.64047 21.2634Z" fill="#FFD54F"/>
<path d="M69.4767 54.3504L63.8219 51.0855C63.0609 50.6019 62.0521 50.8266 61.5685 51.5874C61.0848 52.3482 61.3095 53.3572 62.0703 53.8408C62.109 53.8654 62.1488 53.8884 62.1894 53.9097L67.8442 57.1745C68.0919 57.3189 68.3737 57.3943 68.6603 57.3932C69.5619 57.3932 70.2927 56.6623 70.2927 55.7607C70.2927 55.1775 69.9816 54.6386 69.4765 54.3471V54.3504H69.4767Z" fill="#FFD54F"/>
<path d="M51.4342 13.7734C51.6819 13.9178 51.9637 13.9932 52.2504 13.9921C52.8347 13.9934 53.3751 13.6819 53.6674 13.176L56.9323 7.52115C57.3778 6.73741 57.1035 5.74079 56.3198 5.29528C55.5434 4.85405 54.5566 5.11836 54.1048 5.88878L50.8399 11.5436C50.3886 12.3234 50.6546 13.3215 51.4342 13.7734Z" fill="#FFD54F"/>
<path d="M23.6821 61.8401C22.9013 61.3893 21.903 61.6567 21.4521 62.4375L18.1872 68.0924C17.7365 68.8732 18.0039 69.8715 18.7847 70.3223C19.0325 70.4667 19.3142 70.5421 19.6009 70.5411C20.1852 70.5423 20.7258 70.2308 21.0179 69.7249L24.2828 64.0701C24.7328 63.2888 24.4643 62.2906 23.683 61.8407C23.6827 61.8404 23.6824 61.8402 23.6821 61.8401Z" fill="#FFD54F"/>
<path d="M37.5588 62.2938C24.0349 62.2938 13.0718 51.3307 13.0718 37.8068C13.0718 24.283 24.0349 13.3198 37.5588 13.3198C51.0826 13.3198 62.0458 24.283 62.0458 37.8068C62.0314 51.3247 51.0767 62.2794 37.5588 62.2938ZM37.5588 16.5849C25.8382 16.5849 16.3367 26.0863 16.3367 37.807C16.3367 49.5277 25.8382 59.0289 37.5588 59.0289C49.2793 59.0289 58.7809 49.5275 58.7809 37.8068C58.7665 26.0922 49.2735 16.5992 37.5588 16.5849Z" fill="black"/>
<path d="M37.5583 10.0551C36.6567 10.0551 35.9258 9.32412 35.9258 8.42254V1.89277C35.9259 0.991191 36.6567 0.260254 37.5583 0.260254C38.4599 0.260254 39.1908 0.991191 39.1908 1.89277V8.42269C39.1908 9.32412 38.4599 10.0551 37.5583 10.0551Z" fill="black"/>
<path d="M37.5583 75.3538C36.6567 75.3538 35.9258 74.6229 35.9258 73.7213V67.1914C35.9258 66.2898 36.6567 65.5588 37.5583 65.5588C38.4599 65.5588 39.1908 66.2898 39.1908 67.1914V73.7213C39.1908 74.6229 38.4599 75.3538 37.5583 75.3538Z" fill="black"/>
<path d="M73.4725 39.4396H66.9426C66.041 39.4396 65.3101 38.7087 65.3101 37.8071C65.3101 36.9055 66.041 36.1746 66.9426 36.1746H73.4725C74.3741 36.1746 75.105 36.9055 75.105 37.8071C75.105 38.7087 74.3741 39.4396 73.4725 39.4396Z" fill="black"/>
<path d="M8.174 39.4396H1.64424C0.742656 39.4396 0.0117188 38.7087 0.0117188 37.8071C0.0117188 36.9055 0.742656 36.1746 1.64424 36.1746H8.17415C9.07573 36.1746 9.80667 36.9055 9.80667 37.8071C9.80652 38.7087 9.07558 39.4396 8.174 39.4396Z" fill="black"/>
<path d="M22.8663 13.9927C22.2831 13.9927 21.7442 13.6816 21.4527 13.1765L18.1878 7.52171C17.7698 6.72282 18.0787 5.73646 18.8776 5.31849C19.6293 4.92532 20.5568 5.17325 21.0119 5.88919L24.2768 11.544C24.7277 12.3248 24.4601 13.3231 23.6793 13.774C23.4312 13.9173 23.1496 13.9927 22.8631 13.9927H22.8663Z" fill="black"/>
<path d="M55.5156 70.5414C54.9323 70.5414 54.3934 70.2303 54.1019 69.7252L50.837 64.0704C50.3534 63.3095 50.5781 62.3006 51.3388 61.817C52.0996 61.3334 53.1086 61.558 53.5923 62.3188C53.6169 62.3575 53.6399 62.3973 53.6611 62.4379L56.926 68.0927C57.3769 68.8735 57.1094 69.8718 56.3285 70.3227C56.0804 70.4659 55.7988 70.5414 55.5123 70.5414H55.5156Z" fill="black"/>
<path d="M63.0049 24.7472C62.1033 24.7472 61.3726 24.0163 61.3726 23.1147C61.3726 22.5316 61.6837 21.9927 62.1887 21.701L67.8436 18.4361C68.6045 17.9525 69.6134 18.1772 70.097 18.938C70.5806 19.6987 70.3559 20.7078 69.5951 21.1914C69.5564 21.216 69.5166 21.239 69.4761 21.2602L63.8213 24.5251C63.5733 24.6696 63.2919 24.7461 63.0049 24.7472Z" fill="black"/>
<path d="M6.45658 57.3966C5.555 57.3966 4.82422 56.6656 4.82422 55.764C4.82422 55.1808 5.13536 54.6419 5.6404 54.3504L11.2952 51.0855C12.0941 50.6675 13.0805 50.9764 13.4984 51.7753C13.8916 52.5269 13.6437 53.4545 12.9277 53.9096L7.27292 57.1745C7.02499 57.319 6.74339 57.3956 6.45658 57.3966Z" fill="black"/>
<path d="M12.1117 24.7471C11.8252 24.7471 11.5436 24.6717 11.2955 24.5284L5.6407 21.2635C4.87977 20.7799 4.6551 19.7709 5.13887 19.0101C5.59402 18.2942 6.52162 18.0461 7.27322 18.4394L12.928 21.7043C13.707 22.1582 13.9706 23.1577 13.5166 23.9367C13.2251 24.4367 12.6907 24.7451 12.1117 24.7471Z" fill="black"/>
<path d="M68.6606 57.3966C68.3741 57.3966 68.0925 57.3212 67.8444 57.1779L62.1896 53.9131C61.3907 53.4951 61.0818 52.5087 61.4998 51.7098C61.9178 50.911 62.9041 50.6021 63.703 51.0201C63.7437 51.0413 63.7834 51.0643 63.8221 51.0889L69.4769 54.3538C70.2577 54.8047 70.5251 55.803 70.0744 56.5838C69.7828 57.0889 69.244 57.4 68.6607 57.4V57.3966H68.6606Z" fill="black"/>
<path d="M52.2505 13.9927C51.349 13.9927 50.618 13.2618 50.6182 12.3602C50.6182 12.0737 50.6936 11.7921 50.8369 11.544L54.1017 5.88924C54.5854 5.1283 55.5944 4.90364 56.3552 5.38741C57.0711 5.84256 57.319 6.77 56.9259 7.52175L53.661 13.1766C53.37 13.6805 52.8326 13.9915 52.2505 13.9927Z" fill="black"/>
<path d="M19.6011 70.5414C18.6995 70.5414 17.9686 69.8104 17.9688 68.9089C17.9688 68.6224 18.0442 68.3408 18.1874 68.0927L21.4523 62.4379C21.8703 61.639 22.8567 61.3301 23.6555 61.7481C24.4544 62.1661 24.7633 63.1524 24.3453 63.9513C24.324 63.992 24.3011 64.0317 24.2764 64.0704L21.0116 69.7252C20.7205 70.2293 20.1831 70.5403 19.6011 70.5414Z" fill="black"/>
</svg>

icons/clouds.svg

<svg width="76" height="75" viewBox="0 0 76 75" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.1276 29.931C64.1276 40.2096 55.7948 48.5424 45.5162 48.5424C35.2375 48.5424 26.9048 40.2096 26.9048 29.931C26.9048 19.6523 35.2375 11.3196 45.5162 11.3196C55.7948 11.3196 64.1276 19.6523 64.1276 29.931Z" fill="#FDD020"/>
<path d="M45.5161 7.59714C44.8309 7.59714 44.2754 7.04159 44.2754 6.35638V1.39335C44.2754 0.708143 44.8309 0.152588 45.5161 0.152588C46.2014 0.152588 46.7569 0.708143 46.7569 1.39335V6.35638C46.7569 7.04159 46.2014 7.59714 45.5161 7.59714Z" fill="#FDD020"/>
<path d="M74.0529 31.1717H69.0899C68.4047 31.1717 67.8491 30.6161 67.8491 29.9309C67.8491 29.2457 68.4047 28.6902 69.0899 28.6902H74.0529C74.7381 28.6902 75.2937 29.2457 75.2937 29.9309C75.2937 30.6161 74.7381 31.1717 74.0529 31.1717Z" fill="#FDD020"/>
<path d="M60.4051 46.0606C59.4975 46.0606 58.5924 46.1515 57.7024 46.3308C57.0318 42.9836 54.8635 40.1282 51.8197 38.5828C48.7754 37.0373 45.1906 36.9724 42.0924 38.4065C39.2886 30.6832 30.7547 26.6956 23.0315 29.4994C15.3082 32.3038 11.3206 40.8377 14.1244 48.5609C7.35899 48.7748 2.01488 54.374 2.11666 61.1424C2.21784 67.9102 7.72795 73.3464 14.497 73.3573H60.4051C67.9429 73.3573 74.0534 67.2468 74.0534 59.709C74.0534 52.1711 67.9429 46.0606 60.4051 46.0606Z" fill="#A3D4F7"/>
<path d="M28.1452 12.56L23.1821 7.59692Z" fill="#FDD020"/>
<path d="M28.1456 13.8008C27.8166 13.8008 27.501 13.6699 27.2683 13.4373L22.3053 8.47426C21.9824 8.16286 21.8533 7.70121 21.9666 7.26743C22.0805 6.83365 22.4192 6.49498 22.853 6.38169C23.2868 6.26779 23.7484 6.39744 24.0598 6.71975L29.0228 11.6828C29.3773 12.0378 29.4833 12.5716 29.2912 13.035C29.0998 13.4985 28.6472 13.8008 28.1456 13.8008Z" fill="#FDD020"/>
<path d="M62.8872 12.56L67.8502 7.59692Z" fill="#FDD020"/>
<path d="M62.8868 13.8008C62.3851 13.8008 61.9326 13.4985 61.7405 13.035C61.5485 12.5716 61.6545 12.0378 62.0095 11.6828L66.9725 6.71975C67.2839 6.39744 67.745 6.26779 68.1794 6.38169C68.6132 6.49498 68.9518 6.83365 69.0651 7.26743C69.179 7.70121 69.0494 8.16286 68.7271 8.47426L63.764 13.4373C63.5314 13.6699 63.2157 13.8008 62.8868 13.8008Z" fill="#FDD020"/>
<path d="M46.7569 6.35638V1.39335C46.7569 0.708143 46.2014 0.152588 45.5161 0.152588C44.8309 0.152588 44.2754 0.708143 44.2754 1.39335V6.35638C44.2754 7.04159 44.8309 7.59714 45.5161 7.59714C46.2014 7.59714 46.7569 7.04159 46.7569 6.35638Z" fill="black"/>
<path d="M74.0529 28.6902H69.0899C68.4047 28.6902 67.8491 29.2457 67.8491 29.9309C67.8491 30.6161 68.4047 31.1717 69.0899 31.1717H74.0529C74.7381 31.1717 75.2937 30.6161 75.2937 29.9309C75.2937 29.2457 74.7381 28.6902 74.0529 28.6902Z" fill="black"/>
<path d="M60.4049 44.8201C59.8105 44.8201 59.2168 44.8559 58.6267 44.9267C58.6158 44.8898 58.5994 44.8546 58.5879 44.8177C65.2504 38.9865 67.2381 29.4451 63.4583 21.439C59.6784 13.4334 51.0483 8.90413 42.3127 10.3424C33.5765 11.7813 26.8541 18.8381 25.8411 27.6331C17.9143 28.7817 12.0292 35.5696 12.0152 43.5794C12.0158 44.8874 12.1788 46.1899 12.4987 47.4579C5.45521 48.5327 0.423103 54.8455 0.946548 61.952C1.46939 69.0585 7.37148 74.5662 14.4968 74.5983H60.4049C68.6279 74.5983 75.294 67.9323 75.294 59.7092C75.294 51.4862 68.6279 44.8201 60.4049 44.8201ZM45.5157 12.5604C52.601 12.5567 58.9775 16.8594 61.6262 23.4303C64.2756 30.0019 62.6658 37.524 57.5598 42.4355C57.5362 42.3955 57.5065 42.3598 57.4841 42.3198C57.2714 41.9569 57.0424 41.6055 56.7965 41.2669C56.6723 41.0942 56.5408 40.9288 56.4081 40.764C56.2754 40.5992 56.1313 40.435 55.9877 40.2751C55.6957 39.948 55.3861 39.6372 55.0607 39.3433C54.9838 39.2724 54.9069 39.2034 54.8287 39.1349C54.1429 38.5436 53.3941 38.0305 52.5956 37.604C52.4847 37.5446 52.372 37.4925 52.2606 37.4361C51.8837 37.2508 51.4978 37.0854 51.104 36.94C50.8798 36.8576 50.652 36.7782 50.4206 36.7031C50.2328 36.6461 50.048 36.5862 49.8572 36.5383C49.4416 36.4311 49.0205 36.3462 48.5964 36.2826C48.4722 36.2651 48.348 36.2517 48.2244 36.2378C46.3851 36.0003 44.5155 36.1948 42.7646 36.8061C42.5992 36.4553 42.4247 36.1124 42.2412 35.7774C42.1594 35.6295 42.0661 35.4896 41.9807 35.3454C41.8704 35.1618 41.765 34.9734 41.6481 34.7959C41.5317 34.6184 41.4287 34.4833 41.3179 34.327C41.2076 34.1707 41.1058 34.0156 40.9931 33.8653C40.8799 33.7151 40.7448 33.5576 40.6206 33.4037C40.497 33.2498 40.3976 33.1207 40.2795 32.9856C40.1619 32.8505 40.0129 32.7015 39.8802 32.5591C39.7475 32.4162 39.6318 32.2895 39.5076 32.1617C39.384 32.0339 39.2223 31.8951 39.0799 31.7637C38.9369 31.6322 38.817 31.5153 38.6788 31.3911C38.5413 31.2675 38.3789 31.1433 38.2275 31.0252C38.076 30.9076 37.9458 30.7931 37.8004 30.6841C37.6556 30.575 37.4865 30.4635 37.329 30.3539C37.1715 30.2448 37.0297 30.1394 36.8765 30.0401C36.7226 29.9407 36.5487 29.8419 36.3797 29.7438C36.2113 29.6457 36.0659 29.5499 35.9047 29.4609C35.7435 29.3712 35.5672 29.2882 35.3982 29.2028C35.2298 29.1174 35.0674 29.0289 34.902 28.9544C34.7372 28.8799 34.5561 28.8054 34.3822 28.7327C34.2084 28.6593 34.0375 28.5824 33.8612 28.5152C33.6849 28.4485 33.5062 28.391 33.3275 28.3292C33.1487 28.2674 32.97 28.205 32.7877 28.1468C32.6053 28.0886 32.4296 28.0499 32.2509 28.0014C32.0722 27.9529 31.8783 27.8984 31.685 27.8554C31.4912 27.8118 31.3239 27.7833 31.1416 27.7488C30.9592 27.7136 30.7557 27.6718 30.5606 27.6415C30.3661 27.6119 30.1886 27.5961 30.005 27.5737C29.8215 27.5513 29.6143 27.5252 29.4156 27.5089C29.2168 27.4931 29.0436 27.4895 28.8545 27.4816C28.6782 27.4683 28.5171 27.4495 28.3432 27.4495C29.5834 18.915 36.8916 12.5785 45.5157 12.5604ZM60.4049 72.1168H14.4968C8.37959 72.1435 3.38142 67.2404 3.28994 61.1239C3.19906 55.0073 8.04881 49.9576 14.1642 49.8019C14.561 49.7904 14.9287 49.5899 15.1529 49.2621C15.3776 48.935 15.4316 48.5194 15.2983 48.1456C13.863 44.1519 14.3744 39.7165 16.6808 36.1542C18.9872 32.5919 22.824 30.3103 27.0558 29.9855C27.4157 29.9571 27.7749 29.9298 28.1415 29.9298C33.8388 29.9528 38.9278 33.4994 40.9211 38.8375C41.0416 39.161 41.2912 39.4203 41.6105 39.5517C41.9298 39.6838 42.2896 39.6765 42.6035 39.5317C43.9048 38.9277 45.3219 38.6157 46.7565 38.6163C47.2048 38.6206 47.6525 38.6539 48.0966 38.7169C48.1881 38.729 48.2826 38.7393 48.3753 38.7538C48.7564 38.8181 49.1338 38.9041 49.5046 39.0119C49.6585 39.0568 49.8099 39.1052 49.9614 39.1573C50.2528 39.2555 50.5369 39.3682 50.8162 39.4936C51.0343 39.5917 51.2464 39.6996 51.4554 39.8122C51.6117 39.8952 51.7626 39.9849 51.9128 40.0764C52.2084 40.2575 52.4944 40.4532 52.7689 40.6635C52.9046 40.7664 53.0397 40.8706 53.1687 40.9809C53.3347 41.1215 53.4989 41.2626 53.6552 41.4141C53.889 41.6407 54.1114 41.8794 54.321 42.129C54.4282 42.2532 54.5282 42.3768 54.6288 42.5137C54.8638 42.8172 55.0807 43.1341 55.2788 43.4624C55.3213 43.5333 55.3588 43.6066 55.403 43.6775C55.6278 44.0725 55.8265 44.4821 55.9962 44.9031C56.2112 45.4429 56.3772 46.0015 56.4923 46.571C56.628 47.2429 57.2824 47.6779 57.9542 47.5422C58.7612 47.3822 59.5821 47.3016 60.4049 47.3016C67.2575 47.3016 72.8124 52.8566 72.8124 59.7092C72.8124 66.5619 67.2575 72.1168 60.4049 72.1168Z" fill="black"/>
<path d="M28.1456 13.8008C28.6472 13.8008 29.0998 13.4985 29.2912 13.035C29.4833 12.5716 29.3773 12.0378 29.0228 11.6828L24.0598 6.71975C23.7484 6.39744 23.2868 6.26779 22.853 6.38169C22.4192 6.49498 22.0805 6.83365 21.9666 7.26743C21.8533 7.70121 21.9824 8.16286 22.3053 8.47426L27.2683 13.4373C27.501 13.6699 27.8166 13.8008 28.1456 13.8008Z" fill="black"/>
<path d="M63.7639 13.4373L68.7269 8.47426C69.0493 8.16286 69.1789 7.70121 69.065 7.26743C68.9517 6.83365 68.6131 6.49498 68.1793 6.38169C67.7449 6.26779 67.2838 6.39744 66.9724 6.71975L62.0094 11.6828C61.6865 11.9942 61.5574 12.4558 61.6707 12.8896C61.7846 13.3234 62.1233 13.6621 62.5571 13.7754C62.9909 13.8893 63.4525 13.7596 63.7639 13.4373Z" fill="black"/>
</svg>

icons/mist.svg

<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M61.1174 16.3775C57.2817 12.2817 51.8716 9.93506 46.2644 9.93506C42.2219 9.93506 34.8662 11.875 32.3408 17.0753C32.1065 17.56 32.1374 18.1295 32.4222 18.5867C32.7069 19.0433 33.2111 19.3217 33.7491 19.3217C41.9189 19.3217 49.278 24.1933 52.4909 31.7312C52.81 32.4788 53.6488 32.8604 54.4154 32.6037C58.2608 31.3525 61.299 31.6779 64.3904 32.995C64.5875 33.0792 64.7972 33.1199 65.0035 33.1199C65.2882 33.1199 65.5729 33.042 65.8233 32.8885C66.2581 32.6261 66.5337 32.166 66.5647 31.659C66.9405 25.955 65.0069 20.5295 61.1174 16.3775Z" fill="#FFC107"/>
<path d="M65.6315 30.1165C62.2175 28.6584 58.6912 28.2264 54.7959 29.2371C50.8285 21.2678 42.7182 16.1929 33.7572 16.1929C22.3023 16.1929 12.5467 24.5002 10.6411 35.6795C4.85866 37.5633 0.903809 42.9166 0.903809 49.0463C0.903809 56.8088 7.2208 63.1263 14.9838 63.1263H58.7886C68.275 63.1263 75.9973 55.4074 75.9973 45.917C75.9973 39.0586 71.9296 32.8602 65.6315 30.1165Z" fill="#BBDEFB"/>
<path d="M44.694 56.8681C42.1875 56.8681 40.864 55.8105 39.8036 54.9626C38.915 54.2521 38.2733 53.7394 36.8651 53.7394C35.4603 53.7394 34.8536 54.2241 33.9335 54.9597C32.873 55.8105 31.5524 56.8681 29.0465 56.8681C26.5434 56.8681 25.2228 55.8105 24.1618 54.9626C23.2451 54.2241 22.6384 53.7394 21.2336 53.7394C20.3696 53.7394 19.6689 53.0381 19.6689 52.1747C19.6689 51.3114 20.3696 50.6101 21.2336 50.6101C23.7367 50.6101 25.0601 51.6677 26.1206 52.5191C27.0344 53.2541 27.6445 53.7394 29.0465 53.7394C30.4513 53.7394 31.0614 53.2541 31.981 52.5156C33.042 51.6677 34.362 50.6101 36.8651 50.6101C39.3716 50.6101 40.695 51.6677 41.7561 52.5156C42.6447 53.2261 43.2858 53.7394 44.694 53.7394C46.1017 53.7394 46.7433 53.2261 47.6285 52.5156C48.6924 51.6677 50.0158 50.6101 52.5224 50.6101C53.3857 50.6101 54.087 51.3114 54.087 52.1747C54.087 53.0381 53.3857 53.7394 52.5224 53.7394C51.1141 53.7394 50.473 54.2521 49.5873 54.9626C48.5234 55.8105 47.1999 56.8681 44.694 56.8681Z" fill="black"/>
<path d="M44.694 66.2551C42.1875 66.2551 40.864 65.1974 39.8036 64.3495C38.915 63.6391 38.2733 63.1263 36.8651 63.1263C35.4603 63.1263 34.8536 63.611 33.9335 64.3467C32.873 65.1974 31.5524 66.2551 29.0465 66.2551C26.5434 66.2551 25.2228 65.1974 24.1618 64.3495C23.2451 63.611 22.6384 63.1263 21.2336 63.1263C20.3696 63.1263 19.6689 62.4251 19.6689 61.5617C19.6689 60.6983 20.3696 59.9971 21.2336 59.9971C23.7367 59.9971 25.0601 61.0547 26.1206 61.906C27.0344 62.6411 27.6445 63.1263 29.0465 63.1263C30.4513 63.1263 31.0614 62.6411 31.981 61.9026C33.042 61.0547 34.362 59.9971 36.8651 59.9971C39.3716 59.9971 40.695 61.0547 41.7561 61.9026C42.6447 62.613 43.2858 63.1263 44.694 63.1263C46.1017 63.1263 46.7433 62.613 47.6285 61.9026C48.6924 61.0547 50.0158 59.9971 52.5224 59.9971C53.3857 59.9971 54.087 60.6983 54.087 61.5617C54.087 62.4251 53.3857 63.1263 52.5224 63.1263C51.1141 63.1263 50.473 63.6391 49.5873 64.3495C48.5234 65.1974 47.1999 66.2551 44.694 66.2551Z" fill="black"/>
<path d="M44.694 75.6418C42.1875 75.6418 40.864 74.5842 39.8036 73.7362C38.915 73.0258 38.2733 72.5131 36.8651 72.5131C35.4603 72.5131 34.8536 72.9978 33.9335 73.7334C32.873 74.5842 31.5524 75.6418 29.0465 75.6418C26.5434 75.6418 25.2228 74.5842 24.1618 73.7362C23.2451 72.9978 22.6384 72.5131 21.2336 72.5131C20.3696 72.5131 19.6689 71.8118 19.6689 70.9484C19.6689 70.085 20.3696 69.3838 21.2336 69.3838C23.7367 69.3838 25.0601 70.4414 26.1206 71.2928C27.0344 72.0278 27.6445 72.5131 29.0465 72.5131C30.4513 72.5131 31.0614 72.0278 31.981 71.2893C33.042 70.4414 34.362 69.3838 36.8651 69.3838C39.3716 69.3838 40.695 70.4414 41.7561 71.2893C42.6447 71.9997 43.2858 72.5131 44.694 72.5131C46.1017 72.5131 46.7433 71.9997 47.6285 71.2893C48.6924 70.4414 50.0158 69.3838 52.5224 69.3838C53.3857 69.3838 54.087 70.085 54.087 70.9484C54.087 71.8118 53.3857 72.5131 52.5224 72.5131C51.1141 72.5131 50.473 73.0258 49.5873 73.7362C48.5234 74.5842 47.1999 75.6418 44.694 75.6418Z" fill="black"/>
<path d="M65.037 31.8371C64.1736 31.8371 63.473 31.1365 63.473 30.2731C63.473 20.7827 55.7506 13.0638 46.2636 13.0638C42.7001 13.0638 36.8586 14.9321 35.1565 18.4395C34.7743 19.2186 33.8422 19.5406 33.0659 19.1619C32.2873 18.7866 31.9647 17.8511 32.34 17.0753C34.862 11.875 42.2183 9.93506 46.2636 9.93506C57.4779 9.93506 66.6017 19.0588 66.6017 30.2731C66.6017 31.1365 65.901 31.8371 65.037 31.8371Z" fill="black"/>
<path d="M46.2643 6.80608C45.4009 6.80608 44.7002 6.10483 44.7002 5.24144V2.11274C44.7002 1.24877 45.4009 0.548096 46.2643 0.548096C47.1282 0.548096 47.8289 1.24877 47.8289 2.11274V5.24144C47.8289 6.10483 47.1282 6.80608 46.2643 6.80608Z" fill="black"/>
<path d="M28.5643 14.1375C28.1638 14.1375 27.7628 13.9839 27.4563 13.6803L25.2442 11.4682C24.6341 10.8581 24.6341 9.86636 25.2442 9.2562C25.8544 8.64604 26.8461 8.64604 27.4563 9.2562L29.6683 11.4682C30.2785 12.0784 30.2785 13.0701 29.6683 13.6803C29.3652 13.9839 28.9648 14.1375 28.5643 14.1375Z" fill="black"/>
<path d="M74.4248 31.837H71.2961C70.4327 31.837 69.7314 31.1363 69.7314 30.2729C69.7314 29.4089 70.4327 28.7083 71.2961 28.7083H74.4248C75.2888 28.7083 75.9894 29.4089 75.9894 30.2729C75.9894 31.1363 75.2888 31.837 74.4248 31.837Z" fill="black"/>
<path d="M63.965 14.1375C63.5645 14.1375 63.164 13.9839 62.8575 13.6803C62.2474 13.0701 62.2474 12.0784 62.8575 11.4682L65.0696 9.2562C65.6797 8.64604 66.6714 8.64604 67.2816 9.2562C67.8918 9.86636 67.8918 10.8581 67.2816 11.4682L65.0696 13.6803C64.7659 13.9839 64.3654 14.1375 63.965 14.1375Z" fill="black"/>
<path d="M58.7886 63.1263C57.9246 63.1263 57.224 62.4251 57.224 61.5617C57.224 60.6983 57.9246 59.997 58.7886 59.997C66.5511 59.997 72.8686 53.68 72.8686 45.917C72.8686 38.1545 66.5511 31.837 58.7886 31.837C57.421 31.837 55.991 32.0873 54.4207 32.607C53.6444 32.8636 52.8091 32.4786 52.4928 31.731C49.2953 24.1931 41.9425 19.3216 33.7572 19.3216C23.5352 19.3216 14.8681 26.9683 13.598 37.1095C13.5195 37.7569 13.0439 38.2829 12.412 38.4358C7.48091 39.6281 4.03251 43.9931 4.03251 49.0463C4.03251 55.0848 8.94529 59.997 14.9838 59.997C15.8472 59.997 16.5485 60.6983 16.5485 61.5617C16.5485 62.4251 15.8472 63.1263 14.9838 63.1263C7.2208 63.1263 0.903809 56.8088 0.903809 49.0463C0.903809 42.9012 4.85866 37.5507 10.644 35.6824C12.5558 24.5002 22.3115 16.1929 33.7572 16.1929C42.7343 16.1929 50.8411 21.2678 54.7896 29.2371C56.1755 28.8836 57.4961 28.7083 58.7886 28.7083C68.275 28.7083 75.9973 36.4272 75.9973 45.917C75.9973 55.4074 68.275 63.1263 58.7886 63.1263Z" fill="black"/>
</svg>

icons/moderate_heavy_rain.svg

<svg width="95" height="76" viewBox="0 0 95 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M74.2523 58.1065H75.8167C82.3752 58.1071 88.3638 54.3794 91.2589 48.4949C94.1545 42.6101 93.4525 35.5912 89.4491 30.3956C85.4459 25.2005 78.8378 22.7326 72.4093 24.0319C71.9918 21.9488 71.1074 19.9874 69.8227 18.2953C68.5379 16.6032 66.8862 15.2244 64.9918 14.2626C63.0974 13.3008 61.0095 12.7811 58.8853 12.7425C56.7611 12.7039 54.6557 13.1475 52.7276 14.0398C49.1928 4.30319 38.4333 -0.725262 28.6957 2.81059C18.9581 6.34566 13.9305 17.1053 17.4655 26.8429C8.93565 27.1126 2.19774 34.172 2.32602 42.7056C2.45371 51.2386 9.40085 58.0934 17.9352 58.1063" fill="#D0DAD9"/>
<path d="M67.995 64.3639C67.995 67.8202 65.1932 70.6214 61.7376 70.6214C58.2813 70.6214 55.4801 67.8202 55.4801 64.3639C55.4801 59.6708 61.7376 48.7203 61.7376 48.7203C61.7376 48.7203 67.995 59.6708 67.995 64.3639ZM52.3514 48.7203C52.3514 52.1765 49.5496 54.9777 46.0939 54.9777C42.6377 54.9777 39.8365 52.1765 39.8365 48.7203C39.8365 44.0272 46.0939 33.0767 46.0939 33.0767C46.0939 33.0767 52.3514 44.0272 52.3514 48.7203ZM36.7078 67.4926C36.7078 70.9489 33.906 73.7501 30.4503 73.7501C26.9941 73.7501 24.1929 70.9489 24.1929 67.4926C24.1929 62.7995 30.4503 51.849 30.4503 51.849C30.4503 51.849 36.7078 62.7995 36.7078 67.4926Z" fill="#60A2D7"/>
<path d="M75.8164 22.1261C75.0671 22.1267 74.3186 22.1719 73.5747 22.2611C71.5557 15.6845 65.4877 11.1901 58.6085 11.1756C56.8963 11.1741 55.1959 11.458 53.5771 12.0157C49.5707 3.35319 40.076 -1.35554 30.7556 0.699642C21.4343 2.75385 14.7995 11.0172 14.8063 20.5614C14.8074 22.2103 15.0122 23.8528 15.416 25.4516C6.53552 26.8075 0.190859 34.7668 0.850825 43.7259C1.51001 52.6858 8.95149 59.6308 17.935 59.6706C18.3499 59.6706 18.7478 59.5058 19.0412 59.2124C19.3346 58.9191 19.4994 58.5212 19.4994 58.1063C19.4994 57.6914 19.3346 57.2935 19.0412 57.0001C18.7478 56.7067 18.3499 56.5419 17.935 56.5419C10.2227 56.5746 3.92225 50.3928 3.80767 42.6811C3.69308 34.9699 9.80778 28.6032 17.5173 28.407C17.7638 28.3996 18.005 28.3339 18.2212 28.2155C18.4374 28.0971 18.6226 27.9292 18.7616 27.7256C18.9008 27.5221 18.9899 27.2885 19.0216 27.044C19.0534 26.7995 19.0269 26.5509 18.9442 26.3186C15.7911 17.419 20.4069 7.6417 29.2814 4.41989C38.1566 1.19789 47.9688 5.73669 51.2603 14.5859C51.3353 14.7881 51.4512 14.9725 51.6009 15.1278C51.7506 15.283 51.9308 15.4055 52.1301 15.4878C52.3294 15.5701 52.5436 15.6102 52.7592 15.6058C52.9748 15.6013 53.1871 15.5524 53.3829 15.4619C55.0198 14.7006 56.8031 14.3054 58.6085 14.3039C64.5605 14.3147 69.6859 18.5076 70.8744 24.3393C70.9149 24.5408 70.9947 24.7324 71.1092 24.9031C71.2238 25.0738 71.3709 25.2202 71.5421 25.334C71.7132 25.4478 71.9052 25.5267 72.1069 25.5663C72.3086 25.6059 72.5161 25.6053 72.7176 25.5646C78.5611 24.3837 84.5679 26.628 88.2068 31.35C91.8451 36.073 92.4837 42.4535 89.8523 47.8026C87.2216 53.1527 81.7782 56.5417 75.8164 56.5417H74.2521C73.8372 56.5417 73.4393 56.7065 73.1459 56.9999C72.8525 57.2933 72.6877 57.6912 72.6877 58.1061C72.6877 58.521 72.8525 58.9189 73.1459 59.2123C73.4393 59.5056 73.8372 59.6704 74.2521 59.6704H75.8164C86.1843 59.6704 94.5888 51.2659 94.5888 40.8981C94.5888 30.5303 86.1843 22.1257 75.8164 22.1257V22.1261Z" fill="black"/>
<path d="M61.737 72.1858C66.0544 72.1811 69.5535 68.682 69.5588 64.364C69.5588 59.3989 63.7568 49.1023 63.0945 47.9382C62.9462 47.7136 62.7446 47.5293 62.5076 47.4018C62.2707 47.2743 62.0058 47.2076 61.7367 47.2076C61.4676 47.2076 61.2027 47.2743 60.9658 47.4018C60.7288 47.5293 60.5272 47.7136 60.3789 47.9382C59.7174 49.1023 53.9152 59.3989 53.9152 64.364C53.9207 68.682 57.419 72.1811 61.737 72.1858ZM61.737 51.9964C63.7108 55.7774 66.4301 61.5988 66.4301 64.364C66.4301 66.9564 64.3288 69.0571 61.737 69.0571C59.1454 69.0571 57.0439 66.9564 57.0439 64.364C57.0439 61.5988 59.7626 55.7776 61.737 51.9964ZM44.7353 32.2946C44.0738 33.4587 38.2716 43.7553 38.2716 48.7204C38.2716 53.0406 41.7732 56.5422 46.0934 56.5422C50.413 56.5422 53.9152 53.0406 53.9152 48.7204C53.9152 43.7553 48.1132 33.4587 47.4508 32.2946C47.3026 32.07 47.101 31.8857 46.864 31.7582C46.627 31.6307 46.3622 31.564 46.0931 31.564C45.824 31.564 45.5591 31.6307 45.3221 31.7582C45.0852 31.8857 44.8836 32.07 44.7353 32.2946ZM46.0934 53.4135C43.5018 53.4135 41.4003 51.3127 41.4003 48.7204C41.4003 45.9552 44.1189 40.134 46.0934 36.3527C48.0672 40.1338 50.7865 45.9552 50.7865 48.7202C50.7865 51.3127 48.6851 53.4135 46.0934 53.4135ZM38.2716 67.4927C38.2716 62.5276 32.4695 52.231 31.8072 51.0669C31.659 50.8424 31.4573 50.6581 31.2204 50.5306C30.9834 50.4031 30.7185 50.3363 30.4494 50.3363C30.1804 50.3363 29.9155 50.4031 29.6785 50.5306C29.4416 50.6581 29.2399 50.8424 29.0917 51.0669C28.4302 52.231 22.6279 62.5276 22.6279 67.4927C22.6279 71.8129 26.1296 75.3145 30.4497 75.3145C34.7693 75.3145 38.2716 71.8129 38.2716 67.4927ZM25.7567 67.4927C25.7567 64.7275 28.4753 58.9063 30.4497 55.1251C32.4236 58.9062 35.1428 64.7275 35.1428 67.4927C35.1428 70.0851 33.0415 72.1858 30.4497 72.1858C27.8582 72.1858 25.7567 70.0851 25.7567 67.4927Z" fill="black"/>
</svg>

icons/no-result.svg

<svg width="112" height="104" viewBox="0 0 112 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M69.7549 65.2015C69.7549 75.8689 61.1078 84.5137 50.4428 84.5137C39.7754 84.5137 31.1306 75.8689 31.1306 65.2015C31.1306 58.0939 34.4929 50.922 38.4096 44.9756H62.476C66.3927 50.922 69.7549 58.0939 69.7549 65.2015Z" fill="#6582FD"/>
<path d="M36.285 78.3322C38.1063 80.2967 40.3155 81.8618 42.7728 82.9285L68.4766 57.2247C67.6585 54.5484 66.5013 51.9343 65.1624 49.4551L36.285 78.3322Z" fill="#4369FC"/>
<path d="M62.3996 44.8631C58.3527 38.7489 53.7331 33.9473 51.6151 31.8733C50.9643 31.2361 49.9242 31.2325 49.2734 31.8695C47.1442 33.9539 42.478 38.8039 38.4109 44.9756C36.3377 48.1218 36.5454 52.2946 38.9834 55.1674C41.8617 58.5586 45.8988 60.6676 50.3692 60.6676C54.9012 60.6676 58.9883 58.5001 61.8737 55.0267C64.2725 52.1392 64.4717 47.9936 62.3996 44.8631ZM83.1042 70.8484C83.1042 76.1809 78.7807 80.5045 73.4482 80.5045C68.1157 80.5045 63.7921 76.1809 63.7921 70.8484C63.7921 66.5748 66.2239 62.2536 68.6463 59.0079H78.25C80.6724 62.2536 83.1042 66.5748 83.1042 70.8484Z" fill="#8298FD"/>
<path d="M78.2495 59.0065C76.5684 56.755 74.8918 55.0222 74.0344 54.1827C73.8778 54.0293 73.6674 53.9434 73.4481 53.9434C73.2289 53.9434 73.0184 54.0293 72.8618 54.1827C72.0092 55.0177 70.3455 56.7369 68.6734 58.971C65.7789 62.8384 68.3767 68.4362 73.2052 68.5769C73.4849 68.5851 73.765 68.5767 74.0437 68.5517C78.6774 68.135 81.0328 62.734 78.2495 59.0065Z" fill="#9EAFFD"/>
<path d="M57.1176 103.943C31.1525 103.943 10.0283 82.8189 10.0283 56.8539C10.0283 30.8888 31.1525 9.76465 57.1176 9.76465C83.0826 9.76465 104.207 30.8888 104.207 56.8539C104.207 82.8189 83.0826 103.943 57.1176 103.943ZM34.2708 85.2425C33.1875 86.3259 33.344 88.1243 34.598 89.0043C41.219 93.6498 49.006 96.1055 57.1173 96.1055C78.7757 96.1057 96.3694 78.5118 96.3694 56.8534C96.3694 48.7421 93.9137 40.9551 89.2682 34.3341C88.3882 33.0801 86.5896 32.9235 85.5064 34.0069L34.2708 85.2425ZM57.1178 17.6021C35.4594 17.6018 17.8657 35.1957 17.8657 56.8541C17.8657 64.9654 20.3214 72.7524 24.9669 79.3734C25.8469 80.6274 27.6456 80.784 28.7287 79.7006L79.964 28.4653C81.0474 27.3819 80.8908 25.5834 79.6368 24.7035C73.0161 20.0577 65.2291 17.6023 57.1178 17.6021Z" fill="#FD2C8E"/>
<path d="M50.3775 25.2616C52.966 25.2616 55.0644 23.1632 55.0644 20.5746C55.0644 17.9861 52.966 15.8877 50.3775 15.8877C47.789 15.8877 45.6906 17.9861 45.6906 20.5746C45.6906 23.1632 47.789 25.2616 50.3775 25.2616Z" fill="#8298FD"/>
<path d="M57.1176 9.76465C31.1525 9.76465 10.0283 30.8888 10.0283 56.8539C10.0283 82.8189 31.1525 103.943 57.1176 103.943C83.0826 103.943 104.207 82.8189 104.207 56.8539C104.207 30.8888 83.0826 9.76465 57.1176 9.76465ZM24.9669 79.3734C20.3214 72.7524 17.8657 64.9654 17.8657 56.8544C17.8655 35.196 35.4594 17.6023 57.1178 17.6023C65.2291 17.6023 73.0161 20.058 79.6371 24.7035C80.8913 25.5834 81.0477 27.3821 79.9643 28.4653L62.8603 45.5693C58.7092 39.12 53.8148 34.0267 51.6156 31.8735C51.3022 31.5666 50.8811 31.3947 50.4424 31.3947C50.0038 31.3947 49.5826 31.5666 49.2692 31.8735C45.0834 35.9722 31.1304 50.7204 31.1304 65.2024C31.1266 68.5561 32.0008 71.8524 33.666 74.7636L28.729 79.7006C27.6456 80.784 25.8469 80.6274 24.9669 79.3734ZM57.1173 96.1057C49.006 96.1057 41.219 93.65 34.598 89.0045C33.3438 88.1246 33.1875 86.3259 34.2708 85.2427L38.8586 80.655C42.0857 83.0781 46.0961 84.5146 50.4425 84.5146C56.7454 84.5146 62.3415 81.494 65.8666 76.8228C67.6348 79.0636 70.3729 80.5037 73.4489 80.5037C78.7816 80.5037 83.1048 76.1806 83.1048 70.8478C83.1048 63.607 76.1282 56.2328 74.0355 54.1833C73.8787 54.03 73.6682 53.9441 73.4489 53.9441C73.2296 53.9441 73.0191 54.03 72.8624 54.1833C72.0459 54.9826 70.4864 56.5948 68.8876 58.6906C68.3703 56.6668 67.6462 54.6709 66.7808 52.733L85.5064 34.0074C86.5898 32.924 88.3882 33.0806 89.2682 34.3346C93.9137 40.9556 96.3694 48.7426 96.3694 56.8536C96.3694 78.512 78.7757 96.1057 57.1173 96.1057Z" fill="url(#paint0_linear_27_605)"/>
<path d="M97.5704 99.6865H78.722C77.4078 99.6865 76.3425 98.6212 76.3425 97.307V78.4586C76.3425 77.1444 77.4078 76.0791 78.722 76.0791H97.5704C98.8847 76.0791 99.95 77.1444 99.95 78.4586V97.307C99.95 98.6212 98.8847 99.6865 97.5704 99.6865Z" fill="#FF7EB7"/>
<path d="M95.6874 94.3288L94.4539 82.5435C94.3665 81.7086 93.3495 81.3481 92.7558 81.9418L90.5129 84.1847L87.0136 80.6854C86.7905 80.4623 86.4878 80.3369 86.1723 80.3369C85.8568 80.3369 85.5541 80.4623 85.331 80.6854L80.9477 85.0687C80.7246 85.2918 80.5992 85.5944 80.5992 85.91C80.5992 86.2255 80.7246 86.5281 80.9477 86.7513L84.4468 90.2503L82.2039 92.4933C81.6102 93.087 81.9704 94.1037 82.8056 94.1913L94.5909 95.4248C94.7387 95.4404 94.8881 95.4227 95.0281 95.3732C95.1682 95.3236 95.2954 95.2433 95.4005 95.1383C95.5056 95.0333 95.5859 94.9061 95.6355 94.766C95.6852 94.626 95.7029 94.4766 95.6874 94.3288Z" fill="white"/>
<path d="M12.7251 98.1255C12.4095 98.1255 12.1069 98.0001 11.8838 97.777C11.6607 97.5539 11.5353 97.2513 11.5353 96.9357C11.5349 96.5362 11.376 96.1531 11.0935 95.8706C10.811 95.5881 10.4279 95.4292 10.0284 95.4288C9.71284 95.4288 9.41022 95.3034 9.1871 95.0803C8.96397 94.8572 8.83862 94.5545 8.83862 94.239C8.83862 93.9235 8.96397 93.6208 9.1871 93.3977C9.41022 93.1746 9.71284 93.0492 10.0284 93.0492C10.4279 93.0488 10.811 92.8899 11.0935 92.6074C11.376 92.3249 11.5349 91.9418 11.5353 91.5423C11.5353 91.2268 11.6607 90.9241 11.8838 90.701C12.1069 90.4779 12.4095 90.3525 12.7251 90.3525C13.0406 90.3525 13.3433 90.4779 13.5664 90.701C13.7895 90.9241 13.9149 91.2268 13.9149 91.5423C13.9153 91.9418 14.0742 92.3249 14.3567 92.6074C14.6392 92.8899 15.0223 93.0488 15.4218 93.0492C15.7373 93.0492 16.04 93.1746 16.2631 93.3977C16.4862 93.6208 16.6116 93.9235 16.6116 94.239C16.6116 94.5545 16.4862 94.8572 16.2631 95.0803C16.04 95.3034 15.7373 95.4288 15.4218 95.4288C15.0223 95.4292 14.6392 95.5881 14.3567 95.8706C14.0742 96.1531 13.9153 96.5362 13.9149 96.9357C13.9149 97.2513 13.7895 97.5539 13.5664 97.777C13.3433 98.0001 13.0406 98.1255 12.7251 98.1255Z" fill="#01EBA4"/>
<path d="M95.6931 17.1206C95.3776 17.1206 95.0749 16.9952 94.8518 16.7721C94.6287 16.549 94.5033 16.2464 94.5033 15.9308C94.5029 15.5313 94.344 15.1483 94.0615 14.8657C93.779 14.5832 93.3959 14.4243 92.9964 14.4239C92.6809 14.4239 92.3782 14.2985 92.1551 14.0754C91.932 13.8523 91.8066 13.5497 91.8066 13.2341C91.8066 12.9186 91.932 12.616 92.1551 12.3928C92.3782 12.1697 92.6809 12.0444 92.9964 12.0444C93.3959 12.0439 93.779 11.885 94.0615 11.6025C94.344 11.32 94.5029 10.9369 94.5033 10.5374C94.5033 10.2219 94.6287 9.91925 94.8518 9.69613C95.0749 9.47301 95.3776 9.34766 95.6931 9.34766C96.0086 9.34766 96.3113 9.47301 96.5344 9.69613C96.7575 9.91925 96.8829 10.2219 96.8829 10.5374C96.8833 10.9369 97.0422 11.32 97.3247 11.6025C97.6072 11.885 97.9903 12.0439 98.3898 12.0444C98.7054 12.0444 99.008 12.1697 99.2311 12.3928C99.4542 12.616 99.5796 12.9186 99.5796 13.2341C99.5796 13.5497 99.4542 13.8523 99.2311 14.0754C99.008 14.2985 98.7054 14.4239 98.3898 14.4239C97.9903 14.4243 97.6072 14.5832 97.3247 14.8657C97.0422 15.1483 96.8833 15.5313 96.8829 15.9308C96.8829 16.2464 96.7575 16.549 96.5344 16.7721C96.3113 16.9952 96.0086 17.1206 95.6931 17.1206Z" fill="#FF5BA7"/>
<path d="M83.1044 9.06073C81.2538 9.06073 79.7483 7.55521 79.7483 5.70466C79.7483 5.36273 79.7483 4.32193 81.7854 1.41868C82.0869 0.988934 82.5799 0.732422 83.1044 0.732422C83.6288 0.732422 84.1218 0.988934 84.4233 1.41868C86.4604 4.32216 86.4604 5.36273 86.4604 5.70466C86.4604 7.55545 84.9549 9.06073 83.1044 9.06073ZM83.1044 3.72705C82.42 4.81115 82.1409 5.48955 82.1278 5.71109C82.1278 6.24339 82.5659 6.68145 83.1044 6.68145C83.3625 6.68114 83.6101 6.57875 83.793 6.3966C83.976 6.21445 84.0795 5.96734 84.0809 5.70918C84.0662 5.48527 83.7868 4.80735 83.1044 3.72705Z" fill="#01EBA4"/>
<path d="M108.37 89.239C106.519 89.239 105.014 87.7335 105.014 85.8829C105.014 85.5408 105.014 84.4997 107.051 81.5967C107.2 81.3849 107.397 81.2121 107.627 81.0927C107.856 80.9733 108.111 80.9108 108.37 80.9107C108.628 80.9109 108.884 80.9733 109.113 81.0927C109.343 81.2121 109.54 81.385 109.689 81.5967C111.726 84.5002 111.726 85.541 111.726 85.8829C111.726 87.7335 110.22 89.239 108.37 89.239ZM108.37 83.9053C107.686 84.9889 107.406 85.6678 107.393 85.8894C107.393 86.4217 107.831 86.8597 108.37 86.8597C108.628 86.8594 108.876 86.7569 109.059 86.5748C109.241 86.3927 109.345 86.1456 109.346 85.8875C109.331 85.6635 109.052 84.9856 108.37 83.9053ZM3.69897 87.091C1.84842 87.091 0.342896 85.5855 0.342896 83.7349C0.342896 83.3928 0.342896 82.352 2.38 79.4489C2.52863 79.2372 2.72605 79.0642 2.95557 78.9448C3.18509 78.8254 3.43999 78.7629 3.69873 78.7627C3.95751 78.7629 4.21268 78.8253 4.44225 78.9448C4.67181 79.0642 4.86926 79.2371 5.01793 79.4489C7.0548 82.3522 7.0548 83.393 7.0548 83.7349C7.0548 85.5855 5.54952 87.091 3.69897 87.091ZM3.69897 81.7571C3.01462 82.841 2.7355 83.5194 2.72241 83.7409C2.72241 84.2732 3.16048 84.7113 3.69897 84.7113C3.95715 84.7109 4.20471 84.6084 4.38766 84.4262C4.5706 84.2441 4.67408 83.9969 4.67552 83.7387C4.66053 83.5153 4.38118 82.8376 3.69897 81.7571Z" fill="#6582FD"/>
<defs>
<linearGradient id="paint0_linear_27_605" x1="10.0283" y1="9.76465" x2="104.207" y2="9.76465" gradientUnits="userSpaceOnUse">
<stop stop-color="#6581FC" stop-opacity="0.6"/>
<stop offset="0.05" stop-color="#839AFD" stop-opacity="0.57"/>
<stop offset="0.116" stop-color="#A4B5FD" stop-opacity="0.53"/>
<stop offset="0.19" stop-color="#C1CCFE" stop-opacity="0.486"/>
<stop offset="0.273" stop-color="#D8DFFE" stop-opacity="0.436"/>
<stop offset="0.368" stop-color="#E9EDFF" stop-opacity="0.379"/>
<stop offset="0.482" stop-color="#F6F7FF" stop-opacity="0.31"/>
<stop offset="0.635" stop-color="#FDFDFF" stop-opacity="0.218"/>
<stop offset="0.997" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>

<svg width="82" height="76" viewBox="0 0 82 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M72.0752 27.0698C72.0752 36.7426 64.2338 44.584 54.561 44.584C44.8882 44.584 37.0469 36.7426 37.0469 27.0698C37.0469 17.397 44.8882 9.55566 54.561 9.55566C64.2338 9.55566 72.0752 17.397 72.0752 27.0698Z" fill="#FDD020"/>
<path d="M80.1584 28.4169H77.4639C76.7199 28.4169 76.1167 27.8137 76.1167 27.0697C76.1167 26.3256 76.7199 25.7224 77.4639 25.7224H80.1584C80.9024 25.7224 81.5057 26.3256 81.5057 27.0697C81.5057 27.8137 80.9024 28.4169 80.1584 28.4169Z" fill="#FDD020"/>
<path d="M51.8668 5.51372C51.1228 5.51372 50.5195 4.91049 50.5195 4.16648V1.472C50.5195 0.727989 51.1228 0.124756 51.8668 0.124756C52.6108 0.124756 53.214 0.727989 53.214 1.472V4.16648C53.214 4.91049 52.6108 5.51372 51.8668 5.51372Z" fill="#FDD020"/>
<path d="M70.7275 12.2499C70.1828 12.2499 69.6914 11.9217 69.4829 11.4184C69.2743 10.9152 69.3901 10.3356 69.7749 9.95015L72.4694 7.25566C72.8075 6.9057 73.3088 6.76492 73.7798 6.88859C74.2508 7.01161 74.6186 7.37934 74.7416 7.85035C74.8652 8.32135 74.7245 8.82262 74.3745 9.16075L71.68 11.8552C71.4274 12.1078 71.0847 12.2499 70.7275 12.2499Z" fill="#FDD020"/>
<path d="M63.1546 60.7507C68.2357 60.8731 72.9833 58.2319 75.5594 53.8514C78.1355 49.4709 78.1355 44.0378 75.5594 39.6573C72.9833 35.2761 68.2357 32.6356 63.1546 32.758C62.2047 32.758 61.2574 32.8514 60.3253 33.0356C59.159 27.6426 54.3686 23.8081 48.8514 23.8509C47.164 23.8516 45.4971 24.212 43.9604 24.9087C41.2554 17.9554 34.0179 13.8782 26.6692 15.1675C19.3199 16.4569 13.9027 22.7536 13.7257 30.2128C13.7297 31.9561 14.0389 33.6848 14.6395 35.3215C10.0682 35.3485 5.86265 37.8272 3.62536 41.813C1.38741 45.7995 1.46174 50.6806 3.81942 54.5967C6.17709 58.5134 10.4556 60.8626 15.0256 60.7507" fill="#A3D4F7"/>
<path d="M57.255 66.1397C57.255 69.1157 54.8421 71.5286 51.866 71.5286C48.89 71.5286 46.4771 69.1157 46.4771 66.1397C46.4771 62.0979 51.866 52.6672 51.866 52.6672C51.866 52.6672 57.255 62.0979 57.255 66.1397Z" fill="#60A2D7"/>
<path d="M43.7823 52.667C43.7823 55.643 41.3694 58.056 38.3934 58.056C35.4173 58.056 33.0044 55.643 33.0044 52.667C33.0044 48.6253 38.3934 39.1946 38.3934 39.1946C38.3934 39.1946 43.7823 48.6253 43.7823 52.667Z" fill="#60A2D7"/>
<path d="M31.6578 68.8342C31.6578 71.8103 29.2449 74.2232 26.2689 74.2232C23.2928 74.2232 20.8799 71.8103 20.8799 68.8342C20.8799 64.7925 26.2689 55.3618 26.2689 55.3618C26.2689 55.3618 31.6578 64.7925 31.6578 68.8342Z" fill="#60A2D7"/>
<path d="M77.4639 25.7224C76.7199 25.7224 76.1167 26.3256 76.1167 27.0697C76.1167 27.8137 76.7199 28.4169 77.4639 28.4169H80.1584C80.9024 28.4169 81.5057 27.8137 81.5057 27.0697C81.5057 26.3256 80.9024 25.7224 80.1584 25.7224H77.4639Z" fill="black"/>
<path d="M51.8668 5.51372C52.6108 5.51372 53.214 4.91049 53.214 4.16648V1.472C53.214 0.727989 52.6108 0.124756 51.8668 0.124756C51.1228 0.124756 50.5195 0.727989 50.5195 1.472V4.16648C50.5195 4.91049 51.1228 5.51372 51.8668 5.51372Z" fill="black"/>
<path d="M72.4699 7.25566L69.7754 9.95015C69.4255 10.2883 69.2847 10.7895 69.4084 11.2606C69.5314 11.7316 69.8991 12.0993 70.3701 12.2223C70.8411 12.346 71.3424 12.2052 71.6805 11.8552L74.375 9.16075C74.725 8.82262 74.8658 8.32135 74.7421 7.85035C74.6191 7.37934 74.2513 7.01161 73.7803 6.88859C73.3093 6.76492 72.8081 6.9057 72.4699 7.25566Z" fill="black"/>
<path d="M51.8666 72.8761C55.5853 72.8715 58.5982 69.8586 58.6028 66.1398C58.6028 61.8639 53.6059 52.9963 53.0362 51.9938C52.7764 51.6011 52.3376 51.3643 51.8666 51.3643C51.3956 51.3643 50.9568 51.6011 50.697 51.9938C50.1273 52.9963 45.1304 61.8639 45.1304 66.1398C45.135 69.8586 48.1479 72.8715 51.8666 72.8761ZM51.8666 55.4889C53.5671 58.7451 55.9083 63.7578 55.9083 66.1398C55.9083 68.3719 54.0986 70.1816 51.8666 70.1816C49.6346 70.1816 47.8249 68.3719 47.8249 66.1398C47.8249 63.7578 50.1661 58.7451 51.8666 55.4889Z" fill="black"/>
<path d="M38.3939 59.4034C42.1127 59.3988 45.1255 56.3859 45.1301 52.6672C45.1301 48.3913 40.1332 39.5237 39.5636 38.5211C39.3037 38.1284 38.8649 37.8916 38.3939 37.8916C37.9229 37.8916 37.4841 38.1284 37.2243 38.5211C36.6546 39.5237 31.6577 48.3913 31.6577 52.6672C31.6623 56.3859 34.6752 59.3988 38.3939 59.4034ZM38.3939 42.0162C40.0944 45.2725 42.4357 50.2852 42.4357 52.6672C42.4357 54.8992 40.626 56.7089 38.3939 56.7089C36.1619 56.7089 34.3522 54.8992 34.3522 52.6672C34.3522 50.2852 36.6934 45.2725 38.3939 42.0162Z" fill="black"/>
<path d="M25.0988 54.6881C24.5291 55.6907 19.5322 64.5583 19.5322 68.8342C19.5322 72.5542 22.5484 75.5704 26.2684 75.5704C29.9885 75.5704 33.0046 72.5542 33.0046 68.8342C33.0046 64.5583 28.0077 55.6907 27.4381 54.6881C27.1782 54.2954 26.7394 54.0586 26.2684 54.0586C25.7974 54.0586 25.3587 54.2954 25.0988 54.6881ZM26.2684 72.8759C24.0364 72.8759 22.2267 71.0662 22.2267 68.8342C22.2267 66.4522 24.5679 61.4395 26.2684 58.1832C27.9689 61.4395 30.3102 66.4522 30.3102 68.8342C30.3102 71.0662 28.5005 72.8759 26.2684 72.8759Z" fill="black"/>
<path d="M15.0255 62.098C15.7701 62.098 16.3727 61.4948 16.3727 60.7508C16.3727 60.0067 15.7701 59.4035 15.0255 59.4035C10.9351 59.5114 7.10122 57.4123 4.98891 53.9073C2.87595 50.4024 2.81017 46.0324 4.8159 42.4656C6.82164 38.8982 10.5897 36.6846 14.6821 36.6688C15.1149 36.6563 15.5156 36.4372 15.7583 36.0787C16.0017 35.7209 16.0576 35.2676 15.9096 34.8611C15.3616 33.3724 15.0794 31.7989 15.0755 30.2128C15.1801 22.4359 21.5564 16.2102 29.3333 16.2918C32.7764 16.2964 36.1044 17.5298 38.7186 19.7704C39.0239 20.0401 39.3192 20.3092 39.6008 20.592C39.687 20.6795 39.7797 20.7631 39.8705 20.8617C40.2146 21.2347 40.5389 21.6261 40.8415 22.034C40.9145 22.1307 40.9869 22.2274 41.0572 22.3261C41.3559 22.7477 41.6315 23.1852 41.8815 23.6371C41.9302 23.7246 41.9749 23.8147 42.0164 23.9062C42.2729 24.3884 42.5005 24.8857 42.6979 25.3949C42.8301 25.7422 43.0992 26.0198 43.4425 26.1619C43.7859 26.304 44.1727 26.2981 44.5115 26.1454C45.8732 25.5251 47.352 25.2034 48.848 25.2021C53.7232 25.1659 57.9589 28.5452 59.0062 33.306C59.1555 34.0309 59.8607 34.4999 60.587 34.3572C60.9909 34.2776 61.3955 34.2223 61.7994 34.1789C62 34.1592 62.2033 34.1533 62.4039 34.1427C62.6052 34.1322 62.7993 34.1158 62.996 34.1144C63.2545 34.1144 63.513 34.1236 63.7716 34.1361C63.9064 34.1361 64.0531 34.1467 64.1932 34.1579C64.4939 34.1815 64.7932 34.2184 65.0918 34.2625C65.178 34.275 65.2655 34.2868 65.3517 34.3019C65.6747 34.3559 65.9937 34.4216 66.3101 34.4999L66.493 34.5453C66.818 34.6302 67.1384 34.7262 67.4548 34.8354L67.6278 34.8973C67.9389 35.0091 68.2475 35.1315 68.5487 35.2663C68.6152 35.2959 68.6836 35.3268 68.7428 35.3577C69.0355 35.4926 69.3237 35.6393 69.6052 35.7972C73.5996 38.0009 76.0901 42.1926 76.1165 46.754C76.0211 53.8225 70.2236 59.4805 63.1545 59.4035C62.4105 59.4035 61.8073 60.0067 61.8073 60.7508C61.8073 61.4948 62.4105 62.098 63.1545 62.098C71.7109 62.1736 78.7142 55.3098 78.8109 46.754C78.7919 41.671 76.2414 36.9313 72.0103 34.1144C72.9345 31.8804 73.4141 29.4872 73.422 27.0697C73.4272 18.7731 68.0073 11.4481 60.0713 9.02798C52.1352 6.60781 43.5498 9.66147 38.9245 16.549C36.0932 14.6307 32.7534 13.6025 29.3333 13.5973C20.0678 13.5151 12.4829 20.9473 12.377 30.2128C12.379 31.5305 12.5428 32.8422 12.8645 34.1197C5.89738 35.0604 0.692607 40.9973 0.670898 48.0276C0.759706 55.8723 7.18016 62.1664 15.0255 62.098ZM54.5606 10.9028C63.4854 10.9127 70.7176 18.1449 70.7275 27.0697C70.7288 29.032 70.367 30.9779 69.6605 32.8086C69.6309 32.7955 69.5986 32.7863 69.569 32.7725C69.1375 32.5823 68.6968 32.4113 68.2461 32.2607C68.1797 32.239 68.1113 32.212 68.0521 32.1903C67.5778 32.037 67.0943 31.9074 66.6022 31.7982C66.5535 31.7877 66.5068 31.7732 66.4595 31.762C65.9707 31.6581 65.4734 31.5805 64.9695 31.5239C64.9182 31.5167 64.8669 31.5048 64.8142 31.4996C64.263 31.4417 63.7091 31.4127 63.1545 31.4121C62.5408 31.4114 61.9277 31.4469 61.3185 31.518C59.5588 26.1251 54.5198 22.4833 48.8466 22.5037C48.4875 22.5037 48.1329 22.5182 47.7829 22.5471C46.7278 22.6313 45.6877 22.8438 44.6839 23.1786C44.6681 23.1438 44.6464 23.1115 44.6286 23.0767C44.4457 22.6991 44.2464 22.3313 44.0359 21.9715C43.9484 21.8222 43.8524 21.6768 43.7662 21.5301C43.6129 21.286 43.455 21.0459 43.2893 20.8117C43.1735 20.6473 43.0577 20.4841 42.9367 20.3256C42.7827 20.1217 42.6216 19.921 42.4571 19.7296C42.021 19.1968 41.5526 18.6909 41.0546 18.2159C44.0405 13.6624 49.1157 10.9146 54.5606 10.9028Z" fill="black"/>
</svg>

icons/snow.svg

<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M45.6692 10.0898C41.6267 10.0898 34.271 12.0297 31.7456 17.2301C31.5113 17.7148 31.5422 18.2843 31.827 18.7415C32.1117 19.1981 32.6159 19.4765 33.1538 19.4765C41.3236 19.4765 48.6828 24.3481 51.8957 31.8859C52.2148 32.6336 53.0536 33.0152 53.8201 32.7585C57.6656 31.5072 60.7037 31.8326 63.7952 33.1498C63.9923 33.234 64.202 33.2747 64.4082 33.2747C64.693 33.2747 64.9777 33.1968 65.2281 33.0432C65.6629 32.7808 65.9385 32.3208 65.9694 31.8137C66.3418 26.1098 64.4082 20.6842 60.5193 16.5323C56.6864 12.4365 51.2764 10.0898 45.6692 10.0898Z" fill="#FFC107"/>
<path d="M65.0285 30.2713C61.6116 28.8132 58.0881 28.3812 54.1929 29.3919C50.2254 21.4226 42.1152 16.3477 33.1542 16.3477C21.6993 16.3477 11.9436 24.655 10.0381 35.8343C4.25563 37.7181 0.300781 43.0714 0.300781 49.2011C0.300781 56.9635 6.61777 63.2811 14.3808 63.2811H58.1855C67.6719 63.2811 75.3943 55.5622 75.3943 46.0718C75.3943 39.2134 71.3266 33.015 65.0285 30.2713Z" fill="#D0DAD9"/>
<path d="M17.5094 75.7966C16.646 75.7966 15.9453 75.0959 15.9453 74.232V67.9746C15.9453 67.1106 16.646 66.4099 17.5094 66.4099C18.3733 66.4099 19.074 67.1106 19.074 67.9746V74.232C19.074 75.0959 18.3733 75.7966 17.5094 75.7966Z" fill="black"/>
<path d="M20.2188 74.2322C19.953 74.2322 19.6837 74.1669 19.4368 74.0226L14.017 70.8939C13.2693 70.4619 13.0127 69.5045 13.4446 68.7569C13.8766 68.0092 14.834 67.7588 15.5816 68.1845L21.0009 71.3132C21.7485 71.7452 22.0052 72.7026 21.5738 73.4502C21.2856 73.9509 20.7568 74.2322 20.2188 74.2322Z" fill="black"/>
<path d="M14.8 74.2321C14.2615 74.2321 13.7333 73.9508 13.4451 73.45C13.0102 72.7024 13.2669 71.745 14.0174 71.3131L19.4372 68.1844C20.1814 67.7552 21.1422 68.0056 21.5742 68.7567C22.0091 69.5044 21.7524 70.4617 21.0013 70.8937L15.5821 74.0224C15.3351 74.1668 15.0659 74.2321 14.8 74.2321Z" fill="black"/>
<path d="M30.0251 75.7966C29.1611 75.7966 28.4604 75.0959 28.4604 74.232V67.9746C28.4604 67.1106 29.1611 66.4099 30.0251 66.4099C30.8885 66.4099 31.5892 67.1106 31.5892 67.9746V74.232C31.5892 75.0959 30.8885 75.7966 30.0251 75.7966Z" fill="black"/>
<path d="M32.7345 74.2322C32.4687 74.2322 32.1994 74.1669 31.9525 74.0226L26.5333 70.8939C25.7856 70.4619 25.529 69.5045 25.9604 68.7569C26.3923 68.0092 27.3497 67.7588 28.0973 68.1845L33.5171 71.3132C34.2648 71.7452 34.5215 72.7026 34.0895 73.4502C33.8013 73.9509 33.2731 74.2322 32.7345 74.2322Z" fill="black"/>
<path d="M27.3151 74.2321C26.7772 74.2321 26.2484 73.9508 25.9602 73.45C25.5254 72.7024 25.782 71.745 26.5331 71.3131L31.9523 68.1844C32.6971 67.7552 33.6573 68.0056 34.0893 68.7567C34.5242 69.5044 34.2675 70.4617 33.517 70.8937L28.0972 74.0224C27.8503 74.1668 27.581 74.2321 27.3151 74.2321Z" fill="black"/>
<path d="M42.5407 75.7966C41.6773 75.7966 40.9761 75.0959 40.9761 74.232V67.9746C40.9761 67.1106 41.6773 66.4099 42.5407 66.4099C43.4041 66.4099 44.1054 67.1106 44.1054 67.9746V74.232C44.1054 75.0959 43.4041 75.7966 42.5407 75.7966Z" fill="black"/>
<path d="M45.2511 74.2322C44.9846 74.2322 44.7159 74.1669 44.4684 74.0226L39.0492 70.8939C38.3016 70.4619 38.0449 69.5045 38.4769 68.7569C38.9083 68.0092 39.8662 67.7588 40.6139 68.1845L46.0331 71.3132C46.7807 71.7452 47.0374 72.7026 46.6054 73.4502C46.3178 73.9509 45.789 74.2322 45.2511 74.2322Z" fill="black"/>
<path d="M39.8308 74.2321C39.2929 74.2321 38.7641 73.9508 38.4765 73.45C38.0416 72.7024 38.2977 71.745 39.0488 71.3131L44.468 68.1844C45.2128 67.7552 46.1736 68.0056 46.605 68.7567C47.0399 69.5044 46.7838 70.4617 46.0327 70.8937L40.6134 74.0224C40.3659 74.1668 40.0972 74.2321 39.8308 74.2321Z" fill="black"/>
<path d="M23.7678 66.4101C22.9044 66.4101 22.2031 65.7094 22.2031 64.8455V58.5881C22.2031 57.7241 22.9044 57.0234 23.7678 57.0234C24.6312 57.0234 25.3324 57.7241 25.3324 58.5881V64.8455C25.3324 65.7094 24.6312 66.4101 23.7678 66.4101Z" fill="black"/>
<path d="M26.4771 64.8453C26.2107 64.8453 25.942 64.78 25.6945 64.6357L20.2753 61.507C19.5276 61.075 19.271 60.1176 19.7029 59.37C20.1344 58.6223 21.0923 58.3685 21.8399 58.7976L27.2592 61.9263C28.0068 62.3583 28.2635 63.3157 27.8315 64.0633C27.5439 64.564 27.0151 64.8453 26.4771 64.8453Z" fill="black"/>
<path d="M21.0574 64.8454C20.5194 64.8454 19.9906 64.5641 19.703 64.0634C19.2682 63.3157 19.5243 62.3584 20.2754 61.9264L25.6946 58.7977C26.4394 58.3657 27.4002 58.6189 27.8316 59.37C28.2664 60.1177 28.0103 61.075 27.2592 61.507L21.84 64.6357C21.5925 64.7801 21.3238 64.8454 21.0574 64.8454Z" fill="black"/>
<path d="M36.2828 66.4101C35.4194 66.4101 34.7188 65.7094 34.7188 64.8455V58.5881C34.7188 57.7241 35.4194 57.0234 36.2828 57.0234C37.1468 57.0234 37.8475 57.7241 37.8475 58.5881V64.8455C37.8475 65.7094 37.1468 66.4101 36.2828 66.4101Z" fill="black"/>
<path d="M38.9928 64.8453C38.7269 64.8453 38.4576 64.78 38.2107 64.6357L32.7909 61.507C32.0433 61.075 31.7866 60.1176 32.2186 59.37C32.6506 58.6223 33.6079 58.3685 34.3556 58.7976L39.7748 61.9263C40.5224 62.3583 40.7791 63.3157 40.3477 64.0633C40.0595 64.564 39.5307 64.8453 38.9928 64.8453Z" fill="black"/>
<path d="M33.5735 64.8454C33.0349 64.8454 32.5067 64.5641 32.2185 64.0634C31.7837 63.3157 32.0403 62.3584 32.7909 61.9264L38.2107 58.7977C38.9549 58.3657 39.9157 58.6189 40.3477 59.37C40.7825 60.1177 40.5258 61.075 39.7747 61.507L34.3555 64.6357C34.1086 64.7801 33.8393 64.8454 33.5735 64.8454Z" fill="black"/>
<path d="M48.7985 66.4101C47.9346 66.4101 47.2339 65.7094 47.2339 64.8455V58.5881C47.2339 57.7241 47.9346 57.0234 48.7985 57.0234C49.6619 57.0234 50.3626 57.7241 50.3626 58.5881V64.8455C50.3626 65.7094 49.6619 66.4101 48.7985 66.4101Z" fill="black"/>
<path d="M51.508 64.8453C51.2421 64.8453 50.9729 64.78 50.7259 64.6357L45.3067 61.507C44.5591 61.075 44.3024 60.1176 44.7338 59.37C45.1658 58.6223 46.1231 58.3685 46.8708 58.7976L52.2906 61.9263C53.0382 62.3583 53.2949 63.3157 52.8629 64.0633C52.5748 64.564 52.0465 64.8453 51.508 64.8453Z" fill="black"/>
<path d="M46.0891 64.8454C45.5511 64.8454 45.0223 64.5641 44.7341 64.0634C44.2993 63.3157 44.5559 62.3584 45.307 61.9264L50.7263 58.7977C51.4711 58.3657 52.4313 58.6189 52.8633 59.37C53.2981 60.1177 53.0414 61.075 52.2909 61.507L46.8711 64.6357C46.6242 64.7801 46.3549 64.8454 46.0891 64.8454Z" fill="black"/>
<path d="M64.4423 31.9919C63.5789 31.9919 62.8782 31.2912 62.8782 30.4279C62.8782 20.9375 55.1559 13.2185 45.6689 13.2185C42.1054 13.2185 36.2639 15.0868 34.5617 18.5942C34.183 19.3734 33.2475 19.6954 32.4712 19.3167C31.6926 18.9414 31.37 18.0059 31.7453 17.2301C34.2673 12.0297 41.6235 10.0898 45.6689 10.0898C56.8832 10.0898 66.0069 19.2136 66.0069 30.4279C66.0069 31.2912 65.3062 31.9919 64.4423 31.9919Z" fill="black"/>
<path d="M45.6695 6.96111C44.8061 6.96111 44.1055 6.25986 44.1055 5.39647V2.26776C44.1055 1.4038 44.8061 0.703125 45.6695 0.703125C46.5335 0.703125 47.2342 1.4038 47.2342 2.26776V5.39647C47.2342 6.25986 46.5335 6.96111 45.6695 6.96111Z" fill="black"/>
<path d="M27.9696 14.292C27.5691 14.292 27.1681 14.1385 26.8615 13.8348L24.6495 11.6228C24.0394 11.0126 24.0394 10.0209 24.6495 9.41074C25.2597 8.80059 26.2514 8.80059 26.8615 9.41074L29.0736 11.6228C29.6837 12.2329 29.6837 13.2247 29.0736 13.8348C28.7705 14.1385 28.37 14.292 27.9696 14.292Z" fill="black"/>
<path d="M73.8296 31.992H70.7009C69.8375 31.992 69.1362 31.2913 69.1362 30.4279C69.1362 29.564 69.8375 28.8633 70.7009 28.8633H73.8296C74.6935 28.8633 75.3942 29.564 75.3942 30.4279C75.3942 31.2913 74.6935 31.992 73.8296 31.992Z" fill="black"/>
<path d="M63.3698 14.292C62.9693 14.292 62.5688 14.1385 62.2623 13.8348C61.6521 13.2247 61.6521 12.2329 62.2623 11.6228L64.4743 9.41074C65.0845 8.80059 66.0762 8.80059 66.6864 9.41074C67.2965 10.0209 67.2965 11.0126 66.6864 11.6228L64.4743 13.8348C64.1707 14.1385 63.7702 14.292 63.3698 14.292Z" fill="black"/>
<path d="M58.1855 63.2811C57.3216 63.2811 56.6209 62.5798 56.6209 61.7164C56.6209 60.8531 57.3216 60.1518 58.1855 60.1518C65.948 60.1518 72.2656 53.8348 72.2656 46.0718C72.2656 38.3093 65.948 31.9918 58.1855 31.9918C56.818 31.9918 55.388 32.2421 53.8176 32.7618C53.0413 33.0184 52.206 32.6334 51.8897 31.8858C48.6923 24.3479 41.3395 19.4764 33.1542 19.4764C22.9322 19.4764 14.2651 27.1231 12.9949 37.2643C12.9164 37.9117 12.4409 38.4377 11.809 38.5906C6.87788 39.7829 3.42949 44.1479 3.42949 49.2011C3.42949 55.2396 8.34226 60.1518 14.3808 60.1518C15.2442 60.1518 15.9454 60.8531 15.9454 61.7164C15.9454 62.5798 15.2442 63.2811 14.3808 63.2811C6.61777 63.2811 0.300781 56.9635 0.300781 49.2011C0.300781 43.0559 4.25563 37.7055 10.041 35.8372C11.9528 24.655 21.7084 16.3477 33.1542 16.3477C42.1312 16.3477 50.238 21.4226 54.1866 29.3919C55.5725 29.0384 56.893 28.863 58.1855 28.863C67.6719 28.863 75.3943 36.582 75.3943 46.0718C75.3943 55.5622 67.6719 63.2811 58.1855 63.2811Z" fill="black"/>
</svg>

icons/thunder.svg

<svg width="76" height="77" viewBox="0 0 76 77" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M45.7025 10.2083C41.6411 10.2083 34.2509 12.1572 31.7136 17.382C31.4782 17.869 31.5093 18.4411 31.7954 18.9004C32.0814 19.3592 32.588 19.6389 33.1285 19.6389C41.3366 19.6389 48.7302 24.5333 51.9582 32.1065C52.2788 32.8577 53.1215 33.241 53.8916 32.9832C57.7551 31.726 60.8075 32.053 63.9135 33.3763C64.1115 33.4609 64.3222 33.5018 64.5294 33.5018C64.8154 33.5018 65.1015 33.4235 65.3531 33.2692C65.7899 33.0056 66.0668 32.5434 66.0979 32.034C66.472 26.3033 64.5294 20.8523 60.6222 16.6809C56.7714 12.5659 51.336 10.2083 45.7025 10.2083Z" fill="#FFC107"/>
<path d="M65.1527 30.4843C61.7198 29.0222 58.1799 28.5853 54.2663 29.6007C50.2803 21.5941 42.132 16.4954 33.129 16.4954C21.6204 16.4954 11.819 24.8416 9.90454 36.0734C4.09497 37.966 0.121582 43.3444 0.121582 49.5028C0.121582 57.3016 6.46819 63.6488 14.2676 63.6488H58.2777C67.8086 63.6488 75.5671 55.8903 75.5671 46.3588C75.5671 39.4683 71.4803 33.2408 65.1527 30.4843Z" fill="#D0DAD9"/>
<path d="M49.3433 41.7228L39.9126 38.5794C39.4533 38.428 38.9629 38.4913 38.5669 38.7458C38.168 39.0036 37.9038 39.425 37.8503 39.8964L36.5269 51.8039L32.2577 49.6667C31.8179 49.4497 31.3022 49.4434 30.8653 49.6604C30.425 49.8739 30.1107 50.2826 30.0134 50.7667L25.2981 74.3434C25.1501 75.0761 25.5433 75.8146 26.238 76.1036C26.436 76.1825 26.6404 76.2233 26.8413 76.2233C27.3541 76.2233 27.8503 75.9718 28.149 75.5222L36.8096 62.5297L41.8553 65.0543C42.2669 65.2586 42.7481 65.2713 43.1752 65.0952C43.6028 64.9127 43.9235 64.5512 44.0587 64.1143L50.346 43.681C50.6005 42.8636 50.1544 41.9933 49.3433 41.7228Z" fill="#FFC107"/>
<path d="M26.8411 76.2233C26.6402 76.2233 26.4359 76.1825 26.2408 76.1036C25.546 75.8146 25.1535 75.079 25.3008 74.3434L30.0162 50.7667C30.1106 50.286 30.4283 49.8774 30.8681 49.6604C31.3084 49.4434 31.8241 49.4497 32.261 49.6667L36.5297 51.8039L37.853 39.8964C37.9065 39.425 38.1707 39.0002 38.5702 38.7458C38.9662 38.4913 39.4566 38.428 39.9154 38.5794L49.3461 41.7228C50.1571 41.9933 50.6003 42.8608 50.3488 43.6781L44.062 64.1109C43.9268 64.5512 43.6027 64.9127 43.1785 65.0917C42.7508 65.2713 42.2702 65.2586 41.8581 65.0509L36.8129 62.5268L28.1524 75.5194C27.8502 75.9718 27.354 76.2233 26.8411 76.2233ZM32.6944 53.4012L29.9408 67.1697L34.9641 59.635C35.4073 58.9713 36.2689 58.7422 36.9764 59.1003L41.6036 61.4142L46.8975 44.2221L40.7673 42.1787L39.4094 54.3947C39.3496 54.9035 39.0508 55.3565 38.5984 55.6017C38.1391 55.847 37.6049 55.8533 37.1427 55.6265L32.6944 53.4012Z" fill="black"/>
<path d="M58.2777 63.6488H51.9904C51.123 63.6488 50.4184 62.9443 50.4184 62.0769C50.4184 61.2094 51.123 60.5049 51.9904 60.5049H58.2777C66.0766 60.5049 72.4238 54.1583 72.4238 46.3588C72.4238 38.56 66.0766 32.2128 58.2777 32.2128C56.9037 32.2128 55.467 32.4643 53.8893 32.9864C53.1128 33.2472 52.2701 32.8575 51.9524 32.1063C48.74 24.5331 41.3527 19.6387 33.129 19.6387C22.8591 19.6387 14.1513 27.3213 12.8752 37.5101C12.7964 38.1605 12.3186 38.6889 11.6837 38.8426C6.72951 40.0404 3.26495 44.426 3.26495 49.5028C3.26495 55.5696 8.20076 60.5049 14.2676 60.5049H20.5549C21.4224 60.5049 22.1263 61.2094 22.1263 62.0769C22.1263 62.9443 21.4224 63.6488 20.5549 63.6488H14.2676C6.46819 63.6488 0.121582 57.3016 0.121582 49.5028C0.121582 43.3289 4.09498 37.9533 9.90742 36.0763C11.8282 24.8416 21.6296 16.4954 33.129 16.4954C42.1481 16.4954 50.2929 21.5941 54.26 29.6007C55.6524 29.2456 56.9791 29.0694 58.2777 29.0694C67.8086 29.0694 75.5671 36.8245 75.5671 46.3588C75.5671 55.8903 67.8086 63.6488 58.2777 63.6488Z" fill="black"/>
<path d="M64.5636 32.213C63.6962 32.213 62.9922 31.509 62.9922 30.6416C62.9922 21.1067 55.2336 13.3516 45.7022 13.3516C42.1219 13.3516 36.2531 15.2287 34.543 18.7525C34.1625 19.5353 33.2254 19.8588 32.4426 19.4784C31.6603 19.1013 31.3363 18.1614 31.7133 17.382C34.2471 12.1572 41.6379 10.2083 45.7022 10.2083C56.9691 10.2083 66.1356 19.3747 66.1356 30.6416C66.1356 31.509 65.4316 32.213 64.5636 32.213Z" fill="black"/>
<path d="M45.7027 7.06491C44.8353 7.06491 44.1313 6.36037 44.1313 5.49293V2.34956C44.1313 1.48155 44.8353 0.777588 45.7027 0.777588C46.5708 0.777588 47.2747 1.48155 47.2747 2.34956V5.49293C47.2747 6.36037 46.5708 7.06491 45.7027 7.06491Z" fill="black"/>
<path d="M27.9199 14.4301C27.5176 14.4301 27.1146 14.2758 26.8067 13.9707L24.5843 11.7483C23.9713 11.1353 23.9713 10.1389 24.5843 9.52593C25.1973 8.91291 26.1937 8.91291 26.8067 9.52593L29.0291 11.7483C29.6421 12.3614 29.6421 13.3577 29.0291 13.9707C28.7246 14.2758 28.3222 14.4301 27.9199 14.4301Z" fill="black"/>
<path d="M73.9946 32.2132H70.8513C69.9838 32.2132 69.2793 31.5092 69.2793 30.6418C69.2793 29.7738 69.9838 29.0698 70.8513 29.0698H73.9946C74.8627 29.0698 75.5666 29.7738 75.5666 30.6418C75.5666 31.5092 74.8627 32.2132 73.9946 32.2132Z" fill="black"/>
<path d="M63.4855 14.4301C63.0831 14.4301 62.6808 14.2758 62.3728 13.9707C61.7598 13.3577 61.7598 12.3614 62.3728 11.7483L64.5953 9.52593C65.2083 8.91291 66.2046 8.91291 66.8177 9.52593C67.4307 10.1389 67.4307 11.1353 66.8177 11.7483L64.5953 13.9707C64.2902 14.2758 63.8878 14.4301 63.4855 14.4301Z" fill="black"/>
</svg>

<svg width="79" height="77" viewBox="0 0 79 77" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M69.6687 26.8971C69.6687 36.2011 62.1262 43.7434 52.8224 43.7434C43.5185 43.7434 35.9761 36.201 35.9761 26.8971C35.9761 17.5933 43.5185 10.0508 52.8224 10.0508C62.1262 10.0508 69.6687 17.5933 69.6687 26.8971ZM77.4439 27.5451H74.8521C74.4942 27.5451 74.2042 27.2551 74.2042 26.8971C74.2042 26.5391 74.4942 26.2492 74.8521 26.2492H77.4439C77.8019 26.2492 78.0918 26.5391 78.0918 26.8971C78.0918 27.2551 77.8019 27.5451 77.4439 27.5451ZM50.2306 5.51529C49.8726 5.51529 49.5827 5.22534 49.5827 4.86736V2.27562C49.5827 1.91764 49.8726 1.62769 50.2306 1.62769C50.5886 1.62769 50.8786 1.91764 50.8786 2.27562V4.86736C50.8786 5.22534 50.5886 5.51529 50.2306 5.51529ZM68.3728 11.3467L70.9645 8.75497ZM68.3728 11.9946C68.2445 11.9949 68.119 11.957 68.0122 11.8858C67.9055 11.8146 67.8222 11.7134 67.7731 11.5948C67.724 11.4763 67.7111 11.3458 67.7362 11.22C67.7613 11.0941 67.8232 10.9786 67.9141 10.888L70.5058 8.29623C70.7588 8.04305 71.1703 8.04305 71.4233 8.29623C71.6763 8.54941 71.6765 8.96068 71.4233 9.2137L68.8315 11.8054C68.7712 11.8656 68.6997 11.9132 68.621 11.9457C68.5423 11.9781 68.4579 11.9948 68.3728 11.9946Z" fill="#FDD020"/>
<path d="M61.089 59.2938C65.9763 59.4116 70.543 56.871 73.0207 52.6575C75.4984 48.444 75.4986 43.2182 73.0207 39.0047C71.804 36.9354 70.0562 35.2289 67.9583 34.0621C65.8605 32.8953 63.4888 32.3106 61.089 32.3684C60.1754 32.3684 59.2642 32.4583 58.3677 32.6355C57.2458 27.4482 52.638 23.76 47.3312 23.8009C45.7085 23.8015 44.1046 24.1485 42.6267 24.8185C40.0248 18.1302 33.0632 14.2086 25.9949 15.4487C18.9259 16.6889 13.7151 22.7456 13.5448 29.9204C13.5487 31.5971 13.8462 33.2602 14.4239 34.8343C12.808 34.8437 11.2101 35.1733 9.72226 35.8038C8.23446 36.4344 6.88635 37.3535 5.75581 38.5081C4.62526 39.6626 3.7347 41.0298 3.13555 42.5305C2.5364 44.0312 2.24055 45.6358 2.26508 47.2515C2.28962 48.8672 2.63405 50.4621 3.27849 51.9439C3.92293 53.4258 4.8546 54.7652 6.01968 55.8849C7.18476 57.0046 8.56016 57.8824 10.0664 58.4675C11.5727 59.0526 13.1799 59.3335 14.7954 59.2938" fill="#D0DAD9"/>
<path d="M37.2721 41.1516H26.9052L21.7217 56.702H33.3845L29.7246 74.8442L45.0473 51.5186H34.6804L37.2721 41.1516Z" fill="#FFC107"/>
<path d="M55.4143 69.6608C55.4143 72.5234 53.0934 74.8443 50.2308 74.8443C47.3683 74.8443 45.0474 72.5234 45.0474 69.6608C45.0474 65.7732 50.2308 56.7021 50.2308 56.7021C50.2308 56.7021 55.4143 65.7732 55.4143 69.6608Z" fill="#60A2D7"/>
<path d="M77.4441 25.6012H74.8523C74.5086 25.6012 74.179 25.7378 73.936 25.9808C73.693 26.2238 73.5565 26.5534 73.5565 26.8971C73.5565 27.2408 73.693 27.5704 73.936 27.8134C74.179 28.0565 74.5086 28.193 74.8523 28.193H77.4441C77.7877 28.193 78.1174 28.0565 78.3604 27.8134C78.6034 27.5704 78.7399 27.2408 78.7399 26.8971C78.7399 26.5534 78.6034 26.2238 78.3604 25.9808C78.1174 25.7378 77.7877 25.6012 77.4441 25.6012ZM48.9349 2.27561V4.86734C48.9349 5.21103 49.0715 5.54064 49.3145 5.78366C49.5575 6.02668 49.8871 6.16321 50.2308 6.16321C50.5745 6.16321 50.9041 6.02668 51.1471 5.78366C51.3902 5.54064 51.5267 5.21103 51.5267 4.86734V2.27561C51.5267 1.93192 51.3902 1.60231 51.1471 1.35929C50.9041 1.11627 50.5745 0.979736 50.2308 0.979736C49.8871 0.979736 49.5575 1.11627 49.3145 1.35929C49.0715 1.60231 48.9349 1.93192 48.9349 2.27561ZM69.2892 12.2629L71.8809 9.67113C72.0047 9.55159 72.1034 9.4086 72.1713 9.2505C72.2392 9.0924 72.275 8.92235 72.2765 8.75029C72.278 8.57822 72.2452 8.40758 72.18 8.24833C72.1149 8.08907 72.0186 7.94438 71.897 7.82271C71.7753 7.70104 71.6306 7.60481 71.4713 7.53966C71.3121 7.4745 71.1414 7.44171 70.9694 7.44321C70.7973 7.4447 70.6273 7.48045 70.4692 7.54836C70.3111 7.61628 70.1681 7.715 70.0485 7.83877L67.4568 10.4305C67.333 10.55 67.2343 10.693 67.1664 10.8511C67.0985 11.0092 67.0627 11.1793 67.0612 11.3514C67.0597 11.5234 67.0925 11.6941 67.1577 11.8533C67.2228 12.0126 67.3191 12.1573 67.4407 12.2789C67.5624 12.4006 67.7071 12.4968 67.8664 12.562C68.0256 12.6271 68.1963 12.6599 68.3683 12.6584C68.5404 12.6569 68.7104 12.6212 68.8685 12.5533C69.0266 12.4854 69.1696 12.3866 69.2892 12.2629ZM0.987793 47.056C1.07316 54.6012 7.24878 60.6553 14.795 60.5897C15.5112 60.5897 16.0908 60.0095 16.0908 59.2938C16.0908 58.5782 15.5112 57.998 14.795 57.998C12.8621 58.0489 10.9503 57.5864 9.25449 56.6577C7.55863 55.729 6.13932 54.3673 5.14122 52.7113C4.14296 51.0554 3.60161 49.1644 3.57236 47.2311C3.54311 45.2978 4.027 43.3913 4.9747 41.706C5.92233 40.0205 7.29993 38.6165 8.96707 37.637C10.6342 36.6575 12.5313 36.1375 14.4648 36.1302C14.67 36.1244 14.8709 36.0699 15.0508 35.9712C15.2308 35.8725 15.3847 35.7325 15.4999 35.5626C15.6152 35.3929 15.6886 35.1982 15.714 34.9946C15.7393 34.791 15.7159 34.5843 15.6457 34.3915C15.1186 32.9595 14.847 31.4462 14.8432 29.9204C14.9438 22.44 21.0783 16.4511 28.5587 16.5302C31.8685 16.535 35.0679 17.7205 37.5817 19.8735C37.876 20.1324 38.1613 20.3919 38.4321 20.6651C38.5163 20.7506 38.6043 20.831 38.6916 20.9246C39.0226 21.2846 39.3343 21.6618 39.6254 22.0546C39.6962 22.146 39.765 22.2389 39.8318 22.3332C40.1198 22.74 40.3853 23.1622 40.6271 23.598C40.6726 23.6809 40.7138 23.765 40.7567 23.8479C41.0046 24.3129 41.2244 24.7923 41.4149 25.2836C41.4778 25.4489 41.5738 25.5997 41.6971 25.7265C41.8204 25.8534 41.9683 25.9538 42.1318 26.0214C42.2346 26.0552 42.3413 26.0756 42.4493 26.0822C42.5669 26.1183 42.6906 26.1302 42.8129 26.117C42.9352 26.1038 43.0535 26.0659 43.1607 26.0056C44.4701 25.4089 45.8922 25.0995 47.3311 25.0983C52.0198 25.0648 56.0928 28.3158 57.0988 32.8955C57.1645 33.2065 57.3433 33.482 57.6004 33.6687C57.8576 33.8555 58.1748 33.9403 58.4908 33.9066C58.5339 33.9092 58.5775 33.9092 58.6206 33.9066H58.6452C59.0223 33.834 59.4023 33.7781 59.7843 33.739C59.9835 33.72 60.1834 33.715 60.3828 33.703C60.5821 33.6917 60.7497 33.6795 60.9319 33.6771C61.1914 33.6771 61.4509 33.6859 61.7033 33.6991C61.8331 33.6991 61.9545 33.708 62.0791 33.7174C62.3772 33.7416 62.6746 33.7764 62.9707 33.8226L63.1897 33.855C63.5086 33.9079 63.825 33.9739 64.1381 34.0503L64.2863 34.0876C64.6057 34.1744 64.9229 34.27 65.2371 34.3743L65.3758 34.4237C65.6828 34.5338 65.9865 34.654 66.2832 34.7875L66.4501 34.8665C66.7363 34.9963 67.0203 35.1424 67.2963 35.2968C69.1816 36.3381 70.7553 37.863 71.8556 39.7145C72.9559 41.5659 73.543 43.6772 73.5565 45.8309C73.4648 52.6297 67.8883 58.072 61.0887 57.998C60.7451 57.998 60.4154 58.1345 60.1724 58.3775C59.9294 58.6205 59.7929 58.9502 59.7929 59.2938C59.7929 59.6375 59.9294 59.9671 60.1724 60.2102C60.4154 60.4532 60.7451 60.5897 61.0887 60.5897C69.319 60.6626 76.0552 54.0603 76.1482 45.8309C76.1391 43.4234 75.5378 41.0551 74.3972 38.9349C73.2567 36.8147 71.612 35.0077 69.6081 33.6732C70.4964 31.5242 70.9572 29.2225 70.9647 26.8971C70.9697 18.9168 65.7566 11.8712 58.1231 9.54332C50.4897 7.21562 42.2316 10.1527 37.7829 16.7775C35.0599 14.9325 31.8475 13.9438 28.5584 13.9384C19.6456 13.8587 12.3493 21.0074 12.2474 29.9204C12.2493 31.1875 12.4068 32.4496 12.7162 33.6784C6.01512 34.5829 1.00885 40.2936 0.987793 47.0557V47.056ZM39.8221 18.381C43.5869 12.6273 50.6839 10.0312 57.2721 11.9966C63.8609 13.9619 68.3756 20.0217 68.373 26.8971C68.3742 28.7853 68.0263 30.6575 67.3467 32.4191L67.2738 32.39C66.846 32.2001 66.4094 32.0307 65.9654 31.8825C65.911 31.8642 65.859 31.842 65.8047 31.8256C65.3431 31.6752 64.8743 31.5478 64.4 31.444L64.2703 31.4105C63.7988 31.3127 63.3232 31.2362 62.8448 31.1814C62.7928 31.1814 62.7421 31.1644 62.6909 31.1581C62.1603 31.1025 61.6272 31.0744 61.0938 31.0739C60.5036 31.0734 59.914 31.1075 59.3278 31.1759C58.8053 29.5974 57.9766 28.1375 56.8891 26.8798C55.8016 25.6221 54.4767 24.5912 52.9902 23.8462C51.5037 23.1011 49.8849 22.6566 48.2265 22.5379C46.568 22.4192 44.9024 22.6287 43.325 23.1545C43.1326 22.7565 42.9225 22.3674 42.6953 21.9882C42.6163 21.8586 42.5309 21.7295 42.448 21.5902C42.2962 21.3488 42.1384 21.1113 41.9747 20.8778C41.8663 20.7223 41.755 20.5689 41.6407 20.4178C41.491 20.2221 41.3363 20.0304 41.1767 19.8427C40.8455 19.4449 40.4961 19.0625 40.1297 18.6967C40.0827 18.6518 40.0385 18.6024 39.9923 18.5569C39.9453 18.5112 39.8807 18.4341 39.8221 18.381Z" fill="black"/>
<path d="M29.2373 76.0425C29.5157 76.1569 29.8253 76.1709 30.1129 76.082C30.4004 75.9932 30.6481 75.807 30.8134 75.5554L46.1355 52.2298C46.264 52.0341 46.3372 51.8071 46.3471 51.5731C46.357 51.3391 46.3034 51.1068 46.1918 50.9009C46.0801 50.695 45.9147 50.5233 45.7131 50.4038C45.5116 50.2844 45.2815 50.2218 45.0473 50.2227H36.34L38.5294 41.4653C38.5769 41.2743 38.5804 41.0749 38.5395 40.8823C38.4986 40.6897 38.4144 40.5089 38.2934 40.3537C38.172 40.1986 38.017 40.0732 37.8401 39.987C37.6631 39.9007 37.4689 39.8558 37.272 39.8557H26.9051C26.633 39.8557 26.3677 39.9413 26.1469 40.1004C25.9261 40.2595 25.761 40.4841 25.675 40.7423L20.4915 56.2927C20.4267 56.4875 20.4092 56.6949 20.4402 56.8979C20.4713 57.1008 20.5502 57.2935 20.6703 57.46C20.7904 57.6265 20.9483 57.7621 21.1311 57.8556C21.3139 57.9491 21.5163 57.9979 21.7216 57.9979H31.8007L28.4605 74.5847C28.4 74.8801 28.4445 75.1874 28.5863 75.4535C28.7281 75.7197 28.9584 75.928 29.2373 76.0425ZM23.5193 55.4061L27.8397 42.4475H35.615L33.423 51.2048C33.3754 51.3958 33.372 51.5952 33.4129 51.7878C33.4537 51.9804 33.5379 52.1612 33.659 52.3165C33.7803 52.4715 33.9353 52.5969 34.1123 52.6831C34.2892 52.7694 34.4835 52.8143 34.6803 52.8144H42.6447L32.3209 68.5333L34.6531 56.957C34.6909 56.7691 34.6865 56.5751 34.6402 56.3891C34.594 56.2031 34.507 56.0297 34.3855 55.8814C34.2641 55.7332 34.1114 55.6137 33.9383 55.5315C33.7652 55.4493 33.576 55.4065 33.3844 55.4061H23.5193ZM50.2307 76.14C53.8077 76.1357 56.7057 73.2376 56.7101 69.6607C56.7101 65.5479 51.9037 57.0184 51.3557 56.0541C51.1058 55.6763 50.6838 55.4486 50.2307 55.4486C49.7777 55.4486 49.3557 55.6763 49.1058 56.0541C48.5578 57.0184 43.7514 65.5479 43.7514 69.6607C43.7558 73.2376 46.6538 76.1357 50.2307 76.14ZM50.2307 59.4159C51.8664 62.548 54.1183 67.3694 54.1183 69.6607C54.1183 71.8076 52.3777 73.5483 50.2307 73.5483C48.0838 73.5483 46.3431 71.8076 46.3431 69.6607C46.3431 67.3694 48.595 62.548 50.2307 59.4159Z" fill="black"/>
</svg>

Conclusion and Final Words

In conclusion, creating a weather app with HTML, CSS, and JavaScript is a great way for beginners to improve their web development skills and gain valuable experience with APIs. By following this guide, you’ve built a functional and attractive weather app that’s a perfect addition to your portfolio.

To further develop your skills, you can explore other related JavaScript projects such as the Currency Converter, Image Search Engine, Gemini Chatbot, and more. Each of these projects is designed to enhance your understanding of HTML and CSS while providing hands-on experience with better styling techniques and API integrations.

If you encounter any issues while building your weather app, you can download the source code files for this project by clicking the button below.

Download Code Files

Dev Orbital

Build A Weather App in HTML, CSS, and JavaScript

Steps to Build Weather App in HTML & JavaScript

SVG Icons

icons/clear.svg

icons/clouds.svg

icons/mist.svg

icons/moderate_heavy_rain.svg

icons/no-result.svg

icons/rain.svg

icons/snow.svg

icons/thunder.svg

icons/thunder-rain.svg

Conclusion and Final Words

Post a Comment

How to Customize Navigation Menu in Plus UI 3.2.0 Blogger Theme

How to Add Countdown Timer for Content in Blogger

Free SEO URL Slug Generator – Create Optimized Slugs Instantly

Free Responsive HTML Table Generator Online