找找图标

alipay-outlined SVG 图标

ant-designalipay-outlined

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

图标 ID
ant-design:alipay-outlined
中文名
—
所属集合
Ant Design Icons
集合规模
848 枚
基础网格
16px
色彩
单色(可改色)
开源协议
MIT
作者
HeskeyBaozi

下载 alipay-outlined 图标

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

px

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

alipay-outlined 的预览与使用场景

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

预览颜色
alipay-outlined 图标 浅色背景预览浅色背景
alipay-outlined 图标 深色背景预览深色背景
alipay-outlined 图标 灰底融入预览灰底融入

在真实界面里长这样

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

各尺寸下的可读性

alipay-outlined 图标 24px 渲染24pxalipay-outlined 图标 32px 渲染32pxalipay-outlined 图标 48px 渲染48pxalipay-outlined 图标 64px 渲染64pxalipay-outlined 图标 96px 渲染96pxalipay-outlined 图标 128px 渲染128px

复制 alipay-outlined 图标代码

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

svgSVG 源码(内联 HTML)
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" fill-rule="evenodd" d="M557.208 129c3.69 0 6.715 2.952 6.715 6.648v114.55h243.802c3.742 0 6.636 3.111 6.649 6.847c.013 23.918-6.052 54.683-19.855 54.683H563.936v81.1h166.189c7.684 0 13.803 6.515 13.245 14.186l-.114 1.506c-.693 90.203-30.622 180.642-79.52 259.653l8.719 3.815c77.295 33.478 162.142 60.85 267.142 64.14c11.758.373 20.925 10.294 20.38 22.067l-.203 3.95C956.441 821.72 939.781 895 879.932 895c-8.805 0-17.288-.55-25.48-1.61c-78.043-9.254-156.284-57.05-236.322-110.267l-17.33-11.576l-13.15-8.825c-21.444 21.146-44.82 40.396-69.989 57.25c-6.193 4.013-12.734 7.703-19.573 11.076c-65.509 39.18-142.208 62.608-227.418 62.62c-118.203 0-204.921-77.972-206.644-175.9L64 714.815l.026-1.699c1.666-98.12 84.776-175.172 203.013-176.719l3.63-.023c102.924 0 186.663 33.532 270.481 73.137l.444.381l1.703-3.469c21.265-44.145 36.438-94.95 42.736-152.06l-324.798-.005a6.64 6.64 0 0 1-6.636-6.621c-.04-21.857 5.999-54.909 19.854-54.909h162.088v-81.1H191.93c-3.743 0-6.636-3.098-6.636-6.847c-.014-22.615 6.052-54.683 19.854-54.683h231.393v-64.853l.029-1.985c.908-30.931 23.72-54.36 120.638-54.36M256.896 619c-74.766 0-136.529 39.934-137.877 95.601L119 715.86l.079 3.241a92.6 92.6 0 0 0 1.584 13.643C140.92 829.238 340.818 862.454 485 696.15l-8.031-4.72C405.949 650.109 332.94 619 256.896 619"/></svg>
reactReact 组件(TSX)
export function AlipayOutlinedIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 1024 1024"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<path fill="currentColor" fill-rule="evenodd" d="M557.208 129c3.69 0 6.715 2.952 6.715 6.648v114.55h243.802c3.742 0 6.636 3.111 6.649 6.847c.013 23.918-6.052 54.683-19.855 54.683H563.936v81.1h166.189c7.684 0 13.803 6.515 13.245 14.186l-.114 1.506c-.693 90.203-30.622 180.642-79.52 259.653l8.719 3.815c77.295 33.478 162.142 60.85 267.142 64.14c11.758.373 20.925 10.294 20.38 22.067l-.203 3.95C956.441 821.72 939.781 895 879.932 895c-8.805 0-17.288-.55-25.48-1.61c-78.043-9.254-156.284-57.05-236.322-110.267l-17.33-11.576l-13.15-8.825c-21.444 21.146-44.82 40.396-69.989 57.25c-6.193 4.013-12.734 7.703-19.573 11.076c-65.509 39.18-142.208 62.608-227.418 62.62c-118.203 0-204.921-77.972-206.644-175.9L64 714.815l.026-1.699c1.666-98.12 84.776-175.172 203.013-176.719l3.63-.023c102.924 0 186.663 33.532 270.481 73.137l.444.381l1.703-3.469c21.265-44.145 36.438-94.95 42.736-152.06l-324.798-.005a6.64 6.64 0 0 1-6.636-6.621c-.04-21.857 5.999-54.909 19.854-54.909h162.088v-81.1H191.93c-3.743 0-6.636-3.098-6.636-6.847c-.014-22.615 6.052-54.683 19.854-54.683h231.393v-64.853l.029-1.985c.908-30.931 23.72-54.36 120.638-54.36M256.896 619c-74.766 0-136.529 39.934-137.877 95.601L119 715.86l.079 3.241a92.6 92.6 0 0 0 1.584 13.643C140.92 829.238 340.818 862.454 485 696.15l-8.031-4.72C405.949 650.109 332.94 619 256.896 619"/>` }}
    />
  );
}
vueVue 3 组件
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<path fill="currentColor" fill-rule="evenodd" d="M557.208 129c3.69 0 6.715 2.952 6.715 6.648v114.55h243.802c3.742 0 6.636 3.111 6.649 6.847c.013 23.918-6.052 54.683-19.855 54.683H563.936v81.1h166.189c7.684 0 13.803 6.515 13.245 14.186l-.114 1.506c-.693 90.203-30.622 180.642-79.52 259.653l8.719 3.815c77.295 33.478 162.142 60.85 267.142 64.14c11.758.373 20.925 10.294 20.38 22.067l-.203 3.95C956.441 821.72 939.781 895 879.932 895c-8.805 0-17.288-.55-25.48-1.61c-78.043-9.254-156.284-57.05-236.322-110.267l-17.33-11.576l-13.15-8.825c-21.444 21.146-44.82 40.396-69.989 57.25c-6.193 4.013-12.734 7.703-19.573 11.076c-65.509 39.18-142.208 62.608-227.418 62.62c-118.203 0-204.921-77.972-206.644-175.9L64 714.815l.026-1.699c1.666-98.12 84.776-175.172 203.013-176.719l3.63-.023c102.924 0 186.663 33.532 270.481 73.137l.444.381l1.703-3.469c21.265-44.145 36.438-94.95 42.736-152.06l-324.798-.005a6.64 6.64 0 0 1-6.636-6.621c-.04-21.857 5.999-54.909 19.854-54.909h162.088v-81.1H191.93c-3.743 0-6.636-3.098-6.636-6.847c-.014-22.615 6.052-54.683 19.854-54.683h231.393v-64.853l.029-1.985c.908-30.931 23.72-54.36 120.638-54.36M256.896 619c-74.766 0-136.529 39.934-137.877 95.601L119 715.86l.079 3.241a92.6 92.6 0 0 0 1.584 13.643C140.92 829.238 340.818 862.454 485 696.15l-8.031-4.72C405.949 650.109 332.94 619 256.896 619"/>`;
</script>
cssCSS mask(随 currentColor 改色)
.alipay-outlined {
  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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M557.208%20129c3.69%200%206.715%202.952%206.715%206.648v114.55h243.802c3.742%200%206.636%203.111%206.649%206.847c.013%2023.918-6.052%2054.683-19.855%2054.683H563.936v81.1h166.189c7.684%200%2013.803%206.515%2013.245%2014.186l-.114%201.506c-.693%2090.203-30.622%20180.642-79.52%20259.653l8.719%203.815c77.295%2033.478%20162.142%2060.85%20267.142%2064.14c11.758.373%2020.925%2010.294%2020.38%2022.067l-.203%203.95C956.441%20821.72%20939.781%20895%20879.932%20895c-8.805%200-17.288-.55-25.48-1.61c-78.043-9.254-156.284-57.05-236.322-110.267l-17.33-11.576l-13.15-8.825c-21.444%2021.146-44.82%2040.396-69.989%2057.25c-6.193%204.013-12.734%207.703-19.573%2011.076c-65.509%2039.18-142.208%2062.608-227.418%2062.62c-118.203%200-204.921-77.972-206.644-175.9L64%20714.815l.026-1.699c1.666-98.12%2084.776-175.172%20203.013-176.719l3.63-.023c102.924%200%20186.663%2033.532%20270.481%2073.137l.444.381l1.703-3.469c21.265-44.145%2036.438-94.95%2042.736-152.06l-324.798-.005a6.64%206.64%200%200%201-6.636-6.621c-.04-21.857%205.999-54.909%2019.854-54.909h162.088v-81.1H191.93c-3.743%200-6.636-3.098-6.636-6.847c-.014-22.615%206.052-54.683%2019.854-54.683h231.393v-64.853l.029-1.985c.908-30.931%2023.72-54.36%20120.638-54.36M256.896%20619c-74.766%200-136.529%2039.934-137.877%2095.601L119%20715.86l.079%203.241a92.6%2092.6%200%200%200%201.584%2013.643C140.92%20829.238%20340.818%20862.454%20485%20696.15l-8.031-4.72C405.949%20650.109%20332.94%20619%20256.896%20619%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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M557.208%20129c3.69%200%206.715%202.952%206.715%206.648v114.55h243.802c3.742%200%206.636%203.111%206.649%206.847c.013%2023.918-6.052%2054.683-19.855%2054.683H563.936v81.1h166.189c7.684%200%2013.803%206.515%2013.245%2014.186l-.114%201.506c-.693%2090.203-30.622%20180.642-79.52%20259.653l8.719%203.815c77.295%2033.478%20162.142%2060.85%20267.142%2064.14c11.758.373%2020.925%2010.294%2020.38%2022.067l-.203%203.95C956.441%20821.72%20939.781%20895%20879.932%20895c-8.805%200-17.288-.55-25.48-1.61c-78.043-9.254-156.284-57.05-236.322-110.267l-17.33-11.576l-13.15-8.825c-21.444%2021.146-44.82%2040.396-69.989%2057.25c-6.193%204.013-12.734%207.703-19.573%2011.076c-65.509%2039.18-142.208%2062.608-227.418%2062.62c-118.203%200-204.921-77.972-206.644-175.9L64%20714.815l.026-1.699c1.666-98.12%2084.776-175.172%20203.013-176.719l3.63-.023c102.924%200%20186.663%2033.532%20270.481%2073.137l.444.381l1.703-3.469c21.265-44.145%2036.438-94.95%2042.736-152.06l-324.798-.005a6.64%206.64%200%200%201-6.636-6.621c-.04-21.857%205.999-54.909%2019.854-54.909h162.088v-81.1H191.93c-3.743%200-6.636-3.098-6.636-6.847c-.014-22.615%206.052-54.683%2019.854-54.683h231.393v-64.853l.029-1.985c.908-30.931%2023.72-54.36%20120.638-54.36M256.896%20619c-74.766%200-136.529%2039.934-137.877%2095.601L119%20715.86l.079%203.241a92.6%2092.6%200%200%200%201.584%2013.643C140.92%20829.238%20340.818%20862.454%20485%20696.15l-8.031-4.72C405.949%20650.109%20332.94%20619%20256.896%20619%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 alipay-outlined 加一点动效

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

alipay-outlined 呼吸动效演示

呼吸

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

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

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

旋转

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

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

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

SVG 健康报告

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

文件体积

1.37 KB

1,407 字节

viewBox

0 0 1024 1024

矢量坐标系

图元总数

1

<path> ×1

风格

单色(跟随 currentColor)

填充跟随容器颜色

同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 1.37 KB(1,407 字节),图元 1 个,风格为单色(跟随 currentColor)。

常见问题

关于 alipay-outlined 图标的下载、商用与改色。

alipay-outlined 图标是什么?▾

它是 Ant Design Icons(ant-design)开源图标集中的 alipay-outlined 图标,单色(跟随 currentColor),viewBox 为 0 0 1024 1024,文件仅 1.37 KB,矢量格式可无损缩放到任意尺寸。

如何下载 alipay-outlined 图标?▾

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

alipay-outlined 图标可以商用吗?▾

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

如何修改 alipay-outlined 图标的颜色?▾

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

Ant Design Icons 中的相近图标

alipay-circle-filled
alipay-circle-outlined
alipay-square-filled