Иконки погоды — скачать PNG и SVG бесплатно
Всё для прогноза: солнце и луна, облака, дождь и морось, снег и град, гроза, туман и ветер, а также термометр и влажность для дополнительных показателей.
Об иконках погоды
Иконки погоды есть в двух основных стилях — линейном для компактных списков и плоском цветном для крупных виджетов. Для ясной погоды и переменной облачности предусмотрены дневной и ночной варианты, чтобы виджет не показывал солнце в полночь.
Таблица соответствий для виджета
Погодный сервис возвращает код состояния, а дизайнер решает, какой картинкой его показать. Составьте таблицу заранее — тогда в интерфейсе не окажется «дыр», когда придёт редкий град или туман.
| Состояние | День | Ночь |
|---|---|---|
| Ясно | солнце | луна или звёздная ночь |
| Переменная облачность | солнце за облаком | облачная ночь |
| Пасмурно | облачно | облачно |
| Морось или дождь | морось, дождь | те же |
| Гроза | гроза | гроза |
| Снег или град | снег, град | те же |
| Туман | туман | туман |
Почасовой список и главный экран
В почасовом прогнозе погодные иконки мелкие — 20–24 px — и стоят рядом с цифрами, поэтому лучше подходят линейные из набора «Погода»: переменная облачность, дождь и облачная ночь не спорят с температурой. На главном экране с текущей погодой уместнее цветные иконки из набора «Погода Flat» размером 64–128 px: яркое солнце и облака читаются мгновенно.
Дополнительные показатели
Строку с деталями прогноза удобно собрать из маленьких погодных иконок одного веса: термометр для ощущаемой температуры, ветер, влажность, восход и закат. Здесь хватит 16 px и приглушённого цвета — главное в строке цифры.
Не только прогноз
Иконки погоды пригодятся туристическим сервисам, сайтам турбаз и горнолыжных курортов, школьным материалам по окружающему миру. Для игр и ретропроектов солнце, луна и облако есть в пиксельном наборе «Ретро-пиксели». И не забудьте о текстовой альтернативе: скринридер должен прочитать «Облачно, +12°», а не имя файла.
Наборы по теме
Все наборы →
Частые вопросы
- Как подобрать иконки к состояниям погоды из API?
- Сопоставьте каждому коду из API одну иконку, а для ясной погоды и переменной облачности предусмотрите дневной и ночной вариант. Редкие явления — град, торнадо, туман — тоже распишите заранее, чтобы виджет не остался без картинки.
- Какие иконки погоды лучше для мобильного виджета: линейные или цветные?
- Для почасового списка удобнее линейные — они компактны и не отвлекают от цифр. Для блока с текущей погодой хорошо подходят плоские цветные: в крупном размере они выразительнее.
- Можно ли использовать иконки погоды в видеопрогнозе или на ТВ-экране?
- Да. Для эфирной графики подойдёт векторный SVG или крупный PNG на 512 px: плоские цветные иконки хорошо читаются даже издалека, а линейные лучше показывать на контрастной подложке.