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,856개 · 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.
