diving-mask SVG 图标

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

twemojidiving-mask

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

图标 ID: twemoji:diving-mask
中文名: —
所属集合: Twitter Emoji
集合规模: 3,988 枚
基础网格: 36px
色彩: 多色
开源协议: CC-BY-4.0
作者: Twitter

下载 diving-mask 图标

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

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

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

diving-mask 的预览与使用场景

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

预览颜色

浅色背景

深色背景

灰底融入

在真实界面里长这样

继续按钮内 · 主操作

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

diving-mask导航菜单 · 选中态

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

9:41

diving-mask手机桌面 · App 图标

diving-masktwemoji.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 36 36"><path fill="#66757f" d="M21 25c-2.556 0-4.062-3.128-5.161-4.676a1.026 1.026 0 0 0-1.677 0C13.062 21.872 11.557 25 9 25c-4.551 0-7.923-3.033-8.784-7.619C-.804 11.955 3.589 7 9.11 7h11.78c5.521 0 9.914 4.955 8.894 10.381C28.923 21.967 25.551 25 21 25"/><path fill="#292f33" d="m18 22l-3-3l-3 3l-2 2c2 0 3 3 5 3s3-3 5-3z"/><path fill="#4e9322" d="M21 25c-2.556 0-4.062-3.128-5.161-4.676a1.026 1.026 0 0 0-1.677 0C13.062 21.872 11.557 25 9 25c-4.551 0-7.923-3.033-8.784-7.619C-.804 11.955 3.589 7 9.11 7h11.78c5.521 0 9.914 4.955 8.894 10.381C28.923 21.967 25.551 25 21 25"/><path fill="#88c9f9" d="M21 23c-1.041 0-2.113-1.664-2.896-2.88c-.226-.35-.437-.676-.635-.954A3.03 3.03 0 0 0 15 17.889c-.979 0-1.901.477-2.469 1.275c-.199.281-.41.606-.635.957C11.113 21.336 10.042 23 9 23c-3.512 0-6.125-2.295-6.819-5.988c-.365-1.941.147-3.87 1.442-5.431A7.11 7.11 0 0 1 9.11 9h11.78c2.126 0 4.126.941 5.486 2.581c1.295 1.561 1.808 3.49 1.442 5.431C27.125 20.706 24.512 23 21 23"/><path fill="#292f33" d="M26.761 11.262A7.6 7.6 0 0 0 20.89 8.5H9.11a7.6 7.6 0 0 0-5.871 2.762c-1.392 1.678-1.942 3.752-1.549 5.842C2.431 21.049 5.232 23.5 9 23.5c1.314 0 2.424-1.723 3.316-3.108c.221-.344.428-.663.622-.938c.475-.667 1.245-1.065 2.062-1.065s1.587.398 2.062 1.067c.194.272.401.593.622.935c.892 1.385 2.002 3.109 3.316 3.109c3.769 0 6.569-2.45 7.31-6.396c.393-2.089-.158-4.164-1.549-5.842m.566 5.658c-.646 3.442-3.07 5.58-6.327 5.58c-.769 0-1.837-1.659-2.476-2.651c-.23-.356-.445-.688-.647-.972A3.54 3.54 0 0 0 15 17.39c-1.14 0-2.215.555-2.877 1.486a29 29 0 0 0-.648.976C10.836 20.842 9.769 22.5 9 22.5c-3.256 0-5.681-2.139-6.328-5.581c-.336-1.792.138-3.574 1.336-5.019A6.61 6.61 0 0 1 9.11 9.5h11.78c1.977 0 3.836.875 5.102 2.4c1.197 1.445 1.672 3.228 1.335 5.02"/><path fill="#bbddf5" d="m12.495 9.505l-8.977 8.977c.436 1.29 1.091 2.313 1.996 3.004L17.495 9.505z"/><path fill="#3c96ce" d="M15 15c-1.837 0-3.674 4.215-5.511 7.227c.827-.557 1.732-1.831 2.286-2.692c.209-.325.405-.627.589-.888c.527-.741 1.515-1.277 2.635-1.277a3.58 3.58 0 0 1 2.879 1.461c.184.258.38.561.589.885c.561.871 1.127 2.044 2.058 2.537C18.685 19.24 16.842 15 15 15"/><path fill="#f4900c" d="M26 36a10.04 10.04 0 0 1-8.659-4.995a2 2 0 1 1 3.462-2.003A6.03 6.03 0 0 0 26 32c3.309 0 6-2.691 6-6V2a2 2 0 0 1 4 0v24c0 5.514-4.486 10-10 10"/><path fill="#292f33" d="m21.586 30.146l-3.732 1.44a2.006 2.006 0 0 1-2.586-1.146a2.006 2.006 0 0 1 1.146-2.586l3.732-1.44a2.006 2.006 0 0 1 2.586 1.146a2.006 2.006 0 0 1-1.146 2.586"/><path fill="#ffcc4d" d="M32 5h4v4h-4zm0 7h4v4h-4z"/></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 36 36"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<path fill="#66757f" d="M21 25c-2.556 0-4.062-3.128-5.161-4.676a1.026 1.026 0 0 0-1.677 0C13.062 21.872 11.557 25 9 25c-4.551 0-7.923-3.033-8.784-7.619C-.804 11.955 3.589 7 9.11 7h11.78c5.521 0 9.914 4.955 8.894 10.381C28.923 21.967 25.551 25 21 25"/><path fill="#292f33" d="m18 22l-3-3l-3 3l-2 2c2 0 3 3 5 3s3-3 5-3z"/><path fill="#4e9322" d="M21 25c-2.556 0-4.062-3.128-5.161-4.676a1.026 1.026 0 0 0-1.677 0C13.062 21.872 11.557 25 9 25c-4.551 0-7.923-3.033-8.784-7.619C-.804 11.955 3.589 7 9.11 7h11.78c5.521 0 9.914 4.955 8.894 10.381C28.923 21.967 25.551 25 21 25"/><path fill="#88c9f9" d="M21 23c-1.041 0-2.113-1.664-2.896-2.88c-.226-.35-.437-.676-.635-.954A3.03 3.03 0 0 0 15 17.889c-.979 0-1.901.477-2.469 1.275c-.199.281-.41.606-.635.957C11.113 21.336 10.042 23 9 23c-3.512 0-6.125-2.295-6.819-5.988c-.365-1.941.147-3.87 1.442-5.431A7.11 7.11 0 0 1 9.11 9h11.78c2.126 0 4.126.941 5.486 2.581c1.295 1.561 1.808 3.49 1.442 5.431C27.125 20.706 24.512 23 21 23"/><path fill="#292f33" d="M26.761 11.262A7.6 7.6 0 0 0 20.89 8.5H9.11a7.6 7.6 0 0 0-5.871 2.762c-1.392 1.678-1.942 3.752-1.549 5.842C2.431 21.049 5.232 23.5 9 23.5c1.314 0 2.424-1.723 3.316-3.108c.221-.344.428-.663.622-.938c.475-.667 1.245-1.065 2.062-1.065s1.587.398 2.062 1.067c.194.272.401.593.622.935c.892 1.385 2.002 3.109 3.316 3.109c3.769 0 6.569-2.45 7.31-6.396c.393-2.089-.158-4.164-1.549-5.842m.566 5.658c-.646 3.442-3.07 5.58-6.327 5.58c-.769 0-1.837-1.659-2.476-2.651c-.23-.356-.445-.688-.647-.972A3.54 3.54 0 0 0 15 17.39c-1.14 0-2.215.555-2.877 1.486a29 29 0 0 0-.648.976C10.836 20.842 9.769 22.5 9 22.5c-3.256 0-5.681-2.139-6.328-5.581c-.336-1.792.138-3.574 1.336-5.019A6.61 6.61 0 0 1 9.11 9.5h11.78c1.977 0 3.836.875 5.102 2.4c1.197 1.445 1.672 3.228 1.335 5.02"/><path fill="#bbddf5" d="m12.495 9.505l-8.977 8.977c.436 1.29 1.091 2.313 1.996 3.004L17.495 9.505z"/><path fill="#3c96ce" d="M15 15c-1.837 0-3.674 4.215-5.511 7.227c.827-.557 1.732-1.831 2.286-2.692c.209-.325.405-.627.589-.888c.527-.741 1.515-1.277 2.635-1.277a3.58 3.58 0 0 1 2.879 1.461c.184.258.38.561.589.885c.561.871 1.127 2.044 2.058 2.537C18.685 19.24 16.842 15 15 15"/><path fill="#f4900c" d="M26 36a10.04 10.04 0 0 1-8.659-4.995a2 2 0 1 1 3.462-2.003A6.03 6.03 0 0 0 26 32c3.309 0 6-2.691 6-6V2a2 2 0 0 1 4 0v24c0 5.514-4.486 10-10 10"/><path fill="#292f33" d="m21.586 30.146l-3.732 1.44a2.006 2.006 0 0 1-2.586-1.146a2.006 2.006 0 0 1 1.146-2.586l3.732-1.44a2.006 2.006 0 0 1 2.586 1.146a2.006 2.006 0 0 1-1.146 2.586"/><path fill="#ffcc4d" d="M32 5h4v4h-4zm0 7h4v4h-4z"/>` }}
    />
  );
}

vueVue 3 组件

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

<script setup>
const body = `<path fill="#66757f" d="M21 25c-2.556 0-4.062-3.128-5.161-4.676a1.026 1.026 0 0 0-1.677 0C13.062 21.872 11.557 25 9 25c-4.551 0-7.923-3.033-8.784-7.619C-.804 11.955 3.589 7 9.11 7h11.78c5.521 0 9.914 4.955 8.894 10.381C28.923 21.967 25.551 25 21 25"/><path fill="#292f33" d="m18 22l-3-3l-3 3l-2 2c2 0 3 3 5 3s3-3 5-3z"/><path fill="#4e9322" d="M21 25c-2.556 0-4.062-3.128-5.161-4.676a1.026 1.026 0 0 0-1.677 0C13.062 21.872 11.557 25 9 25c-4.551 0-7.923-3.033-8.784-7.619C-.804 11.955 3.589 7 9.11 7h11.78c5.521 0 9.914 4.955 8.894 10.381C28.923 21.967 25.551 25 21 25"/><path fill="#88c9f9" d="M21 23c-1.041 0-2.113-1.664-2.896-2.88c-.226-.35-.437-.676-.635-.954A3.03 3.03 0 0 0 15 17.889c-.979 0-1.901.477-2.469 1.275c-.199.281-.41.606-.635.957C11.113 21.336 10.042 23 9 23c-3.512 0-6.125-2.295-6.819-5.988c-.365-1.941.147-3.87 1.442-5.431A7.11 7.11 0 0 1 9.11 9h11.78c2.126 0 4.126.941 5.486 2.581c1.295 1.561 1.808 3.49 1.442 5.431C27.125 20.706 24.512 23 21 23"/><path fill="#292f33" d="M26.761 11.262A7.6 7.6 0 0 0 20.89 8.5H9.11a7.6 7.6 0 0 0-5.871 2.762c-1.392 1.678-1.942 3.752-1.549 5.842C2.431 21.049 5.232 23.5 9 23.5c1.314 0 2.424-1.723 3.316-3.108c.221-.344.428-.663.622-.938c.475-.667 1.245-1.065 2.062-1.065s1.587.398 2.062 1.067c.194.272.401.593.622.935c.892 1.385 2.002 3.109 3.316 3.109c3.769 0 6.569-2.45 7.31-6.396c.393-2.089-.158-4.164-1.549-5.842m.566 5.658c-.646 3.442-3.07 5.58-6.327 5.58c-.769 0-1.837-1.659-2.476-2.651c-.23-.356-.445-.688-.647-.972A3.54 3.54 0 0 0 15 17.39c-1.14 0-2.215.555-2.877 1.486a29 29 0 0 0-.648.976C10.836 20.842 9.769 22.5 9 22.5c-3.256 0-5.681-2.139-6.328-5.581c-.336-1.792.138-3.574 1.336-5.019A6.61 6.61 0 0 1 9.11 9.5h11.78c1.977 0 3.836.875 5.102 2.4c1.197 1.445 1.672 3.228 1.335 5.02"/><path fill="#bbddf5" d="m12.495 9.505l-8.977 8.977c.436 1.29 1.091 2.313 1.996 3.004L17.495 9.505z"/><path fill="#3c96ce" d="M15 15c-1.837 0-3.674 4.215-5.511 7.227c.827-.557 1.732-1.831 2.286-2.692c.209-.325.405-.627.589-.888c.527-.741 1.515-1.277 2.635-1.277a3.58 3.58 0 0 1 2.879 1.461c.184.258.38.561.589.885c.561.871 1.127 2.044 2.058 2.537C18.685 19.24 16.842 15 15 15"/><path fill="#f4900c" d="M26 36a10.04 10.04 0 0 1-8.659-4.995a2 2 0 1 1 3.462-2.003A6.03 6.03 0 0 0 26 32c3.309 0 6-2.691 6-6V2a2 2 0 0 1 4 0v24c0 5.514-4.486 10-10 10"/><path fill="#292f33" d="m21.586 30.146l-3.732 1.44a2.006 2.006 0 0 1-2.586-1.146a2.006 2.006 0 0 1 1.146-2.586l3.732-1.44a2.006 2.006 0 0 1 2.586 1.146a2.006 2.006 0 0 1-1.146 2.586"/><path fill="#ffcc4d" d="M32 5h4v4h-4zm0 7h4v4h-4z"/>`;
</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%2036%2036%22%3E%3Cpath%20fill%3D%22%2366757f%22%20d%3D%22M21%2025c-2.556%200-4.062-3.128-5.161-4.676a1.026%201.026%200%200%200-1.677%200C13.062%2021.872%2011.557%2025%209%2025c-4.551%200-7.923-3.033-8.784-7.619C-.804%2011.955%203.589%207%209.11%207h11.78c5.521%200%209.914%204.955%208.894%2010.381C28.923%2021.967%2025.551%2025%2021%2025%22%2F%3E%3Cpath%20fill%3D%22%23292f33%22%20d%3D%22m18%2022l-3-3l-3%203l-2%202c2%200%203%203%205%203s3-3%205-3z%22%2F%3E%3Cpath%20fill%3D%22%234e9322%22%20d%3D%22M21%2025c-2.556%200-4.062-3.128-5.161-4.676a1.026%201.026%200%200%200-1.677%200C13.062%2021.872%2011.557%2025%209%2025c-4.551%200-7.923-3.033-8.784-7.619C-.804%2011.955%203.589%207%209.11%207h11.78c5.521%200%209.914%204.955%208.894%2010.381C28.923%2021.967%2025.551%2025%2021%2025%22%2F%3E%3Cpath%20fill%3D%22%2388c9f9%22%20d%3D%22M21%2023c-1.041%200-2.113-1.664-2.896-2.88c-.226-.35-.437-.676-.635-.954A3.03%203.03%200%200%200%2015%2017.889c-.979%200-1.901.477-2.469%201.275c-.199.281-.41.606-.635.957C11.113%2021.336%2010.042%2023%209%2023c-3.512%200-6.125-2.295-6.819-5.988c-.365-1.941.147-3.87%201.442-5.431A7.11%207.11%200%200%201%209.11%209h11.78c2.126%200%204.126.941%205.486%202.581c1.295%201.561%201.808%203.49%201.442%205.431C27.125%2020.706%2024.512%2023%2021%2023%22%2F%3E%3Cpath%20fill%3D%22%23292f33%22%20d%3D%22M26.761%2011.262A7.6%207.6%200%200%200%2020.89%208.5H9.11a7.6%207.6%200%200%200-5.871%202.762c-1.392%201.678-1.942%203.752-1.549%205.842C2.431%2021.049%205.232%2023.5%209%2023.5c1.314%200%202.424-1.723%203.316-3.108c.221-.344.428-.663.622-.938c.475-.667%201.245-1.065%202.062-1.065s1.587.398%202.062%201.067c.194.272.401.593.622.935c.892%201.385%202.002%203.109%203.316%203.109c3.769%200%206.569-2.45%207.31-6.396c.393-2.089-.158-4.164-1.549-5.842m.566%205.658c-.646%203.442-3.07%205.58-6.327%205.58c-.769%200-1.837-1.659-2.476-2.651c-.23-.356-.445-.688-.647-.972A3.54%203.54%200%200%200%2015%2017.39c-1.14%200-2.215.555-2.877%201.486a29%2029%200%200%200-.648.976C10.836%2020.842%209.769%2022.5%209%2022.5c-3.256%200-5.681-2.139-6.328-5.581c-.336-1.792.138-3.574%201.336-5.019A6.61%206.61%200%200%201%209.11%209.5h11.78c1.977%200%203.836.875%205.102%202.4c1.197%201.445%201.672%203.228%201.335%205.02%22%2F%3E%3Cpath%20fill%3D%22%23bbddf5%22%20d%3D%22m12.495%209.505l-8.977%208.977c.436%201.29%201.091%202.313%201.996%203.004L17.495%209.505z%22%2F%3E%3Cpath%20fill%3D%22%233c96ce%22%20d%3D%22M15%2015c-1.837%200-3.674%204.215-5.511%207.227c.827-.557%201.732-1.831%202.286-2.692c.209-.325.405-.627.589-.888c.527-.741%201.515-1.277%202.635-1.277a3.58%203.58%200%200%201%202.879%201.461c.184.258.38.561.589.885c.561.871%201.127%202.044%202.058%202.537C18.685%2019.24%2016.842%2015%2015%2015%22%2F%3E%3Cpath%20fill%3D%22%23f4900c%22%20d%3D%22M26%2036a10.04%2010.04%200%200%201-8.659-4.995a2%202%200%201%201%203.462-2.003A6.03%206.03%200%200%200%2026%2032c3.309%200%206-2.691%206-6V2a2%202%200%200%201%204%200v24c0%205.514-4.486%2010-10%2010%22%2F%3E%3Cpath%20fill%3D%22%23292f33%22%20d%3D%22m21.586%2030.146l-3.732%201.44a2.006%202.006%200%200%201-2.586-1.146a2.006%202.006%200%200%201%201.146-2.586l3.732-1.44a2.006%202.006%200%200%201%202.586%201.146a2.006%202.006%200%200%201-1.146%202.586%22%2F%3E%3Cpath%20fill%3D%22%23ffcc4d%22%20d%3D%22M32%205h4v4h-4zm0%207h4v4h-4z%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%2036%2036%22%3E%3Cpath%20fill%3D%22%2366757f%22%20d%3D%22M21%2025c-2.556%200-4.062-3.128-5.161-4.676a1.026%201.026%200%200%200-1.677%200C13.062%2021.872%2011.557%2025%209%2025c-4.551%200-7.923-3.033-8.784-7.619C-.804%2011.955%203.589%207%209.11%207h11.78c5.521%200%209.914%204.955%208.894%2010.381C28.923%2021.967%2025.551%2025%2021%2025%22%2F%3E%3Cpath%20fill%3D%22%23292f33%22%20d%3D%22m18%2022l-3-3l-3%203l-2%202c2%200%203%203%205%203s3-3%205-3z%22%2F%3E%3Cpath%20fill%3D%22%234e9322%22%20d%3D%22M21%2025c-2.556%200-4.062-3.128-5.161-4.676a1.026%201.026%200%200%200-1.677%200C13.062%2021.872%2011.557%2025%209%2025c-4.551%200-7.923-3.033-8.784-7.619C-.804%2011.955%203.589%207%209.11%207h11.78c5.521%200%209.914%204.955%208.894%2010.381C28.923%2021.967%2025.551%2025%2021%2025%22%2F%3E%3Cpath%20fill%3D%22%2388c9f9%22%20d%3D%22M21%2023c-1.041%200-2.113-1.664-2.896-2.88c-.226-.35-.437-.676-.635-.954A3.03%203.03%200%200%200%2015%2017.889c-.979%200-1.901.477-2.469%201.275c-.199.281-.41.606-.635.957C11.113%2021.336%2010.042%2023%209%2023c-3.512%200-6.125-2.295-6.819-5.988c-.365-1.941.147-3.87%201.442-5.431A7.11%207.11%200%200%201%209.11%209h11.78c2.126%200%204.126.941%205.486%202.581c1.295%201.561%201.808%203.49%201.442%205.431C27.125%2020.706%2024.512%2023%2021%2023%22%2F%3E%3Cpath%20fill%3D%22%23292f33%22%20d%3D%22M26.761%2011.262A7.6%207.6%200%200%200%2020.89%208.5H9.11a7.6%207.6%200%200%200-5.871%202.762c-1.392%201.678-1.942%203.752-1.549%205.842C2.431%2021.049%205.232%2023.5%209%2023.5c1.314%200%202.424-1.723%203.316-3.108c.221-.344.428-.663.622-.938c.475-.667%201.245-1.065%202.062-1.065s1.587.398%202.062%201.067c.194.272.401.593.622.935c.892%201.385%202.002%203.109%203.316%203.109c3.769%200%206.569-2.45%207.31-6.396c.393-2.089-.158-4.164-1.549-5.842m.566%205.658c-.646%203.442-3.07%205.58-6.327%205.58c-.769%200-1.837-1.659-2.476-2.651c-.23-.356-.445-.688-.647-.972A3.54%203.54%200%200%200%2015%2017.39c-1.14%200-2.215.555-2.877%201.486a29%2029%200%200%200-.648.976C10.836%2020.842%209.769%2022.5%209%2022.5c-3.256%200-5.681-2.139-6.328-5.581c-.336-1.792.138-3.574%201.336-5.019A6.61%206.61%200%200%201%209.11%209.5h11.78c1.977%200%203.836.875%205.102%202.4c1.197%201.445%201.672%203.228%201.335%205.02%22%2F%3E%3Cpath%20fill%3D%22%23bbddf5%22%20d%3D%22m12.495%209.505l-8.977%208.977c.436%201.29%201.091%202.313%201.996%203.004L17.495%209.505z%22%2F%3E%3Cpath%20fill%3D%22%233c96ce%22%20d%3D%22M15%2015c-1.837%200-3.674%204.215-5.511%207.227c.827-.557%201.732-1.831%202.286-2.692c.209-.325.405-.627.589-.888c.527-.741%201.515-1.277%202.635-1.277a3.58%203.58%200%200%201%202.879%201.461c.184.258.38.561.589.885c.561.871%201.127%202.044%202.058%202.537C18.685%2019.24%2016.842%2015%2015%2015%22%2F%3E%3Cpath%20fill%3D%22%23f4900c%22%20d%3D%22M26%2036a10.04%2010.04%200%200%201-8.659-4.995a2%202%200%201%201%203.462-2.003A6.03%206.03%200%200%200%2026%2032c3.309%200%206-2.691%206-6V2a2%202%200%200%201%204%200v24c0%205.514-4.486%2010-10%2010%22%2F%3E%3Cpath%20fill%3D%22%23292f33%22%20d%3D%22m21.586%2030.146l-3.732%201.44a2.006%202.006%200%200%201-2.586-1.146a2.006%202.006%200%200%201%201.146-2.586l3.732-1.44a2.006%202.006%200%200%201%202.586%201.146a2.006%202.006%200%200%201-1.146%202.586%22%2F%3E%3Cpath%20fill%3D%22%23ffcc4d%22%20d%3D%22M32%205h4v4h-4zm0%207h4v4h-4z%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 健康报告

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

文件体积

2.56 KB

2,620 字节

viewBox

0 0 36 36

矢量坐标系

图元总数

<path> ×10

风格

多色填充

填充跟随容器颜色

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

常见问题

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

diving-mask 图标是什么？▾

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

如何下载 diving-mask 图标？▾

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

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

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

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