diving-mask SVG 图标

Q: diving-mask 图标可以商用吗？

notodiving-mask

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

图标 ID: noto:diving-mask
中文名: —
所属集合: Noto Emoji
集合规模: 3,729 枚
基础网格: 16px
色彩: 多色
开源协议: Apache-2.0
作者: Google Inc

下载 diving-mask 图标

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

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

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

diving-mask 的预览与使用场景

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

预览颜色

浅色背景

深色背景

灰底融入

在真实界面里长这样

继续按钮内 · 主操作

搜索diving-mask…输入框 · 前缀图标

diving-mask导航菜单 · 选中态

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

9:41

diving-mask手机桌面 · App 图标

diving-masknoto.design/icons/diving-mask浏览器 · 标签页与站点图标

各尺寸下的可读性

24px

32px

48px

64px

96px

128px

复制 diving-mask 图标代码

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

svgSVG 源码（内联 HTML）

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><radialGradient id="SVGgImIfXHx" cx="60.528" cy="14.792" r="72.962" gradientUnits="userSpaceOnUse"><stop offset=".501" stop-color="#5c727d"/><stop offset=".841" stop-color="#484d4f"/></radialGradient><path fill="url(#SVGgImIfXHx)" d="M97.93 47.42s-5.2-4.33-6.94-6.07c-3.18-3.18-10.26-10.26-30.78-10.26c-14.02 0-23.99 4.48-29.62 10.69c-4.7 5.18-11.99 9.97-11.99 9.97l-2.02 17.77l10.55 16.62s2.75 6.79 11.27 8.53c10.58 2.15 11.42-2.46 22.98-2.17c9.54.24 12.72 3.47 20.95 2.6c8.4-.88 13.44-8.38 14.74-10.98s10.55-19.65 10.55-19.65zM90.7 71.11c-1.22 5.85-3.18 8.09-3.18 8.09l-49.27 2.6s-3.61-4.91-5.78-9.54c-2.17-4.62-2.24-9.15-1.16-13.58c1.47-6.03 8.2-11.09 8.2-11.09l45.41.11s2.85 1.83 5.06 6.94c2.31 5.35 1.54 12.59.72 16.47"/><path fill="#4485f6" d="M66.84 110.47s11.03-.87 21.17-10.41c15.45-14.53 20.07-39.62 21.4-50.35c1.6-12.93-2.17-23.8-2.17-23.8l8.24-2.75s3.77 10.8 2.17 29.41c-1.26 14.65-8.24 40.51-22.66 53.67c-12.9 11.77-29.29 13.5-29.29 13.5z"/><path fill="#484d4f" d="M107.58 56.92s1.98.59 3.32.92c2.17.53 6.15 1.46 6.51 2.25c.74 1.65-1.47 11.02-3.07 11.14c-1.6.11-5.26-.8-6.64-1.72s-.12-12.59-.12-12.59"/><path fill="#1664c0" d="M81.35 103.71s-1.67-1.13-3.1 0c-1.41 1.11-.9 2.93-.06 4.48s3.88 5.97 4.78 6.75s2.24.82 3.06.33c1.57-.94 1.04-2.73 1.04-2.73s1.43 1.27 3.12.33c1.78-.99 1.17-2.83 1.17-2.83s1.76.94 3.29-.23c1.42-1.09 1.07-2.64 1.07-2.64s1.63.62 3.09-.94c1.29-1.38.49-2.96.49-2.96s1.33.49 2.38-.75c1.2-1.43.33-2.99-.33-3.65s-5.21-5.28-7.06-6.05c-.64-.27-1.69-.32-2.44.36c-1.19 1.07-.26 2.6-.26 2.6s-1.44-.95-2.64.13c-1.25 1.13-.38 2.92-.38 2.92s-1.53-1.44-3.05-.36c-1.2.86-.48 2.69-.48 2.69s-1.47-1.27-2.93-.18c-1.43 1.07-.76 2.73-.76 2.73"/><path fill="#7fdafb" d="M96.97 8.04c-.24 1.7 6.29 16.33 6.61 17.09c.52 1.24 3.76 4.79 8.9 2.49c4.39-1.96 3.33-6.82 3.14-7.53c-.72-2.68-5.17-16.56-6.81-16.89c-1.37-.28-11.65 3.46-11.84 4.84"/><path fill="#5c727f" d="M54.4 107.42s.06 12.53.11 13.86c.06 1.33.83 2.55 2.38 2.61s8.48 0 9.48-.06s1.84-1.15 1.94-3.1c.11-2.11.22-14.13.22-14.13z"/><path fill="#484d4f" d="M47.47 99.61c-.17.22.5 9.48 13.86 9.31s14.3-9.04 14.19-9.48s-27.89-.06-28.05.17"/><path fill="#4383f4" d="M14.96 55.1s1.08-7.01 4.41-10.13c2.5-2.34 5.72-3.28 9.42-3.55c3.7-.28 59.89-.26 64.24-.18c5.08.09 9.38 2.9 11.55 5.55c2.54 3.1 3.49 9.01 3.49 10.58s-9.13-9.01-9.13-9.01l-17.24-1.7l-53.18-.81z"/><path fill="#000202" d="M33.26 87.03s4.36 3.16 13.67 2.18c9.19-.97 11.73-11.13 11.73-11.13l7.26 2.9s2.3 5.93 8.59 7.62s12.6-.78 12.6-.78l-13.93-8.41l-6.89-11.01l-9.4-.1l-7.05 11.35l-7.62 5.81z"/><path fill="#5c727d" d="M61.54 71.64c-2.39 0-3.35 4.21-4.88 7.46s-3.63 7.17-2.2 8.51s3.06 1.15 6.98 1.24c4.02.1 6.12-.1 7.08-1.91c.9-1.7-.99-5.01-2.2-7.94c-1.34-3.24-2.68-7.36-4.78-7.36"/><linearGradient id="SVGFmezHeFx" x1="60.628" x2="61.01" y1="76.665" y2="46.106" gradientUnits="userSpaceOnUse"><stop offset=".191" stop-color="#27a0e2"/><stop offset=".426" stop-color="#80c7ee" stop-opacity=".873"/><stop offset=".746" stop-color="#fff" stop-opacity=".7"/></linearGradient><path fill="url(#SVGFmezHeFx)" d="m34.39 80.61l-12.4-3.56l-6.58-15.2l5.17-11S34.27 45.78 35.67 46s30.72.11 32.45.22s30.29.54 30.51.86s7.87 1.51 7.65 7.87s-1.29 14.98-1.51 15.74s-2.26 7.65-4.2 8.08s-10.46.86-10.46.86l-17.35-2.5l-11.2-12.59l-9.59 9.59z" opacity=".8"/><path fill="#1565c4" d="m18.34 72.37l.55-4.9s4.29 6.21 8.78 8.41c5 2.44 10.13 3.51 16.88.36c6.15-2.86 8.52-11.11 11.35-13.83c.96-.92 2.62-2.2 5.78-2.11c2.12.06 4.05.9 4.92 1.67c3.8 3.39 6.02 11.89 10.52 14.38c5.68 3.14 12.49 3.12 18.12-.39c5.64-3.51 8.23-7.21 8.23-7.21l-.28 7.76l-8.97 9.06l-16.72-2.11l-6.1-6.38l-7.12-9.06s-7.21 0-7.39.28s-6.56 9.8-6.56 9.8l-6.75 6.47s-11 1.02-11.92.28s-10.07-5.55-10.07-5.55z"/><path fill="#81d7ff" d="M101.87 47.3c-3.38-1.87-8.19-2.8-14.88-2.69c-6.68.11-55.19-.32-58.21-.22c-3.02.11-6.58 1.19-8.84 2.8c-4.6 3.29-5.92 9.7-6.14 16.82c-.27 8.51 4.62 24 22.3 24.1c12.78.07 16.37-8.43 19.58-13.67c1.48-2.41 2.65-5.07 5.86-4.98c3.45.1 4.27 2.56 5.36 4.49c3.1 5.53 6.12 14.42 20.08 14.34c15.52-.08 21.47-15.08 21.77-24.77c.25-8.72-3.11-14.13-6.88-16.22m1.4 16.71c-.43 7.65-4.43 18.62-16.06 19.08c-10.89.43-13.8-6.04-15.42-8.3s-4.5-6.78-6.05-8.1c-2.16-1.83-7.19-1.2-8.7.1c-1.92 1.64-4.03 5.14-6.28 8.36c-3.77 5.39-6.24 7.52-13.89 7.84s-13.91-4.2-16.39-11.53c-2.92-8.63-1.29-16.06 3.67-19.73c2.4-1.77 4.64-2.48 7.01-2.59s55.84-.32 61.77.22s10.77 7 10.34 14.65"/></svg>

reactReact 组件（TSX）

export function DivingMaskIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 128 128"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<radialGradient id="SVGgImIfXHx" cx="60.528" cy="14.792" r="72.962" gradientUnits="userSpaceOnUse"><stop offset=".501" stop-color="#5c727d"/><stop offset=".841" stop-color="#484d4f"/></radialGradient><path fill="url(#SVGgImIfXHx)" d="M97.93 47.42s-5.2-4.33-6.94-6.07c-3.18-3.18-10.26-10.26-30.78-10.26c-14.02 0-23.99 4.48-29.62 10.69c-4.7 5.18-11.99 9.97-11.99 9.97l-2.02 17.77l10.55 16.62s2.75 6.79 11.27 8.53c10.58 2.15 11.42-2.46 22.98-2.17c9.54.24 12.72 3.47 20.95 2.6c8.4-.88 13.44-8.38 14.74-10.98s10.55-19.65 10.55-19.65zM90.7 71.11c-1.22 5.85-3.18 8.09-3.18 8.09l-49.27 2.6s-3.61-4.91-5.78-9.54c-2.17-4.62-2.24-9.15-1.16-13.58c1.47-6.03 8.2-11.09 8.2-11.09l45.41.11s2.85 1.83 5.06 6.94c2.31 5.35 1.54 12.59.72 16.47"/><path fill="#4485f6" d="M66.84 110.47s11.03-.87 21.17-10.41c15.45-14.53 20.07-39.62 21.4-50.35c1.6-12.93-2.17-23.8-2.17-23.8l8.24-2.75s3.77 10.8 2.17 29.41c-1.26 14.65-8.24 40.51-22.66 53.67c-12.9 11.77-29.29 13.5-29.29 13.5z"/><path fill="#484d4f" d="M107.58 56.92s1.98.59 3.32.92c2.17.53 6.15 1.46 6.51 2.25c.74 1.65-1.47 11.02-3.07 11.14c-1.6.11-5.26-.8-6.64-1.72s-.12-12.59-.12-12.59"/><path fill="#1664c0" d="M81.35 103.71s-1.67-1.13-3.1 0c-1.41 1.11-.9 2.93-.06 4.48s3.88 5.97 4.78 6.75s2.24.82 3.06.33c1.57-.94 1.04-2.73 1.04-2.73s1.43 1.27 3.12.33c1.78-.99 1.17-2.83 1.17-2.83s1.76.94 3.29-.23c1.42-1.09 1.07-2.64 1.07-2.64s1.63.62 3.09-.94c1.29-1.38.49-2.96.49-2.96s1.33.49 2.38-.75c1.2-1.43.33-2.99-.33-3.65s-5.21-5.28-7.06-6.05c-.64-.27-1.69-.32-2.44.36c-1.19 1.07-.26 2.6-.26 2.6s-1.44-.95-2.64.13c-1.25 1.13-.38 2.92-.38 2.92s-1.53-1.44-3.05-.36c-1.2.86-.48 2.69-.48 2.69s-1.47-1.27-2.93-.18c-1.43 1.07-.76 2.73-.76 2.73"/><path fill="#7fdafb" d="M96.97 8.04c-.24 1.7 6.29 16.33 6.61 17.09c.52 1.24 3.76 4.79 8.9 2.49c4.39-1.96 3.33-6.82 3.14-7.53c-.72-2.68-5.17-16.56-6.81-16.89c-1.37-.28-11.65 3.46-11.84 4.84"/><path fill="#5c727f" d="M54.4 107.42s.06 12.53.11 13.86c.06 1.33.83 2.55 2.38 2.61s8.48 0 9.48-.06s1.84-1.15 1.94-3.1c.11-2.11.22-14.13.22-14.13z"/><path fill="#484d4f" d="M47.47 99.61c-.17.22.5 9.48 13.86 9.31s14.3-9.04 14.19-9.48s-27.89-.06-28.05.17"/><path fill="#4383f4" d="M14.96 55.1s1.08-7.01 4.41-10.13c2.5-2.34 5.72-3.28 9.42-3.55c3.7-.28 59.89-.26 64.24-.18c5.08.09 9.38 2.9 11.55 5.55c2.54 3.1 3.49 9.01 3.49 10.58s-9.13-9.01-9.13-9.01l-17.24-1.7l-53.18-.81z"/><path fill="#000202" d="M33.26 87.03s4.36 3.16 13.67 2.18c9.19-.97 11.73-11.13 11.73-11.13l7.26 2.9s2.3 5.93 8.59 7.62s12.6-.78 12.6-.78l-13.93-8.41l-6.89-11.01l-9.4-.1l-7.05 11.35l-7.62 5.81z"/><path fill="#5c727d" d="M61.54 71.64c-2.39 0-3.35 4.21-4.88 7.46s-3.63 7.17-2.2 8.51s3.06 1.15 6.98 1.24c4.02.1 6.12-.1 7.08-1.91c.9-1.7-.99-5.01-2.2-7.94c-1.34-3.24-2.68-7.36-4.78-7.36"/><linearGradient id="SVGFmezHeFx" x1="60.628" x2="61.01" y1="76.665" y2="46.106" gradientUnits="userSpaceOnUse"><stop offset=".191" stop-color="#27a0e2"/><stop offset=".426" stop-color="#80c7ee" stop-opacity=".873"/><stop offset=".746" stop-color="#fff" stop-opacity=".7"/></linearGradient><path fill="url(#SVGFmezHeFx)" d="m34.39 80.61l-12.4-3.56l-6.58-15.2l5.17-11S34.27 45.78 35.67 46s30.72.11 32.45.22s30.29.54 30.51.86s7.87 1.51 7.65 7.87s-1.29 14.98-1.51 15.74s-2.26 7.65-4.2 8.08s-10.46.86-10.46.86l-17.35-2.5l-11.2-12.59l-9.59 9.59z" opacity=".8"/><path fill="#1565c4" d="m18.34 72.37l.55-4.9s4.29 6.21 8.78 8.41c5 2.44 10.13 3.51 16.88.36c6.15-2.86 8.52-11.11 11.35-13.83c.96-.92 2.62-2.2 5.78-2.11c2.12.06 4.05.9 4.92 1.67c3.8 3.39 6.02 11.89 10.52 14.38c5.68 3.14 12.49 3.12 18.12-.39c5.64-3.51 8.23-7.21 8.23-7.21l-.28 7.76l-8.97 9.06l-16.72-2.11l-6.1-6.38l-7.12-9.06s-7.21 0-7.39.28s-6.56 9.8-6.56 9.8l-6.75 6.47s-11 1.02-11.92.28s-10.07-5.55-10.07-5.55z"/><path fill="#81d7ff" d="M101.87 47.3c-3.38-1.87-8.19-2.8-14.88-2.69c-6.68.11-55.19-.32-58.21-.22c-3.02.11-6.58 1.19-8.84 2.8c-4.6 3.29-5.92 9.7-6.14 16.82c-.27 8.51 4.62 24 22.3 24.1c12.78.07 16.37-8.43 19.58-13.67c1.48-2.41 2.65-5.07 5.86-4.98c3.45.1 4.27 2.56 5.36 4.49c3.1 5.53 6.12 14.42 20.08 14.34c15.52-.08 21.47-15.08 21.77-24.77c.25-8.72-3.11-14.13-6.88-16.22m1.4 16.71c-.43 7.65-4.43 18.62-16.06 19.08c-10.89.43-13.8-6.04-15.42-8.3s-4.5-6.78-6.05-8.1c-2.16-1.83-7.19-1.2-8.7.1c-1.92 1.64-4.03 5.14-6.28 8.36c-3.77 5.39-6.24 7.52-13.89 7.84s-13.91-4.2-16.39-11.53c-2.92-8.63-1.29-16.06 3.67-19.73c2.4-1.77 4.64-2.48 7.01-2.59s55.84-.32 61.77.22s10.77 7 10.34 14.65"/>` }}
    />
  );
}

vueVue 3 组件

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

<script setup>
const body = `<radialGradient id="SVGgImIfXHx" cx="60.528" cy="14.792" r="72.962" gradientUnits="userSpaceOnUse"><stop offset=".501" stop-color="#5c727d"/><stop offset=".841" stop-color="#484d4f"/></radialGradient><path fill="url(#SVGgImIfXHx)" d="M97.93 47.42s-5.2-4.33-6.94-6.07c-3.18-3.18-10.26-10.26-30.78-10.26c-14.02 0-23.99 4.48-29.62 10.69c-4.7 5.18-11.99 9.97-11.99 9.97l-2.02 17.77l10.55 16.62s2.75 6.79 11.27 8.53c10.58 2.15 11.42-2.46 22.98-2.17c9.54.24 12.72 3.47 20.95 2.6c8.4-.88 13.44-8.38 14.74-10.98s10.55-19.65 10.55-19.65zM90.7 71.11c-1.22 5.85-3.18 8.09-3.18 8.09l-49.27 2.6s-3.61-4.91-5.78-9.54c-2.17-4.62-2.24-9.15-1.16-13.58c1.47-6.03 8.2-11.09 8.2-11.09l45.41.11s2.85 1.83 5.06 6.94c2.31 5.35 1.54 12.59.72 16.47"/><path fill="#4485f6" d="M66.84 110.47s11.03-.87 21.17-10.41c15.45-14.53 20.07-39.62 21.4-50.35c1.6-12.93-2.17-23.8-2.17-23.8l8.24-2.75s3.77 10.8 2.17 29.41c-1.26 14.65-8.24 40.51-22.66 53.67c-12.9 11.77-29.29 13.5-29.29 13.5z"/><path fill="#484d4f" d="M107.58 56.92s1.98.59 3.32.92c2.17.53 6.15 1.46 6.51 2.25c.74 1.65-1.47 11.02-3.07 11.14c-1.6.11-5.26-.8-6.64-1.72s-.12-12.59-.12-12.59"/><path fill="#1664c0" d="M81.35 103.71s-1.67-1.13-3.1 0c-1.41 1.11-.9 2.93-.06 4.48s3.88 5.97 4.78 6.75s2.24.82 3.06.33c1.57-.94 1.04-2.73 1.04-2.73s1.43 1.27 3.12.33c1.78-.99 1.17-2.83 1.17-2.83s1.76.94 3.29-.23c1.42-1.09 1.07-2.64 1.07-2.64s1.63.62 3.09-.94c1.29-1.38.49-2.96.49-2.96s1.33.49 2.38-.75c1.2-1.43.33-2.99-.33-3.65s-5.21-5.28-7.06-6.05c-.64-.27-1.69-.32-2.44.36c-1.19 1.07-.26 2.6-.26 2.6s-1.44-.95-2.64.13c-1.25 1.13-.38 2.92-.38 2.92s-1.53-1.44-3.05-.36c-1.2.86-.48 2.69-.48 2.69s-1.47-1.27-2.93-.18c-1.43 1.07-.76 2.73-.76 2.73"/><path fill="#7fdafb" d="M96.97 8.04c-.24 1.7 6.29 16.33 6.61 17.09c.52 1.24 3.76 4.79 8.9 2.49c4.39-1.96 3.33-6.82 3.14-7.53c-.72-2.68-5.17-16.56-6.81-16.89c-1.37-.28-11.65 3.46-11.84 4.84"/><path fill="#5c727f" d="M54.4 107.42s.06 12.53.11 13.86c.06 1.33.83 2.55 2.38 2.61s8.48 0 9.48-.06s1.84-1.15 1.94-3.1c.11-2.11.22-14.13.22-14.13z"/><path fill="#484d4f" d="M47.47 99.61c-.17.22.5 9.48 13.86 9.31s14.3-9.04 14.19-9.48s-27.89-.06-28.05.17"/><path fill="#4383f4" d="M14.96 55.1s1.08-7.01 4.41-10.13c2.5-2.34 5.72-3.28 9.42-3.55c3.7-.28 59.89-.26 64.24-.18c5.08.09 9.38 2.9 11.55 5.55c2.54 3.1 3.49 9.01 3.49 10.58s-9.13-9.01-9.13-9.01l-17.24-1.7l-53.18-.81z"/><path fill="#000202" d="M33.26 87.03s4.36 3.16 13.67 2.18c9.19-.97 11.73-11.13 11.73-11.13l7.26 2.9s2.3 5.93 8.59 7.62s12.6-.78 12.6-.78l-13.93-8.41l-6.89-11.01l-9.4-.1l-7.05 11.35l-7.62 5.81z"/><path fill="#5c727d" d="M61.54 71.64c-2.39 0-3.35 4.21-4.88 7.46s-3.63 7.17-2.2 8.51s3.06 1.15 6.98 1.24c4.02.1 6.12-.1 7.08-1.91c.9-1.7-.99-5.01-2.2-7.94c-1.34-3.24-2.68-7.36-4.78-7.36"/><linearGradient id="SVGFmezHeFx" x1="60.628" x2="61.01" y1="76.665" y2="46.106" gradientUnits="userSpaceOnUse"><stop offset=".191" stop-color="#27a0e2"/><stop offset=".426" stop-color="#80c7ee" stop-opacity=".873"/><stop offset=".746" stop-color="#fff" stop-opacity=".7"/></linearGradient><path fill="url(#SVGFmezHeFx)" d="m34.39 80.61l-12.4-3.56l-6.58-15.2l5.17-11S34.27 45.78 35.67 46s30.72.11 32.45.22s30.29.54 30.51.86s7.87 1.51 7.65 7.87s-1.29 14.98-1.51 15.74s-2.26 7.65-4.2 8.08s-10.46.86-10.46.86l-17.35-2.5l-11.2-12.59l-9.59 9.59z" opacity=".8"/><path fill="#1565c4" d="m18.34 72.37l.55-4.9s4.29 6.21 8.78 8.41c5 2.44 10.13 3.51 16.88.36c6.15-2.86 8.52-11.11 11.35-13.83c.96-.92 2.62-2.2 5.78-2.11c2.12.06 4.05.9 4.92 1.67c3.8 3.39 6.02 11.89 10.52 14.38c5.68 3.14 12.49 3.12 18.12-.39c5.64-3.51 8.23-7.21 8.23-7.21l-.28 7.76l-8.97 9.06l-16.72-2.11l-6.1-6.38l-7.12-9.06s-7.21 0-7.39.28s-6.56 9.8-6.56 9.8l-6.75 6.47s-11 1.02-11.92.28s-10.07-5.55-10.07-5.55z"/><path fill="#81d7ff" d="M101.87 47.3c-3.38-1.87-8.19-2.8-14.88-2.69c-6.68.11-55.19-.32-58.21-.22c-3.02.11-6.58 1.19-8.84 2.8c-4.6 3.29-5.92 9.7-6.14 16.82c-.27 8.51 4.62 24 22.3 24.1c12.78.07 16.37-8.43 19.58-13.67c1.48-2.41 2.65-5.07 5.86-4.98c3.45.1 4.27 2.56 5.36 4.49c3.1 5.53 6.12 14.42 20.08 14.34c15.52-.08 21.47-15.08 21.77-24.77c.25-8.72-3.11-14.13-6.88-16.22m1.4 16.71c-.43 7.65-4.43 18.62-16.06 19.08c-10.89.43-13.8-6.04-15.42-8.3s-4.5-6.78-6.05-8.1c-2.16-1.83-7.19-1.2-8.7.1c-1.92 1.64-4.03 5.14-6.28 8.36c-3.77 5.39-6.24 7.52-13.89 7.84s-13.91-4.2-16.39-11.53c-2.92-8.63-1.29-16.06 3.67-19.73c2.4-1.77 4.64-2.48 7.01-2.59s55.84-.32 61.77.22s10.77 7 10.34 14.65"/>`;
</script>

cssCSS mask（随 currentColor 改色）

.diving-mask {
  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%20128%20128%22%3E%3CradialGradient%20id%3D%22SVGgImIfXHx%22%20cx%3D%2260.528%22%20cy%3D%2214.792%22%20r%3D%2272.962%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.501%22%20stop-color%3D%22%235c727d%22%2F%3E%3Cstop%20offset%3D%22.841%22%20stop-color%3D%22%23484d4f%22%2F%3E%3C%2FradialGradient%3E%3Cpath%20fill%3D%22url(%23SVGgImIfXHx)%22%20d%3D%22M97.93%2047.42s-5.2-4.33-6.94-6.07c-3.18-3.18-10.26-10.26-30.78-10.26c-14.02%200-23.99%204.48-29.62%2010.69c-4.7%205.18-11.99%209.97-11.99%209.97l-2.02%2017.77l10.55%2016.62s2.75%206.79%2011.27%208.53c10.58%202.15%2011.42-2.46%2022.98-2.17c9.54.24%2012.72%203.47%2020.95%202.6c8.4-.88%2013.44-8.38%2014.74-10.98s10.55-19.65%2010.55-19.65zM90.7%2071.11c-1.22%205.85-3.18%208.09-3.18%208.09l-49.27%202.6s-3.61-4.91-5.78-9.54c-2.17-4.62-2.24-9.15-1.16-13.58c1.47-6.03%208.2-11.09%208.2-11.09l45.41.11s2.85%201.83%205.06%206.94c2.31%205.35%201.54%2012.59.72%2016.47%22%2F%3E%3Cpath%20fill%3D%22%234485f6%22%20d%3D%22M66.84%20110.47s11.03-.87%2021.17-10.41c15.45-14.53%2020.07-39.62%2021.4-50.35c1.6-12.93-2.17-23.8-2.17-23.8l8.24-2.75s3.77%2010.8%202.17%2029.41c-1.26%2014.65-8.24%2040.51-22.66%2053.67c-12.9%2011.77-29.29%2013.5-29.29%2013.5z%22%2F%3E%3Cpath%20fill%3D%22%23484d4f%22%20d%3D%22M107.58%2056.92s1.98.59%203.32.92c2.17.53%206.15%201.46%206.51%202.25c.74%201.65-1.47%2011.02-3.07%2011.14c-1.6.11-5.26-.8-6.64-1.72s-.12-12.59-.12-12.59%22%2F%3E%3Cpath%20fill%3D%22%231664c0%22%20d%3D%22M81.35%20103.71s-1.67-1.13-3.1%200c-1.41%201.11-.9%202.93-.06%204.48s3.88%205.97%204.78%206.75s2.24.82%203.06.33c1.57-.94%201.04-2.73%201.04-2.73s1.43%201.27%203.12.33c1.78-.99%201.17-2.83%201.17-2.83s1.76.94%203.29-.23c1.42-1.09%201.07-2.64%201.07-2.64s1.63.62%203.09-.94c1.29-1.38.49-2.96.49-2.96s1.33.49%202.38-.75c1.2-1.43.33-2.99-.33-3.65s-5.21-5.28-7.06-6.05c-.64-.27-1.69-.32-2.44.36c-1.19%201.07-.26%202.6-.26%202.6s-1.44-.95-2.64.13c-1.25%201.13-.38%202.92-.38%202.92s-1.53-1.44-3.05-.36c-1.2.86-.48%202.69-.48%202.69s-1.47-1.27-2.93-.18c-1.43%201.07-.76%202.73-.76%202.73%22%2F%3E%3Cpath%20fill%3D%22%237fdafb%22%20d%3D%22M96.97%208.04c-.24%201.7%206.29%2016.33%206.61%2017.09c.52%201.24%203.76%204.79%208.9%202.49c4.39-1.96%203.33-6.82%203.14-7.53c-.72-2.68-5.17-16.56-6.81-16.89c-1.37-.28-11.65%203.46-11.84%204.84%22%2F%3E%3Cpath%20fill%3D%22%235c727f%22%20d%3D%22M54.4%20107.42s.06%2012.53.11%2013.86c.06%201.33.83%202.55%202.38%202.61s8.48%200%209.48-.06s1.84-1.15%201.94-3.1c.11-2.11.22-14.13.22-14.13z%22%2F%3E%3Cpath%20fill%3D%22%23484d4f%22%20d%3D%22M47.47%2099.61c-.17.22.5%209.48%2013.86%209.31s14.3-9.04%2014.19-9.48s-27.89-.06-28.05.17%22%2F%3E%3Cpath%20fill%3D%22%234383f4%22%20d%3D%22M14.96%2055.1s1.08-7.01%204.41-10.13c2.5-2.34%205.72-3.28%209.42-3.55c3.7-.28%2059.89-.26%2064.24-.18c5.08.09%209.38%202.9%2011.55%205.55c2.54%203.1%203.49%209.01%203.49%2010.58s-9.13-9.01-9.13-9.01l-17.24-1.7l-53.18-.81z%22%2F%3E%3Cpath%20fill%3D%22%23000202%22%20d%3D%22M33.26%2087.03s4.36%203.16%2013.67%202.18c9.19-.97%2011.73-11.13%2011.73-11.13l7.26%202.9s2.3%205.93%208.59%207.62s12.6-.78%2012.6-.78l-13.93-8.41l-6.89-11.01l-9.4-.1l-7.05%2011.35l-7.62%205.81z%22%2F%3E%3Cpath%20fill%3D%22%235c727d%22%20d%3D%22M61.54%2071.64c-2.39%200-3.35%204.21-4.88%207.46s-3.63%207.17-2.2%208.51s3.06%201.15%206.98%201.24c4.02.1%206.12-.1%207.08-1.91c.9-1.7-.99-5.01-2.2-7.94c-1.34-3.24-2.68-7.36-4.78-7.36%22%2F%3E%3ClinearGradient%20id%3D%22SVGFmezHeFx%22%20x1%3D%2260.628%22%20x2%3D%2261.01%22%20y1%3D%2276.665%22%20y2%3D%2246.106%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.191%22%20stop-color%3D%22%2327a0e2%22%2F%3E%3Cstop%20offset%3D%22.426%22%20stop-color%3D%22%2380c7ee%22%20stop-opacity%3D%22.873%22%2F%3E%3Cstop%20offset%3D%22.746%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.7%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D%22url(%23SVGFmezHeFx)%22%20d%3D%22m34.39%2080.61l-12.4-3.56l-6.58-15.2l5.17-11S34.27%2045.78%2035.67%2046s30.72.11%2032.45.22s30.29.54%2030.51.86s7.87%201.51%207.65%207.87s-1.29%2014.98-1.51%2015.74s-2.26%207.65-4.2%208.08s-10.46.86-10.46.86l-17.35-2.5l-11.2-12.59l-9.59%209.59z%22%20opacity%3D%22.8%22%2F%3E%3Cpath%20fill%3D%22%231565c4%22%20d%3D%22m18.34%2072.37l.55-4.9s4.29%206.21%208.78%208.41c5%202.44%2010.13%203.51%2016.88.36c6.15-2.86%208.52-11.11%2011.35-13.83c.96-.92%202.62-2.2%205.78-2.11c2.12.06%204.05.9%204.92%201.67c3.8%203.39%206.02%2011.89%2010.52%2014.38c5.68%203.14%2012.49%203.12%2018.12-.39c5.64-3.51%208.23-7.21%208.23-7.21l-.28%207.76l-8.97%209.06l-16.72-2.11l-6.1-6.38l-7.12-9.06s-7.21%200-7.39.28s-6.56%209.8-6.56%209.8l-6.75%206.47s-11%201.02-11.92.28s-10.07-5.55-10.07-5.55z%22%2F%3E%3Cpath%20fill%3D%22%2381d7ff%22%20d%3D%22M101.87%2047.3c-3.38-1.87-8.19-2.8-14.88-2.69c-6.68.11-55.19-.32-58.21-.22c-3.02.11-6.58%201.19-8.84%202.8c-4.6%203.29-5.92%209.7-6.14%2016.82c-.27%208.51%204.62%2024%2022.3%2024.1c12.78.07%2016.37-8.43%2019.58-13.67c1.48-2.41%202.65-5.07%205.86-4.98c3.45.1%204.27%202.56%205.36%204.49c3.1%205.53%206.12%2014.42%2020.08%2014.34c15.52-.08%2021.47-15.08%2021.77-24.77c.25-8.72-3.11-14.13-6.88-16.22m1.4%2016.71c-.43%207.65-4.43%2018.62-16.06%2019.08c-10.89.43-13.8-6.04-15.42-8.3s-4.5-6.78-6.05-8.1c-2.16-1.83-7.19-1.2-8.7.1c-1.92%201.64-4.03%205.14-6.28%208.36c-3.77%205.39-6.24%207.52-13.89%207.84s-13.91-4.2-16.39-11.53c-2.92-8.63-1.29-16.06%203.67-19.73c2.4-1.77%204.64-2.48%207.01-2.59s55.84-.32%2061.77.22s10.77%207%2010.34%2014.65%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%20128%20128%22%3E%3CradialGradient%20id%3D%22SVGgImIfXHx%22%20cx%3D%2260.528%22%20cy%3D%2214.792%22%20r%3D%2272.962%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.501%22%20stop-color%3D%22%235c727d%22%2F%3E%3Cstop%20offset%3D%22.841%22%20stop-color%3D%22%23484d4f%22%2F%3E%3C%2FradialGradient%3E%3Cpath%20fill%3D%22url(%23SVGgImIfXHx)%22%20d%3D%22M97.93%2047.42s-5.2-4.33-6.94-6.07c-3.18-3.18-10.26-10.26-30.78-10.26c-14.02%200-23.99%204.48-29.62%2010.69c-4.7%205.18-11.99%209.97-11.99%209.97l-2.02%2017.77l10.55%2016.62s2.75%206.79%2011.27%208.53c10.58%202.15%2011.42-2.46%2022.98-2.17c9.54.24%2012.72%203.47%2020.95%202.6c8.4-.88%2013.44-8.38%2014.74-10.98s10.55-19.65%2010.55-19.65zM90.7%2071.11c-1.22%205.85-3.18%208.09-3.18%208.09l-49.27%202.6s-3.61-4.91-5.78-9.54c-2.17-4.62-2.24-9.15-1.16-13.58c1.47-6.03%208.2-11.09%208.2-11.09l45.41.11s2.85%201.83%205.06%206.94c2.31%205.35%201.54%2012.59.72%2016.47%22%2F%3E%3Cpath%20fill%3D%22%234485f6%22%20d%3D%22M66.84%20110.47s11.03-.87%2021.17-10.41c15.45-14.53%2020.07-39.62%2021.4-50.35c1.6-12.93-2.17-23.8-2.17-23.8l8.24-2.75s3.77%2010.8%202.17%2029.41c-1.26%2014.65-8.24%2040.51-22.66%2053.67c-12.9%2011.77-29.29%2013.5-29.29%2013.5z%22%2F%3E%3Cpath%20fill%3D%22%23484d4f%22%20d%3D%22M107.58%2056.92s1.98.59%203.32.92c2.17.53%206.15%201.46%206.51%202.25c.74%201.65-1.47%2011.02-3.07%2011.14c-1.6.11-5.26-.8-6.64-1.72s-.12-12.59-.12-12.59%22%2F%3E%3Cpath%20fill%3D%22%231664c0%22%20d%3D%22M81.35%20103.71s-1.67-1.13-3.1%200c-1.41%201.11-.9%202.93-.06%204.48s3.88%205.97%204.78%206.75s2.24.82%203.06.33c1.57-.94%201.04-2.73%201.04-2.73s1.43%201.27%203.12.33c1.78-.99%201.17-2.83%201.17-2.83s1.76.94%203.29-.23c1.42-1.09%201.07-2.64%201.07-2.64s1.63.62%203.09-.94c1.29-1.38.49-2.96.49-2.96s1.33.49%202.38-.75c1.2-1.43.33-2.99-.33-3.65s-5.21-5.28-7.06-6.05c-.64-.27-1.69-.32-2.44.36c-1.19%201.07-.26%202.6-.26%202.6s-1.44-.95-2.64.13c-1.25%201.13-.38%202.92-.38%202.92s-1.53-1.44-3.05-.36c-1.2.86-.48%202.69-.48%202.69s-1.47-1.27-2.93-.18c-1.43%201.07-.76%202.73-.76%202.73%22%2F%3E%3Cpath%20fill%3D%22%237fdafb%22%20d%3D%22M96.97%208.04c-.24%201.7%206.29%2016.33%206.61%2017.09c.52%201.24%203.76%204.79%208.9%202.49c4.39-1.96%203.33-6.82%203.14-7.53c-.72-2.68-5.17-16.56-6.81-16.89c-1.37-.28-11.65%203.46-11.84%204.84%22%2F%3E%3Cpath%20fill%3D%22%235c727f%22%20d%3D%22M54.4%20107.42s.06%2012.53.11%2013.86c.06%201.33.83%202.55%202.38%202.61s8.48%200%209.48-.06s1.84-1.15%201.94-3.1c.11-2.11.22-14.13.22-14.13z%22%2F%3E%3Cpath%20fill%3D%22%23484d4f%22%20d%3D%22M47.47%2099.61c-.17.22.5%209.48%2013.86%209.31s14.3-9.04%2014.19-9.48s-27.89-.06-28.05.17%22%2F%3E%3Cpath%20fill%3D%22%234383f4%22%20d%3D%22M14.96%2055.1s1.08-7.01%204.41-10.13c2.5-2.34%205.72-3.28%209.42-3.55c3.7-.28%2059.89-.26%2064.24-.18c5.08.09%209.38%202.9%2011.55%205.55c2.54%203.1%203.49%209.01%203.49%2010.58s-9.13-9.01-9.13-9.01l-17.24-1.7l-53.18-.81z%22%2F%3E%3Cpath%20fill%3D%22%23000202%22%20d%3D%22M33.26%2087.03s4.36%203.16%2013.67%202.18c9.19-.97%2011.73-11.13%2011.73-11.13l7.26%202.9s2.3%205.93%208.59%207.62s12.6-.78%2012.6-.78l-13.93-8.41l-6.89-11.01l-9.4-.1l-7.05%2011.35l-7.62%205.81z%22%2F%3E%3Cpath%20fill%3D%22%235c727d%22%20d%3D%22M61.54%2071.64c-2.39%200-3.35%204.21-4.88%207.46s-3.63%207.17-2.2%208.51s3.06%201.15%206.98%201.24c4.02.1%206.12-.1%207.08-1.91c.9-1.7-.99-5.01-2.2-7.94c-1.34-3.24-2.68-7.36-4.78-7.36%22%2F%3E%3ClinearGradient%20id%3D%22SVGFmezHeFx%22%20x1%3D%2260.628%22%20x2%3D%2261.01%22%20y1%3D%2276.665%22%20y2%3D%2246.106%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.191%22%20stop-color%3D%22%2327a0e2%22%2F%3E%3Cstop%20offset%3D%22.426%22%20stop-color%3D%22%2380c7ee%22%20stop-opacity%3D%22.873%22%2F%3E%3Cstop%20offset%3D%22.746%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.7%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D%22url(%23SVGFmezHeFx)%22%20d%3D%22m34.39%2080.61l-12.4-3.56l-6.58-15.2l5.17-11S34.27%2045.78%2035.67%2046s30.72.11%2032.45.22s30.29.54%2030.51.86s7.87%201.51%207.65%207.87s-1.29%2014.98-1.51%2015.74s-2.26%207.65-4.2%208.08s-10.46.86-10.46.86l-17.35-2.5l-11.2-12.59l-9.59%209.59z%22%20opacity%3D%22.8%22%2F%3E%3Cpath%20fill%3D%22%231565c4%22%20d%3D%22m18.34%2072.37l.55-4.9s4.29%206.21%208.78%208.41c5%202.44%2010.13%203.51%2016.88.36c6.15-2.86%208.52-11.11%2011.35-13.83c.96-.92%202.62-2.2%205.78-2.11c2.12.06%204.05.9%204.92%201.67c3.8%203.39%206.02%2011.89%2010.52%2014.38c5.68%203.14%2012.49%203.12%2018.12-.39c5.64-3.51%208.23-7.21%208.23-7.21l-.28%207.76l-8.97%209.06l-16.72-2.11l-6.1-6.38l-7.12-9.06s-7.21%200-7.39.28s-6.56%209.8-6.56%209.8l-6.75%206.47s-11%201.02-11.92.28s-10.07-5.55-10.07-5.55z%22%2F%3E%3Cpath%20fill%3D%22%2381d7ff%22%20d%3D%22M101.87%2047.3c-3.38-1.87-8.19-2.8-14.88-2.69c-6.68.11-55.19-.32-58.21-.22c-3.02.11-6.58%201.19-8.84%202.8c-4.6%203.29-5.92%209.7-6.14%2016.82c-.27%208.51%204.62%2024%2022.3%2024.1c12.78.07%2016.37-8.43%2019.58-13.67c1.48-2.41%202.65-5.07%205.86-4.98c3.45.1%204.27%202.56%205.36%204.49c3.1%205.53%206.12%2014.42%2020.08%2014.34c15.52-.08%2021.47-15.08%2021.77-24.77c.25-8.72-3.11-14.13-6.88-16.22m1.4%2016.71c-.43%207.65-4.43%2018.62-16.06%2019.08c-10.89.43-13.8-6.04-15.42-8.3s-4.5-6.78-6.05-8.1c-2.16-1.83-7.19-1.2-8.7.1c-1.92%201.64-4.03%205.14-6.28%208.36c-3.77%205.39-6.24%207.52-13.89%207.84s-13.91-4.2-16.39-11.53c-2.92-8.63-1.29-16.06%203.67-19.73c2.4-1.77%204.64-2.48%207.01-2.59s55.84-.32%2061.77.22s10.77%207%2010.34%2014.65%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 diving-mask 加一点动效

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

呼吸

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

css呼吸动效样式

.icon-diving-mask {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

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

旋转

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

css旋转动效样式

.icon-diving-mask {
  animation: icon-spin 1.6s linear infinite;
}

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

SVG 健康报告

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

文件体积

4.34 KB

4,446 字节

viewBox

0 0 128 128

矢量坐标系

图元总数

<path> ×13

风格

多色填充

填充跟随容器颜色

同时含 width/height 与 viewBox：可以只保留 viewBox，让图标跟随容器自适应缩放。文件体积 4.34 KB（4,446 字节），图元 13 个，风格为多色填充。

常见问题

关于 diving-mask 图标的下载、商用与改色。

diving-mask 图标是什么？▾

它是 Noto Emoji（noto）开源图标集中的 diving-mask 图标，多色填充，viewBox 为 0 0 128 128，文件仅 4.34 KB，矢量格式可无损缩放到任意尺寸。

如何下载 diving-mask 图标？▾

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

diving-mask 图标可以商用吗？▾

如何修改 diving-mask 图标的颜色？▾

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