找找图标

taobao SVG 图标

icon-park-outlinetaobao

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

图标 ID
icon-park-outline:taobao
中文名
—
所属集合
IconPark Outline
集合规模
2,658 枚
基础网格
24px
色彩
单色(可改色)
开源协议
Apache-2.0
作者
ByteDance

下载 taobao 图标

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

px

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

taobao 的预览与使用场景

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

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

在真实界面里长这样

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

各尺寸下的可读性

taobao 图标 24px 渲染24pxtaobao 图标 32px 渲染32pxtaobao 图标 48px 渲染48pxtaobao 图标 64px 渲染64pxtaobao 图标 96px 渲染96pxtaobao 图标 128px 渲染128px

复制 taobao 图标代码

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

svgSVG 源码(内联 HTML)
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48S0 37.255 0 24S10.745 0 24 0m0 4.364C13.155 4.364 4.364 13.155 4.364 24S13.155 43.636 24 43.636S43.636 34.845 43.636 24S34.845 4.364 24 4.364m-4.873 7.254l3.636.745q-.15 1.05-.709 2.375a22 22 0 0 1 3.412-.946c2.387-.447 4.242-.701 6.081-.701s3.254.019 5.05 1.435q1.674 1.323 2.06 3.479l.049.312V30.99q0 1.27-.677 2.62q-.634 1.267-2.44 1.432l-.247.017h-7.54q-.723-2.113 0-2.495c.724-.382 3.503.642 4.724 0q1.14-.6 1.16-2.233l-.003-.239v-11.96c0-1.853-1.133-3.133-4.625-2.943q-2.843.155-6.639 1.412l.822.25l.992.338v.325c0 .552.41 1.01.944 1.082l.125.009l7.298.14v2.01h-5.455v2.498H32.6v1.553h-5.515l.06 4.874a2.9 2.9 0 0 0 1.521-.314a1.86 1.86 0 0 0 .787-.724l-.364-.72l-.001-.002a1.09 1.09 0 0 1 .373-1.401l.11-.064l1.254-.631a1.09 1.09 0 0 1 1.482.52l.046.118l.743 2.294a1.09 1.09 0 0 1-.398 1.22l-.109.07l-.9.5l-.038.02a1.09 1.09 0 0 1-1.402-.37l-.064-.11l-.014-.023q-.828.898-1.568 1.377c-.816.528-1.697.958-2.713 1.027l-.28.009h-5.255c-.426 0-1.198-.277-1.992-1.036q-.728-.696-.884-2.172l-.024-.275v-2.741h4.156q.05 1.779.333 2.741q.264.9 1.398.718l.167-.031v-4.874h-6.055v-1.553h6.055v-2.499H22.35l-1.835 2.296l-1.999-1.264q1.845-2.078 2.255-2.691q.412-.614 0-2.114l.047.182l-.041.017q-1.062 1.605-2.812 3.11l-.383.323l-2.506-2.476q1.71-1.33 2.506-2.473q.794-1.142 1.544-4.046m-7.695 6.17l3.576 3.362a4.36 4.36 0 0 1 1.085 4.745l-.089.214l-3.71 8.308l-4.087-2.84l5.202-5.51a2.18 2.18 0 0 0-.181-3.166l-.142-.11l-3.714-2.638zm2.204-6.879a2.727 2.727 0 1 1 0 5.455a2.727 2.727 0 0 1 0-5.455"/></svg>
reactReact 组件(TSX)
export function TaobaoIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 48 48"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<path fill="currentColor" d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48S0 37.255 0 24S10.745 0 24 0m0 4.364C13.155 4.364 4.364 13.155 4.364 24S13.155 43.636 24 43.636S43.636 34.845 43.636 24S34.845 4.364 24 4.364m-4.873 7.254l3.636.745q-.15 1.05-.709 2.375a22 22 0 0 1 3.412-.946c2.387-.447 4.242-.701 6.081-.701s3.254.019 5.05 1.435q1.674 1.323 2.06 3.479l.049.312V30.99q0 1.27-.677 2.62q-.634 1.267-2.44 1.432l-.247.017h-7.54q-.723-2.113 0-2.495c.724-.382 3.503.642 4.724 0q1.14-.6 1.16-2.233l-.003-.239v-11.96c0-1.853-1.133-3.133-4.625-2.943q-2.843.155-6.639 1.412l.822.25l.992.338v.325c0 .552.41 1.01.944 1.082l.125.009l7.298.14v2.01h-5.455v2.498H32.6v1.553h-5.515l.06 4.874a2.9 2.9 0 0 0 1.521-.314a1.86 1.86 0 0 0 .787-.724l-.364-.72l-.001-.002a1.09 1.09 0 0 1 .373-1.401l.11-.064l1.254-.631a1.09 1.09 0 0 1 1.482.52l.046.118l.743 2.294a1.09 1.09 0 0 1-.398 1.22l-.109.07l-.9.5l-.038.02a1.09 1.09 0 0 1-1.402-.37l-.064-.11l-.014-.023q-.828.898-1.568 1.377c-.816.528-1.697.958-2.713 1.027l-.28.009h-5.255c-.426 0-1.198-.277-1.992-1.036q-.728-.696-.884-2.172l-.024-.275v-2.741h4.156q.05 1.779.333 2.741q.264.9 1.398.718l.167-.031v-4.874h-6.055v-1.553h6.055v-2.499H22.35l-1.835 2.296l-1.999-1.264q1.845-2.078 2.255-2.691q.412-.614 0-2.114l.047.182l-.041.017q-1.062 1.605-2.812 3.11l-.383.323l-2.506-2.476q1.71-1.33 2.506-2.473q.794-1.142 1.544-4.046m-7.695 6.17l3.576 3.362a4.36 4.36 0 0 1 1.085 4.745l-.089.214l-3.71 8.308l-4.087-2.84l5.202-5.51a2.18 2.18 0 0 0-.181-3.166l-.142-.11l-3.714-2.638zm2.204-6.879a2.727 2.727 0 1 1 0 5.455a2.727 2.727 0 0 1 0-5.455"/>` }}
    />
  );
}
vueVue 3 组件
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<path fill="currentColor" d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48S0 37.255 0 24S10.745 0 24 0m0 4.364C13.155 4.364 4.364 13.155 4.364 24S13.155 43.636 24 43.636S43.636 34.845 43.636 24S34.845 4.364 24 4.364m-4.873 7.254l3.636.745q-.15 1.05-.709 2.375a22 22 0 0 1 3.412-.946c2.387-.447 4.242-.701 6.081-.701s3.254.019 5.05 1.435q1.674 1.323 2.06 3.479l.049.312V30.99q0 1.27-.677 2.62q-.634 1.267-2.44 1.432l-.247.017h-7.54q-.723-2.113 0-2.495c.724-.382 3.503.642 4.724 0q1.14-.6 1.16-2.233l-.003-.239v-11.96c0-1.853-1.133-3.133-4.625-2.943q-2.843.155-6.639 1.412l.822.25l.992.338v.325c0 .552.41 1.01.944 1.082l.125.009l7.298.14v2.01h-5.455v2.498H32.6v1.553h-5.515l.06 4.874a2.9 2.9 0 0 0 1.521-.314a1.86 1.86 0 0 0 .787-.724l-.364-.72l-.001-.002a1.09 1.09 0 0 1 .373-1.401l.11-.064l1.254-.631a1.09 1.09 0 0 1 1.482.52l.046.118l.743 2.294a1.09 1.09 0 0 1-.398 1.22l-.109.07l-.9.5l-.038.02a1.09 1.09 0 0 1-1.402-.37l-.064-.11l-.014-.023q-.828.898-1.568 1.377c-.816.528-1.697.958-2.713 1.027l-.28.009h-5.255c-.426 0-1.198-.277-1.992-1.036q-.728-.696-.884-2.172l-.024-.275v-2.741h4.156q.05 1.779.333 2.741q.264.9 1.398.718l.167-.031v-4.874h-6.055v-1.553h6.055v-2.499H22.35l-1.835 2.296l-1.999-1.264q1.845-2.078 2.255-2.691q.412-.614 0-2.114l.047.182l-.041.017q-1.062 1.605-2.812 3.11l-.383.323l-2.506-2.476q1.71-1.33 2.506-2.473q.794-1.142 1.544-4.046m-7.695 6.17l3.576 3.362a4.36 4.36 0 0 1 1.085 4.745l-.089.214l-3.71 8.308l-4.087-2.84l5.202-5.51a2.18 2.18 0 0 0-.181-3.166l-.142-.11l-3.714-2.638zm2.204-6.879a2.727 2.727 0 1 1 0 5.455a2.727 2.727 0 0 1 0-5.455"/>`;
</script>
cssCSS mask(随 currentColor 改色)
.taobao {
  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%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M24%200c13.255%200%2024%2010.745%2024%2024S37.255%2048%2024%2048S0%2037.255%200%2024S10.745%200%2024%200m0%204.364C13.155%204.364%204.364%2013.155%204.364%2024S13.155%2043.636%2024%2043.636S43.636%2034.845%2043.636%2024S34.845%204.364%2024%204.364m-4.873%207.254l3.636.745q-.15%201.05-.709%202.375a22%2022%200%200%201%203.412-.946c2.387-.447%204.242-.701%206.081-.701s3.254.019%205.05%201.435q1.674%201.323%202.06%203.479l.049.312V30.99q0%201.27-.677%202.62q-.634%201.267-2.44%201.432l-.247.017h-7.54q-.723-2.113%200-2.495c.724-.382%203.503.642%204.724%200q1.14-.6%201.16-2.233l-.003-.239v-11.96c0-1.853-1.133-3.133-4.625-2.943q-2.843.155-6.639%201.412l.822.25l.992.338v.325c0%20.552.41%201.01.944%201.082l.125.009l7.298.14v2.01h-5.455v2.498H32.6v1.553h-5.515l.06%204.874a2.9%202.9%200%200%200%201.521-.314a1.86%201.86%200%200%200%20.787-.724l-.364-.72l-.001-.002a1.09%201.09%200%200%201%20.373-1.401l.11-.064l1.254-.631a1.09%201.09%200%200%201%201.482.52l.046.118l.743%202.294a1.09%201.09%200%200%201-.398%201.22l-.109.07l-.9.5l-.038.02a1.09%201.09%200%200%201-1.402-.37l-.064-.11l-.014-.023q-.828.898-1.568%201.377c-.816.528-1.697.958-2.713%201.027l-.28.009h-5.255c-.426%200-1.198-.277-1.992-1.036q-.728-.696-.884-2.172l-.024-.275v-2.741h4.156q.05%201.779.333%202.741q.264.9%201.398.718l.167-.031v-4.874h-6.055v-1.553h6.055v-2.499H22.35l-1.835%202.296l-1.999-1.264q1.845-2.078%202.255-2.691q.412-.614%200-2.114l.047.182l-.041.017q-1.062%201.605-2.812%203.11l-.383.323l-2.506-2.476q1.71-1.33%202.506-2.473q.794-1.142%201.544-4.046m-7.695%206.17l3.576%203.362a4.36%204.36%200%200%201%201.085%204.745l-.089.214l-3.71%208.308l-4.087-2.84l5.202-5.51a2.18%202.18%200%200%200-.181-3.166l-.142-.11l-3.714-2.638zm2.204-6.879a2.727%202.727%200%201%201%200%205.455a2.727%202.727%200%200%201%200-5.455%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%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M24%200c13.255%200%2024%2010.745%2024%2024S37.255%2048%2024%2048S0%2037.255%200%2024S10.745%200%2024%200m0%204.364C13.155%204.364%204.364%2013.155%204.364%2024S13.155%2043.636%2024%2043.636S43.636%2034.845%2043.636%2024S34.845%204.364%2024%204.364m-4.873%207.254l3.636.745q-.15%201.05-.709%202.375a22%2022%200%200%201%203.412-.946c2.387-.447%204.242-.701%206.081-.701s3.254.019%205.05%201.435q1.674%201.323%202.06%203.479l.049.312V30.99q0%201.27-.677%202.62q-.634%201.267-2.44%201.432l-.247.017h-7.54q-.723-2.113%200-2.495c.724-.382%203.503.642%204.724%200q1.14-.6%201.16-2.233l-.003-.239v-11.96c0-1.853-1.133-3.133-4.625-2.943q-2.843.155-6.639%201.412l.822.25l.992.338v.325c0%20.552.41%201.01.944%201.082l.125.009l7.298.14v2.01h-5.455v2.498H32.6v1.553h-5.515l.06%204.874a2.9%202.9%200%200%200%201.521-.314a1.86%201.86%200%200%200%20.787-.724l-.364-.72l-.001-.002a1.09%201.09%200%200%201%20.373-1.401l.11-.064l1.254-.631a1.09%201.09%200%200%201%201.482.52l.046.118l.743%202.294a1.09%201.09%200%200%201-.398%201.22l-.109.07l-.9.5l-.038.02a1.09%201.09%200%200%201-1.402-.37l-.064-.11l-.014-.023q-.828.898-1.568%201.377c-.816.528-1.697.958-2.713%201.027l-.28.009h-5.255c-.426%200-1.198-.277-1.992-1.036q-.728-.696-.884-2.172l-.024-.275v-2.741h4.156q.05%201.779.333%202.741q.264.9%201.398.718l.167-.031v-4.874h-6.055v-1.553h6.055v-2.499H22.35l-1.835%202.296l-1.999-1.264q1.845-2.078%202.255-2.691q.412-.614%200-2.114l.047.182l-.041.017q-1.062%201.605-2.812%203.11l-.383.323l-2.506-2.476q1.71-1.33%202.506-2.473q.794-1.142%201.544-4.046m-7.695%206.17l3.576%203.362a4.36%204.36%200%200%201%201.085%204.745l-.089.214l-3.71%208.308l-4.087-2.84l5.202-5.51a2.18%202.18%200%200%200-.181-3.166l-.142-.11l-3.714-2.638zm2.204-6.879a2.727%202.727%200%201%201%200%205.455a2.727%202.727%200%200%201%200-5.455%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 taobao 加一点动效

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

taobao 呼吸动效演示

呼吸

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

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

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

旋转

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

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

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

SVG 健康报告

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

文件体积

1.62 KB

1,662 字节

viewBox

0 0 48 48

矢量坐标系

图元总数

1

<path> ×1

风格

单色(跟随 currentColor)

填充跟随容器颜色

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

常见问题

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

taobao 图标是什么?▾

它是 IconPark Outline(icon-park-outline)开源图标集中的 taobao 图标,单色(跟随 currentColor),viewBox 为 0 0 48 48,文件仅 1.62 KB,矢量格式可无损缩放到任意尺寸。

如何下载 taobao 图标?▾

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

taobao 图标可以商用吗?▾

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

如何修改 taobao 图标的颜色?▾

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