找找图标
pig 图标

pig SVG 图标

emojione-v1pig

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

图标 ID
emojione-v1:pig
中文名
—
所属集合
Emoji One (v1)
集合规模
1,262 枚
基础网格
32px
色彩
多色
开源协议
CC-BY-SA-4.0
作者
Emoji One

下载 pig 图标

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

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

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

pig 的预览与使用场景

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

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

在真实界面里长这样

继续按钮内 · 主操作
搜索pig…输入框 · 前缀图标
pig导航菜单 · 选中态
暂无内容空状态 · 引导提示
9:41pig App 图标pigpig-facepig-nose手机桌面 · App 图标
pigemojione-v1.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 64 64"><g fill="#d08565"><path fill-rule="evenodd" d="M62.868 45.3c-.296-2.12-1.562-3.479-2.893-4.063c-.683-.306-1.475-.48-2.37-.349c-2.053.303-3.216 1.896-3.581 3.503c-.189.836-.188 1.876.243 2.871c.742 1.735 2.402 2.646 4.081 2.212c.983-.255 1.611-.878 2.02-1.671c.459-.893.632-2.507-.263-3.621c-.751-.931-2.491-1.448-3.528-.168c-.377.469-.693 1.349-.347 2.209c.289.734 1.06 1.182 1.739.904c.489-.199.723-.635.572-1.27c-.063-.001-.063.201-.119.308a.7.7 0 0 1-.288.293c-.708.385-1.243-.276-1.228-1.024a1.265 1.265 0 0 1 1.138-1.223c.688-.08 1.341.361 1.632 1.025c.546 1.251-.102 2.738-1.299 3.2c-1.297.508-2.564-.224-3.157-1.333c-.553-1.035-.45-2.089-.162-2.924c.399-1.175 1.491-2.291 3.1-2.322c1.533-.031 3.218.974 3.721 3.188c.171.751.158 1.3.061 1.922c-.176 1.101-.638 2.116-1.571 2.939c-.922.808-2.359 1.208-3.485 1.021a4.66 4.66 0 0 1-2.76-1.51c-.821-.912-1.403-2.247-1.457-3.693a6.65 6.65 0 0 1 .771-3.365c.495-.926 1.469-1.92 2.563-2.427l.64-.244c2.559-.611 4.688.187 6.119 2.11c.788 1.054 1.354 2.521 1.436 3.935c.005.152-.907.535-1.324-.433"/><path d="M23.08 59.49c-2.679 0-2.632-2.51-2.632-5.935c0-3.432-.047-6.468 2.632-6.468c2.677 0 4.853 2.776 4.853 6.198c0 3.426-2.176 6.205-4.853 6.205m8.23 1.78c-2.678 0-2.626-2.51-2.626-5.933c0-3.429-.051-6.469 2.626-6.469c2.684 0 4.856 2.777 4.856 6.202c0 3.423-2.173 6.2-4.856 6.2m9.91-1.78c-2.681 0-2.628-2.51-2.628-5.935c0-3.432-.053-6.468 2.628-6.468c2.677 0 4.853 2.776 4.853 6.198c0 3.426-2.176 6.205-4.853 6.205"/><path d="M48.697 61.27c-2.682 0-2.63-2.904-2.63-6.873c0-3.975-.052-7.499 2.63-7.499s4.854 3.218 4.854 7.187s-2.173 7.185-4.854 7.185"/></g><path fill="#dfad92" d="M57.855 37.1c0 9.921-10.287 17.968-22.975 17.968c-12.697 0-22.98-8.05-22.98-17.968c0-9.924 10.283-17.97 22.98-17.97c12.688 0 22.975 8.05 22.975 17.97"/><g fill="#d08565"><path d="M31.572 37.1c0 5.514-5.713 9.986-12.768 9.986c-7.06 0-12.773-4.473-12.773-9.986c0-5.517 5.716-9.989 12.773-9.989c7.06 0 12.768 4.472 12.768 9.989"/><path d="M10.655 17.793c2.971.093 6.978 9.266 6.919 11.568c-.06 2.305-5.79-.472-9.112-1.565c-3.418-1.129-9.784-3.039-8.102-4.405c1.825-1.482 7.326-5.693 10.295-5.598"/></g><path fill="#eac8b8" d="M12.784 18.646c2.579.083 6.06 8.04 6.01 10.05c-.054 1.996-5.03-.411-7.914-1.364c-2.967-.978-6.01-1.794-5.963-3.793c.052-2 5.289-4.972 7.867-4.889"/><path fill="#d08565" d="M23.413 18.07c-3.799 1.246-6.109 14.597-5.315 17.547c.797 2.95 7.323-2.806 11.267-5.477c4.059-2.747 11.677-7.629 9.07-8.753c-2.81-1.22-11.222-4.564-15.02-3.317"/><path fill="#eac8b8" d="M20.937 19.971c-3.303 1.084-5.308 12.678-4.615 15.237c.687 2.562 6.354-2.435 9.776-4.755c3.527-2.385 7.199-4.595 6.511-7.158c-.693-2.558-8.373-4.408-11.672-3.324"/><path fill="#dfad92" d="M2.862 36.32c0 5.838 5.911 10.571 13.221 10.571c7.301 0 13.219-4.733 13.219-10.571c0-5.836-5.917-20.234-13.219-20.234c-7.31 0-13.221 14.398-13.221 20.234"/><g fill="#fff"><path d="M11.331 29.505c0 2.77-1.364 5.02-3.039 5.02c-1.682 0-3.042-2.247-3.042-5.02s1.36-5.02 3.042-5.02c1.674 0 3.039 2.248 3.039 5.02"/><ellipse cx="16.837" cy="29.505" rx="3.039" ry="5.02"/></g><path fill="#25333a" d="M10.255 29.505c0 1.453-.877 2.628-1.963 2.628c-1.09 0-1.971-1.175-1.971-2.628s.881-2.63 1.971-2.63c1.086 0 1.963 1.177 1.963 2.63m8.549 0c0 1.453-.877 2.628-1.963 2.628c-1.09 0-1.971-1.175-1.971-2.628s.881-2.63 1.971-2.63c1.086 0 1.963 1.177 1.963 2.63"/><path fill="#d08565" d="M1.917 36.28c0-4.143 3.198-4.068 7.562-4.068c4.366 0 8.239-.075 8.239 4.068c0 4.146-3.538 7.506-7.902 7.506c-4.358 0-7.899-3.359-7.899-7.506"/><path fill="#784e3d" d="M6.919 37.21c0 1.497-.91 2.708-2.027 2.708c-1.122 0-2.03-1.211-2.03-2.708s.908-2.713 2.03-2.713c1.118 0 2.027 1.216 2.027 2.713m6.648.275c0 1.651-1 2.986-2.234 2.986c-1.237 0-2.242-1.335-2.242-2.986c0-1.65 1-2.988 2.242-2.988c1.23 0 2.234 1.338 2.234 2.988"/></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 64 64"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<g fill="#d08565"><path fill-rule="evenodd" d="M62.868 45.3c-.296-2.12-1.562-3.479-2.893-4.063c-.683-.306-1.475-.48-2.37-.349c-2.053.303-3.216 1.896-3.581 3.503c-.189.836-.188 1.876.243 2.871c.742 1.735 2.402 2.646 4.081 2.212c.983-.255 1.611-.878 2.02-1.671c.459-.893.632-2.507-.263-3.621c-.751-.931-2.491-1.448-3.528-.168c-.377.469-.693 1.349-.347 2.209c.289.734 1.06 1.182 1.739.904c.489-.199.723-.635.572-1.27c-.063-.001-.063.201-.119.308a.7.7 0 0 1-.288.293c-.708.385-1.243-.276-1.228-1.024a1.265 1.265 0 0 1 1.138-1.223c.688-.08 1.341.361 1.632 1.025c.546 1.251-.102 2.738-1.299 3.2c-1.297.508-2.564-.224-3.157-1.333c-.553-1.035-.45-2.089-.162-2.924c.399-1.175 1.491-2.291 3.1-2.322c1.533-.031 3.218.974 3.721 3.188c.171.751.158 1.3.061 1.922c-.176 1.101-.638 2.116-1.571 2.939c-.922.808-2.359 1.208-3.485 1.021a4.66 4.66 0 0 1-2.76-1.51c-.821-.912-1.403-2.247-1.457-3.693a6.65 6.65 0 0 1 .771-3.365c.495-.926 1.469-1.92 2.563-2.427l.64-.244c2.559-.611 4.688.187 6.119 2.11c.788 1.054 1.354 2.521 1.436 3.935c.005.152-.907.535-1.324-.433"/><path d="M23.08 59.49c-2.679 0-2.632-2.51-2.632-5.935c0-3.432-.047-6.468 2.632-6.468c2.677 0 4.853 2.776 4.853 6.198c0 3.426-2.176 6.205-4.853 6.205m8.23 1.78c-2.678 0-2.626-2.51-2.626-5.933c0-3.429-.051-6.469 2.626-6.469c2.684 0 4.856 2.777 4.856 6.202c0 3.423-2.173 6.2-4.856 6.2m9.91-1.78c-2.681 0-2.628-2.51-2.628-5.935c0-3.432-.053-6.468 2.628-6.468c2.677 0 4.853 2.776 4.853 6.198c0 3.426-2.176 6.205-4.853 6.205"/><path d="M48.697 61.27c-2.682 0-2.63-2.904-2.63-6.873c0-3.975-.052-7.499 2.63-7.499s4.854 3.218 4.854 7.187s-2.173 7.185-4.854 7.185"/></g><path fill="#dfad92" d="M57.855 37.1c0 9.921-10.287 17.968-22.975 17.968c-12.697 0-22.98-8.05-22.98-17.968c0-9.924 10.283-17.97 22.98-17.97c12.688 0 22.975 8.05 22.975 17.97"/><g fill="#d08565"><path d="M31.572 37.1c0 5.514-5.713 9.986-12.768 9.986c-7.06 0-12.773-4.473-12.773-9.986c0-5.517 5.716-9.989 12.773-9.989c7.06 0 12.768 4.472 12.768 9.989"/><path d="M10.655 17.793c2.971.093 6.978 9.266 6.919 11.568c-.06 2.305-5.79-.472-9.112-1.565c-3.418-1.129-9.784-3.039-8.102-4.405c1.825-1.482 7.326-5.693 10.295-5.598"/></g><path fill="#eac8b8" d="M12.784 18.646c2.579.083 6.06 8.04 6.01 10.05c-.054 1.996-5.03-.411-7.914-1.364c-2.967-.978-6.01-1.794-5.963-3.793c.052-2 5.289-4.972 7.867-4.889"/><path fill="#d08565" d="M23.413 18.07c-3.799 1.246-6.109 14.597-5.315 17.547c.797 2.95 7.323-2.806 11.267-5.477c4.059-2.747 11.677-7.629 9.07-8.753c-2.81-1.22-11.222-4.564-15.02-3.317"/><path fill="#eac8b8" d="M20.937 19.971c-3.303 1.084-5.308 12.678-4.615 15.237c.687 2.562 6.354-2.435 9.776-4.755c3.527-2.385 7.199-4.595 6.511-7.158c-.693-2.558-8.373-4.408-11.672-3.324"/><path fill="#dfad92" d="M2.862 36.32c0 5.838 5.911 10.571 13.221 10.571c7.301 0 13.219-4.733 13.219-10.571c0-5.836-5.917-20.234-13.219-20.234c-7.31 0-13.221 14.398-13.221 20.234"/><g fill="#fff"><path d="M11.331 29.505c0 2.77-1.364 5.02-3.039 5.02c-1.682 0-3.042-2.247-3.042-5.02s1.36-5.02 3.042-5.02c1.674 0 3.039 2.248 3.039 5.02"/><ellipse cx="16.837" cy="29.505" rx="3.039" ry="5.02"/></g><path fill="#25333a" d="M10.255 29.505c0 1.453-.877 2.628-1.963 2.628c-1.09 0-1.971-1.175-1.971-2.628s.881-2.63 1.971-2.63c1.086 0 1.963 1.177 1.963 2.63m8.549 0c0 1.453-.877 2.628-1.963 2.628c-1.09 0-1.971-1.175-1.971-2.628s.881-2.63 1.971-2.63c1.086 0 1.963 1.177 1.963 2.63"/><path fill="#d08565" d="M1.917 36.28c0-4.143 3.198-4.068 7.562-4.068c4.366 0 8.239-.075 8.239 4.068c0 4.146-3.538 7.506-7.902 7.506c-4.358 0-7.899-3.359-7.899-7.506"/><path fill="#784e3d" d="M6.919 37.21c0 1.497-.91 2.708-2.027 2.708c-1.122 0-2.03-1.211-2.03-2.708s.908-2.713 2.03-2.713c1.118 0 2.027 1.216 2.027 2.713m6.648.275c0 1.651-1 2.986-2.234 2.986c-1.237 0-2.242-1.335-2.242-2.986c0-1.65 1-2.988 2.242-2.988c1.23 0 2.234 1.338 2.234 2.988"/>` }}
    />
  );
}
vueVue 3 组件
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<g fill="#d08565"><path fill-rule="evenodd" d="M62.868 45.3c-.296-2.12-1.562-3.479-2.893-4.063c-.683-.306-1.475-.48-2.37-.349c-2.053.303-3.216 1.896-3.581 3.503c-.189.836-.188 1.876.243 2.871c.742 1.735 2.402 2.646 4.081 2.212c.983-.255 1.611-.878 2.02-1.671c.459-.893.632-2.507-.263-3.621c-.751-.931-2.491-1.448-3.528-.168c-.377.469-.693 1.349-.347 2.209c.289.734 1.06 1.182 1.739.904c.489-.199.723-.635.572-1.27c-.063-.001-.063.201-.119.308a.7.7 0 0 1-.288.293c-.708.385-1.243-.276-1.228-1.024a1.265 1.265 0 0 1 1.138-1.223c.688-.08 1.341.361 1.632 1.025c.546 1.251-.102 2.738-1.299 3.2c-1.297.508-2.564-.224-3.157-1.333c-.553-1.035-.45-2.089-.162-2.924c.399-1.175 1.491-2.291 3.1-2.322c1.533-.031 3.218.974 3.721 3.188c.171.751.158 1.3.061 1.922c-.176 1.101-.638 2.116-1.571 2.939c-.922.808-2.359 1.208-3.485 1.021a4.66 4.66 0 0 1-2.76-1.51c-.821-.912-1.403-2.247-1.457-3.693a6.65 6.65 0 0 1 .771-3.365c.495-.926 1.469-1.92 2.563-2.427l.64-.244c2.559-.611 4.688.187 6.119 2.11c.788 1.054 1.354 2.521 1.436 3.935c.005.152-.907.535-1.324-.433"/><path d="M23.08 59.49c-2.679 0-2.632-2.51-2.632-5.935c0-3.432-.047-6.468 2.632-6.468c2.677 0 4.853 2.776 4.853 6.198c0 3.426-2.176 6.205-4.853 6.205m8.23 1.78c-2.678 0-2.626-2.51-2.626-5.933c0-3.429-.051-6.469 2.626-6.469c2.684 0 4.856 2.777 4.856 6.202c0 3.423-2.173 6.2-4.856 6.2m9.91-1.78c-2.681 0-2.628-2.51-2.628-5.935c0-3.432-.053-6.468 2.628-6.468c2.677 0 4.853 2.776 4.853 6.198c0 3.426-2.176 6.205-4.853 6.205"/><path d="M48.697 61.27c-2.682 0-2.63-2.904-2.63-6.873c0-3.975-.052-7.499 2.63-7.499s4.854 3.218 4.854 7.187s-2.173 7.185-4.854 7.185"/></g><path fill="#dfad92" d="M57.855 37.1c0 9.921-10.287 17.968-22.975 17.968c-12.697 0-22.98-8.05-22.98-17.968c0-9.924 10.283-17.97 22.98-17.97c12.688 0 22.975 8.05 22.975 17.97"/><g fill="#d08565"><path d="M31.572 37.1c0 5.514-5.713 9.986-12.768 9.986c-7.06 0-12.773-4.473-12.773-9.986c0-5.517 5.716-9.989 12.773-9.989c7.06 0 12.768 4.472 12.768 9.989"/><path d="M10.655 17.793c2.971.093 6.978 9.266 6.919 11.568c-.06 2.305-5.79-.472-9.112-1.565c-3.418-1.129-9.784-3.039-8.102-4.405c1.825-1.482 7.326-5.693 10.295-5.598"/></g><path fill="#eac8b8" d="M12.784 18.646c2.579.083 6.06 8.04 6.01 10.05c-.054 1.996-5.03-.411-7.914-1.364c-2.967-.978-6.01-1.794-5.963-3.793c.052-2 5.289-4.972 7.867-4.889"/><path fill="#d08565" d="M23.413 18.07c-3.799 1.246-6.109 14.597-5.315 17.547c.797 2.95 7.323-2.806 11.267-5.477c4.059-2.747 11.677-7.629 9.07-8.753c-2.81-1.22-11.222-4.564-15.02-3.317"/><path fill="#eac8b8" d="M20.937 19.971c-3.303 1.084-5.308 12.678-4.615 15.237c.687 2.562 6.354-2.435 9.776-4.755c3.527-2.385 7.199-4.595 6.511-7.158c-.693-2.558-8.373-4.408-11.672-3.324"/><path fill="#dfad92" d="M2.862 36.32c0 5.838 5.911 10.571 13.221 10.571c7.301 0 13.219-4.733 13.219-10.571c0-5.836-5.917-20.234-13.219-20.234c-7.31 0-13.221 14.398-13.221 20.234"/><g fill="#fff"><path d="M11.331 29.505c0 2.77-1.364 5.02-3.039 5.02c-1.682 0-3.042-2.247-3.042-5.02s1.36-5.02 3.042-5.02c1.674 0 3.039 2.248 3.039 5.02"/><ellipse cx="16.837" cy="29.505" rx="3.039" ry="5.02"/></g><path fill="#25333a" d="M10.255 29.505c0 1.453-.877 2.628-1.963 2.628c-1.09 0-1.971-1.175-1.971-2.628s.881-2.63 1.971-2.63c1.086 0 1.963 1.177 1.963 2.63m8.549 0c0 1.453-.877 2.628-1.963 2.628c-1.09 0-1.971-1.175-1.971-2.628s.881-2.63 1.971-2.63c1.086 0 1.963 1.177 1.963 2.63"/><path fill="#d08565" d="M1.917 36.28c0-4.143 3.198-4.068 7.562-4.068c4.366 0 8.239-.075 8.239 4.068c0 4.146-3.538 7.506-7.902 7.506c-4.358 0-7.899-3.359-7.899-7.506"/><path fill="#784e3d" d="M6.919 37.21c0 1.497-.91 2.708-2.027 2.708c-1.122 0-2.03-1.211-2.03-2.708s.908-2.713 2.03-2.713c1.118 0 2.027 1.216 2.027 2.713m6.648.275c0 1.651-1 2.986-2.234 2.986c-1.237 0-2.242-1.335-2.242-2.986c0-1.65 1-2.988 2.242-2.988c1.23 0 2.234 1.338 2.234 2.988"/>`;
</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%2064%2064%22%3E%3Cg%20fill%3D%22%23d08565%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M62.868%2045.3c-.296-2.12-1.562-3.479-2.893-4.063c-.683-.306-1.475-.48-2.37-.349c-2.053.303-3.216%201.896-3.581%203.503c-.189.836-.188%201.876.243%202.871c.742%201.735%202.402%202.646%204.081%202.212c.983-.255%201.611-.878%202.02-1.671c.459-.893.632-2.507-.263-3.621c-.751-.931-2.491-1.448-3.528-.168c-.377.469-.693%201.349-.347%202.209c.289.734%201.06%201.182%201.739.904c.489-.199.723-.635.572-1.27c-.063-.001-.063.201-.119.308a.7.7%200%200%201-.288.293c-.708.385-1.243-.276-1.228-1.024a1.265%201.265%200%200%201%201.138-1.223c.688-.08%201.341.361%201.632%201.025c.546%201.251-.102%202.738-1.299%203.2c-1.297.508-2.564-.224-3.157-1.333c-.553-1.035-.45-2.089-.162-2.924c.399-1.175%201.491-2.291%203.1-2.322c1.533-.031%203.218.974%203.721%203.188c.171.751.158%201.3.061%201.922c-.176%201.101-.638%202.116-1.571%202.939c-.922.808-2.359%201.208-3.485%201.021a4.66%204.66%200%200%201-2.76-1.51c-.821-.912-1.403-2.247-1.457-3.693a6.65%206.65%200%200%201%20.771-3.365c.495-.926%201.469-1.92%202.563-2.427l.64-.244c2.559-.611%204.688.187%206.119%202.11c.788%201.054%201.354%202.521%201.436%203.935c.005.152-.907.535-1.324-.433%22%2F%3E%3Cpath%20d%3D%22M23.08%2059.49c-2.679%200-2.632-2.51-2.632-5.935c0-3.432-.047-6.468%202.632-6.468c2.677%200%204.853%202.776%204.853%206.198c0%203.426-2.176%206.205-4.853%206.205m8.23%201.78c-2.678%200-2.626-2.51-2.626-5.933c0-3.429-.051-6.469%202.626-6.469c2.684%200%204.856%202.777%204.856%206.202c0%203.423-2.173%206.2-4.856%206.2m9.91-1.78c-2.681%200-2.628-2.51-2.628-5.935c0-3.432-.053-6.468%202.628-6.468c2.677%200%204.853%202.776%204.853%206.198c0%203.426-2.176%206.205-4.853%206.205%22%2F%3E%3Cpath%20d%3D%22M48.697%2061.27c-2.682%200-2.63-2.904-2.63-6.873c0-3.975-.052-7.499%202.63-7.499s4.854%203.218%204.854%207.187s-2.173%207.185-4.854%207.185%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23dfad92%22%20d%3D%22M57.855%2037.1c0%209.921-10.287%2017.968-22.975%2017.968c-12.697%200-22.98-8.05-22.98-17.968c0-9.924%2010.283-17.97%2022.98-17.97c12.688%200%2022.975%208.05%2022.975%2017.97%22%2F%3E%3Cg%20fill%3D%22%23d08565%22%3E%3Cpath%20d%3D%22M31.572%2037.1c0%205.514-5.713%209.986-12.768%209.986c-7.06%200-12.773-4.473-12.773-9.986c0-5.517%205.716-9.989%2012.773-9.989c7.06%200%2012.768%204.472%2012.768%209.989%22%2F%3E%3Cpath%20d%3D%22M10.655%2017.793c2.971.093%206.978%209.266%206.919%2011.568c-.06%202.305-5.79-.472-9.112-1.565c-3.418-1.129-9.784-3.039-8.102-4.405c1.825-1.482%207.326-5.693%2010.295-5.598%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23eac8b8%22%20d%3D%22M12.784%2018.646c2.579.083%206.06%208.04%206.01%2010.05c-.054%201.996-5.03-.411-7.914-1.364c-2.967-.978-6.01-1.794-5.963-3.793c.052-2%205.289-4.972%207.867-4.889%22%2F%3E%3Cpath%20fill%3D%22%23d08565%22%20d%3D%22M23.413%2018.07c-3.799%201.246-6.109%2014.597-5.315%2017.547c.797%202.95%207.323-2.806%2011.267-5.477c4.059-2.747%2011.677-7.629%209.07-8.753c-2.81-1.22-11.222-4.564-15.02-3.317%22%2F%3E%3Cpath%20fill%3D%22%23eac8b8%22%20d%3D%22M20.937%2019.971c-3.303%201.084-5.308%2012.678-4.615%2015.237c.687%202.562%206.354-2.435%209.776-4.755c3.527-2.385%207.199-4.595%206.511-7.158c-.693-2.558-8.373-4.408-11.672-3.324%22%2F%3E%3Cpath%20fill%3D%22%23dfad92%22%20d%3D%22M2.862%2036.32c0%205.838%205.911%2010.571%2013.221%2010.571c7.301%200%2013.219-4.733%2013.219-10.571c0-5.836-5.917-20.234-13.219-20.234c-7.31%200-13.221%2014.398-13.221%2020.234%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M11.331%2029.505c0%202.77-1.364%205.02-3.039%205.02c-1.682%200-3.042-2.247-3.042-5.02s1.36-5.02%203.042-5.02c1.674%200%203.039%202.248%203.039%205.02%22%2F%3E%3Cellipse%20cx%3D%2216.837%22%20cy%3D%2229.505%22%20rx%3D%223.039%22%20ry%3D%225.02%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%2325333a%22%20d%3D%22M10.255%2029.505c0%201.453-.877%202.628-1.963%202.628c-1.09%200-1.971-1.175-1.971-2.628s.881-2.63%201.971-2.63c1.086%200%201.963%201.177%201.963%202.63m8.549%200c0%201.453-.877%202.628-1.963%202.628c-1.09%200-1.971-1.175-1.971-2.628s.881-2.63%201.971-2.63c1.086%200%201.963%201.177%201.963%202.63%22%2F%3E%3Cpath%20fill%3D%22%23d08565%22%20d%3D%22M1.917%2036.28c0-4.143%203.198-4.068%207.562-4.068c4.366%200%208.239-.075%208.239%204.068c0%204.146-3.538%207.506-7.902%207.506c-4.358%200-7.899-3.359-7.899-7.506%22%2F%3E%3Cpath%20fill%3D%22%23784e3d%22%20d%3D%22M6.919%2037.21c0%201.497-.91%202.708-2.027%202.708c-1.122%200-2.03-1.211-2.03-2.708s.908-2.713%202.03-2.713c1.118%200%202.027%201.216%202.027%202.713m6.648.275c0%201.651-1%202.986-2.234%202.986c-1.237%200-2.242-1.335-2.242-2.986c0-1.65%201-2.988%202.242-2.988c1.23%200%202.234%201.338%202.234%202.988%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%2064%2064%22%3E%3Cg%20fill%3D%22%23d08565%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M62.868%2045.3c-.296-2.12-1.562-3.479-2.893-4.063c-.683-.306-1.475-.48-2.37-.349c-2.053.303-3.216%201.896-3.581%203.503c-.189.836-.188%201.876.243%202.871c.742%201.735%202.402%202.646%204.081%202.212c.983-.255%201.611-.878%202.02-1.671c.459-.893.632-2.507-.263-3.621c-.751-.931-2.491-1.448-3.528-.168c-.377.469-.693%201.349-.347%202.209c.289.734%201.06%201.182%201.739.904c.489-.199.723-.635.572-1.27c-.063-.001-.063.201-.119.308a.7.7%200%200%201-.288.293c-.708.385-1.243-.276-1.228-1.024a1.265%201.265%200%200%201%201.138-1.223c.688-.08%201.341.361%201.632%201.025c.546%201.251-.102%202.738-1.299%203.2c-1.297.508-2.564-.224-3.157-1.333c-.553-1.035-.45-2.089-.162-2.924c.399-1.175%201.491-2.291%203.1-2.322c1.533-.031%203.218.974%203.721%203.188c.171.751.158%201.3.061%201.922c-.176%201.101-.638%202.116-1.571%202.939c-.922.808-2.359%201.208-3.485%201.021a4.66%204.66%200%200%201-2.76-1.51c-.821-.912-1.403-2.247-1.457-3.693a6.65%206.65%200%200%201%20.771-3.365c.495-.926%201.469-1.92%202.563-2.427l.64-.244c2.559-.611%204.688.187%206.119%202.11c.788%201.054%201.354%202.521%201.436%203.935c.005.152-.907.535-1.324-.433%22%2F%3E%3Cpath%20d%3D%22M23.08%2059.49c-2.679%200-2.632-2.51-2.632-5.935c0-3.432-.047-6.468%202.632-6.468c2.677%200%204.853%202.776%204.853%206.198c0%203.426-2.176%206.205-4.853%206.205m8.23%201.78c-2.678%200-2.626-2.51-2.626-5.933c0-3.429-.051-6.469%202.626-6.469c2.684%200%204.856%202.777%204.856%206.202c0%203.423-2.173%206.2-4.856%206.2m9.91-1.78c-2.681%200-2.628-2.51-2.628-5.935c0-3.432-.053-6.468%202.628-6.468c2.677%200%204.853%202.776%204.853%206.198c0%203.426-2.176%206.205-4.853%206.205%22%2F%3E%3Cpath%20d%3D%22M48.697%2061.27c-2.682%200-2.63-2.904-2.63-6.873c0-3.975-.052-7.499%202.63-7.499s4.854%203.218%204.854%207.187s-2.173%207.185-4.854%207.185%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23dfad92%22%20d%3D%22M57.855%2037.1c0%209.921-10.287%2017.968-22.975%2017.968c-12.697%200-22.98-8.05-22.98-17.968c0-9.924%2010.283-17.97%2022.98-17.97c12.688%200%2022.975%208.05%2022.975%2017.97%22%2F%3E%3Cg%20fill%3D%22%23d08565%22%3E%3Cpath%20d%3D%22M31.572%2037.1c0%205.514-5.713%209.986-12.768%209.986c-7.06%200-12.773-4.473-12.773-9.986c0-5.517%205.716-9.989%2012.773-9.989c7.06%200%2012.768%204.472%2012.768%209.989%22%2F%3E%3Cpath%20d%3D%22M10.655%2017.793c2.971.093%206.978%209.266%206.919%2011.568c-.06%202.305-5.79-.472-9.112-1.565c-3.418-1.129-9.784-3.039-8.102-4.405c1.825-1.482%207.326-5.693%2010.295-5.598%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23eac8b8%22%20d%3D%22M12.784%2018.646c2.579.083%206.06%208.04%206.01%2010.05c-.054%201.996-5.03-.411-7.914-1.364c-2.967-.978-6.01-1.794-5.963-3.793c.052-2%205.289-4.972%207.867-4.889%22%2F%3E%3Cpath%20fill%3D%22%23d08565%22%20d%3D%22M23.413%2018.07c-3.799%201.246-6.109%2014.597-5.315%2017.547c.797%202.95%207.323-2.806%2011.267-5.477c4.059-2.747%2011.677-7.629%209.07-8.753c-2.81-1.22-11.222-4.564-15.02-3.317%22%2F%3E%3Cpath%20fill%3D%22%23eac8b8%22%20d%3D%22M20.937%2019.971c-3.303%201.084-5.308%2012.678-4.615%2015.237c.687%202.562%206.354-2.435%209.776-4.755c3.527-2.385%207.199-4.595%206.511-7.158c-.693-2.558-8.373-4.408-11.672-3.324%22%2F%3E%3Cpath%20fill%3D%22%23dfad92%22%20d%3D%22M2.862%2036.32c0%205.838%205.911%2010.571%2013.221%2010.571c7.301%200%2013.219-4.733%2013.219-10.571c0-5.836-5.917-20.234-13.219-20.234c-7.31%200-13.221%2014.398-13.221%2020.234%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M11.331%2029.505c0%202.77-1.364%205.02-3.039%205.02c-1.682%200-3.042-2.247-3.042-5.02s1.36-5.02%203.042-5.02c1.674%200%203.039%202.248%203.039%205.02%22%2F%3E%3Cellipse%20cx%3D%2216.837%22%20cy%3D%2229.505%22%20rx%3D%223.039%22%20ry%3D%225.02%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%2325333a%22%20d%3D%22M10.255%2029.505c0%201.453-.877%202.628-1.963%202.628c-1.09%200-1.971-1.175-1.971-2.628s.881-2.63%201.971-2.63c1.086%200%201.963%201.177%201.963%202.63m8.549%200c0%201.453-.877%202.628-1.963%202.628c-1.09%200-1.971-1.175-1.971-2.628s.881-2.63%201.971-2.63c1.086%200%201.963%201.177%201.963%202.63%22%2F%3E%3Cpath%20fill%3D%22%23d08565%22%20d%3D%22M1.917%2036.28c0-4.143%203.198-4.068%207.562-4.068c4.366%200%208.239-.075%208.239%204.068c0%204.146-3.538%207.506-7.902%207.506c-4.358%200-7.899-3.359-7.899-7.506%22%2F%3E%3Cpath%20fill%3D%22%23784e3d%22%20d%3D%22M6.919%2037.21c0%201.497-.91%202.708-2.027%202.708c-1.122%200-2.03-1.211-2.03-2.708s.908-2.713%202.03-2.713c1.118%200%202.027%201.216%202.027%202.713m6.648.275c0%201.651-1%202.986-2.234%202.986c-1.237%200-2.242-1.335-2.242-2.986c0-1.65%201-2.988%202.242-2.988c1.23%200%202.234%201.338%202.234%202.988%22%2F%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); }
}

SVG 健康报告

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

文件体积

3.80 KB

3,888 字节

viewBox

0 0 64 64

矢量坐标系

图元总数

15

<path> ×14

风格

多色填充

填充跟随容器颜色

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

常见问题

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

pig 图标是什么？▾

它是 Emoji One (v1)（emojione-v1）开源图标集中的 pig 图标，多色填充，viewBox 为 0 0 64 64，文件仅 3.80 KB，矢量格式可无损缩放到任意尺寸。

如何下载 pig 图标？▾

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

pig 图标可以商用吗？▾

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

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

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

Emoji One (v1) 中的相近图标

pig-face
pig-nose