day-cloudy-high SVG 图标

Q: day-cloudy-high 图标可以商用吗？

widay-cloudy-high

来自 Weather Icons 开源图标集，矢量 SVG 可无损缩放到任意尺寸，支持在线改色、复制 React/Vue/HTML 代码。

图标 ID: wi:day-cloudy-high
中文名: —
所属集合: Weather Icons
集合规模: 219 枚
基础网格: 30px
色彩: 单色（可改色）
开源协议: OFL-1.1
作者: Erik Flowers

下载 day-cloudy-high 图标

SVG 矢量源文件，或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出，任意尺寸边缘锐利。

iOS / Android 全套尺寸 · 素材包生成器用 AI 生成类似风格的图标

PNG 由矢量源实时渲染，任意尺寸边缘锐利无锯齿；下载与预览均免费，无需注册。

day-cloudy-high 的预览与使用场景

切换预览颜色后，下方三底色、真实界面场景与各尺寸渲染会实时跟随。

预览颜色

浅色背景

深色背景

灰底融入

在真实界面里长这样

继续按钮内 · 主操作

搜索day-cloudy-high…输入框 · 前缀图标

day-cloudy-high导航菜单 · 选中态

暂无内容空状态 · 引导提示

9:41

day-cloudy-high

day-fog

day-hail

day-haze

day-rain

day-snow

day-sleet

day-sunny

day-windy

day-cloudy

day-showers

owm-day-731手机桌面 · App 图标

day-cloudy-highwi.design/icons/day-cloudy-high浏览器 · 标签页与站点图标

各尺寸下的可读性

24px

32px

48px

64px

96px

128px

复制 day-cloudy-high 图标代码

内联 SVG、React、Vue 与 CSS mask 四种主流引用方式，代码基于当前源文件生成，复制即用。

svgSVG 源码（内联 HTML）

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 30 30"><path fill="currentColor" d="M3.95 13.05c0-.93.29-1.75.87-2.48s1.31-1.2 2.19-1.4c.26-1.1.82-2 1.7-2.71s1.88-1.06 3.01-1.06c1.1 0 2.08.35 2.95 1.04s1.43 1.57 1.68 2.65h.26c1.1 0 2.04.39 2.82 1.16s1.17 1.71 1.17 2.81v.1c.75.8 1.12 1.75 1.12 2.85q0 1.14-.57 2.1q-.57.975-1.53 1.53c-.64.38-1.34.56-2.09.56c-.96 0-1.82-.3-2.56-.89s-1.24-1.35-1.48-2.26h-5.7c-1.07-.05-1.98-.46-2.72-1.23s-1.12-1.7-1.12-2.77m1.36 0c0 .7.24 1.31.73 1.82s1.07.79 1.75.82h8.99c.68-.03 1.27-.3 1.75-.82c.49-.52.73-1.12.73-1.82c0-.71-.26-1.32-.79-1.83c-.53-.52-1.14-.77-1.86-.77h-1.29c-.09 0-.14-.05-.14-.14l-.07-.47c-.09-.87-.46-1.6-1.12-2.19s-1.42-.89-2.28-.89c-.89 0-1.66.29-2.31.88s-1 1.32-1.09 2.19l-.06.47c0 .09-.05.14-.16.14h-.4c-.67.08-1.24.36-1.69.86a2.48 2.48 0 0 0-.69 1.75m6.2 9.01c-.25-.33-.25-.65 0-.98l1.13-1.15c.14-.12.31-.18.52-.18c.19 0 .34.06.46.18s.18.28.18.47q0 .3-.18.48l-1.14 1.18a.68.68 0 0 1-.49.19c-.2 0-.36-.07-.48-.19m3.39-5.02c.21.54.56.97 1.04 1.3s1.01.5 1.6.5c.77 0 1.43-.28 1.97-.83a2.8 2.8 0 0 0 .81-2.02c0-.39-.06-.74-.19-1.05c-.33.61-.8 1.11-1.39 1.49c-.6.38-1.25.58-1.96.61zm1.95 5.19c0-.19.07-.34.2-.47c.13-.12.3-.19.48-.19s.35.07.5.21c.12.12.19.27.19.45v1.64c0 .19-.07.35-.2.49s-.3.21-.48.21s-.35-.07-.48-.21s-.2-.3-.2-.49v-1.64zm4.41-1.83c0-.18.06-.33.19-.46c.13-.12.29-.19.47-.19c.19 0 .35.06.47.18l1.18 1.15c.13.14.2.3.2.48c0 .19-.07.35-.2.48s-.3.2-.49.2c-.21 0-.37-.06-.5-.19l-1.13-1.18a.67.67 0 0 1-.19-.47m0-8.81c0-.19.06-.35.19-.47l1.13-1.18c.14-.12.3-.19.5-.19c.19 0 .35.06.5.19c.13.15.2.32.2.51c0 .18-.07.33-.2.48l-1.18 1.15c-.12.12-.28.19-.47.19s-.35-.06-.47-.19c-.14-.14-.2-.3-.2-.49m1.82 4.4c0-.19.06-.35.19-.48c.12-.13.28-.2.47-.2h1.62c.19 0 .36.07.5.2s.21.29.21.48s-.07.36-.21.49s-.3.2-.5.2h-1.62c-.19 0-.34-.07-.47-.2a.66.66 0 0 1-.19-.49"/></svg>

reactReact 组件（TSX）

export function DayCloudyHighIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 30 30"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<path fill="currentColor" d="M3.95 13.05c0-.93.29-1.75.87-2.48s1.31-1.2 2.19-1.4c.26-1.1.82-2 1.7-2.71s1.88-1.06 3.01-1.06c1.1 0 2.08.35 2.95 1.04s1.43 1.57 1.68 2.65h.26c1.1 0 2.04.39 2.82 1.16s1.17 1.71 1.17 2.81v.1c.75.8 1.12 1.75 1.12 2.85q0 1.14-.57 2.1q-.57.975-1.53 1.53c-.64.38-1.34.56-2.09.56c-.96 0-1.82-.3-2.56-.89s-1.24-1.35-1.48-2.26h-5.7c-1.07-.05-1.98-.46-2.72-1.23s-1.12-1.7-1.12-2.77m1.36 0c0 .7.24 1.31.73 1.82s1.07.79 1.75.82h8.99c.68-.03 1.27-.3 1.75-.82c.49-.52.73-1.12.73-1.82c0-.71-.26-1.32-.79-1.83c-.53-.52-1.14-.77-1.86-.77h-1.29c-.09 0-.14-.05-.14-.14l-.07-.47c-.09-.87-.46-1.6-1.12-2.19s-1.42-.89-2.28-.89c-.89 0-1.66.29-2.31.88s-1 1.32-1.09 2.19l-.06.47c0 .09-.05.14-.16.14h-.4c-.67.08-1.24.36-1.69.86a2.48 2.48 0 0 0-.69 1.75m6.2 9.01c-.25-.33-.25-.65 0-.98l1.13-1.15c.14-.12.31-.18.52-.18c.19 0 .34.06.46.18s.18.28.18.47q0 .3-.18.48l-1.14 1.18a.68.68 0 0 1-.49.19c-.2 0-.36-.07-.48-.19m3.39-5.02c.21.54.56.97 1.04 1.3s1.01.5 1.6.5c.77 0 1.43-.28 1.97-.83a2.8 2.8 0 0 0 .81-2.02c0-.39-.06-.74-.19-1.05c-.33.61-.8 1.11-1.39 1.49c-.6.38-1.25.58-1.96.61zm1.95 5.19c0-.19.07-.34.2-.47c.13-.12.3-.19.48-.19s.35.07.5.21c.12.12.19.27.19.45v1.64c0 .19-.07.35-.2.49s-.3.21-.48.21s-.35-.07-.48-.21s-.2-.3-.2-.49v-1.64zm4.41-1.83c0-.18.06-.33.19-.46c.13-.12.29-.19.47-.19c.19 0 .35.06.47.18l1.18 1.15c.13.14.2.3.2.48c0 .19-.07.35-.2.48s-.3.2-.49.2c-.21 0-.37-.06-.5-.19l-1.13-1.18a.67.67 0 0 1-.19-.47m0-8.81c0-.19.06-.35.19-.47l1.13-1.18c.14-.12.3-.19.5-.19c.19 0 .35.06.5.19c.13.15.2.32.2.51c0 .18-.07.33-.2.48l-1.18 1.15c-.12.12-.28.19-.47.19s-.35-.06-.47-.19c-.14-.14-.2-.3-.2-.49m1.82 4.4c0-.19.06-.35.19-.48c.12-.13.28-.2.47-.2h1.62c.19 0 .36.07.5.2s.21.29.21.48s-.07.36-.21.49s-.3.2-.5.2h-1.62c-.19 0-.34-.07-.47-.2a.66.66 0 0 1-.19-.49"/>` }}
    />
  );
}

vueVue 3 组件

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 30 30" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<path fill="currentColor" d="M3.95 13.05c0-.93.29-1.75.87-2.48s1.31-1.2 2.19-1.4c.26-1.1.82-2 1.7-2.71s1.88-1.06 3.01-1.06c1.1 0 2.08.35 2.95 1.04s1.43 1.57 1.68 2.65h.26c1.1 0 2.04.39 2.82 1.16s1.17 1.71 1.17 2.81v.1c.75.8 1.12 1.75 1.12 2.85q0 1.14-.57 2.1q-.57.975-1.53 1.53c-.64.38-1.34.56-2.09.56c-.96 0-1.82-.3-2.56-.89s-1.24-1.35-1.48-2.26h-5.7c-1.07-.05-1.98-.46-2.72-1.23s-1.12-1.7-1.12-2.77m1.36 0c0 .7.24 1.31.73 1.82s1.07.79 1.75.82h8.99c.68-.03 1.27-.3 1.75-.82c.49-.52.73-1.12.73-1.82c0-.71-.26-1.32-.79-1.83c-.53-.52-1.14-.77-1.86-.77h-1.29c-.09 0-.14-.05-.14-.14l-.07-.47c-.09-.87-.46-1.6-1.12-2.19s-1.42-.89-2.28-.89c-.89 0-1.66.29-2.31.88s-1 1.32-1.09 2.19l-.06.47c0 .09-.05.14-.16.14h-.4c-.67.08-1.24.36-1.69.86a2.48 2.48 0 0 0-.69 1.75m6.2 9.01c-.25-.33-.25-.65 0-.98l1.13-1.15c.14-.12.31-.18.52-.18c.19 0 .34.06.46.18s.18.28.18.47q0 .3-.18.48l-1.14 1.18a.68.68 0 0 1-.49.19c-.2 0-.36-.07-.48-.19m3.39-5.02c.21.54.56.97 1.04 1.3s1.01.5 1.6.5c.77 0 1.43-.28 1.97-.83a2.8 2.8 0 0 0 .81-2.02c0-.39-.06-.74-.19-1.05c-.33.61-.8 1.11-1.39 1.49c-.6.38-1.25.58-1.96.61zm1.95 5.19c0-.19.07-.34.2-.47c.13-.12.3-.19.48-.19s.35.07.5.21c.12.12.19.27.19.45v1.64c0 .19-.07.35-.2.49s-.3.21-.48.21s-.35-.07-.48-.21s-.2-.3-.2-.49v-1.64zm4.41-1.83c0-.18.06-.33.19-.46c.13-.12.29-.19.47-.19c.19 0 .35.06.47.18l1.18 1.15c.13.14.2.3.2.48c0 .19-.07.35-.2.48s-.3.2-.49.2c-.21 0-.37-.06-.5-.19l-1.13-1.18a.67.67 0 0 1-.19-.47m0-8.81c0-.19.06-.35.19-.47l1.13-1.18c.14-.12.3-.19.5-.19c.19 0 .35.06.5.19c.13.15.2.32.2.51c0 .18-.07.33-.2.48l-1.18 1.15c-.12.12-.28.19-.47.19s-.35-.06-.47-.19c-.14-.14-.2-.3-.2-.49m1.82 4.4c0-.19.06-.35.19-.48c.12-.13.28-.2.47-.2h1.62c.19 0 .36.07.5.2s.21.29.21.48s-.07.36-.21.49s-.3.2-.5.2h-1.62c-.19 0-.34-.07-.47-.2a.66.66 0 0 1-.19-.49"/>`;
</script>

cssCSS mask（随 currentColor 改色）

.day-cloudy-high {
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3.95%2013.05c0-.93.29-1.75.87-2.48s1.31-1.2%202.19-1.4c.26-1.1.82-2%201.7-2.71s1.88-1.06%203.01-1.06c1.1%200%202.08.35%202.95%201.04s1.43%201.57%201.68%202.65h.26c1.1%200%202.04.39%202.82%201.16s1.17%201.71%201.17%202.81v.1c.75.8%201.12%201.75%201.12%202.85q0%201.14-.57%202.1q-.57.975-1.53%201.53c-.64.38-1.34.56-2.09.56c-.96%200-1.82-.3-2.56-.89s-1.24-1.35-1.48-2.26h-5.7c-1.07-.05-1.98-.46-2.72-1.23s-1.12-1.7-1.12-2.77m1.36%200c0%20.7.24%201.31.73%201.82s1.07.79%201.75.82h8.99c.68-.03%201.27-.3%201.75-.82c.49-.52.73-1.12.73-1.82c0-.71-.26-1.32-.79-1.83c-.53-.52-1.14-.77-1.86-.77h-1.29c-.09%200-.14-.05-.14-.14l-.07-.47c-.09-.87-.46-1.6-1.12-2.19s-1.42-.89-2.28-.89c-.89%200-1.66.29-2.31.88s-1%201.32-1.09%202.19l-.06.47c0%20.09-.05.14-.16.14h-.4c-.67.08-1.24.36-1.69.86a2.48%202.48%200%200%200-.69%201.75m6.2%209.01c-.25-.33-.25-.65%200-.98l1.13-1.15c.14-.12.31-.18.52-.18c.19%200%20.34.06.46.18s.18.28.18.47q0%20.3-.18.48l-1.14%201.18a.68.68%200%200%201-.49.19c-.2%200-.36-.07-.48-.19m3.39-5.02c.21.54.56.97%201.04%201.3s1.01.5%201.6.5c.77%200%201.43-.28%201.97-.83a2.8%202.8%200%200%200%20.81-2.02c0-.39-.06-.74-.19-1.05c-.33.61-.8%201.11-1.39%201.49c-.6.38-1.25.58-1.96.61zm1.95%205.19c0-.19.07-.34.2-.47c.13-.12.3-.19.48-.19s.35.07.5.21c.12.12.19.27.19.45v1.64c0%20.19-.07.35-.2.49s-.3.21-.48.21s-.35-.07-.48-.21s-.2-.3-.2-.49v-1.64zm4.41-1.83c0-.18.06-.33.19-.46c.13-.12.29-.19.47-.19c.19%200%20.35.06.47.18l1.18%201.15c.13.14.2.3.2.48c0%20.19-.07.35-.2.48s-.3.2-.49.2c-.21%200-.37-.06-.5-.19l-1.13-1.18a.67.67%200%200%201-.19-.47m0-8.81c0-.19.06-.35.19-.47l1.13-1.18c.14-.12.3-.19.5-.19c.19%200%20.35.06.5.19c.13.15.2.32.2.51c0%20.18-.07.33-.2.48l-1.18%201.15c-.12.12-.28.19-.47.19s-.35-.06-.47-.19c-.14-.14-.2-.3-.2-.49m1.82%204.4c0-.19.06-.35.19-.48c.12-.13.28-.2.47-.2h1.62c.19%200%20.36.07.5.2s.21.29.21.48s-.07.36-.21.49s-.3.2-.5.2h-1.62c-.19%200-.34-.07-.47-.2a.66.66%200%200%201-.19-.49%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3.95%2013.05c0-.93.29-1.75.87-2.48s1.31-1.2%202.19-1.4c.26-1.1.82-2%201.7-2.71s1.88-1.06%203.01-1.06c1.1%200%202.08.35%202.95%201.04s1.43%201.57%201.68%202.65h.26c1.1%200%202.04.39%202.82%201.16s1.17%201.71%201.17%202.81v.1c.75.8%201.12%201.75%201.12%202.85q0%201.14-.57%202.1q-.57.975-1.53%201.53c-.64.38-1.34.56-2.09.56c-.96%200-1.82-.3-2.56-.89s-1.24-1.35-1.48-2.26h-5.7c-1.07-.05-1.98-.46-2.72-1.23s-1.12-1.7-1.12-2.77m1.36%200c0%20.7.24%201.31.73%201.82s1.07.79%201.75.82h8.99c.68-.03%201.27-.3%201.75-.82c.49-.52.73-1.12.73-1.82c0-.71-.26-1.32-.79-1.83c-.53-.52-1.14-.77-1.86-.77h-1.29c-.09%200-.14-.05-.14-.14l-.07-.47c-.09-.87-.46-1.6-1.12-2.19s-1.42-.89-2.28-.89c-.89%200-1.66.29-2.31.88s-1%201.32-1.09%202.19l-.06.47c0%20.09-.05.14-.16.14h-.4c-.67.08-1.24.36-1.69.86a2.48%202.48%200%200%200-.69%201.75m6.2%209.01c-.25-.33-.25-.65%200-.98l1.13-1.15c.14-.12.31-.18.52-.18c.19%200%20.34.06.46.18s.18.28.18.47q0%20.3-.18.48l-1.14%201.18a.68.68%200%200%201-.49.19c-.2%200-.36-.07-.48-.19m3.39-5.02c.21.54.56.97%201.04%201.3s1.01.5%201.6.5c.77%200%201.43-.28%201.97-.83a2.8%202.8%200%200%200%20.81-2.02c0-.39-.06-.74-.19-1.05c-.33.61-.8%201.11-1.39%201.49c-.6.38-1.25.58-1.96.61zm1.95%205.19c0-.19.07-.34.2-.47c.13-.12.3-.19.48-.19s.35.07.5.21c.12.12.19.27.19.45v1.64c0%20.19-.07.35-.2.49s-.3.21-.48.21s-.35-.07-.48-.21s-.2-.3-.2-.49v-1.64zm4.41-1.83c0-.18.06-.33.19-.46c.13-.12.29-.19.47-.19c.19%200%20.35.06.47.18l1.18%201.15c.13.14.2.3.2.48c0%20.19-.07.35-.2.48s-.3.2-.49.2c-.21%200-.37-.06-.5-.19l-1.13-1.18a.67.67%200%200%201-.19-.47m0-8.81c0-.19.06-.35.19-.47l1.13-1.18c.14-.12.3-.19.5-.19c.19%200%20.35.06.5.19c.13.15.2.32.2.51c0%20.18-.07.33-.2.48l-1.18%201.15c-.12.12-.28.19-.47.19s-.35-.06-.47-.19c-.14-.14-.2-.3-.2-.49m1.82%204.4c0-.19.06-.35.19-.48c.12-.13.28-.2.47-.2h1.62c.19%200%20.36.07.5.2s.21.29.21.48s-.07.36-.21.49s-.3.2-.5.2h-1.62c-.19%200-.34-.07-.47-.2a.66.66%200%200%201-.19-.49%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 day-cloudy-high 加一点动效

单文件 CSS 即可播放，无需任何依赖；描画动效仅对描边类图标生效。

呼吸

透明度往复渐变，适合状态提示与在线指示。

css呼吸动效样式

.icon-day-cloudy-high {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

旋转

匀速循环旋转，适合加载中场景。

css旋转动效样式

.icon-day-cloudy-high {
  animation: icon-spin 1.6s linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

SVG 健康报告

对源文件的客观技术指标，供工程侧评估引用方式。

文件体积

1.81 KB

1,856 字节

viewBox

0 0 30 30

矢量坐标系

图元总数

<path> ×1

风格

单色（跟随 currentColor）

填充跟随容器颜色

同时含 width/height 与 viewBox：可以只保留 viewBox，让图标跟随容器自适应缩放。文件体积 1.81 KB（1,856 字节），图元 1 个，风格为单色（跟随 currentColor）。

常见问题

关于 day-cloudy-high 图标的下载、商用与改色。

day-cloudy-high 图标是什么？▾

它是 Weather Icons（wi）开源图标集中的 day-cloudy-high 图标，单色（跟随 currentColor），viewBox 为 0 0 30 30，文件仅 1.81 KB，矢量格式可无损缩放到任意尺寸。

如何下载 day-cloudy-high 图标？▾

点击「下载与导出」中的 SVG 源文件按钮保存矢量文件；也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG，或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时，用素材包生成器一键打包。

day-cloudy-high 图标可以商用吗？▾

如何修改 day-cloudy-high 图标的颜色？▾

在「预览与场景」的色板中切换颜色，三底色与全部场景会实时跟随；点击任一相近图标可打开预览弹层，复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。