找找图标

girl SVG 图标

fxemojigirl

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

图标 ID
fxemoji:girl
中文名
—
所属集合
Firefox OS Emoji
集合规模
1,034 枚
基础网格
32px
色彩
多色
开源协议
Apache-2.0
作者
Mozilla

下载 girl 图标

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

px

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

girl 的预览与使用场景

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

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

在真实界面里长这样

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

各尺寸下的可读性

girl 图标 24px 渲染24pxgirl 图标 32px 渲染32pxgirl 图标 48px 渲染48pxgirl 图标 64px 渲染64pxgirl 图标 96px 渲染96pxgirl 图标 128px 渲染128px

复制 girl 图标代码

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

svgSVG 源码(内联 HTML)
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 72 72"><path fill="#FFD3B6" d="M60.2 38.9c-.3 0-.5 0-.8.1l.8-12c0-13.4-11.5-20.3-24.9-20.3S11.8 13.6 11.8 27l.8 12c-.3 0-.5-.1-.8-.1c-3.1 0-5.6 2.5-5.6 5.6s2.5 5.6 5.6 5.6c.5 0 1-.1 1.5-.2C13.6 62.2 23.7 72 36 72s22.4-9.8 22.7-22.1c.5.1 1 .2 1.5.2c3.1 0 5.6-2.5 5.6-5.6s-2.5-5.6-5.6-5.6"/><path fill="#E5AB83" d="M36 54c-1.7 0-3.3-.9-4.2-2.3c-.3-.5-.2-1.1.3-1.4s1.1-.2 1.4.3c.6.9 1.5 1.4 2.5 1.4s1.9-.5 2.4-1.3c.3-.5.9-.6 1.4-.3s.6.9.3 1.4c-.8 1.4-2.4 2.2-4.1 2.2"/><path fill="#FF929D" d="M35.9 65.2c-2.8 0-5.3-1.4-6.6-3.8c-.4-.6-.1-1.4.4-1.7s1.4-.1 1.7.4c.9 1.6 2.6 2.5 4.5 2.5s3.6-.9 4.5-2.5c.4-.6 1.1-.8 1.7-.4s.8 1.1.4 1.7c-1.3 2.4-3.8 3.8-6.6 3.8"/><path fill="#2B3B47" d="M23.6 40.6c-.1-1.3-1.2-2.3-2.5-2.3s-2.4 1-2.5 2.3v3.6c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5zm29.7 0c-.1-1.3-1.2-2.3-2.5-2.3s-2.4 1-2.5 2.3v3.6c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5z"/><path fill="#959DA3" d="M20.8 40.5c0-.3-.3-.6-.6-.6s-.6.2-.6.6v.9c0 .3.3.6.6.6s.6-.3.6-.6zm29.7 0c0-.3-.3-.6-.6-.6s-.6.2-.6.6v.9c0 .3.3.6.6.6s.6-.3.6-.6z"/><path fill="#FFAF8F" d="M32.7 41.9c0 .6-.5 1.1-1.1 1.1s-1.1-.5-1.1-1.1s.5-1.1 1.1-1.1c.6.1 1.1.5 1.1 1.1m4.7-4.3c-.6 0-1.1.5-1.1 1.1s.5 1.1 1.1 1.1s1.1-.5 1.1-1.1s-.5-1.1-1.1-1.1m2.2 5.7c-.6 0-1.1.5-1.1 1.1s.5 1.1 1.1 1.1s1.1-.5 1.1-1.1s-.5-1.1-1.1-1.1"/><path fill="#EDC0A2" d="M34 69.6c-5.2 0-10-1.6-14-4.3c4.1 4.1 9.8 6.6 16 6.6c12.5 0 22.7-10.2 22.7-22.7l.1-1.1C57 60.3 46.6 69.6 34 69.6"/><path fill="#FF6F1F" d="M62.4 49.6c-.4 7.8-1.1 15.4-2.2 18.9H48c6.3-3.9 10.5-10.8 10.7-18.7c.5.1 1 .2 1.5.2c.8.1 1.5-.1 2.2-.4m.5-23.5C62.9 11.3 50.1 0 35.2 0S9.1 11.3 9.1 26.1l.5 7.6l.1 16.5c-.2 7.2-2.4 15.5-3 17.7c-.1.3.1.6.4.6h5.3c.6 0 1.3-1.6 1.7-2.7c.1-.4.7-.4.9 0c.4 1 .5 1.8.5 2.3c0 .2.2.4.5.4h8c-6.1-3.8-10.2-10.4-10.7-18V30.8c0-1.8.3-3.3.8-4.7c.4-.7 1-1.5 1.7-2.3c-1 4-.7 7.5-.6 8.6c0 .2.2.3.4.3h32.6c.8 0 1-4 1-6.2c0-.4.6-.5.8-.1c.7 1.9.9 4.9.9 6c0 .2.2.4.4.4h8.5l-.4 6.2c.3 0 .5-.1.8-.1h.8c.1 0 .3 0 .4.1c.1 0 .2.1.3.1s.2.1.3.1s.2.1.3.1c.1.1.3.1.4.2c.3-7.4.2-13.4.2-13.4"/><path fill="#FFA1E0" d="M61.2 24.6C58.9 12.9 48.6 4.2 36.3 4.2c-11.3 0-20.9 7.4-24.2 17.6c3.3-5.6 9.5-12.3 17.7-14.3c2.1-.6 4.2-.9 6.5-.9c4.9 0 9.5 1.6 13.3 4.2c5.7 3.8 9.8 9.5 11.6 13.8"/></svg>
reactReact 组件(TSX)
export function GirlIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 72 72"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<path fill="#FFD3B6" d="M60.2 38.9c-.3 0-.5 0-.8.1l.8-12c0-13.4-11.5-20.3-24.9-20.3S11.8 13.6 11.8 27l.8 12c-.3 0-.5-.1-.8-.1c-3.1 0-5.6 2.5-5.6 5.6s2.5 5.6 5.6 5.6c.5 0 1-.1 1.5-.2C13.6 62.2 23.7 72 36 72s22.4-9.8 22.7-22.1c.5.1 1 .2 1.5.2c3.1 0 5.6-2.5 5.6-5.6s-2.5-5.6-5.6-5.6"/><path fill="#E5AB83" d="M36 54c-1.7 0-3.3-.9-4.2-2.3c-.3-.5-.2-1.1.3-1.4s1.1-.2 1.4.3c.6.9 1.5 1.4 2.5 1.4s1.9-.5 2.4-1.3c.3-.5.9-.6 1.4-.3s.6.9.3 1.4c-.8 1.4-2.4 2.2-4.1 2.2"/><path fill="#FF929D" d="M35.9 65.2c-2.8 0-5.3-1.4-6.6-3.8c-.4-.6-.1-1.4.4-1.7s1.4-.1 1.7.4c.9 1.6 2.6 2.5 4.5 2.5s3.6-.9 4.5-2.5c.4-.6 1.1-.8 1.7-.4s.8 1.1.4 1.7c-1.3 2.4-3.8 3.8-6.6 3.8"/><path fill="#2B3B47" d="M23.6 40.6c-.1-1.3-1.2-2.3-2.5-2.3s-2.4 1-2.5 2.3v3.6c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5zm29.7 0c-.1-1.3-1.2-2.3-2.5-2.3s-2.4 1-2.5 2.3v3.6c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5z"/><path fill="#959DA3" d="M20.8 40.5c0-.3-.3-.6-.6-.6s-.6.2-.6.6v.9c0 .3.3.6.6.6s.6-.3.6-.6zm29.7 0c0-.3-.3-.6-.6-.6s-.6.2-.6.6v.9c0 .3.3.6.6.6s.6-.3.6-.6z"/><path fill="#FFAF8F" d="M32.7 41.9c0 .6-.5 1.1-1.1 1.1s-1.1-.5-1.1-1.1s.5-1.1 1.1-1.1c.6.1 1.1.5 1.1 1.1m4.7-4.3c-.6 0-1.1.5-1.1 1.1s.5 1.1 1.1 1.1s1.1-.5 1.1-1.1s-.5-1.1-1.1-1.1m2.2 5.7c-.6 0-1.1.5-1.1 1.1s.5 1.1 1.1 1.1s1.1-.5 1.1-1.1s-.5-1.1-1.1-1.1"/><path fill="#EDC0A2" d="M34 69.6c-5.2 0-10-1.6-14-4.3c4.1 4.1 9.8 6.6 16 6.6c12.5 0 22.7-10.2 22.7-22.7l.1-1.1C57 60.3 46.6 69.6 34 69.6"/><path fill="#FF6F1F" d="M62.4 49.6c-.4 7.8-1.1 15.4-2.2 18.9H48c6.3-3.9 10.5-10.8 10.7-18.7c.5.1 1 .2 1.5.2c.8.1 1.5-.1 2.2-.4m.5-23.5C62.9 11.3 50.1 0 35.2 0S9.1 11.3 9.1 26.1l.5 7.6l.1 16.5c-.2 7.2-2.4 15.5-3 17.7c-.1.3.1.6.4.6h5.3c.6 0 1.3-1.6 1.7-2.7c.1-.4.7-.4.9 0c.4 1 .5 1.8.5 2.3c0 .2.2.4.5.4h8c-6.1-3.8-10.2-10.4-10.7-18V30.8c0-1.8.3-3.3.8-4.7c.4-.7 1-1.5 1.7-2.3c-1 4-.7 7.5-.6 8.6c0 .2.2.3.4.3h32.6c.8 0 1-4 1-6.2c0-.4.6-.5.8-.1c.7 1.9.9 4.9.9 6c0 .2.2.4.4.4h8.5l-.4 6.2c.3 0 .5-.1.8-.1h.8c.1 0 .3 0 .4.1c.1 0 .2.1.3.1s.2.1.3.1s.2.1.3.1c.1.1.3.1.4.2c.3-7.4.2-13.4.2-13.4"/><path fill="#FFA1E0" d="M61.2 24.6C58.9 12.9 48.6 4.2 36.3 4.2c-11.3 0-20.9 7.4-24.2 17.6c3.3-5.6 9.5-12.3 17.7-14.3c2.1-.6 4.2-.9 6.5-.9c4.9 0 9.5 1.6 13.3 4.2c5.7 3.8 9.8 9.5 11.6 13.8"/>` }}
    />
  );
}
vueVue 3 组件
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 72 72" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<path fill="#FFD3B6" d="M60.2 38.9c-.3 0-.5 0-.8.1l.8-12c0-13.4-11.5-20.3-24.9-20.3S11.8 13.6 11.8 27l.8 12c-.3 0-.5-.1-.8-.1c-3.1 0-5.6 2.5-5.6 5.6s2.5 5.6 5.6 5.6c.5 0 1-.1 1.5-.2C13.6 62.2 23.7 72 36 72s22.4-9.8 22.7-22.1c.5.1 1 .2 1.5.2c3.1 0 5.6-2.5 5.6-5.6s-2.5-5.6-5.6-5.6"/><path fill="#E5AB83" d="M36 54c-1.7 0-3.3-.9-4.2-2.3c-.3-.5-.2-1.1.3-1.4s1.1-.2 1.4.3c.6.9 1.5 1.4 2.5 1.4s1.9-.5 2.4-1.3c.3-.5.9-.6 1.4-.3s.6.9.3 1.4c-.8 1.4-2.4 2.2-4.1 2.2"/><path fill="#FF929D" d="M35.9 65.2c-2.8 0-5.3-1.4-6.6-3.8c-.4-.6-.1-1.4.4-1.7s1.4-.1 1.7.4c.9 1.6 2.6 2.5 4.5 2.5s3.6-.9 4.5-2.5c.4-.6 1.1-.8 1.7-.4s.8 1.1.4 1.7c-1.3 2.4-3.8 3.8-6.6 3.8"/><path fill="#2B3B47" d="M23.6 40.6c-.1-1.3-1.2-2.3-2.5-2.3s-2.4 1-2.5 2.3v3.6c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5zm29.7 0c-.1-1.3-1.2-2.3-2.5-2.3s-2.4 1-2.5 2.3v3.6c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5z"/><path fill="#959DA3" d="M20.8 40.5c0-.3-.3-.6-.6-.6s-.6.2-.6.6v.9c0 .3.3.6.6.6s.6-.3.6-.6zm29.7 0c0-.3-.3-.6-.6-.6s-.6.2-.6.6v.9c0 .3.3.6.6.6s.6-.3.6-.6z"/><path fill="#FFAF8F" d="M32.7 41.9c0 .6-.5 1.1-1.1 1.1s-1.1-.5-1.1-1.1s.5-1.1 1.1-1.1c.6.1 1.1.5 1.1 1.1m4.7-4.3c-.6 0-1.1.5-1.1 1.1s.5 1.1 1.1 1.1s1.1-.5 1.1-1.1s-.5-1.1-1.1-1.1m2.2 5.7c-.6 0-1.1.5-1.1 1.1s.5 1.1 1.1 1.1s1.1-.5 1.1-1.1s-.5-1.1-1.1-1.1"/><path fill="#EDC0A2" d="M34 69.6c-5.2 0-10-1.6-14-4.3c4.1 4.1 9.8 6.6 16 6.6c12.5 0 22.7-10.2 22.7-22.7l.1-1.1C57 60.3 46.6 69.6 34 69.6"/><path fill="#FF6F1F" d="M62.4 49.6c-.4 7.8-1.1 15.4-2.2 18.9H48c6.3-3.9 10.5-10.8 10.7-18.7c.5.1 1 .2 1.5.2c.8.1 1.5-.1 2.2-.4m.5-23.5C62.9 11.3 50.1 0 35.2 0S9.1 11.3 9.1 26.1l.5 7.6l.1 16.5c-.2 7.2-2.4 15.5-3 17.7c-.1.3.1.6.4.6h5.3c.6 0 1.3-1.6 1.7-2.7c.1-.4.7-.4.9 0c.4 1 .5 1.8.5 2.3c0 .2.2.4.5.4h8c-6.1-3.8-10.2-10.4-10.7-18V30.8c0-1.8.3-3.3.8-4.7c.4-.7 1-1.5 1.7-2.3c-1 4-.7 7.5-.6 8.6c0 .2.2.3.4.3h32.6c.8 0 1-4 1-6.2c0-.4.6-.5.8-.1c.7 1.9.9 4.9.9 6c0 .2.2.4.4.4h8.5l-.4 6.2c.3 0 .5-.1.8-.1h.8c.1 0 .3 0 .4.1c.1 0 .2.1.3.1s.2.1.3.1s.2.1.3.1c.1.1.3.1.4.2c.3-7.4.2-13.4.2-13.4"/><path fill="#FFA1E0" d="M61.2 24.6C58.9 12.9 48.6 4.2 36.3 4.2c-11.3 0-20.9 7.4-24.2 17.6c3.3-5.6 9.5-12.3 17.7-14.3c2.1-.6 4.2-.9 6.5-.9c4.9 0 9.5 1.6 13.3 4.2c5.7 3.8 9.8 9.5 11.6 13.8"/>`;
</script>
cssCSS mask(随 currentColor 改色)
.girl {
  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%2072%2072%22%3E%3Cpath%20fill%3D%22%23FFD3B6%22%20d%3D%22M60.2%2038.9c-.3%200-.5%200-.8.1l.8-12c0-13.4-11.5-20.3-24.9-20.3S11.8%2013.6%2011.8%2027l.8%2012c-.3%200-.5-.1-.8-.1c-3.1%200-5.6%202.5-5.6%205.6s2.5%205.6%205.6%205.6c.5%200%201-.1%201.5-.2C13.6%2062.2%2023.7%2072%2036%2072s22.4-9.8%2022.7-22.1c.5.1%201%20.2%201.5.2c3.1%200%205.6-2.5%205.6-5.6s-2.5-5.6-5.6-5.6%22%2F%3E%3Cpath%20fill%3D%22%23E5AB83%22%20d%3D%22M36%2054c-1.7%200-3.3-.9-4.2-2.3c-.3-.5-.2-1.1.3-1.4s1.1-.2%201.4.3c.6.9%201.5%201.4%202.5%201.4s1.9-.5%202.4-1.3c.3-.5.9-.6%201.4-.3s.6.9.3%201.4c-.8%201.4-2.4%202.2-4.1%202.2%22%2F%3E%3Cpath%20fill%3D%22%23FF929D%22%20d%3D%22M35.9%2065.2c-2.8%200-5.3-1.4-6.6-3.8c-.4-.6-.1-1.4.4-1.7s1.4-.1%201.7.4c.9%201.6%202.6%202.5%204.5%202.5s3.6-.9%204.5-2.5c.4-.6%201.1-.8%201.7-.4s.8%201.1.4%201.7c-1.3%202.4-3.8%203.8-6.6%203.8%22%2F%3E%3Cpath%20fill%3D%22%232B3B47%22%20d%3D%22M23.6%2040.6c-.1-1.3-1.2-2.3-2.5-2.3s-2.4%201-2.5%202.3v3.6c0%201.4%201.1%202.5%202.5%202.5s2.5-1.1%202.5-2.5zm29.7%200c-.1-1.3-1.2-2.3-2.5-2.3s-2.4%201-2.5%202.3v3.6c0%201.4%201.1%202.5%202.5%202.5s2.5-1.1%202.5-2.5z%22%2F%3E%3Cpath%20fill%3D%22%23959DA3%22%20d%3D%22M20.8%2040.5c0-.3-.3-.6-.6-.6s-.6.2-.6.6v.9c0%20.3.3.6.6.6s.6-.3.6-.6zm29.7%200c0-.3-.3-.6-.6-.6s-.6.2-.6.6v.9c0%20.3.3.6.6.6s.6-.3.6-.6z%22%2F%3E%3Cpath%20fill%3D%22%23FFAF8F%22%20d%3D%22M32.7%2041.9c0%20.6-.5%201.1-1.1%201.1s-1.1-.5-1.1-1.1s.5-1.1%201.1-1.1c.6.1%201.1.5%201.1%201.1m4.7-4.3c-.6%200-1.1.5-1.1%201.1s.5%201.1%201.1%201.1s1.1-.5%201.1-1.1s-.5-1.1-1.1-1.1m2.2%205.7c-.6%200-1.1.5-1.1%201.1s.5%201.1%201.1%201.1s1.1-.5%201.1-1.1s-.5-1.1-1.1-1.1%22%2F%3E%3Cpath%20fill%3D%22%23EDC0A2%22%20d%3D%22M34%2069.6c-5.2%200-10-1.6-14-4.3c4.1%204.1%209.8%206.6%2016%206.6c12.5%200%2022.7-10.2%2022.7-22.7l.1-1.1C57%2060.3%2046.6%2069.6%2034%2069.6%22%2F%3E%3Cpath%20fill%3D%22%23FF6F1F%22%20d%3D%22M62.4%2049.6c-.4%207.8-1.1%2015.4-2.2%2018.9H48c6.3-3.9%2010.5-10.8%2010.7-18.7c.5.1%201%20.2%201.5.2c.8.1%201.5-.1%202.2-.4m.5-23.5C62.9%2011.3%2050.1%200%2035.2%200S9.1%2011.3%209.1%2026.1l.5%207.6l.1%2016.5c-.2%207.2-2.4%2015.5-3%2017.7c-.1.3.1.6.4.6h5.3c.6%200%201.3-1.6%201.7-2.7c.1-.4.7-.4.9%200c.4%201%20.5%201.8.5%202.3c0%20.2.2.4.5.4h8c-6.1-3.8-10.2-10.4-10.7-18V30.8c0-1.8.3-3.3.8-4.7c.4-.7%201-1.5%201.7-2.3c-1%204-.7%207.5-.6%208.6c0%20.2.2.3.4.3h32.6c.8%200%201-4%201-6.2c0-.4.6-.5.8-.1c.7%201.9.9%204.9.9%206c0%20.2.2.4.4.4h8.5l-.4%206.2c.3%200%20.5-.1.8-.1h.8c.1%200%20.3%200%20.4.1c.1%200%20.2.1.3.1s.2.1.3.1s.2.1.3.1c.1.1.3.1.4.2c.3-7.4.2-13.4.2-13.4%22%2F%3E%3Cpath%20fill%3D%22%23FFA1E0%22%20d%3D%22M61.2%2024.6C58.9%2012.9%2048.6%204.2%2036.3%204.2c-11.3%200-20.9%207.4-24.2%2017.6c3.3-5.6%209.5-12.3%2017.7-14.3c2.1-.6%204.2-.9%206.5-.9c4.9%200%209.5%201.6%2013.3%204.2c5.7%203.8%209.8%209.5%2011.6%2013.8%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%2072%2072%22%3E%3Cpath%20fill%3D%22%23FFD3B6%22%20d%3D%22M60.2%2038.9c-.3%200-.5%200-.8.1l.8-12c0-13.4-11.5-20.3-24.9-20.3S11.8%2013.6%2011.8%2027l.8%2012c-.3%200-.5-.1-.8-.1c-3.1%200-5.6%202.5-5.6%205.6s2.5%205.6%205.6%205.6c.5%200%201-.1%201.5-.2C13.6%2062.2%2023.7%2072%2036%2072s22.4-9.8%2022.7-22.1c.5.1%201%20.2%201.5.2c3.1%200%205.6-2.5%205.6-5.6s-2.5-5.6-5.6-5.6%22%2F%3E%3Cpath%20fill%3D%22%23E5AB83%22%20d%3D%22M36%2054c-1.7%200-3.3-.9-4.2-2.3c-.3-.5-.2-1.1.3-1.4s1.1-.2%201.4.3c.6.9%201.5%201.4%202.5%201.4s1.9-.5%202.4-1.3c.3-.5.9-.6%201.4-.3s.6.9.3%201.4c-.8%201.4-2.4%202.2-4.1%202.2%22%2F%3E%3Cpath%20fill%3D%22%23FF929D%22%20d%3D%22M35.9%2065.2c-2.8%200-5.3-1.4-6.6-3.8c-.4-.6-.1-1.4.4-1.7s1.4-.1%201.7.4c.9%201.6%202.6%202.5%204.5%202.5s3.6-.9%204.5-2.5c.4-.6%201.1-.8%201.7-.4s.8%201.1.4%201.7c-1.3%202.4-3.8%203.8-6.6%203.8%22%2F%3E%3Cpath%20fill%3D%22%232B3B47%22%20d%3D%22M23.6%2040.6c-.1-1.3-1.2-2.3-2.5-2.3s-2.4%201-2.5%202.3v3.6c0%201.4%201.1%202.5%202.5%202.5s2.5-1.1%202.5-2.5zm29.7%200c-.1-1.3-1.2-2.3-2.5-2.3s-2.4%201-2.5%202.3v3.6c0%201.4%201.1%202.5%202.5%202.5s2.5-1.1%202.5-2.5z%22%2F%3E%3Cpath%20fill%3D%22%23959DA3%22%20d%3D%22M20.8%2040.5c0-.3-.3-.6-.6-.6s-.6.2-.6.6v.9c0%20.3.3.6.6.6s.6-.3.6-.6zm29.7%200c0-.3-.3-.6-.6-.6s-.6.2-.6.6v.9c0%20.3.3.6.6.6s.6-.3.6-.6z%22%2F%3E%3Cpath%20fill%3D%22%23FFAF8F%22%20d%3D%22M32.7%2041.9c0%20.6-.5%201.1-1.1%201.1s-1.1-.5-1.1-1.1s.5-1.1%201.1-1.1c.6.1%201.1.5%201.1%201.1m4.7-4.3c-.6%200-1.1.5-1.1%201.1s.5%201.1%201.1%201.1s1.1-.5%201.1-1.1s-.5-1.1-1.1-1.1m2.2%205.7c-.6%200-1.1.5-1.1%201.1s.5%201.1%201.1%201.1s1.1-.5%201.1-1.1s-.5-1.1-1.1-1.1%22%2F%3E%3Cpath%20fill%3D%22%23EDC0A2%22%20d%3D%22M34%2069.6c-5.2%200-10-1.6-14-4.3c4.1%204.1%209.8%206.6%2016%206.6c12.5%200%2022.7-10.2%2022.7-22.7l.1-1.1C57%2060.3%2046.6%2069.6%2034%2069.6%22%2F%3E%3Cpath%20fill%3D%22%23FF6F1F%22%20d%3D%22M62.4%2049.6c-.4%207.8-1.1%2015.4-2.2%2018.9H48c6.3-3.9%2010.5-10.8%2010.7-18.7c.5.1%201%20.2%201.5.2c.8.1%201.5-.1%202.2-.4m.5-23.5C62.9%2011.3%2050.1%200%2035.2%200S9.1%2011.3%209.1%2026.1l.5%207.6l.1%2016.5c-.2%207.2-2.4%2015.5-3%2017.7c-.1.3.1.6.4.6h5.3c.6%200%201.3-1.6%201.7-2.7c.1-.4.7-.4.9%200c.4%201%20.5%201.8.5%202.3c0%20.2.2.4.5.4h8c-6.1-3.8-10.2-10.4-10.7-18V30.8c0-1.8.3-3.3.8-4.7c.4-.7%201-1.5%201.7-2.3c-1%204-.7%207.5-.6%208.6c0%20.2.2.3.4.3h32.6c.8%200%201-4%201-6.2c0-.4.6-.5.8-.1c.7%201.9.9%204.9.9%206c0%20.2.2.4.4.4h8.5l-.4%206.2c.3%200%20.5-.1.8-.1h.8c.1%200%20.3%200%20.4.1c.1%200%20.2.1.3.1s.2.1.3.1s.2.1.3.1c.1.1.3.1.4.2c.3-7.4.2-13.4.2-13.4%22%2F%3E%3Cpath%20fill%3D%22%23FFA1E0%22%20d%3D%22M61.2%2024.6C58.9%2012.9%2048.6%204.2%2036.3%204.2c-11.3%200-20.9%207.4-24.2%2017.6c3.3-5.6%209.5-12.3%2017.7-14.3c2.1-.6%204.2-.9%206.5-.9c4.9%200%209.5%201.6%2013.3%204.2c5.7%203.8%209.8%209.5%2011.6%2013.8%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 girl 加一点动效

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

girl 呼吸动效演示

呼吸

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

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

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

旋转

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

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

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

SVG 健康报告

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

文件体积

2.22 KB

2,270 字节

viewBox

0 0 72 72

矢量坐标系

图元总数

9

<path> ×9

风格

多色填充

填充跟随容器颜色

同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 2.22 KB(2,270 字节),图元 9 个,风格为多色填充。

常见问题

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

girl 图标是什么?▾

它是 Firefox OS Emoji(fxemoji)开源图标集中的 girl 图标,多色填充,viewBox 为 0 0 72 72,文件仅 2.22 KB,矢量格式可无损缩放到任意尺寸。

如何下载 girl 图标?▾

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

girl 图标可以商用吗?▾

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

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

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

Firefox OS Emoji 中的相近图标

girlguy
girlgirl