@bybas/weather-icons

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="keywords" content="weather icons,animated icons,animated weather icons,svg animation,meteocons,weather,open source weather icons,icon pack,icons"/> <meta name="description" content="A free to use set of weather icons that are simple and animated."/> <meta name="robots" content="index,follow"/> <meta name="revisit-after" content="1 day"/> <meta name="author" content="Bas Milius"/> <title>Weather Icons by Bas</title> <link rel="stylesheet" href="https://unpkg.com/@latte-ui/css@2.0.0-dev.2/dist/latte-ui.css" type="text/css"/> <link rel="stylesheet" href="https://font.mili.us/css2?family=jetbrains-mono-variable:ital" type="text/css"/> <style> body { font-family: jetbrains-mono, monospace; } .wi-icons { position: relative; display: grid; grid-gap: 15px; grid-template-columns: repeat(5, 1fr); } .wi-icons-new { grid-gap: 9px; grid-template-columns: repeat(10, 1fr); } @media (max-width: 991px) { .wi-icons { grid-template-columns: repeat(3, 1fr); } .wi-icons-new { grid-gap: 9px; grid-template-columns: repeat(6, 1fr); } } @media (max-width: 767px) { .wi-icons { grid-template-columns: repeat(2, 1fr); } .wi-icons-new { grid-gap: 9px; grid-template-columns: repeat(4, 1fr); } } .wi-icon { position: relative; display: flex; padding: 24px 6px; align-items: center; flex-flow: column; justify-content: center; background: hsla(var(--gray-0)); border-radius: 6px; box-shadow: var(--shadow-2); } .wi-icon img { position: relative; display: block; height: 120px; width: 120px; margin-bottom: 12px; transition: inherit; } .wi-icon span { font-size: 10px; font-weight: 500; text-align: center; transition: inherit; } .wi-icons-new .wi-icon { padding: 12px; } .wi-icons-new .wi-icon img { height: 60px; width: 60px; margin-bottom: 0; } @media (max-width: 767px) { .wi-icons-new .wi-icon img { height: 48px; width: 48px; } } .wi-section, .wi-title { display: inline-block; margin-top: 0; margin-bottom: 21px; padding-bottom: 6px; border-bottom: 2px solid hsl(var(--primary-500)); font-size: 18px; font-weight: 700; } .wi-title { margin-bottom: 30px; padding-bottom: 12px; border-width: 4px; font-size: 24px; } .wi-icons + .wi-icons { margin-top: 15px; } .wi-icons + .wi-section { margin-top: 60px; } </style> </head> <body class="bg-gray-50"> <main id="app"> <div class="container my-7 md:my-10"> <div class="row mb-10"> <div class="col-12 lg:col-6 px-7 sm:px-4 lg:py-10"> <h1 class="wi-title">Meteocons</h1> <p class="lead"> These hand crafted icons are designed in Adobe Illustrator and animated with SVG animations. They will look stunning in your work. </p> <p> The icons are available under a MIT-license, which means that it's free to use. The only requirement is that you should preserve copyright notices in all source files. </p> <a href="https://github.com/basmilius/weather-icons" rel="noopener" target="_blank" class="btn btn-contained is-primary mt-5"> <span>View on GitHub</span> </a> <a href="https://bas.dev" rel="noopener" target="_blank" class="btn btn-outline bg-gray-0 is-primary mt-5"> <span class="text-gray-700">bas.dev</span> </a> </div> </div> <h2 class="wi-section mx-4 sm:mx-0">Newest icons</h2> <div class="wi-icons wi-icons-new"> <div class="wi-icon"><img src="./production/line/all/smoke-particles.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/smoke.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-smoke.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-smoke.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/humidity.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/haze.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/haze-day.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/haze-night.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-haze.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-haze.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/dust.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/dust-day.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/dust-night.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/dust-wind.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/thunderstorms-snow.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/thunderstorms-day-snow.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/thunderstorms-night-snow.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/barometer.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/thermometer-colder.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/thermometer-warmer.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/thermometer-celsius.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/thermometer-fahrenheit.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/thermometer-glass.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/thermometer-glass-celsius.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/thermometer-glass-fahrenheit.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/thermometer-mercury.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/thermometer-mercury-cold.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/celsius.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/fahrenheit.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/not-available.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/umbrella.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/falling-stars.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/solar-eclipse.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/starry-night.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-0.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-1.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-2.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-3.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-4.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-5.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-6.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-7.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-8.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-9.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-10.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-11.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-12.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/uv-index.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/uv-index-1.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/uv-index-2.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/uv-index-3.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/uv-index-4.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/uv-index-5.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/uv-index-6.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/uv-index-7.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/uv-index-8.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/uv-index-9.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/uv-index-10.svg" alt=""/></div> <div class="wi-icon"><img src="./production/line/all/uv-index-11.svg" alt=""/></div> </div> <h2 class="wi-section mx-4 sm:mx-0">Weather</h2> <div class="wi-icons"> <div class="wi-icon"><img src="./production/line/all/clear-day.svg" alt=""/><span>clear-day</span></div> <div class="wi-icon"><img src="./production/line/all/clear-night.svg" alt=""/><span>clear-night</span></div> <div class="wi-icon"><img src="./production/line/all/cloudy.svg" alt=""/><span>cloudy</span></div> <div class="wi-icon"><img src="./production/line/all/overcast.svg" alt=""/><span>overcast</span></div> <div class="wi-icon"><img src="./production/line/all/overcast-day.svg" alt=""/><span>overcast-day</span></div> <div class="wi-icon"><img src="./production/line/all/overcast-night.svg" alt=""/><span>overcast-night</span></div> <div class="wi-icon"><img src="./production/line/all/drizzle.svg" alt=""/><span>drizzle</span></div> <div class="wi-icon"><img src="./production/line/all/hail.svg" alt=""/><span>hail</span></div> <div class="wi-icon"><img src="./production/line/all/rain.svg" alt=""/><span>rain</span></div> <div class="wi-icon"><img src="./production/line/all/smoke.svg" alt=""/><span>smoke</span></div> <div class="wi-icon"><img src="./production/line/all/snow.svg" alt=""/><span>snow</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-day.svg" alt=""/><span>partly-cloudy-day</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-drizzle.svg" alt=""/><span>partly-cloudy-day-drizzle</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-hail.svg" alt=""/><span>partly-cloudy-day-hail</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-rain.svg" alt=""/><span>partly-cloudy-day-rain</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-sleet.svg" alt=""/><span>partly-cloudy-day-sleet</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-smoke.svg" alt=""/><span>partly-cloudy-day-smoke</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-snow.svg" alt=""/><span>partly-cloudy-day-snow</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-night.svg" alt=""/><span>partly-cloudy-night</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-drizzle.svg" alt=""/><span>partly-cloudy-night-drizzle</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-hail.svg" alt=""/><span>partly-cloudy-night-hail</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-rain.svg" alt=""/><span>partly-cloudy-night-rain</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-sleet.svg" alt=""/><span>partly-cloudy-night-sleet</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-smoke.svg" alt=""/><span>partly-cloudy-night-smoke</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-snow.svg" alt=""/><span>partly-cloudy-night-snow</span></div> <div class="wi-icon"><img src="./production/line/all/mist.svg" alt=""/><span>mist</span></div> <div class="wi-icon"><img src="./production/line/all/hurricane.svg" alt=""/><span>hurricane</span></div> <div class="wi-icon"><img src="./production/line/all/tornado.svg" alt=""/><span>tornado</span></div> <div class="wi-icon"><img src="./production/line/all/wind.svg" alt=""/><span>wind</span></div> <div class="wi-icon"><img src="./production/line/all/dust.svg" alt=""/><span>dust</span></div> <div class="wi-icon"><img src="./production/line/all/dust-day.svg" alt=""/><span>dust-day</span></div> <div class="wi-icon"><img src="./production/line/all/dust-night.svg" alt=""/><span>dust-night</span></div> <div class="wi-icon"><img src="./production/line/all/dust-wind.svg" alt=""/><span>dust-wind</span></div> </div> <div class="wi-icons"> <div class="wi-icon"><img src="./production/line/all/thunderstorms.svg" alt=""/><span>thunderstorms</span></div> <div class="wi-icon"><img src="./production/line/all/thunderstorms-day.svg" alt=""/><span>thunderstorms-day</span></div> <div class="wi-icon"><img src="./production/line/all/thunderstorms-night.svg" alt=""/><span>thunderstorms-night</span></div> <div class="wi-icon"><img src="./production/line/all/thunderstorms-rain.svg" alt=""/><span>thunderstorms-rain</span></div> <div class="wi-icon"><img src="./production/line/all/thunderstorms-day-rain.svg" alt=""/><span>thunderstorms-day-rain</span></div> <div class="wi-icon"><img src="./production/line/all/thunderstorms-night-rain.svg" alt=""/><span>thunderstorms-night-rain</span></div> <div class="wi-icon"><img src="./production/line/all/thunderstorms-snow.svg" alt=""/><span>thunderstorms-snow</span></div> <div class="wi-icon"><img src="./production/line/all/thunderstorms-day-snow.svg" alt=""/><span>thunderstorms-day-snow</span></div> <div class="wi-icon"><img src="./production/line/all/thunderstorms-night-snow.svg" alt=""/><span>thunderstorms-night-snow</span></div> </div> <div class="wi-icons"> <div class="wi-icon"><img src="./production/line/all/fog.svg" alt=""/><span>fog</span></div> <div class="wi-icon"><img src="./production/line/all/fog-day.svg" alt=""/><span>fog-day</span></div> <div class="wi-icon"><img src="./production/line/all/fog-night.svg" alt=""/><span>fog-night</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-fog.svg" alt=""/><span>partly-cloudy-day-fog</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-fog.svg" alt=""/><span>partly-cloudy-night-fog</span></div> </div> <div class="wi-icons"> <div class="wi-icon"><img src="./production/line/all/haze.svg" alt=""/><span>haze</span></div> <div class="wi-icon"><img src="./production/line/all/haze-day.svg" alt=""/><span>haze-day</span></div> <div class="wi-icon"><img src="./production/line/all/haze-night.svg" alt=""/><span>haze-night</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-haze.svg" alt=""/><span>partly-cloudy-day-haze</span></div> <div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-haze.svg" alt=""/><span>partly-cloudy-night-haze</span></div> </div> <h2 class="wi-section mx-4 sm:mx-0">Astronomical</h2> <div class="wi-icons"> <div class="wi-icon"><img src="./production/line/all/horizon.svg" alt=""/><span>horizon</span></div> <div class="wi-icon"><img src="./production/line/all/sunrise.svg" alt=""/><span>sunrise</span></div> <div class="wi-icon"><img src="./production/line/all/sunset.svg" alt=""/><span>sunset</span></div> <div class="wi-icon"><img src="./production/line/all/moonrise.svg" alt=""/><span>moonrise</span></div> <div class="wi-icon"><img src="./production/line/all/moonset.svg" alt=""/><span>moonset</span></div> <div class="wi-icon"><img src="./production/line/all/falling-stars.svg" alt=""/><span>falling-stars</span></div> <div class="wi-icon"><img src="./production/line/all/solar-eclipse.svg" alt=""/><span>solar-eclipse</span></div> <div class="wi-icon"><img src="./production/line/all/starry-night.svg" alt=""/><span>starry-night</span></div> </div> <h2 class="wi-section mx-4 sm:mx-0">Moon Phases</h2> <div class="wi-icons"> <div class="wi-icon"><img src="./production/line/all/moon-new.svg" alt=""/><span>moon-new</span></div> <div class="wi-icon"><img src="./production/line/all/moon-waxing-crescent.svg" alt=""/><span>moon-waxing-crescent</span></div> <div class="wi-icon"><img src="./production/line/all/moon-first-quarter.svg" alt=""/><span>moon-first-quarter</span></div> <div class="wi-icon"><img src="./production/line/all/moon-waxing-gibbous.svg" alt=""/><span>moon-waxing-gibbous</span></div> <div class="wi-icon"><img src="./production/line/all/moon-full.svg" alt=""/><span>moon-full</span></div> <div class="wi-icon"><img src="./production/line/all/moon-waning-gibbous.svg" alt=""/><span>moon-waning-gibbous</span></div> <div class="wi-icon"><img src="./production/line/all/moon-last-quarter.svg" alt=""/><span>moon-last-quarter</span></div> <div class="wi-icon"><img src="./production/line/all/moon-waning-crescent.svg" alt=""/><span>moon-waning-crescent</span></div> </div> <h2 class="wi-section mx-4 sm:mx-0">Miscellaneous</h2> <div class="wi-icons"> <div class="wi-icon"><img src="./production/line/all/barometer.svg" alt=""/><span>barometer</span></div> <div class="wi-icon"><img src="./production/line/all/compass.svg" alt=""/><span>compass</span></div> <div class="wi-icon"><img src="./production/line/all/windsock.svg" alt=""/><span>windsock</span></div> <div class="wi-icon"><img src="./production/line/all/thermometer.svg" alt=""/><span>thermometer</span></div> <div class="wi-icon"><img src="./production/line/all/thermometer-colder.svg" alt=""/><span>thermometer-colder</span></div> <div class="wi-icon"><img src="./production/line/all/thermometer-warmer.svg" alt=""/><span>thermometer-warmer</span></div> <div class="wi-icon"><img src="./production/line/all/thermometer-celsius.svg" alt=""/><span>thermometer-celsius</span></div> <div class="wi-icon"><img src="./production/line/all/thermometer-fahrenheit.svg" alt=""/><span>thermometer-fahrenheit</span></div> <div class="wi-icon"><img src="./production/line/all/thermometer-glass.svg" alt=""/><span>thermometer-glass</span></div> <div class="wi-icon"><img src="./production/line/all/thermometer-glass-celsius.svg" alt=""/><span>thermometer-glass-celsius</span></div> <div class="wi-icon"><img src="./production/line/all/thermometer-glass-fahrenheit.svg" alt=""/><span>thermometer-glass-fahrenheit</span></div> <div class="wi-icon"><img src="./production/line/all/thermometer-mercury.svg" alt=""/><span>thermometer-mercury</span></div> <div class="wi-icon"><img src="./production/line/all/thermometer-mercury-cold.svg" alt=""/><span>thermometer-mercury-cold</span></div> <div class="wi-icon"><img src="./production/line/all/humidity.svg" alt=""/><span>humidity</span></div> <div class="wi-icon"><img src="./production/line/all/pressure-high.svg" alt=""/><span>pressure-high</span></div> <div class="wi-icon"><img src="./production/line/all/pressure-low.svg" alt=""/><span>pressure-low</span></div> <div class="wi-icon"><img src="./production/line/all/pressure-high-alt.svg" alt=""/><span>pressure-high-alt</span></div> <div class="wi-icon"><img src="./production/line/all/pressure-low-alt.svg" alt=""/><span>pressure-low-alt</span></div> <div class="wi-icon"><img src="./production/line/all/celsius.svg" alt=""/><span>celsius</span></div> <div class="wi-icon"><img src="./production/line/all/fahrenheit.svg" alt=""/><span>fahrenheit</span></div> <div class="wi-icon"><img src="./production/line/all/not-available.svg" alt=""/><span>not-available</span></div> <div class="wi-icon"><img src="./production/line/all/umbrella.svg" alt=""/><span>umbrella</span></div> </div> <h2 class="wi-section mx-4 sm:mx-0">Particles</h2> <div class="wi-icons"> <div class="wi-icon"><img src="./production/line/all/lightning-bolt.svg" alt=""/><span>lightning-bolt</span></div> <div class="wi-icon"><img src="./production/line/all/raindrop.svg" alt=""/><span>raindrop</span></div> <div class="wi-icon"><img src="./production/line/all/raindrops.svg" alt=""/><span>raindrops</span></div> <div class="wi-icon"><img src="./production/line/all/snowflake.svg" alt=""/><span>snowflake</span></div> <div class="wi-icon"><img src="./production/line/all/star.svg" alt=""/><span>star</span></div> <div class="wi-icon"><img src="./production/line/all/smoke-particles.svg" alt=""/><span>smoke-particles</span></div> </div> <h2 class="wi-section mx-4 sm:mx-0">Beaufort Wind Scale</h2> <div class="wi-icons"> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-0.svg" alt=""/><span>wind-beaufort-0</span></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-1.svg" alt=""/><span>wind-beaufort-1</span></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-2.svg" alt=""/><span>wind-beaufort-2</span></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-3.svg" alt=""/><span>wind-beaufort-3</span></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-4.svg" alt=""/><span>wind-beaufort-4</span></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-5.svg" alt=""/><span>wind-beaufort-5</span></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-6.svg" alt=""/><span>wind-beaufort-6</span></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-7.svg" alt=""/><span>wind-beaufort-7</span></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-8.svg" alt=""/><span>wind-beaufort-8</span></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-9.svg" alt=""/><span>wind-beaufort-9</span></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-10.svg" alt=""/><span>wind-beaufort-10</span></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-11.svg" alt=""/><span>wind-beaufort-11</span></div> <div class="wi-icon"><img src="./production/line/all/wind-beaufort-12.svg" alt=""/><span>wind-beaufort-12</span></div> </div> <h2 class="wi-section mx-4 sm:mx-0">UV Index</h2> <div class="wi-icons"> <div class="wi-icon"><img src="./production/line/all/uv-index.svg" alt=""/><span>uv-index</span></div> <div class="wi-icon"><img src="./production/line/all/uv-index-1.svg" alt=""/><span>uv-index-1</span></div> <div class="wi-icon"><img src="./production/line/all/uv-index-2.svg" alt=""/><span>uv-index-2</span></div> <div class="wi-icon"><img src="./production/line/all/uv-index-3.svg" alt=""/><span>uv-index-3</span></div> <div class="wi-icon"><img src="./production/line/all/uv-index-4.svg" alt=""/><span>uv-index-4</span></div> <div class="wi-icon"><img src="./production/line/all/uv-index-5.svg" alt=""/><span>uv-index-5</span></div> <div class="wi-icon"><img src="./production/line/all/uv-index-6.svg" alt=""/><span>uv-index-6</span></div> <div class="wi-icon"><img src="./production/line/all/uv-index-7.svg" alt=""/><span>uv-index-7</span></div> <div class="wi-icon"><img src="./production/line/all/uv-index-8.svg" alt=""/><span>uv-index-8</span></div> <div class="wi-icon"><img src="./production/line/all/uv-index-9.svg" alt=""/><span>uv-index-9</span></div> <div class="wi-icon"><img src="./production/line/all/uv-index-10.svg" alt=""/><span>uv-index-10</span></div> <div class="wi-icon"><img src="./production/line/all/uv-index-11.svg" alt=""/><span>uv-index-11</span></div> </div> </div> </main> </body> </html>