找找图标
swap 图标

swap SVG 图标

withicons-plushswap

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

图标 ID
withicons-plush:swap
中文名
—
所属集合
with icons Plush
集合规模
1,000 枚
基础网格
24px
色彩
多色
开源协议
MIT
作者
Evergrow

下载 swap 图标

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

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

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

swap 的预览与使用场景

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

预览颜色
swap 图标 浅色背景预览浅色背景
swap 图标 深色背景预览深色背景
swap 图标 灰底融入预览灰底融入

在真实界面里长这样

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

各尺寸下的可读性

swap 图标 24px 渲染24pxswap 图标 32px 渲染32pxswap 图标 48px 渲染48pxswap 图标 64px 渲染64pxswap 图标 96px 渲染96pxswap 图标 128px 渲染128px

复制 swap 图标代码

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

svgSVG 源码（内联 HTML）
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#3a1e46" fill-opacity=".16" d="m20.9 6.9l-.2 1l-.5.7l-3.5 2.7l-.7.1l-.6-.3l.2.6l.7.4l.7-.1l3.5-2.6l.4-.4l.3-.7l-.1-.7zM1.6 8.7V9l.5.6l.5.3l.6.1h11.7l.2-.5l-.3-.2H2.9l-.6-.1zm7.5 5l-.2.8l.2.2h.3v-.4zm14.1 2.8l-.5 1.4l-.4.5l-.7.3l-.5.1h-12L9 19l.1.7l-.2.6l-.4.4l-.6.2l-.7-.2l-3.5-2.6l.5.7l3.1 2.4l.5.4h.5l.6-.2l.3-.4l.2-.6l-.1-.7l.2-.2h12l.6-.1l.8-.6l.4-.7l.1-.8z" class="wm-shadow"/><path fill="#4a2c3d" d="m15.96 3.1l-.24.07l-.31.19l-.23.24l-.14.24l-.1.48l.11.72l-.17.14H3.12l-.48.04l-.36.09l-.48.26l-.24.21l-.28.34l-.2.36l-.13.48l-.02.36l.12.6l.24.48l.45.48l.54.31l.48.11l12.12.02l.17.16l-.11.72l.03.24l.07.24l.2.3l.24.22l.36.17l.36.04l.36-.07l.51-.3l3.21-2.49l.23-.27l.2-.36l.1-.36l.03-.36l-.05-.36l-.13-.36l-.22-.36l-.28-.28l-3.36-2.56l-.37-.16z" class="wm-k"/><path fill="#f4695e" d="m16.08 3.71l-.36.21l-.15.28l.1.84l-.07.3l-.24.28l-.36.17l-12.24.03l-.49.18l-.29.24l-.2.24l-.12.24l-.1.36l.06.6l.18.37l.33.35l.39.21l.36.08L15 8.71l.36.18l.27.35l.05.24l-.12.72l.06.24l.21.24l.13.07l.36.02l.36-.21l3.12-2.41l.34-.47l.08-.48l-.13-.48l-.29-.38l-3.24-2.48l-.24-.13z" class="wm-k"/><path fill="#3a1e46" fill-opacity=".13" d="m16.1 3.7l-.4.2l-.1.3l.1.8l-.1.3l-.6.5H2.8l-.5.2l-.5.5l-.2.6v.6l.5.7l.8.3H15l.4.2l.2.3v1.2l.4.4h.3l3.5-2.6l.3-.5l.1-.5l-.1-.5l-.3-.4l-3.2-2.4zm0 .6l.1-.1l.1.1l3.1 2.4l.3.5l-.3.6l-3.2 2.5l-.1-.1l.1-.7l-.2-.6l-.4-.5l-.5-.2H3L2.4 8l-.3-.6l.1-.7l.3-.3l.4-.1h12.2l.6-.3l.4-.5l.1-.5z" class="wm-k"/><path fill="#3a1e46" fill-opacity=".17" d="m19.3 6l-.1.6l-.4.5l-3.1 2.4l-.1.7l.2.5l.4.1l.3-.1L20 7.9l.2-.5l-.1-.6l-.2-.3zM1.7 7.6v.3l.3.4l.9.4h11.6l.2-.1v-.2l-.2-.5l-.6-.3z" class="wm-k"/><path fill="#fff" fill-opacity=".34" d="m16.2 4.4l.1.6l-.2.6l-.4.5l-.6.3H2.9l-.4.2l-.2.2l-.1.6l.3.5l.5.2h1.2l.7-.1l11.9-.1l.4-.1l.2-.4V6.2l.7-.4z" class="wm-shine"/><path fill="none" stroke="#fff9f0" stroke-linecap="round" stroke-opacity=".92" stroke-width=".42" d="M3.9 7.3h.8m.7 0h.7m.7 0h.8m.7 0h.8m.7 0h.7m.7 0h.8m.7 0h.8m.7 0h.8" class="wm-k"/><path fill="#4a2c3d" d="m7.8 12.59l-.36.07l-.48.28l-3.14 2.42l-.33.36l-.2.36l-.12.6l.11.72l.19.36l.25.29l3.19 2.47l.53.32l.36.07l.48-.08l.32-.19l.23-.24l.17-.35l.05-.25l-.1-.84l.17-.14l12.12-.02l.48-.11l.57-.33l.44-.48l.23-.48l.08-.36l.02-.48l-.21-.72l-.29-.44l-.3-.28l-.66-.34l-.72-.1H9.12l-.17-.16l.11-.72l-.03-.24l-.14-.36l-.19-.24l-.3-.23l-.36-.13z" class="wm-a"/><path fill="#4c9fe6" d="M7.56 13.28L4.2 15.85l-.34.47l-.07.48l.12.48l.27.36l3.12 2.4l.38.23l.36-.02l.28-.21l.12-.36l-.11-.72l.04-.24l.27-.34l.36-.17l12.12-.02l.36-.08l.41-.23l.31-.33l.18-.39l.06-.6l-.23-.6l-.37-.38l-.24-.14l-.36-.12L9 15.29l-.36-.18l-.27-.35l-.05-.24l.12-.72l-.14-.36l-.14-.13l-.24-.1z" class="wm-a"/><path fill="#3a1e46" fill-opacity=".13" d="m7.6 13.3l-3.4 2.5l-.3.5l-.1.5l.1.5l.3.3l3.5 2.7H8l.3-.3l.1-.3v-1l.2-.3l.4-.2h12.1l.8-.3l.5-.7v-.6l-.2-.6l-.4-.4l-.6-.3H9l-.4-.2l-.2-.3v-1l-.1-.4l-.4-.2zm.1.5h.2l-.1.7l.2.6l.4.5l.5.2h12.2l.7.4l.1.7l-.3.6l-.6.2H8.9l-.5.2l-.4.5l-.2.6l.1.7l-.1.1l-3.3-2.5l-.2-.5l.3-.6z" class="wm-a"/><path fill="#3a1e46" fill-opacity=".17" d="m7.6 13.3l-.2.1l.2.5l.4.3h.4v-.4l-.1-.4l-.4-.2zm13.9 2.2l-.1.6l-.2.5l-.4.3l-.6.2H8l-.6.5v.3l.1.8l-.2.3l-.3.2l-.5-.1l-2.6-1.9l.3.5l3.1 2.4l.6.2l.4-.2l.1-.3l-.1-.8l.1-.3l.6-.5l12.5-.1l.7-.6l.2-.8l-.3-.9l-.4-.3z" class="wm-a"/><path fill="#fff" fill-opacity=".34" d="m7.8 13.9l-3.4 2.6v.4l.2.3l1.2.9h.1l2.8-2.3l-.4-.2l-.4-.5l-.2-.6zm2.5 2l-.2.7l.1.3l.3.4l.4.2h10.5l.3-.2l.1-.5l-.2-.6l-.5-.3z" class="wm-a"/><path fill="none" stroke="#fff9f0" stroke-linecap="round" stroke-opacity=".92" stroke-width=".42" d="M20.1 16.8h-.8m-.7 0h-.7m-.7 0h-.8m-.7 0h-.8m-.7 0h-.7m-.7 0H12m-.7 0h-.8m-.7 0h-.7" class="wm-a"/></svg>
reactReact 组件（TSX）
export function SwapIcon(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: `<path fill="#3a1e46" fill-opacity=".16" d="m20.9 6.9l-.2 1l-.5.7l-3.5 2.7l-.7.1l-.6-.3l.2.6l.7.4l.7-.1l3.5-2.6l.4-.4l.3-.7l-.1-.7zM1.6 8.7V9l.5.6l.5.3l.6.1h11.7l.2-.5l-.3-.2H2.9l-.6-.1zm7.5 5l-.2.8l.2.2h.3v-.4zm14.1 2.8l-.5 1.4l-.4.5l-.7.3l-.5.1h-12L9 19l.1.7l-.2.6l-.4.4l-.6.2l-.7-.2l-3.5-2.6l.5.7l3.1 2.4l.5.4h.5l.6-.2l.3-.4l.2-.6l-.1-.7l.2-.2h12l.6-.1l.8-.6l.4-.7l.1-.8z" class="wm-shadow"/><path fill="#4a2c3d" d="m15.96 3.1l-.24.07l-.31.19l-.23.24l-.14.24l-.1.48l.11.72l-.17.14H3.12l-.48.04l-.36.09l-.48.26l-.24.21l-.28.34l-.2.36l-.13.48l-.02.36l.12.6l.24.48l.45.48l.54.31l.48.11l12.12.02l.17.16l-.11.72l.03.24l.07.24l.2.3l.24.22l.36.17l.36.04l.36-.07l.51-.3l3.21-2.49l.23-.27l.2-.36l.1-.36l.03-.36l-.05-.36l-.13-.36l-.22-.36l-.28-.28l-3.36-2.56l-.37-.16z" class="wm-k"/><path fill="#f4695e" d="m16.08 3.71l-.36.21l-.15.28l.1.84l-.07.3l-.24.28l-.36.17l-12.24.03l-.49.18l-.29.24l-.2.24l-.12.24l-.1.36l.06.6l.18.37l.33.35l.39.21l.36.08L15 8.71l.36.18l.27.35l.05.24l-.12.72l.06.24l.21.24l.13.07l.36.02l.36-.21l3.12-2.41l.34-.47l.08-.48l-.13-.48l-.29-.38l-3.24-2.48l-.24-.13z" class="wm-k"/><path fill="#3a1e46" fill-opacity=".13" d="m16.1 3.7l-.4.2l-.1.3l.1.8l-.1.3l-.6.5H2.8l-.5.2l-.5.5l-.2.6v.6l.5.7l.8.3H15l.4.2l.2.3v1.2l.4.4h.3l3.5-2.6l.3-.5l.1-.5l-.1-.5l-.3-.4l-3.2-2.4zm0 .6l.1-.1l.1.1l3.1 2.4l.3.5l-.3.6l-3.2 2.5l-.1-.1l.1-.7l-.2-.6l-.4-.5l-.5-.2H3L2.4 8l-.3-.6l.1-.7l.3-.3l.4-.1h12.2l.6-.3l.4-.5l.1-.5z" class="wm-k"/><path fill="#3a1e46" fill-opacity=".17" d="m19.3 6l-.1.6l-.4.5l-3.1 2.4l-.1.7l.2.5l.4.1l.3-.1L20 7.9l.2-.5l-.1-.6l-.2-.3zM1.7 7.6v.3l.3.4l.9.4h11.6l.2-.1v-.2l-.2-.5l-.6-.3z" class="wm-k"/><path fill="#fff" fill-opacity=".34" d="m16.2 4.4l.1.6l-.2.6l-.4.5l-.6.3H2.9l-.4.2l-.2.2l-.1.6l.3.5l.5.2h1.2l.7-.1l11.9-.1l.4-.1l.2-.4V6.2l.7-.4z" class="wm-shine"/><path fill="none" stroke="#fff9f0" stroke-linecap="round" stroke-opacity=".92" stroke-width=".42" d="M3.9 7.3h.8m.7 0h.7m.7 0h.8m.7 0h.8m.7 0h.7m.7 0h.8m.7 0h.8m.7 0h.8" class="wm-k"/><path fill="#4a2c3d" d="m7.8 12.59l-.36.07l-.48.28l-3.14 2.42l-.33.36l-.2.36l-.12.6l.11.72l.19.36l.25.29l3.19 2.47l.53.32l.36.07l.48-.08l.32-.19l.23-.24l.17-.35l.05-.25l-.1-.84l.17-.14l12.12-.02l.48-.11l.57-.33l.44-.48l.23-.48l.08-.36l.02-.48l-.21-.72l-.29-.44l-.3-.28l-.66-.34l-.72-.1H9.12l-.17-.16l.11-.72l-.03-.24l-.14-.36l-.19-.24l-.3-.23l-.36-.13z" class="wm-a"/><path fill="#4c9fe6" d="M7.56 13.28L4.2 15.85l-.34.47l-.07.48l.12.48l.27.36l3.12 2.4l.38.23l.36-.02l.28-.21l.12-.36l-.11-.72l.04-.24l.27-.34l.36-.17l12.12-.02l.36-.08l.41-.23l.31-.33l.18-.39l.06-.6l-.23-.6l-.37-.38l-.24-.14l-.36-.12L9 15.29l-.36-.18l-.27-.35l-.05-.24l.12-.72l-.14-.36l-.14-.13l-.24-.1z" class="wm-a"/><path fill="#3a1e46" fill-opacity=".13" d="m7.6 13.3l-3.4 2.5l-.3.5l-.1.5l.1.5l.3.3l3.5 2.7H8l.3-.3l.1-.3v-1l.2-.3l.4-.2h12.1l.8-.3l.5-.7v-.6l-.2-.6l-.4-.4l-.6-.3H9l-.4-.2l-.2-.3v-1l-.1-.4l-.4-.2zm.1.5h.2l-.1.7l.2.6l.4.5l.5.2h12.2l.7.4l.1.7l-.3.6l-.6.2H8.9l-.5.2l-.4.5l-.2.6l.1.7l-.1.1l-3.3-2.5l-.2-.5l.3-.6z" class="wm-a"/><path fill="#3a1e46" fill-opacity=".17" d="m7.6 13.3l-.2.1l.2.5l.4.3h.4v-.4l-.1-.4l-.4-.2zm13.9 2.2l-.1.6l-.2.5l-.4.3l-.6.2H8l-.6.5v.3l.1.8l-.2.3l-.3.2l-.5-.1l-2.6-1.9l.3.5l3.1 2.4l.6.2l.4-.2l.1-.3l-.1-.8l.1-.3l.6-.5l12.5-.1l.7-.6l.2-.8l-.3-.9l-.4-.3z" class="wm-a"/><path fill="#fff" fill-opacity=".34" d="m7.8 13.9l-3.4 2.6v.4l.2.3l1.2.9h.1l2.8-2.3l-.4-.2l-.4-.5l-.2-.6zm2.5 2l-.2.7l.1.3l.3.4l.4.2h10.5l.3-.2l.1-.5l-.2-.6l-.5-.3z" class="wm-a"/><path fill="none" stroke="#fff9f0" stroke-linecap="round" stroke-opacity=".92" stroke-width=".42" d="M20.1 16.8h-.8m-.7 0h-.7m-.7 0h-.8m-.7 0h-.8m-.7 0h-.7m-.7 0H12m-.7 0h-.8m-.7 0h-.7" class="wm-a"/>` }}
    />
  );
}
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 = `<path fill="#3a1e46" fill-opacity=".16" d="m20.9 6.9l-.2 1l-.5.7l-3.5 2.7l-.7.1l-.6-.3l.2.6l.7.4l.7-.1l3.5-2.6l.4-.4l.3-.7l-.1-.7zM1.6 8.7V9l.5.6l.5.3l.6.1h11.7l.2-.5l-.3-.2H2.9l-.6-.1zm7.5 5l-.2.8l.2.2h.3v-.4zm14.1 2.8l-.5 1.4l-.4.5l-.7.3l-.5.1h-12L9 19l.1.7l-.2.6l-.4.4l-.6.2l-.7-.2l-3.5-2.6l.5.7l3.1 2.4l.5.4h.5l.6-.2l.3-.4l.2-.6l-.1-.7l.2-.2h12l.6-.1l.8-.6l.4-.7l.1-.8z" class="wm-shadow"/><path fill="#4a2c3d" d="m15.96 3.1l-.24.07l-.31.19l-.23.24l-.14.24l-.1.48l.11.72l-.17.14H3.12l-.48.04l-.36.09l-.48.26l-.24.21l-.28.34l-.2.36l-.13.48l-.02.36l.12.6l.24.48l.45.48l.54.31l.48.11l12.12.02l.17.16l-.11.72l.03.24l.07.24l.2.3l.24.22l.36.17l.36.04l.36-.07l.51-.3l3.21-2.49l.23-.27l.2-.36l.1-.36l.03-.36l-.05-.36l-.13-.36l-.22-.36l-.28-.28l-3.36-2.56l-.37-.16z" class="wm-k"/><path fill="#f4695e" d="m16.08 3.71l-.36.21l-.15.28l.1.84l-.07.3l-.24.28l-.36.17l-12.24.03l-.49.18l-.29.24l-.2.24l-.12.24l-.1.36l.06.6l.18.37l.33.35l.39.21l.36.08L15 8.71l.36.18l.27.35l.05.24l-.12.72l.06.24l.21.24l.13.07l.36.02l.36-.21l3.12-2.41l.34-.47l.08-.48l-.13-.48l-.29-.38l-3.24-2.48l-.24-.13z" class="wm-k"/><path fill="#3a1e46" fill-opacity=".13" d="m16.1 3.7l-.4.2l-.1.3l.1.8l-.1.3l-.6.5H2.8l-.5.2l-.5.5l-.2.6v.6l.5.7l.8.3H15l.4.2l.2.3v1.2l.4.4h.3l3.5-2.6l.3-.5l.1-.5l-.1-.5l-.3-.4l-3.2-2.4zm0 .6l.1-.1l.1.1l3.1 2.4l.3.5l-.3.6l-3.2 2.5l-.1-.1l.1-.7l-.2-.6l-.4-.5l-.5-.2H3L2.4 8l-.3-.6l.1-.7l.3-.3l.4-.1h12.2l.6-.3l.4-.5l.1-.5z" class="wm-k"/><path fill="#3a1e46" fill-opacity=".17" d="m19.3 6l-.1.6l-.4.5l-3.1 2.4l-.1.7l.2.5l.4.1l.3-.1L20 7.9l.2-.5l-.1-.6l-.2-.3zM1.7 7.6v.3l.3.4l.9.4h11.6l.2-.1v-.2l-.2-.5l-.6-.3z" class="wm-k"/><path fill="#fff" fill-opacity=".34" d="m16.2 4.4l.1.6l-.2.6l-.4.5l-.6.3H2.9l-.4.2l-.2.2l-.1.6l.3.5l.5.2h1.2l.7-.1l11.9-.1l.4-.1l.2-.4V6.2l.7-.4z" class="wm-shine"/><path fill="none" stroke="#fff9f0" stroke-linecap="round" stroke-opacity=".92" stroke-width=".42" d="M3.9 7.3h.8m.7 0h.7m.7 0h.8m.7 0h.8m.7 0h.7m.7 0h.8m.7 0h.8m.7 0h.8" class="wm-k"/><path fill="#4a2c3d" d="m7.8 12.59l-.36.07l-.48.28l-3.14 2.42l-.33.36l-.2.36l-.12.6l.11.72l.19.36l.25.29l3.19 2.47l.53.32l.36.07l.48-.08l.32-.19l.23-.24l.17-.35l.05-.25l-.1-.84l.17-.14l12.12-.02l.48-.11l.57-.33l.44-.48l.23-.48l.08-.36l.02-.48l-.21-.72l-.29-.44l-.3-.28l-.66-.34l-.72-.1H9.12l-.17-.16l.11-.72l-.03-.24l-.14-.36l-.19-.24l-.3-.23l-.36-.13z" class="wm-a"/><path fill="#4c9fe6" d="M7.56 13.28L4.2 15.85l-.34.47l-.07.48l.12.48l.27.36l3.12 2.4l.38.23l.36-.02l.28-.21l.12-.36l-.11-.72l.04-.24l.27-.34l.36-.17l12.12-.02l.36-.08l.41-.23l.31-.33l.18-.39l.06-.6l-.23-.6l-.37-.38l-.24-.14l-.36-.12L9 15.29l-.36-.18l-.27-.35l-.05-.24l.12-.72l-.14-.36l-.14-.13l-.24-.1z" class="wm-a"/><path fill="#3a1e46" fill-opacity=".13" d="m7.6 13.3l-3.4 2.5l-.3.5l-.1.5l.1.5l.3.3l3.5 2.7H8l.3-.3l.1-.3v-1l.2-.3l.4-.2h12.1l.8-.3l.5-.7v-.6l-.2-.6l-.4-.4l-.6-.3H9l-.4-.2l-.2-.3v-1l-.1-.4l-.4-.2zm.1.5h.2l-.1.7l.2.6l.4.5l.5.2h12.2l.7.4l.1.7l-.3.6l-.6.2H8.9l-.5.2l-.4.5l-.2.6l.1.7l-.1.1l-3.3-2.5l-.2-.5l.3-.6z" class="wm-a"/><path fill="#3a1e46" fill-opacity=".17" d="m7.6 13.3l-.2.1l.2.5l.4.3h.4v-.4l-.1-.4l-.4-.2zm13.9 2.2l-.1.6l-.2.5l-.4.3l-.6.2H8l-.6.5v.3l.1.8l-.2.3l-.3.2l-.5-.1l-2.6-1.9l.3.5l3.1 2.4l.6.2l.4-.2l.1-.3l-.1-.8l.1-.3l.6-.5l12.5-.1l.7-.6l.2-.8l-.3-.9l-.4-.3z" class="wm-a"/><path fill="#fff" fill-opacity=".34" d="m7.8 13.9l-3.4 2.6v.4l.2.3l1.2.9h.1l2.8-2.3l-.4-.2l-.4-.5l-.2-.6zm2.5 2l-.2.7l.1.3l.3.4l.4.2h10.5l.3-.2l.1-.5l-.2-.6l-.5-.3z" class="wm-a"/><path fill="none" stroke="#fff9f0" stroke-linecap="round" stroke-opacity=".92" stroke-width=".42" d="M20.1 16.8h-.8m-.7 0h-.7m-.7 0h-.8m-.7 0h-.8m-.7 0h-.7m-.7 0H12m-.7 0h-.8m-.7 0h-.7" class="wm-a"/>`;
</script>
cssCSS mask（随 currentColor 改色）
.swap {
  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%3Cpath%20fill%3D%22%233a1e46%22%20fill-opacity%3D%22.16%22%20d%3D%22m20.9%206.9l-.2%201l-.5.7l-3.5%202.7l-.7.1l-.6-.3l.2.6l.7.4l.7-.1l3.5-2.6l.4-.4l.3-.7l-.1-.7zM1.6%208.7V9l.5.6l.5.3l.6.1h11.7l.2-.5l-.3-.2H2.9l-.6-.1zm7.5%205l-.2.8l.2.2h.3v-.4zm14.1%202.8l-.5%201.4l-.4.5l-.7.3l-.5.1h-12L9%2019l.1.7l-.2.6l-.4.4l-.6.2l-.7-.2l-3.5-2.6l.5.7l3.1%202.4l.5.4h.5l.6-.2l.3-.4l.2-.6l-.1-.7l.2-.2h12l.6-.1l.8-.6l.4-.7l.1-.8z%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%234a2c3d%22%20d%3D%22m15.96%203.1l-.24.07l-.31.19l-.23.24l-.14.24l-.1.48l.11.72l-.17.14H3.12l-.48.04l-.36.09l-.48.26l-.24.21l-.28.34l-.2.36l-.13.48l-.02.36l.12.6l.24.48l.45.48l.54.31l.48.11l12.12.02l.17.16l-.11.72l.03.24l.07.24l.2.3l.24.22l.36.17l.36.04l.36-.07l.51-.3l3.21-2.49l.23-.27l.2-.36l.1-.36l.03-.36l-.05-.36l-.13-.36l-.22-.36l-.28-.28l-3.36-2.56l-.37-.16z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23f4695e%22%20d%3D%22m16.08%203.71l-.36.21l-.15.28l.1.84l-.07.3l-.24.28l-.36.17l-12.24.03l-.49.18l-.29.24l-.2.24l-.12.24l-.1.36l.06.6l.18.37l.33.35l.39.21l.36.08L15%208.71l.36.18l.27.35l.05.24l-.12.72l.06.24l.21.24l.13.07l.36.02l.36-.21l3.12-2.41l.34-.47l.08-.48l-.13-.48l-.29-.38l-3.24-2.48l-.24-.13z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%233a1e46%22%20fill-opacity%3D%22.13%22%20d%3D%22m16.1%203.7l-.4.2l-.1.3l.1.8l-.1.3l-.6.5H2.8l-.5.2l-.5.5l-.2.6v.6l.5.7l.8.3H15l.4.2l.2.3v1.2l.4.4h.3l3.5-2.6l.3-.5l.1-.5l-.1-.5l-.3-.4l-3.2-2.4zm0%20.6l.1-.1l.1.1l3.1%202.4l.3.5l-.3.6l-3.2%202.5l-.1-.1l.1-.7l-.2-.6l-.4-.5l-.5-.2H3L2.4%208l-.3-.6l.1-.7l.3-.3l.4-.1h12.2l.6-.3l.4-.5l.1-.5z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%233a1e46%22%20fill-opacity%3D%22.17%22%20d%3D%22m19.3%206l-.1.6l-.4.5l-3.1%202.4l-.1.7l.2.5l.4.1l.3-.1L20%207.9l.2-.5l-.1-.6l-.2-.3zM1.7%207.6v.3l.3.4l.9.4h11.6l.2-.1v-.2l-.2-.5l-.6-.3z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.34%22%20d%3D%22m16.2%204.4l.1.6l-.2.6l-.4.5l-.6.3H2.9l-.4.2l-.2.2l-.1.6l.3.5l.5.2h1.2l.7-.1l11.9-.1l.4-.1l.2-.4V6.2l.7-.4z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff9f0%22%20stroke-linecap%3D%22round%22%20stroke-opacity%3D%22.92%22%20stroke-width%3D%22.42%22%20d%3D%22M3.9%207.3h.8m.7%200h.7m.7%200h.8m.7%200h.8m.7%200h.7m.7%200h.8m.7%200h.8m.7%200h.8%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%234a2c3d%22%20d%3D%22m7.8%2012.59l-.36.07l-.48.28l-3.14%202.42l-.33.36l-.2.36l-.12.6l.11.72l.19.36l.25.29l3.19%202.47l.53.32l.36.07l.48-.08l.32-.19l.23-.24l.17-.35l.05-.25l-.1-.84l.17-.14l12.12-.02l.48-.11l.57-.33l.44-.48l.23-.48l.08-.36l.02-.48l-.21-.72l-.29-.44l-.3-.28l-.66-.34l-.72-.1H9.12l-.17-.16l.11-.72l-.03-.24l-.14-.36l-.19-.24l-.3-.23l-.36-.13z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%234c9fe6%22%20d%3D%22M7.56%2013.28L4.2%2015.85l-.34.47l-.07.48l.12.48l.27.36l3.12%202.4l.38.23l.36-.02l.28-.21l.12-.36l-.11-.72l.04-.24l.27-.34l.36-.17l12.12-.02l.36-.08l.41-.23l.31-.33l.18-.39l.06-.6l-.23-.6l-.37-.38l-.24-.14l-.36-.12L9%2015.29l-.36-.18l-.27-.35l-.05-.24l.12-.72l-.14-.36l-.14-.13l-.24-.1z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%233a1e46%22%20fill-opacity%3D%22.13%22%20d%3D%22m7.6%2013.3l-3.4%202.5l-.3.5l-.1.5l.1.5l.3.3l3.5%202.7H8l.3-.3l.1-.3v-1l.2-.3l.4-.2h12.1l.8-.3l.5-.7v-.6l-.2-.6l-.4-.4l-.6-.3H9l-.4-.2l-.2-.3v-1l-.1-.4l-.4-.2zm.1.5h.2l-.1.7l.2.6l.4.5l.5.2h12.2l.7.4l.1.7l-.3.6l-.6.2H8.9l-.5.2l-.4.5l-.2.6l.1.7l-.1.1l-3.3-2.5l-.2-.5l.3-.6z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%233a1e46%22%20fill-opacity%3D%22.17%22%20d%3D%22m7.6%2013.3l-.2.1l.2.5l.4.3h.4v-.4l-.1-.4l-.4-.2zm13.9%202.2l-.1.6l-.2.5l-.4.3l-.6.2H8l-.6.5v.3l.1.8l-.2.3l-.3.2l-.5-.1l-2.6-1.9l.3.5l3.1%202.4l.6.2l.4-.2l.1-.3l-.1-.8l.1-.3l.6-.5l12.5-.1l.7-.6l.2-.8l-.3-.9l-.4-.3z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.34%22%20d%3D%22m7.8%2013.9l-3.4%202.6v.4l.2.3l1.2.9h.1l2.8-2.3l-.4-.2l-.4-.5l-.2-.6zm2.5%202l-.2.7l.1.3l.3.4l.4.2h10.5l.3-.2l.1-.5l-.2-.6l-.5-.3z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff9f0%22%20stroke-linecap%3D%22round%22%20stroke-opacity%3D%22.92%22%20stroke-width%3D%22.42%22%20d%3D%22M20.1%2016.8h-.8m-.7%200h-.7m-.7%200h-.8m-.7%200h-.8m-.7%200h-.7m-.7%200H12m-.7%200h-.8m-.7%200h-.7%22%20class%3D%22wm-a%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%2024%2024%22%3E%3Cpath%20fill%3D%22%233a1e46%22%20fill-opacity%3D%22.16%22%20d%3D%22m20.9%206.9l-.2%201l-.5.7l-3.5%202.7l-.7.1l-.6-.3l.2.6l.7.4l.7-.1l3.5-2.6l.4-.4l.3-.7l-.1-.7zM1.6%208.7V9l.5.6l.5.3l.6.1h11.7l.2-.5l-.3-.2H2.9l-.6-.1zm7.5%205l-.2.8l.2.2h.3v-.4zm14.1%202.8l-.5%201.4l-.4.5l-.7.3l-.5.1h-12L9%2019l.1.7l-.2.6l-.4.4l-.6.2l-.7-.2l-3.5-2.6l.5.7l3.1%202.4l.5.4h.5l.6-.2l.3-.4l.2-.6l-.1-.7l.2-.2h12l.6-.1l.8-.6l.4-.7l.1-.8z%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%234a2c3d%22%20d%3D%22m15.96%203.1l-.24.07l-.31.19l-.23.24l-.14.24l-.1.48l.11.72l-.17.14H3.12l-.48.04l-.36.09l-.48.26l-.24.21l-.28.34l-.2.36l-.13.48l-.02.36l.12.6l.24.48l.45.48l.54.31l.48.11l12.12.02l.17.16l-.11.72l.03.24l.07.24l.2.3l.24.22l.36.17l.36.04l.36-.07l.51-.3l3.21-2.49l.23-.27l.2-.36l.1-.36l.03-.36l-.05-.36l-.13-.36l-.22-.36l-.28-.28l-3.36-2.56l-.37-.16z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23f4695e%22%20d%3D%22m16.08%203.71l-.36.21l-.15.28l.1.84l-.07.3l-.24.28l-.36.17l-12.24.03l-.49.18l-.29.24l-.2.24l-.12.24l-.1.36l.06.6l.18.37l.33.35l.39.21l.36.08L15%208.71l.36.18l.27.35l.05.24l-.12.72l.06.24l.21.24l.13.07l.36.02l.36-.21l3.12-2.41l.34-.47l.08-.48l-.13-.48l-.29-.38l-3.24-2.48l-.24-.13z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%233a1e46%22%20fill-opacity%3D%22.13%22%20d%3D%22m16.1%203.7l-.4.2l-.1.3l.1.8l-.1.3l-.6.5H2.8l-.5.2l-.5.5l-.2.6v.6l.5.7l.8.3H15l.4.2l.2.3v1.2l.4.4h.3l3.5-2.6l.3-.5l.1-.5l-.1-.5l-.3-.4l-3.2-2.4zm0%20.6l.1-.1l.1.1l3.1%202.4l.3.5l-.3.6l-3.2%202.5l-.1-.1l.1-.7l-.2-.6l-.4-.5l-.5-.2H3L2.4%208l-.3-.6l.1-.7l.3-.3l.4-.1h12.2l.6-.3l.4-.5l.1-.5z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%233a1e46%22%20fill-opacity%3D%22.17%22%20d%3D%22m19.3%206l-.1.6l-.4.5l-3.1%202.4l-.1.7l.2.5l.4.1l.3-.1L20%207.9l.2-.5l-.1-.6l-.2-.3zM1.7%207.6v.3l.3.4l.9.4h11.6l.2-.1v-.2l-.2-.5l-.6-.3z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.34%22%20d%3D%22m16.2%204.4l.1.6l-.2.6l-.4.5l-.6.3H2.9l-.4.2l-.2.2l-.1.6l.3.5l.5.2h1.2l.7-.1l11.9-.1l.4-.1l.2-.4V6.2l.7-.4z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff9f0%22%20stroke-linecap%3D%22round%22%20stroke-opacity%3D%22.92%22%20stroke-width%3D%22.42%22%20d%3D%22M3.9%207.3h.8m.7%200h.7m.7%200h.8m.7%200h.8m.7%200h.7m.7%200h.8m.7%200h.8m.7%200h.8%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%234a2c3d%22%20d%3D%22m7.8%2012.59l-.36.07l-.48.28l-3.14%202.42l-.33.36l-.2.36l-.12.6l.11.72l.19.36l.25.29l3.19%202.47l.53.32l.36.07l.48-.08l.32-.19l.23-.24l.17-.35l.05-.25l-.1-.84l.17-.14l12.12-.02l.48-.11l.57-.33l.44-.48l.23-.48l.08-.36l.02-.48l-.21-.72l-.29-.44l-.3-.28l-.66-.34l-.72-.1H9.12l-.17-.16l.11-.72l-.03-.24l-.14-.36l-.19-.24l-.3-.23l-.36-.13z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%234c9fe6%22%20d%3D%22M7.56%2013.28L4.2%2015.85l-.34.47l-.07.48l.12.48l.27.36l3.12%202.4l.38.23l.36-.02l.28-.21l.12-.36l-.11-.72l.04-.24l.27-.34l.36-.17l12.12-.02l.36-.08l.41-.23l.31-.33l.18-.39l.06-.6l-.23-.6l-.37-.38l-.24-.14l-.36-.12L9%2015.29l-.36-.18l-.27-.35l-.05-.24l.12-.72l-.14-.36l-.14-.13l-.24-.1z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%233a1e46%22%20fill-opacity%3D%22.13%22%20d%3D%22m7.6%2013.3l-3.4%202.5l-.3.5l-.1.5l.1.5l.3.3l3.5%202.7H8l.3-.3l.1-.3v-1l.2-.3l.4-.2h12.1l.8-.3l.5-.7v-.6l-.2-.6l-.4-.4l-.6-.3H9l-.4-.2l-.2-.3v-1l-.1-.4l-.4-.2zm.1.5h.2l-.1.7l.2.6l.4.5l.5.2h12.2l.7.4l.1.7l-.3.6l-.6.2H8.9l-.5.2l-.4.5l-.2.6l.1.7l-.1.1l-3.3-2.5l-.2-.5l.3-.6z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%233a1e46%22%20fill-opacity%3D%22.17%22%20d%3D%22m7.6%2013.3l-.2.1l.2.5l.4.3h.4v-.4l-.1-.4l-.4-.2zm13.9%202.2l-.1.6l-.2.5l-.4.3l-.6.2H8l-.6.5v.3l.1.8l-.2.3l-.3.2l-.5-.1l-2.6-1.9l.3.5l3.1%202.4l.6.2l.4-.2l.1-.3l-.1-.8l.1-.3l.6-.5l12.5-.1l.7-.6l.2-.8l-.3-.9l-.4-.3z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.34%22%20d%3D%22m7.8%2013.9l-3.4%202.6v.4l.2.3l1.2.9h.1l2.8-2.3l-.4-.2l-.4-.5l-.2-.6zm2.5%202l-.2.7l.1.3l.3.4l.4.2h10.5l.3-.2l.1-.5l-.2-.6l-.5-.3z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff9f0%22%20stroke-linecap%3D%22round%22%20stroke-opacity%3D%22.92%22%20stroke-width%3D%22.42%22%20d%3D%22M20.1%2016.8h-.8m-.7%200h-.7m-.7%200h-.8m-.7%200h-.8m-.7%200h-.7m-.7%200H12m-.7%200h-.8m-.7%200h-.7%22%20class%3D%22wm-a%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 swap 加一点动效

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

swap 呼吸动效演示

呼吸

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

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

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

旋转

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

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

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

描画

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

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

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

SVG 健康报告

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

文件体积

3.63 KB

3,713 字节

viewBox

0 0 24 24

矢量坐标系

图元总数

13

<path> ×13

风格

多色填充

描边可随字号加粗

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

常见问题

关于 swap 图标的下载、商用与改色。

swap 图标是什么？▾

它是 with icons Plush（withicons-plush）开源图标集中的 swap 图标，多色填充，viewBox 为 0 0 24 24，文件仅 3.63 KB，矢量格式可无损缩放到任意尺寸。

如何下载 swap 图标？▾

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

swap 图标可以商用吗？▾

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

如何修改 swap 图标的颜色？▾

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