找找图标

alipay-square-filled SVG 图标

ant-designalipay-square-filled

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

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

下载 alipay-square-filled 图标

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

px

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

alipay-square-filled 的预览与使用场景

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

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

在真实界面里长这样

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

各尺寸下的可读性

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

复制 alipay-square-filled 图标代码

内联 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="M894.606 116.541c5.541 2.963 9.89 7.312 12.853 12.853S912 140.43 912 155.586v712.828c0 15.156-1.578 20.652-4.541 26.192c-2.963 5.541-7.312 9.89-12.853 12.853S883.57 912 868.414 912H155.586c-15.156 0-20.652-1.578-26.192-4.541c-5.541-2.963-9.89-7.312-12.853-12.853c-2.923-5.465-4.498-10.888-4.54-25.583L112 155.586c0-15.156 1.578-20.652 4.541-26.192c2.963-5.541 7.312-9.89 12.853-12.853c5.465-2.923 10.888-4.498 25.583-4.54L868.414 112c15.156 0 20.652 1.578 26.192 4.541M541.012 262c-62.197 0-76.836 15.038-77.419 34.892l-.018 1.274v41.627H315.08c-8.858 0-12.75 20.583-12.742 35.098c0 2.407 1.857 4.395 4.259 4.395h156.977v52.055H359.556c-8.891 0-12.767 21.215-12.741 35.244a4.26 4.26 0 0 0 4.259 4.25l208.436.003c-4.042 36.657-13.779 69.267-27.425 97.602l-1.093 2.227l-.285-.245c-53.79-25.421-107.528-46.944-173.578-46.944l-2.33.015c-75.878.993-129.213 50.449-130.283 113.43l-.016 1.09l.017 1.895c1.105 62.856 56.756 112.904 132.612 112.904c54.682-.008 103.903-15.046 145.943-40.194a124 124 0 0 0 12.561-7.109c16.152-10.818 31.153-23.174 44.914-36.746l8.44 5.664l11.12 7.43c51.365 34.158 101.575 64.836 151.658 70.776a127 127 0 0 0 16.352 1.034c38.408 0 49.1-47.036 51.238-85.275l.13-2.536c.35-7.556-5.533-13.924-13.079-14.163c-67.382-2.111-121.832-19.681-171.436-41.17l-5.595-2.448c31.38-50.714 50.587-108.764 51.032-166.662l.073-.966c.357-4.924-3.569-9.106-8.5-9.106H545.33v-52.055h147.974c8.858 0 12.75-19.747 12.742-35.099c-.009-2.398-1.865-4.394-4.267-4.394H545.32v-73.526c0-2.373-1.942-4.267-4.31-4.267M347.707 576.149c48.775 0 95.602 20.015 141.153 46.6l5.152 3.036c-92.478 106.997-220.69 85.627-233.683 23.545a60 60 0 0 1-1.016-8.778l-.05-2.085l.011-.81c.865-35.815 40.48-61.508 88.433-61.508"/></svg>
reactReact 组件(TSX)
export function AlipaySquareFilledIcon(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="M894.606 116.541c5.541 2.963 9.89 7.312 12.853 12.853S912 140.43 912 155.586v712.828c0 15.156-1.578 20.652-4.541 26.192c-2.963 5.541-7.312 9.89-12.853 12.853S883.57 912 868.414 912H155.586c-15.156 0-20.652-1.578-26.192-4.541c-5.541-2.963-9.89-7.312-12.853-12.853c-2.923-5.465-4.498-10.888-4.54-25.583L112 155.586c0-15.156 1.578-20.652 4.541-26.192c2.963-5.541 7.312-9.89 12.853-12.853c5.465-2.923 10.888-4.498 25.583-4.54L868.414 112c15.156 0 20.652 1.578 26.192 4.541M541.012 262c-62.197 0-76.836 15.038-77.419 34.892l-.018 1.274v41.627H315.08c-8.858 0-12.75 20.583-12.742 35.098c0 2.407 1.857 4.395 4.259 4.395h156.977v52.055H359.556c-8.891 0-12.767 21.215-12.741 35.244a4.26 4.26 0 0 0 4.259 4.25l208.436.003c-4.042 36.657-13.779 69.267-27.425 97.602l-1.093 2.227l-.285-.245c-53.79-25.421-107.528-46.944-173.578-46.944l-2.33.015c-75.878.993-129.213 50.449-130.283 113.43l-.016 1.09l.017 1.895c1.105 62.856 56.756 112.904 132.612 112.904c54.682-.008 103.903-15.046 145.943-40.194a124 124 0 0 0 12.561-7.109c16.152-10.818 31.153-23.174 44.914-36.746l8.44 5.664l11.12 7.43c51.365 34.158 101.575 64.836 151.658 70.776a127 127 0 0 0 16.352 1.034c38.408 0 49.1-47.036 51.238-85.275l.13-2.536c.35-7.556-5.533-13.924-13.079-14.163c-67.382-2.111-121.832-19.681-171.436-41.17l-5.595-2.448c31.38-50.714 50.587-108.764 51.032-166.662l.073-.966c.357-4.924-3.569-9.106-8.5-9.106H545.33v-52.055h147.974c8.858 0 12.75-19.747 12.742-35.099c-.009-2.398-1.865-4.394-4.267-4.394H545.32v-73.526c0-2.373-1.942-4.267-4.31-4.267M347.707 576.149c48.775 0 95.602 20.015 141.153 46.6l5.152 3.036c-92.478 106.997-220.69 85.627-233.683 23.545a60 60 0 0 1-1.016-8.778l-.05-2.085l.011-.81c.865-35.815 40.48-61.508 88.433-61.508"/>` }}
    />
  );
}
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="M894.606 116.541c5.541 2.963 9.89 7.312 12.853 12.853S912 140.43 912 155.586v712.828c0 15.156-1.578 20.652-4.541 26.192c-2.963 5.541-7.312 9.89-12.853 12.853S883.57 912 868.414 912H155.586c-15.156 0-20.652-1.578-26.192-4.541c-5.541-2.963-9.89-7.312-12.853-12.853c-2.923-5.465-4.498-10.888-4.54-25.583L112 155.586c0-15.156 1.578-20.652 4.541-26.192c2.963-5.541 7.312-9.89 12.853-12.853c5.465-2.923 10.888-4.498 25.583-4.54L868.414 112c15.156 0 20.652 1.578 26.192 4.541M541.012 262c-62.197 0-76.836 15.038-77.419 34.892l-.018 1.274v41.627H315.08c-8.858 0-12.75 20.583-12.742 35.098c0 2.407 1.857 4.395 4.259 4.395h156.977v52.055H359.556c-8.891 0-12.767 21.215-12.741 35.244a4.26 4.26 0 0 0 4.259 4.25l208.436.003c-4.042 36.657-13.779 69.267-27.425 97.602l-1.093 2.227l-.285-.245c-53.79-25.421-107.528-46.944-173.578-46.944l-2.33.015c-75.878.993-129.213 50.449-130.283 113.43l-.016 1.09l.017 1.895c1.105 62.856 56.756 112.904 132.612 112.904c54.682-.008 103.903-15.046 145.943-40.194a124 124 0 0 0 12.561-7.109c16.152-10.818 31.153-23.174 44.914-36.746l8.44 5.664l11.12 7.43c51.365 34.158 101.575 64.836 151.658 70.776a127 127 0 0 0 16.352 1.034c38.408 0 49.1-47.036 51.238-85.275l.13-2.536c.35-7.556-5.533-13.924-13.079-14.163c-67.382-2.111-121.832-19.681-171.436-41.17l-5.595-2.448c31.38-50.714 50.587-108.764 51.032-166.662l.073-.966c.357-4.924-3.569-9.106-8.5-9.106H545.33v-52.055h147.974c8.858 0 12.75-19.747 12.742-35.099c-.009-2.398-1.865-4.394-4.267-4.394H545.32v-73.526c0-2.373-1.942-4.267-4.31-4.267M347.707 576.149c48.775 0 95.602 20.015 141.153 46.6l5.152 3.036c-92.478 106.997-220.69 85.627-233.683 23.545a60 60 0 0 1-1.016-8.778l-.05-2.085l.011-.81c.865-35.815 40.48-61.508 88.433-61.508"/>`;
</script>
cssCSS mask(随 currentColor 改色)
.alipay-square-filled {
  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%22M894.606%20116.541c5.541%202.963%209.89%207.312%2012.853%2012.853S912%20140.43%20912%20155.586v712.828c0%2015.156-1.578%2020.652-4.541%2026.192c-2.963%205.541-7.312%209.89-12.853%2012.853S883.57%20912%20868.414%20912H155.586c-15.156%200-20.652-1.578-26.192-4.541c-5.541-2.963-9.89-7.312-12.853-12.853c-2.923-5.465-4.498-10.888-4.54-25.583L112%20155.586c0-15.156%201.578-20.652%204.541-26.192c2.963-5.541%207.312-9.89%2012.853-12.853c5.465-2.923%2010.888-4.498%2025.583-4.54L868.414%20112c15.156%200%2020.652%201.578%2026.192%204.541M541.012%20262c-62.197%200-76.836%2015.038-77.419%2034.892l-.018%201.274v41.627H315.08c-8.858%200-12.75%2020.583-12.742%2035.098c0%202.407%201.857%204.395%204.259%204.395h156.977v52.055H359.556c-8.891%200-12.767%2021.215-12.741%2035.244a4.26%204.26%200%200%200%204.259%204.25l208.436.003c-4.042%2036.657-13.779%2069.267-27.425%2097.602l-1.093%202.227l-.285-.245c-53.79-25.421-107.528-46.944-173.578-46.944l-2.33.015c-75.878.993-129.213%2050.449-130.283%20113.43l-.016%201.09l.017%201.895c1.105%2062.856%2056.756%20112.904%20132.612%20112.904c54.682-.008%20103.903-15.046%20145.943-40.194a124%20124%200%200%200%2012.561-7.109c16.152-10.818%2031.153-23.174%2044.914-36.746l8.44%205.664l11.12%207.43c51.365%2034.158%20101.575%2064.836%20151.658%2070.776a127%20127%200%200%200%2016.352%201.034c38.408%200%2049.1-47.036%2051.238-85.275l.13-2.536c.35-7.556-5.533-13.924-13.079-14.163c-67.382-2.111-121.832-19.681-171.436-41.17l-5.595-2.448c31.38-50.714%2050.587-108.764%2051.032-166.662l.073-.966c.357-4.924-3.569-9.106-8.5-9.106H545.33v-52.055h147.974c8.858%200%2012.75-19.747%2012.742-35.099c-.009-2.398-1.865-4.394-4.267-4.394H545.32v-73.526c0-2.373-1.942-4.267-4.31-4.267M347.707%20576.149c48.775%200%2095.602%2020.015%20141.153%2046.6l5.152%203.036c-92.478%20106.997-220.69%2085.627-233.683%2023.545a60%2060%200%200%201-1.016-8.778l-.05-2.085l.011-.81c.865-35.815%2040.48-61.508%2088.433-61.508%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%22M894.606%20116.541c5.541%202.963%209.89%207.312%2012.853%2012.853S912%20140.43%20912%20155.586v712.828c0%2015.156-1.578%2020.652-4.541%2026.192c-2.963%205.541-7.312%209.89-12.853%2012.853S883.57%20912%20868.414%20912H155.586c-15.156%200-20.652-1.578-26.192-4.541c-5.541-2.963-9.89-7.312-12.853-12.853c-2.923-5.465-4.498-10.888-4.54-25.583L112%20155.586c0-15.156%201.578-20.652%204.541-26.192c2.963-5.541%207.312-9.89%2012.853-12.853c5.465-2.923%2010.888-4.498%2025.583-4.54L868.414%20112c15.156%200%2020.652%201.578%2026.192%204.541M541.012%20262c-62.197%200-76.836%2015.038-77.419%2034.892l-.018%201.274v41.627H315.08c-8.858%200-12.75%2020.583-12.742%2035.098c0%202.407%201.857%204.395%204.259%204.395h156.977v52.055H359.556c-8.891%200-12.767%2021.215-12.741%2035.244a4.26%204.26%200%200%200%204.259%204.25l208.436.003c-4.042%2036.657-13.779%2069.267-27.425%2097.602l-1.093%202.227l-.285-.245c-53.79-25.421-107.528-46.944-173.578-46.944l-2.33.015c-75.878.993-129.213%2050.449-130.283%20113.43l-.016%201.09l.017%201.895c1.105%2062.856%2056.756%20112.904%20132.612%20112.904c54.682-.008%20103.903-15.046%20145.943-40.194a124%20124%200%200%200%2012.561-7.109c16.152-10.818%2031.153-23.174%2044.914-36.746l8.44%205.664l11.12%207.43c51.365%2034.158%20101.575%2064.836%20151.658%2070.776a127%20127%200%200%200%2016.352%201.034c38.408%200%2049.1-47.036%2051.238-85.275l.13-2.536c.35-7.556-5.533-13.924-13.079-14.163c-67.382-2.111-121.832-19.681-171.436-41.17l-5.595-2.448c31.38-50.714%2050.587-108.764%2051.032-166.662l.073-.966c.357-4.924-3.569-9.106-8.5-9.106H545.33v-52.055h147.974c8.858%200%2012.75-19.747%2012.742-35.099c-.009-2.398-1.865-4.394-4.267-4.394H545.32v-73.526c0-2.373-1.942-4.267-4.31-4.267M347.707%20576.149c48.775%200%2095.602%2020.015%20141.153%2046.6l5.152%203.036c-92.478%20106.997-220.69%2085.627-233.683%2023.545a60%2060%200%200%201-1.016-8.778l-.05-2.085l.011-.81c.865-35.815%2040.48-61.508%2088.433-61.508%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 alipay-square-filled 加一点动效

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

alipay-square-filled 呼吸动效演示

呼吸

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

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

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

旋转

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

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

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

SVG 健康报告

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

文件体积

1.80 KB

1,846 字节

viewBox

0 0 1024 1024

矢量坐标系

图元总数

1

<path> ×1

风格

单色(跟随 currentColor)

填充跟随容器颜色

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

常见问题

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

alipay-square-filled 图标是什么?▾

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

如何下载 alipay-square-filled 图标?▾

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

alipay-square-filled 图标可以商用吗?▾

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

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

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

Ant Design Icons 中的相近图标

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