bear-face SVG 图标

Q: bear-face 图标可以商用吗？

emojionebear-face

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

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

下载 bear-face 图标

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

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

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

bear-face 的预览与使用场景

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

预览颜色

浅色背景

深色背景

灰底融入

在真实界面里长这样

继续按钮内 · 主操作

搜索bear-face…输入框 · 前缀图标

bear-face导航菜单 · 选中态

暂无内容空状态 · 引导提示

9:41

bear-face手机桌面 · App 图标

bear-faceemojione.design/icons/bear-face浏览器 · 标签页与站点图标

各尺寸下的可读性

24px

32px

48px

64px

96px

128px

复制 bear-face 图标代码

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

svgSVG 源码（内联 HTML）

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#947151" d="M60.6 10.4c0 4.6-3.9 8.4-8.7 8.4s-8.7-3.8-8.7-8.4S47.1 2 51.9 2s8.7 3.8 8.7 8.4"/><path fill="#e0ac7e" d="M57.1 10.4c0 2.8-2.3 5.1-5.2 5.1s-5.2-2.3-5.2-5.1s2.3-5.1 5.2-5.1s5.2 2.3 5.2 5.1"/><ellipse cx="12.1" cy="10.4" fill="#947151" rx="8.7" ry="8.4"/><ellipse cx="12.1" cy="10.4" fill="#e0ac7e" rx="5.2" ry="5.1"/><path fill="#947151" d="M62 37.1C62 55.2 41.8 62 32 62S2 55.2 2 37.1c0-23 11-28.3 30-28.3s30 5.3 30 28.3"/><path fill="#e0ac7e" d="M18.9 45.6c0-9.3 8.9-12.8 13.2-12.8s13.2 3.5 13.2 12.8c0 11.8-4.8 14.6-13.2 14.6s-13.2-2.8-13.2-14.6"/><path fill="#947151" d="M32.7 2c.3 1.6-.6 2.8-.6 2.8c-1.4-1.9-4.2-2.5-4.2-2.5c1.1 1.3.8 3.3.8 3.3c-1.9-.7-3.6-.6-3.6-.6c4 3 3.1 12.1 3.1 12.1c4.7-5 10.6-7.4 10.6-7.4C37.5 5 32.7 2 32.7 2"/><g fill="#3e4347"><path d="M36.4 57c.1 0 .1-.2.1-.3c0-.7-2-1.4-4.5-1.4s-4.5.6-4.5 1.4c0 .1 0 .3.1.3zM22.8 45.9c0-3.8 4.1-4.6 9.2-4.6s9.2.7 9.2 4.6c0 3.1-7.4 5.8-9.2 5.8s-9.2-2.8-9.2-5.8m36.3-15.2l-1.7.3l-1.7.3c-1.1.2-2.3.3-3.4.5c-2.3.3-4.5.5-6.8.7c-4.4.3-9 .5-13.5.5s-9.1-.2-13.6-.6s-9.1-1-13.5-2c-.1 0-.1-.1-.1-.1l.1-.1c2.3.1 4.5.3 6.8.4s4.5.2 6.8.3c4.5.1 9 .2 13.6.2c4.5 0 9 0 13.6-.1c4.5-.1 9-.3 13.6-.4c.1 0 .1 0 .1.1c-.2-.1-.2 0-.3 0"/><path d="M19.6 32.5c0 1.6-1.6 2.9-3.6 2.9s-3.6-1.3-3.6-2.9s1.6-1.2 3.6-1.2s3.6-.4 3.6 1.2m32.1 0c0 1.6-1.6 2.9-3.6 2.9s-3.6-1.3-3.6-2.9s1.6-1.2 3.6-1.2s3.6-.4 3.6 1.2"/></g></svg>

reactReact 组件（TSX）

export function BearFaceIcon(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: `<path fill="#947151" d="M60.6 10.4c0 4.6-3.9 8.4-8.7 8.4s-8.7-3.8-8.7-8.4S47.1 2 51.9 2s8.7 3.8 8.7 8.4"/><path fill="#e0ac7e" d="M57.1 10.4c0 2.8-2.3 5.1-5.2 5.1s-5.2-2.3-5.2-5.1s2.3-5.1 5.2-5.1s5.2 2.3 5.2 5.1"/><ellipse cx="12.1" cy="10.4" fill="#947151" rx="8.7" ry="8.4"/><ellipse cx="12.1" cy="10.4" fill="#e0ac7e" rx="5.2" ry="5.1"/><path fill="#947151" d="M62 37.1C62 55.2 41.8 62 32 62S2 55.2 2 37.1c0-23 11-28.3 30-28.3s30 5.3 30 28.3"/><path fill="#e0ac7e" d="M18.9 45.6c0-9.3 8.9-12.8 13.2-12.8s13.2 3.5 13.2 12.8c0 11.8-4.8 14.6-13.2 14.6s-13.2-2.8-13.2-14.6"/><path fill="#947151" d="M32.7 2c.3 1.6-.6 2.8-.6 2.8c-1.4-1.9-4.2-2.5-4.2-2.5c1.1 1.3.8 3.3.8 3.3c-1.9-.7-3.6-.6-3.6-.6c4 3 3.1 12.1 3.1 12.1c4.7-5 10.6-7.4 10.6-7.4C37.5 5 32.7 2 32.7 2"/><g fill="#3e4347"><path d="M36.4 57c.1 0 .1-.2.1-.3c0-.7-2-1.4-4.5-1.4s-4.5.6-4.5 1.4c0 .1 0 .3.1.3zM22.8 45.9c0-3.8 4.1-4.6 9.2-4.6s9.2.7 9.2 4.6c0 3.1-7.4 5.8-9.2 5.8s-9.2-2.8-9.2-5.8m36.3-15.2l-1.7.3l-1.7.3c-1.1.2-2.3.3-3.4.5c-2.3.3-4.5.5-6.8.7c-4.4.3-9 .5-13.5.5s-9.1-.2-13.6-.6s-9.1-1-13.5-2c-.1 0-.1-.1-.1-.1l.1-.1c2.3.1 4.5.3 6.8.4s4.5.2 6.8.3c4.5.1 9 .2 13.6.2c4.5 0 9 0 13.6-.1c4.5-.1 9-.3 13.6-.4c.1 0 .1 0 .1.1c-.2-.1-.2 0-.3 0"/><path d="M19.6 32.5c0 1.6-1.6 2.9-3.6 2.9s-3.6-1.3-3.6-2.9s1.6-1.2 3.6-1.2s3.6-.4 3.6 1.2m32.1 0c0 1.6-1.6 2.9-3.6 2.9s-3.6-1.3-3.6-2.9s1.6-1.2 3.6-1.2s3.6-.4 3.6 1.2"/></g>` }}
    />
  );
}

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 = `<path fill="#947151" d="M60.6 10.4c0 4.6-3.9 8.4-8.7 8.4s-8.7-3.8-8.7-8.4S47.1 2 51.9 2s8.7 3.8 8.7 8.4"/><path fill="#e0ac7e" d="M57.1 10.4c0 2.8-2.3 5.1-5.2 5.1s-5.2-2.3-5.2-5.1s2.3-5.1 5.2-5.1s5.2 2.3 5.2 5.1"/><ellipse cx="12.1" cy="10.4" fill="#947151" rx="8.7" ry="8.4"/><ellipse cx="12.1" cy="10.4" fill="#e0ac7e" rx="5.2" ry="5.1"/><path fill="#947151" d="M62 37.1C62 55.2 41.8 62 32 62S2 55.2 2 37.1c0-23 11-28.3 30-28.3s30 5.3 30 28.3"/><path fill="#e0ac7e" d="M18.9 45.6c0-9.3 8.9-12.8 13.2-12.8s13.2 3.5 13.2 12.8c0 11.8-4.8 14.6-13.2 14.6s-13.2-2.8-13.2-14.6"/><path fill="#947151" d="M32.7 2c.3 1.6-.6 2.8-.6 2.8c-1.4-1.9-4.2-2.5-4.2-2.5c1.1 1.3.8 3.3.8 3.3c-1.9-.7-3.6-.6-3.6-.6c4 3 3.1 12.1 3.1 12.1c4.7-5 10.6-7.4 10.6-7.4C37.5 5 32.7 2 32.7 2"/><g fill="#3e4347"><path d="M36.4 57c.1 0 .1-.2.1-.3c0-.7-2-1.4-4.5-1.4s-4.5.6-4.5 1.4c0 .1 0 .3.1.3zM22.8 45.9c0-3.8 4.1-4.6 9.2-4.6s9.2.7 9.2 4.6c0 3.1-7.4 5.8-9.2 5.8s-9.2-2.8-9.2-5.8m36.3-15.2l-1.7.3l-1.7.3c-1.1.2-2.3.3-3.4.5c-2.3.3-4.5.5-6.8.7c-4.4.3-9 .5-13.5.5s-9.1-.2-13.6-.6s-9.1-1-13.5-2c-.1 0-.1-.1-.1-.1l.1-.1c2.3.1 4.5.3 6.8.4s4.5.2 6.8.3c4.5.1 9 .2 13.6.2c4.5 0 9 0 13.6-.1c4.5-.1 9-.3 13.6-.4c.1 0 .1 0 .1.1c-.2-.1-.2 0-.3 0"/><path d="M19.6 32.5c0 1.6-1.6 2.9-3.6 2.9s-3.6-1.3-3.6-2.9s1.6-1.2 3.6-1.2s3.6-.4 3.6 1.2m32.1 0c0 1.6-1.6 2.9-3.6 2.9s-3.6-1.3-3.6-2.9s1.6-1.2 3.6-1.2s3.6-.4 3.6 1.2"/></g>`;
</script>

cssCSS mask（随 currentColor 改色）

.bear-face {
  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%3Cpath%20fill%3D%22%23947151%22%20d%3D%22M60.6%2010.4c0%204.6-3.9%208.4-8.7%208.4s-8.7-3.8-8.7-8.4S47.1%202%2051.9%202s8.7%203.8%208.7%208.4%22%2F%3E%3Cpath%20fill%3D%22%23e0ac7e%22%20d%3D%22M57.1%2010.4c0%202.8-2.3%205.1-5.2%205.1s-5.2-2.3-5.2-5.1s2.3-5.1%205.2-5.1s5.2%202.3%205.2%205.1%22%2F%3E%3Cellipse%20cx%3D%2212.1%22%20cy%3D%2210.4%22%20fill%3D%22%23947151%22%20rx%3D%228.7%22%20ry%3D%228.4%22%2F%3E%3Cellipse%20cx%3D%2212.1%22%20cy%3D%2210.4%22%20fill%3D%22%23e0ac7e%22%20rx%3D%225.2%22%20ry%3D%225.1%22%2F%3E%3Cpath%20fill%3D%22%23947151%22%20d%3D%22M62%2037.1C62%2055.2%2041.8%2062%2032%2062S2%2055.2%202%2037.1c0-23%2011-28.3%2030-28.3s30%205.3%2030%2028.3%22%2F%3E%3Cpath%20fill%3D%22%23e0ac7e%22%20d%3D%22M18.9%2045.6c0-9.3%208.9-12.8%2013.2-12.8s13.2%203.5%2013.2%2012.8c0%2011.8-4.8%2014.6-13.2%2014.6s-13.2-2.8-13.2-14.6%22%2F%3E%3Cpath%20fill%3D%22%23947151%22%20d%3D%22M32.7%202c.3%201.6-.6%202.8-.6%202.8c-1.4-1.9-4.2-2.5-4.2-2.5c1.1%201.3.8%203.3.8%203.3c-1.9-.7-3.6-.6-3.6-.6c4%203%203.1%2012.1%203.1%2012.1c4.7-5%2010.6-7.4%2010.6-7.4C37.5%205%2032.7%202%2032.7%202%22%2F%3E%3Cg%20fill%3D%22%233e4347%22%3E%3Cpath%20d%3D%22M36.4%2057c.1%200%20.1-.2.1-.3c0-.7-2-1.4-4.5-1.4s-4.5.6-4.5%201.4c0%20.1%200%20.3.1.3zM22.8%2045.9c0-3.8%204.1-4.6%209.2-4.6s9.2.7%209.2%204.6c0%203.1-7.4%205.8-9.2%205.8s-9.2-2.8-9.2-5.8m36.3-15.2l-1.7.3l-1.7.3c-1.1.2-2.3.3-3.4.5c-2.3.3-4.5.5-6.8.7c-4.4.3-9%20.5-13.5.5s-9.1-.2-13.6-.6s-9.1-1-13.5-2c-.1%200-.1-.1-.1-.1l.1-.1c2.3.1%204.5.3%206.8.4s4.5.2%206.8.3c4.5.1%209%20.2%2013.6.2c4.5%200%209%200%2013.6-.1c4.5-.1%209-.3%2013.6-.4c.1%200%20.1%200%20.1.1c-.2-.1-.2%200-.3%200%22%2F%3E%3Cpath%20d%3D%22M19.6%2032.5c0%201.6-1.6%202.9-3.6%202.9s-3.6-1.3-3.6-2.9s1.6-1.2%203.6-1.2s3.6-.4%203.6%201.2m32.1%200c0%201.6-1.6%202.9-3.6%202.9s-3.6-1.3-3.6-2.9s1.6-1.2%203.6-1.2s3.6-.4%203.6%201.2%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%2064%2064%22%3E%3Cpath%20fill%3D%22%23947151%22%20d%3D%22M60.6%2010.4c0%204.6-3.9%208.4-8.7%208.4s-8.7-3.8-8.7-8.4S47.1%202%2051.9%202s8.7%203.8%208.7%208.4%22%2F%3E%3Cpath%20fill%3D%22%23e0ac7e%22%20d%3D%22M57.1%2010.4c0%202.8-2.3%205.1-5.2%205.1s-5.2-2.3-5.2-5.1s2.3-5.1%205.2-5.1s5.2%202.3%205.2%205.1%22%2F%3E%3Cellipse%20cx%3D%2212.1%22%20cy%3D%2210.4%22%20fill%3D%22%23947151%22%20rx%3D%228.7%22%20ry%3D%228.4%22%2F%3E%3Cellipse%20cx%3D%2212.1%22%20cy%3D%2210.4%22%20fill%3D%22%23e0ac7e%22%20rx%3D%225.2%22%20ry%3D%225.1%22%2F%3E%3Cpath%20fill%3D%22%23947151%22%20d%3D%22M62%2037.1C62%2055.2%2041.8%2062%2032%2062S2%2055.2%202%2037.1c0-23%2011-28.3%2030-28.3s30%205.3%2030%2028.3%22%2F%3E%3Cpath%20fill%3D%22%23e0ac7e%22%20d%3D%22M18.9%2045.6c0-9.3%208.9-12.8%2013.2-12.8s13.2%203.5%2013.2%2012.8c0%2011.8-4.8%2014.6-13.2%2014.6s-13.2-2.8-13.2-14.6%22%2F%3E%3Cpath%20fill%3D%22%23947151%22%20d%3D%22M32.7%202c.3%201.6-.6%202.8-.6%202.8c-1.4-1.9-4.2-2.5-4.2-2.5c1.1%201.3.8%203.3.8%203.3c-1.9-.7-3.6-.6-3.6-.6c4%203%203.1%2012.1%203.1%2012.1c4.7-5%2010.6-7.4%2010.6-7.4C37.5%205%2032.7%202%2032.7%202%22%2F%3E%3Cg%20fill%3D%22%233e4347%22%3E%3Cpath%20d%3D%22M36.4%2057c.1%200%20.1-.2.1-.3c0-.7-2-1.4-4.5-1.4s-4.5.6-4.5%201.4c0%20.1%200%20.3.1.3zM22.8%2045.9c0-3.8%204.1-4.6%209.2-4.6s9.2.7%209.2%204.6c0%203.1-7.4%205.8-9.2%205.8s-9.2-2.8-9.2-5.8m36.3-15.2l-1.7.3l-1.7.3c-1.1.2-2.3.3-3.4.5c-2.3.3-4.5.5-6.8.7c-4.4.3-9%20.5-13.5.5s-9.1-.2-13.6-.6s-9.1-1-13.5-2c-.1%200-.1-.1-.1-.1l.1-.1c2.3.1%204.5.3%206.8.4s4.5.2%206.8.3c4.5.1%209%20.2%2013.6.2c4.5%200%209%200%2013.6-.1c4.5-.1%209-.3%2013.6-.4c.1%200%20.1%200%20.1.1c-.2-.1-.2%200-.3%200%22%2F%3E%3Cpath%20d%3D%22M19.6%2032.5c0%201.6-1.6%202.9-3.6%202.9s-3.6-1.3-3.6-2.9s1.6-1.2%203.6-1.2s3.6-.4%203.6%201.2m32.1%200c0%201.6-1.6%202.9-3.6%202.9s-3.6-1.3-3.6-2.9s1.6-1.2%203.6-1.2s3.6-.4%203.6%201.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 bear-face 加一点动效

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

呼吸

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

css呼吸动效样式

.icon-bear-face {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

旋转

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

css旋转动效样式

.icon-bear-face {
  animation: icon-spin 1.6s linear infinite;
}

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

SVG 健康报告

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

文件体积

1.43 KB

1,468 字节

viewBox

0 0 64 64

矢量坐标系

图元总数

<path> ×7

风格

多色填充

填充跟随容器颜色

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

常见问题

关于 bear-face 图标的下载、商用与改色。

bear-face 图标是什么？▾

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

如何下载 bear-face 图标？▾

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

bear-face 图标可以商用吗？▾

如何修改 bear-face 图标的颜色？▾

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