找找图标
pig 图标

pig SVG 图标

keyline-iconspig

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

图标 ID
keyline-icons:pig
中文名
—
所属集合
Keyline Icons
集合规模
13,232 枚
基础网格
24px
色彩
单色（可改色）
开源协议
MIT
作者
Keyline Icons

下载 pig 图标

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

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

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

pig 的预览与使用场景

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

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

在真实界面里长这样

继续按钮内 · 主操作
搜索pig…输入框 · 前缀图标
pig导航菜单 · 选中态
暂无内容空状态 · 引导提示
9:41pig App 图标pigpig-duotonepig-fillpig-sharppig-sharp-duotonepig-sharp-fillpig-sharp-two-tonepig-two-tonepiggy-bankpiggy-bank-duotonepiggy-bank-fillpiggy-bank-sharp手机桌面 · App 图标
pigkeyline-icons.design/icons/pig浏览器 · 标签页与站点图标

各尺寸下的可读性

pig 图标 24px 渲染24pxpig 图标 32px 渲染32pxpig 图标 48px 渲染48pxpig 图标 64px 渲染64pxpig 图标 96px 渲染96pxpig 图标 128px 渲染128px

复制 pig 图标代码

内联 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 d="M4.0749 11.9925C4.0749 15.1509 5.0194 17.021 6.8228 18.0115C6.9918 18.1044 7.1038 18.2783 7.1038 18.4713L7.1038 20.4996C7.1038 20.7759 7.3277 21 7.6038 21L9.4673 21C9.6348 21 9.7912 20.916 9.8838 20.7763L11.474 18.3792C11.5666 18.2395 11.723 18.1555 11.8905 18.1555L12.2975 18.1555C12.4651 18.1555 12.6214 18.2395 12.7141 18.3791L14.3043 20.7763C14.3969 20.916 14.5533 21 14.7208 21L16.5346 21C16.8107 21 17.0346 20.7759 17.0346 20.4996L17.0346 17.7846C17.0346 17.5421 17.2111 17.3363 17.4468 17.28C20.0664 16.6559 20.09 14.9685 20.0359 13.914C20.0217 13.638 20.2377 13.4148 20.5138 13.4148L21.5 13.4148C21.7761 13.4148 22 13.1907 22 12.9144L22 11.0708C22 10.7944 21.7761 10.5704 21.5 10.5704L20.5407 10.5704C20.2543 10.5704 20.0284 10.3298 20.0264 10.0431C20.0161 8.5618 19.5959 7.4312 18.5591 6.9149C18.3666 6.8191 18.2263 6.6327 18.2263 6.4175L18.2263 3.4855C18.2263 3.2091 18.0019 2.9831 17.7263 3.001C15.7712 3.1278 14.6975 3.9882 14.2076 4.6549C14.0711 4.8405 13.8418 4.9478 13.6162 4.9013C8.9271 3.9337 5.942 6.152 4.5466 9.5102C4.2408 10.2462 4.0749 11.0754 4.0749 11.9925ZM4.0749 11.9925C3.1315 11.6765 1.4333 10.3807 2.1881 7.7258"/><path fill="currentColor" d="M17 9.5C17 10.0523 16.5523 10.5 16 10.5C15.4477 10.5 15 10.0523 15 9.5C15 8.9477 15.4477 8.5 16 8.5C16.5523 8.5 17 8.9477 17 9.5Z" stroke="none"/></g></svg>
reactReact 组件（TSX）
export function PigIcon(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 d="M4.0749 11.9925C4.0749 15.1509 5.0194 17.021 6.8228 18.0115C6.9918 18.1044 7.1038 18.2783 7.1038 18.4713L7.1038 20.4996C7.1038 20.7759 7.3277 21 7.6038 21L9.4673 21C9.6348 21 9.7912 20.916 9.8838 20.7763L11.474 18.3792C11.5666 18.2395 11.723 18.1555 11.8905 18.1555L12.2975 18.1555C12.4651 18.1555 12.6214 18.2395 12.7141 18.3791L14.3043 20.7763C14.3969 20.916 14.5533 21 14.7208 21L16.5346 21C16.8107 21 17.0346 20.7759 17.0346 20.4996L17.0346 17.7846C17.0346 17.5421 17.2111 17.3363 17.4468 17.28C20.0664 16.6559 20.09 14.9685 20.0359 13.914C20.0217 13.638 20.2377 13.4148 20.5138 13.4148L21.5 13.4148C21.7761 13.4148 22 13.1907 22 12.9144L22 11.0708C22 10.7944 21.7761 10.5704 21.5 10.5704L20.5407 10.5704C20.2543 10.5704 20.0284 10.3298 20.0264 10.0431C20.0161 8.5618 19.5959 7.4312 18.5591 6.9149C18.3666 6.8191 18.2263 6.6327 18.2263 6.4175L18.2263 3.4855C18.2263 3.2091 18.0019 2.9831 17.7263 3.001C15.7712 3.1278 14.6975 3.9882 14.2076 4.6549C14.0711 4.8405 13.8418 4.9478 13.6162 4.9013C8.9271 3.9337 5.942 6.152 4.5466 9.5102C4.2408 10.2462 4.0749 11.0754 4.0749 11.9925ZM4.0749 11.9925C3.1315 11.6765 1.4333 10.3807 2.1881 7.7258"/><path fill="currentColor" d="M17 9.5C17 10.0523 16.5523 10.5 16 10.5C15.4477 10.5 15 10.0523 15 9.5C15 8.9477 15.4477 8.5 16 8.5C16.5523 8.5 17 8.9477 17 9.5Z" stroke="none"/></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 d="M4.0749 11.9925C4.0749 15.1509 5.0194 17.021 6.8228 18.0115C6.9918 18.1044 7.1038 18.2783 7.1038 18.4713L7.1038 20.4996C7.1038 20.7759 7.3277 21 7.6038 21L9.4673 21C9.6348 21 9.7912 20.916 9.8838 20.7763L11.474 18.3792C11.5666 18.2395 11.723 18.1555 11.8905 18.1555L12.2975 18.1555C12.4651 18.1555 12.6214 18.2395 12.7141 18.3791L14.3043 20.7763C14.3969 20.916 14.5533 21 14.7208 21L16.5346 21C16.8107 21 17.0346 20.7759 17.0346 20.4996L17.0346 17.7846C17.0346 17.5421 17.2111 17.3363 17.4468 17.28C20.0664 16.6559 20.09 14.9685 20.0359 13.914C20.0217 13.638 20.2377 13.4148 20.5138 13.4148L21.5 13.4148C21.7761 13.4148 22 13.1907 22 12.9144L22 11.0708C22 10.7944 21.7761 10.5704 21.5 10.5704L20.5407 10.5704C20.2543 10.5704 20.0284 10.3298 20.0264 10.0431C20.0161 8.5618 19.5959 7.4312 18.5591 6.9149C18.3666 6.8191 18.2263 6.6327 18.2263 6.4175L18.2263 3.4855C18.2263 3.2091 18.0019 2.9831 17.7263 3.001C15.7712 3.1278 14.6975 3.9882 14.2076 4.6549C14.0711 4.8405 13.8418 4.9478 13.6162 4.9013C8.9271 3.9337 5.942 6.152 4.5466 9.5102C4.2408 10.2462 4.0749 11.0754 4.0749 11.9925ZM4.0749 11.9925C3.1315 11.6765 1.4333 10.3807 2.1881 7.7258"/><path fill="currentColor" d="M17 9.5C17 10.0523 16.5523 10.5 16 10.5C15.4477 10.5 15 10.0523 15 9.5C15 8.9477 15.4477 8.5 16 8.5C16.5523 8.5 17 8.9477 17 9.5Z" stroke="none"/></g>`;
</script>
cssCSS mask（随 currentColor 改色）
.pig {
  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%20d%3D%22M4.0749%2011.9925C4.0749%2015.1509%205.0194%2017.021%206.8228%2018.0115C6.9918%2018.1044%207.1038%2018.2783%207.1038%2018.4713L7.1038%2020.4996C7.1038%2020.7759%207.3277%2021%207.6038%2021L9.4673%2021C9.6348%2021%209.7912%2020.916%209.8838%2020.7763L11.474%2018.3792C11.5666%2018.2395%2011.723%2018.1555%2011.8905%2018.1555L12.2975%2018.1555C12.4651%2018.1555%2012.6214%2018.2395%2012.7141%2018.3791L14.3043%2020.7763C14.3969%2020.916%2014.5533%2021%2014.7208%2021L16.5346%2021C16.8107%2021%2017.0346%2020.7759%2017.0346%2020.4996L17.0346%2017.7846C17.0346%2017.5421%2017.2111%2017.3363%2017.4468%2017.28C20.0664%2016.6559%2020.09%2014.9685%2020.0359%2013.914C20.0217%2013.638%2020.2377%2013.4148%2020.5138%2013.4148L21.5%2013.4148C21.7761%2013.4148%2022%2013.1907%2022%2012.9144L22%2011.0708C22%2010.7944%2021.7761%2010.5704%2021.5%2010.5704L20.5407%2010.5704C20.2543%2010.5704%2020.0284%2010.3298%2020.0264%2010.0431C20.0161%208.5618%2019.5959%207.4312%2018.5591%206.9149C18.3666%206.8191%2018.2263%206.6327%2018.2263%206.4175L18.2263%203.4855C18.2263%203.2091%2018.0019%202.9831%2017.7263%203.001C15.7712%203.1278%2014.6975%203.9882%2014.2076%204.6549C14.0711%204.8405%2013.8418%204.9478%2013.6162%204.9013C8.9271%203.9337%205.942%206.152%204.5466%209.5102C4.2408%2010.2462%204.0749%2011.0754%204.0749%2011.9925ZM4.0749%2011.9925C3.1315%2011.6765%201.4333%2010.3807%202.1881%207.7258%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17%209.5C17%2010.0523%2016.5523%2010.5%2016%2010.5C15.4477%2010.5%2015%2010.0523%2015%209.5C15%208.9477%2015.4477%208.5%2016%208.5C16.5523%208.5%2017%208.9477%2017%209.5Z%22%20stroke%3D%22none%22%2F%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%20d%3D%22M4.0749%2011.9925C4.0749%2015.1509%205.0194%2017.021%206.8228%2018.0115C6.9918%2018.1044%207.1038%2018.2783%207.1038%2018.4713L7.1038%2020.4996C7.1038%2020.7759%207.3277%2021%207.6038%2021L9.4673%2021C9.6348%2021%209.7912%2020.916%209.8838%2020.7763L11.474%2018.3792C11.5666%2018.2395%2011.723%2018.1555%2011.8905%2018.1555L12.2975%2018.1555C12.4651%2018.1555%2012.6214%2018.2395%2012.7141%2018.3791L14.3043%2020.7763C14.3969%2020.916%2014.5533%2021%2014.7208%2021L16.5346%2021C16.8107%2021%2017.0346%2020.7759%2017.0346%2020.4996L17.0346%2017.7846C17.0346%2017.5421%2017.2111%2017.3363%2017.4468%2017.28C20.0664%2016.6559%2020.09%2014.9685%2020.0359%2013.914C20.0217%2013.638%2020.2377%2013.4148%2020.5138%2013.4148L21.5%2013.4148C21.7761%2013.4148%2022%2013.1907%2022%2012.9144L22%2011.0708C22%2010.7944%2021.7761%2010.5704%2021.5%2010.5704L20.5407%2010.5704C20.2543%2010.5704%2020.0284%2010.3298%2020.0264%2010.0431C20.0161%208.5618%2019.5959%207.4312%2018.5591%206.9149C18.3666%206.8191%2018.2263%206.6327%2018.2263%206.4175L18.2263%203.4855C18.2263%203.2091%2018.0019%202.9831%2017.7263%203.001C15.7712%203.1278%2014.6975%203.9882%2014.2076%204.6549C14.0711%204.8405%2013.8418%204.9478%2013.6162%204.9013C8.9271%203.9337%205.942%206.152%204.5466%209.5102C4.2408%2010.2462%204.0749%2011.0754%204.0749%2011.9925ZM4.0749%2011.9925C3.1315%2011.6765%201.4333%2010.3807%202.1881%207.7258%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17%209.5C17%2010.0523%2016.5523%2010.5%2016%2010.5C15.4477%2010.5%2015%2010.0523%2015%209.5C15%208.9477%2015.4477%208.5%2016%208.5C16.5523%208.5%2017%208.9477%2017%209.5Z%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 pig 加一点动效

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

pig 呼吸动效演示

呼吸

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

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

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

旋转

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

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

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

描画

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

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

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

SVG 健康报告

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

文件体积

1.49 KB

1,523 字节

viewBox

0 0 24 24

矢量坐标系

图元总数

2

<path> ×2

风格

单色轮廓（描边）

描边可随字号加粗

同时含 width/height 与 viewBox：可以只保留 viewBox，让图标跟随容器自适应缩放。 文件体积 1.49 KB（1,523 字节），图元 2 个，风格为单色轮廓（描边）。

常见问题

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

pig 图标是什么？▾

它是 Keyline Icons（keyline-icons）开源图标集中的 pig 图标，单色轮廓（描边），viewBox 为 0 0 24 24，文件仅 1.49 KB，矢量格式可无损缩放到任意尺寸。

如何下载 pig 图标？▾

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

pig 图标可以商用吗？▾

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

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

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

Keyline Icons 中的相近图标

pig-duotone
pig-fill
pig-sharp
pig-sharp-duotone
pig-sharp-fill
pig-sharp-two-tone
pig-two-tone
piggy-bank
piggy-bank-duotone
piggy-bank-fill
piggy-bank-sharp
piggy-bank-sharp-duotone
piggy-bank-sharp-fill
piggy-bank-sharp-two-tone
piggy-bank-two-tone