Weather icon packs
Sun, rain, storms and forecasts drawn in matching sets. Line icons for widgets, lineal color and gradient artwork for dashboards and apps.
72個のパック · 7種類のスタイル · 2,879点のアイコン · SVGとPNG
線のweatherアイコン
テキストの色を引き継ぐ単色の輪郭線。インターフェースに最適。
フラットのweatherアイコン
ウェブサイト、アプリ、スライド向けの、輪郭線のない単色塗りのアートワーク。
ラインカラーのweatherアイコン
色で塗られた輪郭線。線アイコンセットとよく合います。
グラデーションのweatherアイコン
ランディングページ、バナー、プレゼンテーション向けのやわらかなグラデーション。
塗りのweatherアイコン
小さなサイズや印刷でもはっきり見える単色の塗りつぶしシェイプ。
3Dのweatherアイコン
ヒーローセクションやランディングページ向けの3Dレンダリング。
その他のスタイルのweatherアイコン
混合スタイルやあまり一般的でないスタイルのパック。
人気のweatherアイコン
すべてのスタイルで最もダウンロードされたweatherアイコンのミックス。残りは検索でご覧ください。
WeatherFilled
WeatherFlat
WeatherFlat
WeatherLineal
WeatherLineal Color
WeatherBlue
WeatherLineal Gradient
WeatherLineal Color
WeatherLineal Color
WeatherFlat
WeatherFlat
WeatherOutline ColorChoosing weather icons
Weather icons are read at a glance: a forecast row, a home-screen widget, a map overlay. Clarity matters more than detail.
Cover the full set of conditions
A basic forecast needs at least clear, partly cloudy, cloudy, rain, heavy rain, thunderstorm, snow, sleet, fog and wind, plus day and night versions of clear and partly cloudy. Check that a pack includes all of these before you commit, because a missing icon borrowed from another pack is easy to spot.
Style by context
- Line weather icons fit apps and widgets that sit next to text and numbers.
- Line color and flat icons make conditions easier to tell apart at small sizes, since sun, rain and snow each get their own color.
- Gradient and 3D artwork suits hero sections and travel or event pages, where the icon is a visual rather than data.
Don't rely on color alone
Rain and snow can look alike in a single color at 16 px. Pair each icon with the temperature or a short label such as "Rain" or "Snow", and give it an accessible name for screen readers.
Units and extra data
Forecasts often show more than the sky: wind speed, humidity, UV index, sunrise and sunset, air quality. Choose a pack that covers these too, or check that a second pack uses the same stroke and corner style. Show units such as °C or km/h next to the number rather than inside the icon, so one icon works in every region.
Day, night and motion
Night versions usually swap the sun for a moon. Keep both in the same pack so the shapes line up when the forecast switches at sunset. If you plan to animate icons later, start from a line pack: simple strokes are the easiest to animate with CSS.
Before you download
- List every condition your weather data can return and map each one to an icon.
- Check for day and night versions where you need them.
- Test the icons at your smallest size next to real temperatures.
- Add text labels or accessible names for every condition.
- Keep wind, humidity and UV icons in the same style as the conditions.
Related: travel icons for trip pages and arrow icons for wind direction. Or search weather icons by condition.
weatherアイコンに関する質問
形式、編集、利用についての簡単な回答。
At minimum: clear, partly cloudy, cloudy, rain, heavy rain, thunderstorm, snow, sleet, fog and wind, with day and night versions of clear and partly cloudy. Check the pack page to confirm coverage.
Line or line color icons. They stay clear at small sizes next to temperatures, and line icons follow your text color in light and dark themes.
Yes. Use a simple arrow icon and rotate it to the wind bearing with CSS, so one SVG covers every direction. Arrow packs in the same style as your weather icons keep the widget consistent.
Yes. IconHub icons are free for personal and commercial projects with attribution. You can't resell them as files or use them in a logo. The license page has the full summary.
