找找图标
cog-loop 图标

cog-loop SVG 图标

line-mdcog-loop

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

图标 ID
line-md:cog-loop
中文名
—
所属集合
Material Line Icons
集合规模
1,218 枚
基础网格
24px
色彩
单色（可改色）
开源协议
MIT
作者
Vjacheslav Trushkin

下载 cog-loop 图标

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

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

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

cog-loop 的预览与使用场景

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

预览颜色
cog-loop 图标 浅色背景预览浅色背景
cog-loop 图标 深色背景预览深色背景
cog-loop 图标 灰底融入预览灰底融入

在真实界面里长这样

继续按钮内 · 主操作
搜索cog-loop…输入框 · 前缀图标
cog-loop导航菜单 · 选中态
暂无内容空状态 · 引导提示
9:41cog-loop App 图标cog-loopcogcog-filledcog-offcog-off-filledcog-off-loopcog-filled-loopcog-off-filled-loop手机桌面 · App 图标
cog-loopline-md.design/icons/cog-loop浏览器 · 标签页与站点图标

各尺寸下的可读性

cog-loop 图标 24px 渲染24pxcog-loop 图标 32px 渲染32pxcog-loop 图标 48px 渲染48pxcog-loop 图标 64px 渲染64pxcog-loop 图标 96px 渲染96pxcog-loop 图标 128px 渲染128px

复制 cog-loop 图标代码

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

svgSVG 源码（内联 HTML）
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="22" d="M12 9c1.66 0 3 1.34 3 3c0 1.66 -1.34 3 -3 3c-1.66 0 -3 -1.34 -3 -3c0 -1.66 1.34 -3 3 -3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="22;0"/></path><path stroke-dasharray="44" stroke-dashoffset="44" d="M12 5.5c3.59 0 6.5 2.91 6.5 6.5c0 3.59 -2.91 6.5 -6.5 6.5c-3.59 0 -6.5 -2.91 -6.5 -6.5c0 -3.59 2.91 -6.5 6.5 -6.5Z"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.3s" dur="0.5s" to="0"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="0"/></path><path d="M15.24 6.37c0.41 0.23 0.8 0.51 1.14 0.83c0 0 2.62 -1.08 2.63 -1.06c0 0 1.56 2.7 1.56 2.7c0.01 0.03 -2.22 1.75 -2.22 1.75c0.1 0.45 0.15 0.93 0.15 1.41" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M15.24 6.37c0.41 0.23 0.8 0.51 1.14 0.83c0.22 0.2 0.42 0.41 0.61 0.63c0.47 0.57 0.86 1.22 1.12 1.94c0.09 0.26 0.17 0.54 0.24 0.82c0.1 0.45 0.15 0.93 0.15 1.41;M15.24 6.37c0.41 0.23 0.8 0.51 1.14 0.83c0 0 2.62 -1.08 2.63 -1.06c0 0 1.56 2.7 1.56 2.7c0.01 0.03 -2.22 1.75 -2.22 1.75c0.1 0.45 0.15 0.93 0.15 1.41"/></path><path d="M18.5 11.99c0.01 0.47 -0.04 0.95 -0.15 1.4c0 0 2.25 1.73 2.23 1.75c0 0 -1.56 2.7 -1.56 2.7c-0.02 0.02 -2.63 -1.05 -2.63 -1.05c-0.34 0.31 -0.73 0.59 -1.15 0.83" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M18.5 11.99c0.01 0.47 -0.04 0.95 -0.15 1.4c-0.06 0.29 -0.15 0.57 -0.24 0.84c-0.26 0.69 -0.63 1.35 -1.12 1.94c-0.18 0.21 -0.38 0.42 -0.59 0.62c-0.34 0.31 -0.73 0.59 -1.15 0.83;M18.5 11.99c0.01 0.47 -0.04 0.95 -0.15 1.4c0 0 2.25 1.73 2.23 1.75c0 0 -1.56 2.7 -1.56 2.7c-0.02 0.02 -2.63 -1.05 -2.63 -1.05c-0.34 0.31 -0.73 0.59 -1.15 0.83"/></path><path d="M15.26 17.62c-0.4 0.24 -0.84 0.44 -1.29 0.57c0 0 -0.37 2.81 -0.4 2.81c0 0 -3.12 0 -3.12 0c-0.03 -0.01 -0.41 -2.8 -0.41 -2.8c-0.44 -0.14 -0.88 -0.34 -1.3 -0.58" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M15.26 17.62c-0.4 0.24 -0.84 0.44 -1.29 0.57c-0.28 0.09 -0.57 0.16 -0.85 0.21c-0.73 0.12 -1.49 0.13 -2.24 0c-0.27 -0.05 -0.55 -0.12 -0.83 -0.2c-0.44 -0.14 -0.88 -0.34 -1.3 -0.58;M15.26 17.62c-0.4 0.24 -0.84 0.44 -1.29 0.57c0 0 -0.37 2.81 -0.4 2.81c0 0 -3.12 0 -3.12 0c-0.03 -0.01 -0.41 -2.8 -0.41 -2.8c-0.44 -0.14 -0.88 -0.34 -1.3 -0.58"/></path><path d="M8.76 17.63c-0.41 -0.23 -0.8 -0.51 -1.14 -0.83c0 0 -2.62 1.08 -2.63 1.06c0 0 -1.56 -2.7 -1.56 -2.7c-0.01 -0.03 2.22 -1.75 2.22 -1.75c-0.1 -0.45 -0.15 -0.93 -0.15 -1.41" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M8.76 17.63c-0.41 -0.23 -0.8 -0.51 -1.14 -0.83c-0.22 -0.2 -0.42 -0.41 -0.61 -0.63c-0.47 -0.57 -0.86 -1.22 -1.12 -1.94c-0.09 -0.26 -0.17 -0.54 -0.24 -0.82c-0.1 -0.45 -0.15 -0.93 -0.15 -1.41;M8.76 17.63c-0.41 -0.23 -0.8 -0.51 -1.14 -0.83c0 0 -2.62 1.08 -2.63 1.06c0 0 -1.56 -2.7 -1.56 -2.7c-0.01 -0.03 2.22 -1.75 2.22 -1.75c-0.1 -0.45 -0.15 -0.93 -0.15 -1.41"/></path><path d="M5.5 12.01c-0.01 -0.47 0.04 -0.95 0.15 -1.4c0 0 -2.25 -1.73 -2.23 -1.75c0 0 1.56 -2.7 1.56 -2.7c0.02 -0.02 2.63 1.05 2.63 1.05c0.34 -0.31 0.73 -0.59 1.15 -0.83" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M5.5 12.01c-0.01 -0.47 0.04 -0.95 0.15 -1.4c0.06 -0.29 0.15 -0.57 0.24 -0.84c0.26 -0.69 0.63 -1.35 1.12 -1.94c0.18 -0.21 0.38 -0.42 0.59 -0.62c0.34 -0.31 0.73 -0.59 1.15 -0.83;M5.5 12.01c-0.01 -0.47 0.04 -0.95 0.15 -1.4c0 0 -2.25 -1.73 -2.23 -1.75c0 0 1.56 -2.7 1.56 -2.7c0.02 -0.02 2.63 1.05 2.63 1.05c0.34 -0.31 0.73 -0.59 1.15 -0.83"/></path><path d="M8.74 6.38c0.4 -0.24 0.84 -0.44 1.29 -0.57c0 0 0.37 -2.81 0.4 -2.81c0 0 3.12 0 3.12 0c0.03 0.01 0.41 2.8 0.41 2.8c0.44 0.14 0.88 0.34 1.3 0.58" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M8.74 6.38c0.4 -0.24 0.84 -0.44 1.29 -0.57c0.28 -0.09 0.57 -0.16 0.85 -0.21c0.73 -0.12 1.49 -0.13 2.24 0c0.27 0.05 0.55 0.12 0.83 0.2c0.44 0.14 0.88 0.34 1.3 0.58;M8.74 6.38c0.4 -0.24 0.84 -0.44 1.29 -0.57c0 0 0.37 -2.81 0.4 -2.81c0 0 3.12 0 3.12 0c0.03 0.01 0.41 2.8 0.41 2.8c0.44 0.14 0.88 0.34 1.3 0.58"/></path></g></svg>
reactReact 组件（TSX）
export function CogLoopIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 24 24"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="22" d="M12 9c1.66 0 3 1.34 3 3c0 1.66 -1.34 3 -3 3c-1.66 0 -3 -1.34 -3 -3c0 -1.66 1.34 -3 3 -3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="22;0"/></path><path stroke-dasharray="44" stroke-dashoffset="44" d="M12 5.5c3.59 0 6.5 2.91 6.5 6.5c0 3.59 -2.91 6.5 -6.5 6.5c-3.59 0 -6.5 -2.91 -6.5 -6.5c0 -3.59 2.91 -6.5 6.5 -6.5Z"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.3s" dur="0.5s" to="0"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="0"/></path><path d="M15.24 6.37c0.41 0.23 0.8 0.51 1.14 0.83c0 0 2.62 -1.08 2.63 -1.06c0 0 1.56 2.7 1.56 2.7c0.01 0.03 -2.22 1.75 -2.22 1.75c0.1 0.45 0.15 0.93 0.15 1.41" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M15.24 6.37c0.41 0.23 0.8 0.51 1.14 0.83c0.22 0.2 0.42 0.41 0.61 0.63c0.47 0.57 0.86 1.22 1.12 1.94c0.09 0.26 0.17 0.54 0.24 0.82c0.1 0.45 0.15 0.93 0.15 1.41;M15.24 6.37c0.41 0.23 0.8 0.51 1.14 0.83c0 0 2.62 -1.08 2.63 -1.06c0 0 1.56 2.7 1.56 2.7c0.01 0.03 -2.22 1.75 -2.22 1.75c0.1 0.45 0.15 0.93 0.15 1.41"/></path><path d="M18.5 11.99c0.01 0.47 -0.04 0.95 -0.15 1.4c0 0 2.25 1.73 2.23 1.75c0 0 -1.56 2.7 -1.56 2.7c-0.02 0.02 -2.63 -1.05 -2.63 -1.05c-0.34 0.31 -0.73 0.59 -1.15 0.83" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M18.5 11.99c0.01 0.47 -0.04 0.95 -0.15 1.4c-0.06 0.29 -0.15 0.57 -0.24 0.84c-0.26 0.69 -0.63 1.35 -1.12 1.94c-0.18 0.21 -0.38 0.42 -0.59 0.62c-0.34 0.31 -0.73 0.59 -1.15 0.83;M18.5 11.99c0.01 0.47 -0.04 0.95 -0.15 1.4c0 0 2.25 1.73 2.23 1.75c0 0 -1.56 2.7 -1.56 2.7c-0.02 0.02 -2.63 -1.05 -2.63 -1.05c-0.34 0.31 -0.73 0.59 -1.15 0.83"/></path><path d="M15.26 17.62c-0.4 0.24 -0.84 0.44 -1.29 0.57c0 0 -0.37 2.81 -0.4 2.81c0 0 -3.12 0 -3.12 0c-0.03 -0.01 -0.41 -2.8 -0.41 -2.8c-0.44 -0.14 -0.88 -0.34 -1.3 -0.58" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M15.26 17.62c-0.4 0.24 -0.84 0.44 -1.29 0.57c-0.28 0.09 -0.57 0.16 -0.85 0.21c-0.73 0.12 -1.49 0.13 -2.24 0c-0.27 -0.05 -0.55 -0.12 -0.83 -0.2c-0.44 -0.14 -0.88 -0.34 -1.3 -0.58;M15.26 17.62c-0.4 0.24 -0.84 0.44 -1.29 0.57c0 0 -0.37 2.81 -0.4 2.81c0 0 -3.12 0 -3.12 0c-0.03 -0.01 -0.41 -2.8 -0.41 -2.8c-0.44 -0.14 -0.88 -0.34 -1.3 -0.58"/></path><path d="M8.76 17.63c-0.41 -0.23 -0.8 -0.51 -1.14 -0.83c0 0 -2.62 1.08 -2.63 1.06c0 0 -1.56 -2.7 -1.56 -2.7c-0.01 -0.03 2.22 -1.75 2.22 -1.75c-0.1 -0.45 -0.15 -0.93 -0.15 -1.41" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M8.76 17.63c-0.41 -0.23 -0.8 -0.51 -1.14 -0.83c-0.22 -0.2 -0.42 -0.41 -0.61 -0.63c-0.47 -0.57 -0.86 -1.22 -1.12 -1.94c-0.09 -0.26 -0.17 -0.54 -0.24 -0.82c-0.1 -0.45 -0.15 -0.93 -0.15 -1.41;M8.76 17.63c-0.41 -0.23 -0.8 -0.51 -1.14 -0.83c0 0 -2.62 1.08 -2.63 1.06c0 0 -1.56 -2.7 -1.56 -2.7c-0.01 -0.03 2.22 -1.75 2.22 -1.75c-0.1 -0.45 -0.15 -0.93 -0.15 -1.41"/></path><path d="M5.5 12.01c-0.01 -0.47 0.04 -0.95 0.15 -1.4c0 0 -2.25 -1.73 -2.23 -1.75c0 0 1.56 -2.7 1.56 -2.7c0.02 -0.02 2.63 1.05 2.63 1.05c0.34 -0.31 0.73 -0.59 1.15 -0.83" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M5.5 12.01c-0.01 -0.47 0.04 -0.95 0.15 -1.4c0.06 -0.29 0.15 -0.57 0.24 -0.84c0.26 -0.69 0.63 -1.35 1.12 -1.94c0.18 -0.21 0.38 -0.42 0.59 -0.62c0.34 -0.31 0.73 -0.59 1.15 -0.83;M5.5 12.01c-0.01 -0.47 0.04 -0.95 0.15 -1.4c0 0 -2.25 -1.73 -2.23 -1.75c0 0 1.56 -2.7 1.56 -2.7c0.02 -0.02 2.63 1.05 2.63 1.05c0.34 -0.31 0.73 -0.59 1.15 -0.83"/></path><path d="M8.74 6.38c0.4 -0.24 0.84 -0.44 1.29 -0.57c0 0 0.37 -2.81 0.4 -2.81c0 0 3.12 0 3.12 0c0.03 0.01 0.41 2.8 0.41 2.8c0.44 0.14 0.88 0.34 1.3 0.58" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M8.74 6.38c0.4 -0.24 0.84 -0.44 1.29 -0.57c0.28 -0.09 0.57 -0.16 0.85 -0.21c0.73 -0.12 1.49 -0.13 2.24 0c0.27 0.05 0.55 0.12 0.83 0.2c0.44 0.14 0.88 0.34 1.3 0.58;M8.74 6.38c0.4 -0.24 0.84 -0.44 1.29 -0.57c0 0 0.37 -2.81 0.4 -2.81c0 0 3.12 0 3.12 0c0.03 0.01 0.41 2.8 0.41 2.8c0.44 0.14 0.88 0.34 1.3 0.58"/></path></g>` }}
    />
  );
}
vueVue 3 组件
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="22" d="M12 9c1.66 0 3 1.34 3 3c0 1.66 -1.34 3 -3 3c-1.66 0 -3 -1.34 -3 -3c0 -1.66 1.34 -3 3 -3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="22;0"/></path><path stroke-dasharray="44" stroke-dashoffset="44" d="M12 5.5c3.59 0 6.5 2.91 6.5 6.5c0 3.59 -2.91 6.5 -6.5 6.5c-3.59 0 -6.5 -2.91 -6.5 -6.5c0 -3.59 2.91 -6.5 6.5 -6.5Z"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.3s" dur="0.5s" to="0"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="0"/></path><path d="M15.24 6.37c0.41 0.23 0.8 0.51 1.14 0.83c0 0 2.62 -1.08 2.63 -1.06c0 0 1.56 2.7 1.56 2.7c0.01 0.03 -2.22 1.75 -2.22 1.75c0.1 0.45 0.15 0.93 0.15 1.41" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M15.24 6.37c0.41 0.23 0.8 0.51 1.14 0.83c0.22 0.2 0.42 0.41 0.61 0.63c0.47 0.57 0.86 1.22 1.12 1.94c0.09 0.26 0.17 0.54 0.24 0.82c0.1 0.45 0.15 0.93 0.15 1.41;M15.24 6.37c0.41 0.23 0.8 0.51 1.14 0.83c0 0 2.62 -1.08 2.63 -1.06c0 0 1.56 2.7 1.56 2.7c0.01 0.03 -2.22 1.75 -2.22 1.75c0.1 0.45 0.15 0.93 0.15 1.41"/></path><path d="M18.5 11.99c0.01 0.47 -0.04 0.95 -0.15 1.4c0 0 2.25 1.73 2.23 1.75c0 0 -1.56 2.7 -1.56 2.7c-0.02 0.02 -2.63 -1.05 -2.63 -1.05c-0.34 0.31 -0.73 0.59 -1.15 0.83" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M18.5 11.99c0.01 0.47 -0.04 0.95 -0.15 1.4c-0.06 0.29 -0.15 0.57 -0.24 0.84c-0.26 0.69 -0.63 1.35 -1.12 1.94c-0.18 0.21 -0.38 0.42 -0.59 0.62c-0.34 0.31 -0.73 0.59 -1.15 0.83;M18.5 11.99c0.01 0.47 -0.04 0.95 -0.15 1.4c0 0 2.25 1.73 2.23 1.75c0 0 -1.56 2.7 -1.56 2.7c-0.02 0.02 -2.63 -1.05 -2.63 -1.05c-0.34 0.31 -0.73 0.59 -1.15 0.83"/></path><path d="M15.26 17.62c-0.4 0.24 -0.84 0.44 -1.29 0.57c0 0 -0.37 2.81 -0.4 2.81c0 0 -3.12 0 -3.12 0c-0.03 -0.01 -0.41 -2.8 -0.41 -2.8c-0.44 -0.14 -0.88 -0.34 -1.3 -0.58" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M15.26 17.62c-0.4 0.24 -0.84 0.44 -1.29 0.57c-0.28 0.09 -0.57 0.16 -0.85 0.21c-0.73 0.12 -1.49 0.13 -2.24 0c-0.27 -0.05 -0.55 -0.12 -0.83 -0.2c-0.44 -0.14 -0.88 -0.34 -1.3 -0.58;M15.26 17.62c-0.4 0.24 -0.84 0.44 -1.29 0.57c0 0 -0.37 2.81 -0.4 2.81c0 0 -3.12 0 -3.12 0c-0.03 -0.01 -0.41 -2.8 -0.41 -2.8c-0.44 -0.14 -0.88 -0.34 -1.3 -0.58"/></path><path d="M8.76 17.63c-0.41 -0.23 -0.8 -0.51 -1.14 -0.83c0 0 -2.62 1.08 -2.63 1.06c0 0 -1.56 -2.7 -1.56 -2.7c-0.01 -0.03 2.22 -1.75 2.22 -1.75c-0.1 -0.45 -0.15 -0.93 -0.15 -1.41" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M8.76 17.63c-0.41 -0.23 -0.8 -0.51 -1.14 -0.83c-0.22 -0.2 -0.42 -0.41 -0.61 -0.63c-0.47 -0.57 -0.86 -1.22 -1.12 -1.94c-0.09 -0.26 -0.17 -0.54 -0.24 -0.82c-0.1 -0.45 -0.15 -0.93 -0.15 -1.41;M8.76 17.63c-0.41 -0.23 -0.8 -0.51 -1.14 -0.83c0 0 -2.62 1.08 -2.63 1.06c0 0 -1.56 -2.7 -1.56 -2.7c-0.01 -0.03 2.22 -1.75 2.22 -1.75c-0.1 -0.45 -0.15 -0.93 -0.15 -1.41"/></path><path d="M5.5 12.01c-0.01 -0.47 0.04 -0.95 0.15 -1.4c0 0 -2.25 -1.73 -2.23 -1.75c0 0 1.56 -2.7 1.56 -2.7c0.02 -0.02 2.63 1.05 2.63 1.05c0.34 -0.31 0.73 -0.59 1.15 -0.83" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M5.5 12.01c-0.01 -0.47 0.04 -0.95 0.15 -1.4c0.06 -0.29 0.15 -0.57 0.24 -0.84c0.26 -0.69 0.63 -1.35 1.12 -1.94c0.18 -0.21 0.38 -0.42 0.59 -0.62c0.34 -0.31 0.73 -0.59 1.15 -0.83;M5.5 12.01c-0.01 -0.47 0.04 -0.95 0.15 -1.4c0 0 -2.25 -1.73 -2.23 -1.75c0 0 1.56 -2.7 1.56 -2.7c0.02 -0.02 2.63 1.05 2.63 1.05c0.34 -0.31 0.73 -0.59 1.15 -0.83"/></path><path d="M8.74 6.38c0.4 -0.24 0.84 -0.44 1.29 -0.57c0 0 0.37 -2.81 0.4 -2.81c0 0 3.12 0 3.12 0c0.03 0.01 0.41 2.8 0.41 2.8c0.44 0.14 0.88 0.34 1.3 0.58" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M8.74 6.38c0.4 -0.24 0.84 -0.44 1.29 -0.57c0.28 -0.09 0.57 -0.16 0.85 -0.21c0.73 -0.12 1.49 -0.13 2.24 0c0.27 0.05 0.55 0.12 0.83 0.2c0.44 0.14 0.88 0.34 1.3 0.58;M8.74 6.38c0.4 -0.24 0.84 -0.44 1.29 -0.57c0 0 0.37 -2.81 0.4 -2.81c0 0 3.12 0 3.12 0c0.03 0.01 0.41 2.8 0.41 2.8c0.44 0.14 0.88 0.34 1.3 0.58"/></path></g>`;
</script>
cssCSS mask（随 currentColor 改色）
.cog-loop {
  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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20stroke-dasharray%3D%2222%22%20d%3D%22M12%209c1.66%200%203%201.34%203%203c0%201.66%20-1.34%203%20-3%203c-1.66%200%20-3%20-1.34%20-3%20-3c0%20-1.66%201.34%20-3%203%20-3Z%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22stroke-dashoffset%22%20dur%3D%220.3s%22%20values%3D%2222%3B0%22%2F%3E%3C%2Fpath%3E%3Cpath%20stroke-dasharray%3D%2244%22%20stroke-dashoffset%3D%2244%22%20d%3D%22M12%205.5c3.59%200%206.5%202.91%206.5%206.5c0%203.59%20-2.91%206.5%20-6.5%206.5c-3.59%200%20-6.5%20-2.91%20-6.5%20-6.5c0%20-3.59%202.91%20-6.5%206.5%20-6.5Z%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22stroke-dashoffset%22%20begin%3D%220.3s%22%20dur%3D%220.5s%22%20to%3D%220%22%2F%3E%3Cset%20fill%3D%22freeze%22%20attributeName%3D%22opacity%22%20begin%3D%220.8s%22%20to%3D%220%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15.24%206.37c0.41%200.23%200.8%200.51%201.14%200.83c0%200%202.62%20-1.08%202.63%20-1.06c0%200%201.56%202.7%201.56%202.7c0.01%200.03%20-2.22%201.75%20-2.22%201.75c0.1%200.45%200.15%200.93%200.15%201.41%22%20opacity%3D%220%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20dur%3D%2230s%22%20repeatCount%3D%22indefinite%22%20type%3D%22rotate%22%20values%3D%220%2012%2012%3B360%2012%2012%22%2F%3E%3Cset%20fill%3D%22freeze%22%20attributeName%3D%22opacity%22%20begin%3D%220.8s%22%20to%3D%221%22%2F%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%220.8s%22%20dur%3D%220.2s%22%20values%3D%22M15.24%206.37c0.41%200.23%200.8%200.51%201.14%200.83c0.22%200.2%200.42%200.41%200.61%200.63c0.47%200.57%200.86%201.22%201.12%201.94c0.09%200.26%200.17%200.54%200.24%200.82c0.1%200.45%200.15%200.93%200.15%201.41%3BM15.24%206.37c0.41%200.23%200.8%200.51%201.14%200.83c0%200%202.62%20-1.08%202.63%20-1.06c0%200%201.56%202.7%201.56%202.7c0.01%200.03%20-2.22%201.75%20-2.22%201.75c0.1%200.45%200.15%200.93%200.15%201.41%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M18.5%2011.99c0.01%200.47%20-0.04%200.95%20-0.15%201.4c0%200%202.25%201.73%202.23%201.75c0%200%20-1.56%202.7%20-1.56%202.7c-0.02%200.02%20-2.63%20-1.05%20-2.63%20-1.05c-0.34%200.31%20-0.73%200.59%20-1.15%200.83%22%20opacity%3D%220%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20dur%3D%2230s%22%20repeatCount%3D%22indefinite%22%20type%3D%22rotate%22%20values%3D%220%2012%2012%3B360%2012%2012%22%2F%3E%3Cset%20fill%3D%22freeze%22%20attributeName%3D%22opacity%22%20begin%3D%220.8s%22%20to%3D%221%22%2F%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%220.8s%22%20dur%3D%220.2s%22%20values%3D%22M18.5%2011.99c0.01%200.47%20-0.04%200.95%20-0.15%201.4c-0.06%200.29%20-0.15%200.57%20-0.24%200.84c-0.26%200.69%20-0.63%201.35%20-1.12%201.94c-0.18%200.21%20-0.38%200.42%20-0.59%200.62c-0.34%200.31%20-0.73%200.59%20-1.15%200.83%3BM18.5%2011.99c0.01%200.47%20-0.04%200.95%20-0.15%201.4c0%200%202.25%201.73%202.23%201.75c0%200%20-1.56%202.7%20-1.56%202.7c-0.02%200.02%20-2.63%20-1.05%20-2.63%20-1.05c-0.34%200.31%20-0.73%200.59%20-1.15%200.83%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15.26%2017.62c-0.4%200.24%20-0.84%200.44%20-1.29%200.57c0%200%20-0.37%202.81%20-0.4%202.81c0%200%20-3.12%200%20-3.12%200c-0.03%20-0.01%20-0.41%20-2.8%20-0.41%20-2.8c-0.44%20-0.14%20-0.88%20-0.34%20-1.3%20-0.58%22%20opacity%3D%220%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20dur%3D%2230s%22%20repeatCount%3D%22indefinite%22%20type%3D%22rotate%22%20values%3D%220%2012%2012%3B360%2012%2012%22%2F%3E%3Cset%20fill%3D%22freeze%22%20attributeName%3D%22opacity%22%20begin%3D%220.8s%22%20to%3D%221%22%2F%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%220.8s%22%20dur%3D%220.2s%22%20values%3D%22M15.26%2017.62c-0.4%200.24%20-0.84%200.44%20-1.29%200.57c-0.28%200.09%20-0.57%200.16%20-0.85%200.21c-0.73%200.12%20-1.49%200.13%20-2.24%200c-0.27%20-0.05%20-0.55%20-0.12%20-0.83%20-0.2c-0.44%20-0.14%20-0.88%20-0.34%20-1.3%20-0.58%3BM15.26%2017.62c-0.4%200.24%20-0.84%200.44%20-1.29%200.57c0%200%20-0.37%202.81%20-0.4%202.81c0%200%20-3.12%200%20-3.12%200c-0.03%20-0.01%20-0.41%20-2.8%20-0.41%20-2.8c-0.44%20-0.14%20-0.88%20-0.34%20-1.3%20-0.58%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M8.76%2017.63c-0.41%20-0.23%20-0.8%20-0.51%20-1.14%20-0.83c0%200%20-2.62%201.08%20-2.63%201.06c0%200%20-1.56%20-2.7%20-1.56%20-2.7c-0.01%20-0.03%202.22%20-1.75%202.22%20-1.75c-0.1%20-0.45%20-0.15%20-0.93%20-0.15%20-1.41%22%20opacity%3D%220%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20dur%3D%2230s%22%20repeatCount%3D%22indefinite%22%20type%3D%22rotate%22%20values%3D%220%2012%2012%3B360%2012%2012%22%2F%3E%3Cset%20fill%3D%22freeze%22%20attributeName%3D%22opacity%22%20begin%3D%220.8s%22%20to%3D%221%22%2F%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%220.8s%22%20dur%3D%220.2s%22%20values%3D%22M8.76%2017.63c-0.41%20-0.23%20-0.8%20-0.51%20-1.14%20-0.83c-0.22%20-0.2%20-0.42%20-0.41%20-0.61%20-0.63c-0.47%20-0.57%20-0.86%20-1.22%20-1.12%20-1.94c-0.09%20-0.26%20-0.17%20-0.54%20-0.24%20-0.82c-0.1%20-0.45%20-0.15%20-0.93%20-0.15%20-1.41%3BM8.76%2017.63c-0.41%20-0.23%20-0.8%20-0.51%20-1.14%20-0.83c0%200%20-2.62%201.08%20-2.63%201.06c0%200%20-1.56%20-2.7%20-1.56%20-2.7c-0.01%20-0.03%202.22%20-1.75%202.22%20-1.75c-0.1%20-0.45%20-0.15%20-0.93%20-0.15%20-1.41%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M5.5%2012.01c-0.01%20-0.47%200.04%20-0.95%200.15%20-1.4c0%200%20-2.25%20-1.73%20-2.23%20-1.75c0%200%201.56%20-2.7%201.56%20-2.7c0.02%20-0.02%202.63%201.05%202.63%201.05c0.34%20-0.31%200.73%20-0.59%201.15%20-0.83%22%20opacity%3D%220%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20dur%3D%2230s%22%20repeatCount%3D%22indefinite%22%20type%3D%22rotate%22%20values%3D%220%2012%2012%3B360%2012%2012%22%2F%3E%3Cset%20fill%3D%22freeze%22%20attributeName%3D%22opacity%22%20begin%3D%220.8s%22%20to%3D%221%22%2F%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%220.8s%22%20dur%3D%220.2s%22%20values%3D%22M5.5%2012.01c-0.01%20-0.47%200.04%20-0.95%200.15%20-1.4c0.06%20-0.29%200.15%20-0.57%200.24%20-0.84c0.26%20-0.69%200.63%20-1.35%201.12%20-1.94c0.18%20-0.21%200.38%20-0.42%200.59%20-0.62c0.34%20-0.31%200.73%20-0.59%201.15%20-0.83%3BM5.5%2012.01c-0.01%20-0.47%200.04%20-0.95%200.15%20-1.4c0%200%20-2.25%20-1.73%20-2.23%20-1.75c0%200%201.56%20-2.7%201.56%20-2.7c0.02%20-0.02%202.63%201.05%202.63%201.05c0.34%20-0.31%200.73%20-0.59%201.15%20-0.83%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M8.74%206.38c0.4%20-0.24%200.84%20-0.44%201.29%20-0.57c0%200%200.37%20-2.81%200.4%20-2.81c0%200%203.12%200%203.12%200c0.03%200.01%200.41%202.8%200.41%202.8c0.44%200.14%200.88%200.34%201.3%200.58%22%20opacity%3D%220%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20dur%3D%2230s%22%20repeatCount%3D%22indefinite%22%20type%3D%22rotate%22%20values%3D%220%2012%2012%3B360%2012%2012%22%2F%3E%3Cset%20fill%3D%22freeze%22%20attributeName%3D%22opacity%22%20begin%3D%220.8s%22%20to%3D%221%22%2F%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%220.8s%22%20dur%3D%220.2s%22%20values%3D%22M8.74%206.38c0.4%20-0.24%200.84%20-0.44%201.29%20-0.57c0.28%20-0.09%200.57%20-0.16%200.85%20-0.21c0.73%20-0.12%201.49%20-0.13%202.24%200c0.27%200.05%200.55%200.12%200.83%200.2c0.44%200.14%200.88%200.34%201.3%200.58%3BM8.74%206.38c0.4%20-0.24%200.84%20-0.44%201.29%20-0.57c0%200%200.37%20-2.81%200.4%20-2.81c0%200%203.12%200%203.12%200c0.03%200.01%200.41%202.8%200.41%202.8c0.44%200.14%200.88%200.34%201.3%200.58%22%2F%3E%3C%2Fpath%3E%3C%2Fg%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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20stroke-dasharray%3D%2222%22%20d%3D%22M12%209c1.66%200%203%201.34%203%203c0%201.66%20-1.34%203%20-3%203c-1.66%200%20-3%20-1.34%20-3%20-3c0%20-1.66%201.34%20-3%203%20-3Z%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22stroke-dashoffset%22%20dur%3D%220.3s%22%20values%3D%2222%3B0%22%2F%3E%3C%2Fpath%3E%3Cpath%20stroke-dasharray%3D%2244%22%20stroke-dashoffset%3D%2244%22%20d%3D%22M12%205.5c3.59%200%206.5%202.91%206.5%206.5c0%203.59%20-2.91%206.5%20-6.5%206.5c-3.59%200%20-6.5%20-2.91%20-6.5%20-6.5c0%20-3.59%202.91%20-6.5%206.5%20-6.5Z%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22stroke-dashoffset%22%20begin%3D%220.3s%22%20dur%3D%220.5s%22%20to%3D%220%22%2F%3E%3Cset%20fill%3D%22freeze%22%20attributeName%3D%22opacity%22%20begin%3D%220.8s%22%20to%3D%220%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15.24%206.37c0.41%200.23%200.8%200.51%201.14%200.83c0%200%202.62%20-1.08%202.63%20-1.06c0%200%201.56%202.7%201.56%202.7c0.01%200.03%20-2.22%201.75%20-2.22%201.75c0.1%200.45%200.15%200.93%200.15%201.41%22%20opacity%3D%220%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20dur%3D%2230s%22%20repeatCount%3D%22indefinite%22%20type%3D%22rotate%22%20values%3D%220%2012%2012%3B360%2012%2012%22%2F%3E%3Cset%20fill%3D%22freeze%22%20attributeName%3D%22opacity%22%20begin%3D%220.8s%22%20to%3D%221%22%2F%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%220.8s%22%20dur%3D%220.2s%22%20values%3D%22M15.24%206.37c0.41%200.23%200.8%200.51%201.14%200.83c0.22%200.2%200.42%200.41%200.61%200.63c0.47%200.57%200.86%201.22%201.12%201.94c0.09%200.26%200.17%200.54%200.24%200.82c0.1%200.45%200.15%200.93%200.15%201.41%3BM15.24%206.37c0.41%200.23%200.8%200.51%201.14%200.83c0%200%202.62%20-1.08%202.63%20-1.06c0%200%201.56%202.7%201.56%202.7c0.01%200.03%20-2.22%201.75%20-2.22%201.75c0.1%200.45%200.15%200.93%200.15%201.41%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M18.5%2011.99c0.01%200.47%20-0.04%200.95%20-0.15%201.4c0%200%202.25%201.73%202.23%201.75c0%200%20-1.56%202.7%20-1.56%202.7c-0.02%200.02%20-2.63%20-1.05%20-2.63%20-1.05c-0.34%200.31%20-0.73%200.59%20-1.15%200.83%22%20opacity%3D%220%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20dur%3D%2230s%22%20repeatCount%3D%22indefinite%22%20type%3D%22rotate%22%20values%3D%220%2012%2012%3B360%2012%2012%22%2F%3E%3Cset%20fill%3D%22freeze%22%20attributeName%3D%22opacity%22%20begin%3D%220.8s%22%20to%3D%221%22%2F%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%220.8s%22%20dur%3D%220.2s%22%20values%3D%22M18.5%2011.99c0.01%200.47%20-0.04%200.95%20-0.15%201.4c-0.06%200.29%20-0.15%200.57%20-0.24%200.84c-0.26%200.69%20-0.63%201.35%20-1.12%201.94c-0.18%200.21%20-0.38%200.42%20-0.59%200.62c-0.34%200.31%20-0.73%200.59%20-1.15%200.83%3BM18.5%2011.99c0.01%200.47%20-0.04%200.95%20-0.15%201.4c0%200%202.25%201.73%202.23%201.75c0%200%20-1.56%202.7%20-1.56%202.7c-0.02%200.02%20-2.63%20-1.05%20-2.63%20-1.05c-0.34%200.31%20-0.73%200.59%20-1.15%200.83%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15.26%2017.62c-0.4%200.24%20-0.84%200.44%20-1.29%200.57c0%200%20-0.37%202.81%20-0.4%202.81c0%200%20-3.12%200%20-3.12%200c-0.03%20-0.01%20-0.41%20-2.8%20-0.41%20-2.8c-0.44%20-0.14%20-0.88%20-0.34%20-1.3%20-0.58%22%20opacity%3D%220%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20dur%3D%2230s%22%20repeatCount%3D%22indefinite%22%20type%3D%22rotate%22%20values%3D%220%2012%2012%3B360%2012%2012%22%2F%3E%3Cset%20fill%3D%22freeze%22%20attributeName%3D%22opacity%22%20begin%3D%220.8s%22%20to%3D%221%22%2F%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%220.8s%22%20dur%3D%220.2s%22%20values%3D%22M15.26%2017.62c-0.4%200.24%20-0.84%200.44%20-1.29%200.57c-0.28%200.09%20-0.57%200.16%20-0.85%200.21c-0.73%200.12%20-1.49%200.13%20-2.24%200c-0.27%20-0.05%20-0.55%20-0.12%20-0.83%20-0.2c-0.44%20-0.14%20-0.88%20-0.34%20-1.3%20-0.58%3BM15.26%2017.62c-0.4%200.24%20-0.84%200.44%20-1.29%200.57c0%200%20-0.37%202.81%20-0.4%202.81c0%200%20-3.12%200%20-3.12%200c-0.03%20-0.01%20-0.41%20-2.8%20-0.41%20-2.8c-0.44%20-0.14%20-0.88%20-0.34%20-1.3%20-0.58%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M8.76%2017.63c-0.41%20-0.23%20-0.8%20-0.51%20-1.14%20-0.83c0%200%20-2.62%201.08%20-2.63%201.06c0%200%20-1.56%20-2.7%20-1.56%20-2.7c-0.01%20-0.03%202.22%20-1.75%202.22%20-1.75c-0.1%20-0.45%20-0.15%20-0.93%20-0.15%20-1.41%22%20opacity%3D%220%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20dur%3D%2230s%22%20repeatCount%3D%22indefinite%22%20type%3D%22rotate%22%20values%3D%220%2012%2012%3B360%2012%2012%22%2F%3E%3Cset%20fill%3D%22freeze%22%20attributeName%3D%22opacity%22%20begin%3D%220.8s%22%20to%3D%221%22%2F%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%220.8s%22%20dur%3D%220.2s%22%20values%3D%22M8.76%2017.63c-0.41%20-0.23%20-0.8%20-0.51%20-1.14%20-0.83c-0.22%20-0.2%20-0.42%20-0.41%20-0.61%20-0.63c-0.47%20-0.57%20-0.86%20-1.22%20-1.12%20-1.94c-0.09%20-0.26%20-0.17%20-0.54%20-0.24%20-0.82c-0.1%20-0.45%20-0.15%20-0.93%20-0.15%20-1.41%3BM8.76%2017.63c-0.41%20-0.23%20-0.8%20-0.51%20-1.14%20-0.83c0%200%20-2.62%201.08%20-2.63%201.06c0%200%20-1.56%20-2.7%20-1.56%20-2.7c-0.01%20-0.03%202.22%20-1.75%202.22%20-1.75c-0.1%20-0.45%20-0.15%20-0.93%20-0.15%20-1.41%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M5.5%2012.01c-0.01%20-0.47%200.04%20-0.95%200.15%20-1.4c0%200%20-2.25%20-1.73%20-2.23%20-1.75c0%200%201.56%20-2.7%201.56%20-2.7c0.02%20-0.02%202.63%201.05%202.63%201.05c0.34%20-0.31%200.73%20-0.59%201.15%20-0.83%22%20opacity%3D%220%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20dur%3D%2230s%22%20repeatCount%3D%22indefinite%22%20type%3D%22rotate%22%20values%3D%220%2012%2012%3B360%2012%2012%22%2F%3E%3Cset%20fill%3D%22freeze%22%20attributeName%3D%22opacity%22%20begin%3D%220.8s%22%20to%3D%221%22%2F%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%220.8s%22%20dur%3D%220.2s%22%20values%3D%22M5.5%2012.01c-0.01%20-0.47%200.04%20-0.95%200.15%20-1.4c0.06%20-0.29%200.15%20-0.57%200.24%20-0.84c0.26%20-0.69%200.63%20-1.35%201.12%20-1.94c0.18%20-0.21%200.38%20-0.42%200.59%20-0.62c0.34%20-0.31%200.73%20-0.59%201.15%20-0.83%3BM5.5%2012.01c-0.01%20-0.47%200.04%20-0.95%200.15%20-1.4c0%200%20-2.25%20-1.73%20-2.23%20-1.75c0%200%201.56%20-2.7%201.56%20-2.7c0.02%20-0.02%202.63%201.05%202.63%201.05c0.34%20-0.31%200.73%20-0.59%201.15%20-0.83%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M8.74%206.38c0.4%20-0.24%200.84%20-0.44%201.29%20-0.57c0%200%200.37%20-2.81%200.4%20-2.81c0%200%203.12%200%203.12%200c0.03%200.01%200.41%202.8%200.41%202.8c0.44%200.14%200.88%200.34%201.3%200.58%22%20opacity%3D%220%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20dur%3D%2230s%22%20repeatCount%3D%22indefinite%22%20type%3D%22rotate%22%20values%3D%220%2012%2012%3B360%2012%2012%22%2F%3E%3Cset%20fill%3D%22freeze%22%20attributeName%3D%22opacity%22%20begin%3D%220.8s%22%20to%3D%221%22%2F%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%220.8s%22%20dur%3D%220.2s%22%20values%3D%22M8.74%206.38c0.4%20-0.24%200.84%20-0.44%201.29%20-0.57c0.28%20-0.09%200.57%20-0.16%200.85%20-0.21c0.73%20-0.12%201.49%20-0.13%202.24%200c0.27%200.05%200.55%200.12%200.83%200.2c0.44%200.14%200.88%200.34%201.3%200.58%3BM8.74%206.38c0.4%20-0.24%200.84%20-0.44%201.29%20-0.57c0%200%200.37%20-2.81%200.4%20-2.81c0%200%203.12%200%203.12%200c0.03%200.01%200.41%202.8%200.41%202.8c0.44%200.14%200.88%200.34%201.3%200.58%22%2F%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 cog-loop 加一点动效

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

cog-loop 呼吸动效演示

呼吸

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

css呼吸动效样式
.icon-cog-loop {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
cog-loop 旋转动效演示

旋转

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

css旋转动效样式
.icon-cog-loop {
  animation: icon-spin 1.6s linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}
cog-loop 描画动效演示

描画

线条从无到有依次绘出，适合线性图标与首屏引导。

css描画动效样式
.icon-cog-loop path {
  stroke-dasharray: 120;
  animation: icon-draw 1.2s ease forwards;
}

@keyframes icon-draw {
  from { stroke-dashoffset: 120; }
  to { stroke-dashoffset: 0; }
}

SVG 健康报告

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

文件体积

5.26 KB

5,389 字节

viewBox

0 0 24 24

矢量坐标系

图元总数

8

<path> ×8

风格

多色填充

描边可随字号加粗

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

常见问题

关于 cog-loop 图标的下载、商用与改色。

cog-loop 图标是什么？▾

它是 Material Line Icons（line-md）开源图标集中的 cog-loop 图标，多色填充，viewBox 为 0 0 24 24，文件仅 5.26 KB，矢量格式可无损缩放到任意尺寸。

如何下载 cog-loop 图标？▾

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

cog-loop 图标可以商用吗？▾

该图标采用 MIT（MIT） 开源协议，通常允许在遵守协议的前提下免费使用，常见要求是保留作者版权声明。商用前建议阅读协议原文确认。

如何修改 cog-loop 图标的颜色？▾

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

Material Line Icons 中的相近图标

cog
cog-filled
cog-off
cog-off-filled
cog-off-loop
cog-filled-loop
cog-off-filled-loop