家庭 · 子级 · 播放 · 球 · 标识

family-child-play-ball-sign

图标库: Freehand color icons
作者: Streamline
许可: CC BY 4.0 ↗

正在读取图标颜色…

预览尺寸 96px

使用场景

颜色与描边跟随预览参数实时变化，以下为常见界面中的渲染效果。

按钮内

输入框

搜索家庭 · 子级 · 播放 · 球 · 标识...

导航

家庭 · 子级 · 播放 · 球 · 标识

空状态

暂无内容

场景预览

桌面 / 浏览器 / 按钮 / 导航栏

手机桌面 · App 图标

9:41

家庭 · 子级 · 播放 · 球 · 标识

浏览器 · 标签页与站点

e2ecde63dee06d58.example

家庭 · 子级 · 播放 · 球 · 标识开始使用

操作按钮 · 主次层级

家庭 · 子级 · 播放 · 球 · 标识了解更多

底部导航 · Tab 栏

家庭 · 子级 · 播放 · 球 · 标识推荐收藏我的

UI 使用示例

真实组件上下文中的渲染效果，代码可直接复制。

导航项

导航菜单

html

<a href="#" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800">
  <!-- 内联 家庭 · 子级 · 播放 · 球 · 标识 SVG -->
  <span>导航菜单</span>
</a>

主要按钮

立即开始

html

<button class="inline-flex items-center gap-2 rounded-lg bg-neutral-900 px-4 py-2 text-sm font-medium text-white dark:bg-neutral-100 dark:text-neutral-900">
  <!-- 内联 家庭 · 子级 · 播放 · 球 · 标识 SVG -->
  立即开始
</button>

React 组件

内联引入

react

import { IconIcon } from './icons';

function Nav() {
  return <IconIcon className="size-4" />;
}

状态徽标

已完成

html

<span class="inline-flex items-center gap-1.5 rounded-full bg-neutral-100 px-2.5 py-1 text-xs font-medium text-neutral-700">
  <!-- 内联 家庭 · 子级 · 播放 · 球 · 标识 SVG -->
  已完成
</span>

输入框前缀

搜索框

搜索家庭 · 子级 · 播放 · 球 · 标识…

html

<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
  <!-- 内联 家庭 · 子级 · 播放 · 球 · 标识 SVG -->
  <input placeholder="搜索家庭 · 子级 · 播放 · 球 · 标识…" class="w-full outline-none" />
</div>

功能卡片

功能名称

功能的一句话说明。

html

<div class="rounded-xl border border-neutral-200 p-4">
  <span class="flex size-9 items-center justify-center rounded-lg bg-neutral-900 text-white">
    <!-- 内联 家庭 · 子级 · 播放 · 球 · 标识 SVG -->
  </span>
  <p class="mt-3 text-sm font-medium">功能名称</p>
  <p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>

动效图标

为家庭 · 子级 · 播放 · 球 · 标识添加 CSS 动效，导出的 SVG 内嵌样式，单文件即可播放，无需任何依赖。

描画

线条从无到有依次绘出，适合线性图标

.icon-e2ecde63dee06d58 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }

呼吸

透明度往复渐变，适合状态提示图标

.icon-e2ecde63dee06d58 { animation: svg-breathe 1.8s infinite; }

旋转

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

.icon-e2ecde63dee06d58 { animation: svg-spin 1.6s linear infinite; }

用法示例

家庭 · 子级 · 播放 · 球 · 标识在真实界面中的三种常见用法。

继续下一步

按钮内
16px · action 触发

家庭 · 子级 · 播放 · 球 · 标识

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的家庭 · 子级 · 播放 · 球 · 标识

24px 到 128px 六个常用尺寸的真实渲染，用于检查小尺寸下的可读性。

24px

32px

48px

64px

96px

128px

下载家庭 · 子级 · 播放 · 球 · 标识图标

SVG 矢量文件、PNG 位图（预设 16~512px 或自定义 16~1024px）、Favicon 包、App 图标包（iOS + Android）与矢量 PDF 一键导出；下载前可在下方「预览参数」改色，导出文件同步生效。

按预览颜色导出自定义尺寸px（16~1024）

复制家庭 · 子级 · 播放 · 球 · 标识图标代码

Web、移动端、桌面端与小程序共 17 种格式；代码基于当前预览颜色生成，复制即用。

svg

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g clip-rule="evenodd" fill="none" fill-rule="evenodd"><path d="M23.28 17.554a29 29 0 0 0-.638-1.998c-.35-.949-.74-1.868-1.15-2.807a79 79 0 0 0-1.517-3.326c-.8-1.668-1.628-3.266-2.458-4.894a14.6 14.6 0 0 0-2.127-3.177A3.78 3.78 0 0 0 12.903.024c-.31.006-.613.08-.89.22a4.3 4.3 0 0 0-.998.649A12.7 12.7 0 0 0 9.457 2.56a17 17 0 0 0-1.309 1.848C7.02 6.247 6.021 7.725 5.022 9.493c-.6.999-1.229 2.167-1.898 3.526c-.31.6-.769 1.688-1.208 2.777c-.44 1.088-.89 2.207-1.07 2.826q-.415.93-.698 1.908a4.1 4.1 0 0 0-.12 1.558c.088.364.3.685.6.91c.778.668 1.517.728 3.305.718s3.886-.1 4.775-.1l8.17.05c1 0 1.998.22 2.947.28q.694.06 1.388 0a5 5 0 0 0 1.079-.18c.307-.1.583-.279.8-.52A3.7 3.7 0 0 0 24 20.88a11.8 11.8 0 0 0-.72-3.327m-1.098 4.904c-.102.1-.23.17-.37.2c-.25.05-.489.06-.729.09a6.6 6.6 0 0 1-1.178 0c-1-.06-1.998-.27-2.997-.3l-8.21-.08c-.89 0-3.077.09-4.775.09s-2.926 0-2.537-1.648q.255-.927.64-1.808c.19-.62.589-1.698.998-2.757s.86-2.117 1.149-2.697a73 73 0 0 1 1.848-3.476c.999-1.768 1.998-3.226 3.126-5.054Q9.7 4.114 10.376 3.3q.651-.814 1.438-1.498q.26-.239.57-.41a.87.87 0 0 1 .459-.13a2.62 2.62 0 0 1 1.668 1c.76.88 1.402 1.858 1.908 2.906c.819 1.608 1.658 3.206 2.457 4.854c.52 1.059.999 2.148 1.528 3.277c.4.908.8 1.807 1.139 2.736q.36.908.63 1.848c.36.963.581 1.972.658 2.997a2.52 2.52 0 0 1-.649 1.578" fill="#020202"></path><path d="M16.11 13.009a3.6 3.6 0 0 0-1.998-.12l-.72.17c0-.22.09-.44.14-.67l.06-.21c.41-.088.8-.254 1.149-.489a3.06 3.06 0 0 0 1.398-2.587a2.9 2.9 0 0 0-.63-1.728c-1.587-2.077-3.994-.869-4.234-.739a3 3 0 0 0-1.548 2.318a2.93 2.93 0 0 0 .609 1.887c.388.507.896.908 1.478 1.169c.303.124.623.202.95.23c-.11.32-.22.639-.32.999a3 3 0 0 1-.52 0a4.4 4.4 0 0 1-1.648-.51a2.23 2.23 0 0 1-.949-1.208a.63.63 0 1 0-1.189.4a3.46 3.46 0 0 0 1.419 1.997a5.6 5.6 0 0 0 2.147.769h.36c-.08.34-.16.68-.21.999c-.12.799.12 0-.999.729a5.7 5.7 0 0 0-1.348 2.137a5.9 5.9 0 0 0-.52 2.368a.73.73 0 0 0 1.281.416a.72.72 0 0 0 .168-.526c.088-.57.273-1.121.55-1.628c.18-.504.451-.971.798-1.379a.44.44 0 0 1 .49-.08q.525.345.999.76c.495.38 1.04.692 1.618.928a4.6 4.6 0 0 0 1.937.36a.649.649 0 1 0 0-1.289a3.4 3.4 0 0 1-1.358-.37c-.45-.22-.87-.499-1.249-.828c-1.528-1.269-1.398-.74-1.288-1.459q.054-.593.17-1.178c.41-.06.819-.17 1.358-.29a2.15 2.15 0 0 1 1.189.06c.381.126.725.346.999.64a.7.7 
…

预览参数

调整颜色、描边或开启轮廓化，使用场景与用法示例实时跟随。

颜色

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于家庭 · 子级 · 播放 · 球 · 标识图标

家庭 · 子级 · 播放 · 球 · 标识是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。

在本页点击「下载」即可保存家庭 · 子级 · 播放 · 球 · 标识的 SVG 矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。

家庭 · 子级 · 播放 · 球 · 标识的品牌标志与名称版权归其品牌方所有，本站内容仅供学习与设计识别参考，请勿用于商标注册或误导性用途；商用前请确认品牌官方的使用规范与授权要求。文件体积 2.94 KB，viewBox 为 0 0 24 24，共 3 个矢量图元。

常见问题

家庭 · 子级 · 播放 · 球 · 标识图标是什么？

家庭 · 子级 · 播放 · 球 · 标识是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。

如何下载家庭 · 子级 · 播放 · 球 · 标识图标？

在本页点击「下载 SVG」即可保存家庭 · 子级 · 播放 · 球 · 标识的矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。

家庭 · 子级 · 播放 · 球 · 标识图标可以商用吗？

家庭 · 子级 · 播放 · 球 · 标识为品牌标志，版权归品牌方所有，本站内容仅供识别参考；商用前请先确认对应品牌的使用规范与授权要求。

如何修改家庭 · 子级 · 播放 · 球 · 标识图标的颜色？

在「预览参数」面板中调整颜色与描边宽度，使用场景与用法示例会实时跟随，确认效果后再复制或下载即可。

SVG 健康报告

100/100

同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器

文件体积

2.94 KB

3,015 字节

viewBox

0 0 24 24

同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器

图元总数

<path> ×3

风格

双色

2 种品牌色 · 纯填充

提取色值#020202#0c6fff

同色系图标

品牌色 #020202 的同色相色阶，点击复制色值；下方为同分类中可搭配使用的图标。

#f2f2f2#e0e0e0#c2c2c2#9e9e9e#7a7a7a#020202#292929#141414

家庭 · 子级 · 播放 · 球 · 标识品牌色详表
RGB	HSL	CMYK	色名
2, 2, 2	0°, 0%, 1%	0, 0, 0, 99	品牌主色 · 黑色
224, 224, 224	0°, 0%, 88%	0, 0, 0, 12	浅灰色
194, 194, 194	0°, 0%, 76%	0, 0, 0, 24	银色
158, 158, 158	0°, 0%, 62%	0, 0, 0, 38	灰色

图标信息摘要

家庭 · 子级 · 播放 · 球 · 标识是一个通用类别的单文件 SVG 矢量图标，文件体积 2.94 KB，协议为™ 品牌商标（版权归品牌方，仅供识别参考）。可在本站免费下载家庭 · 子级 · 播放 · 球 · 标识的 SVG 源文件与 PNG 位图（16-512px），支持自定义颜色与描边宽度、一键生成 Favicon 包，并提供 React / Vue 组件代码与 Data URI 引用。

继续探索