小鸡
Griddy Icons
chicken
正在读取图标颜色…
颜色与描边跟随预览参数实时变化,以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · App 图标
浏览器 · 标签页与站点
操作按钮 · 主次层级
底部导航 · Tab 栏
真实组件上下文中的渲染效果,代码可直接复制。
导航项
导航菜单
<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>主要按钮
立即开始
<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 组件
内联引入
import { IconIcon } from './icons';
function Nav() {
return <IconIcon className="size-4" />;
}状态徽标
已完成
<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>输入框前缀
搜索框
<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>功能卡片
功能名称
功能名称
功能的一句话说明。
<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-a5ab7ead69f1fa7c { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变,适合状态提示图标
.icon-a5ab7ead69f1fa7c { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转,适合加载中场景
.icon-a5ab7ead69f1fa7c { 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 一键导出;下载前可在下方「预览参数」改色,导出文件同步生效。
Web、移动端、桌面端与小程序共 17 种格式;代码基于当前预览颜色生成,复制即用。
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M365.852 31.858c-10.152 2.474-24.915 7.073-37.437 13.602c-9.2 4.797-17.277 10.575-21.928 16.19c-4.65 5.618-6.05 9.96-4.416 15.587l3.556 12.254l-12.736-.76c-3.048-.183-4.944-.117-7.364-.262s-5.405-.706-8.27-1.87c-3.86-1.568-9.082-4.65-16.085-8.91a149 149 0 0 0-.407 16.006c.38 12.915 2.02 27.945 4.82 41.17c1.328 6.27 3.007 12.134 4.805 17.13c2.992-4.705 6.264-9.202 9.84-13.368c17.022-19.818 40.47-41.586 69.867-43.697c14.423-1.037 29.333 5.324 42.554 12.41c3.997-7.635 10.257-13.963 16.617-19.67c6.403-5.748 13.146-11.018 18.95-15.97c-9.552-6.72-16.81-10.074-23.02-10.855c-7.936-.998-16.028 1.45-28.835 8.828l-15.21 8.762l4.7-46.577zm-12.796 80.995a17 17 0 0 0-1.672.03c-20.817 1.494-41.72 19.098-57.5 37.47c-13.842 16.117-23.36 41.13-28.65 61.556c6.866 1.127 14.21 2.21 21.564 2.43c10.95.33 20.46-1.593 25.334-5.83l7.04-6.114l5.862 7.25c4.956 6.128 10.802 14.087 14.32 23.476c1.78 4.75 2.88 10.128 2.698 15.607c12.487-2.64 23.93-7.162 28.884-12.86l5.256-6.043l6.614 4.52c10.006 6.838 19.827 14.582 26.634 25.236c1.033-3.752 1.935-7.666 2.416-11.75c1.503-12.738-.18-25.93-6.636-35.494c-10.232-11.257-22.116-22.055-24.93-37.03c-1.066-5.675.69-10.02 2.78-14.29c2.092-4.27 4.972-8.467 8.35-12.593c3.803-4.644 8.228-9.1 12.948-13.05c-4.015-2.658-8.39-5.55-13.877-8.665c-12.77-7.256-28.594-13.592-37.434-13.86zM48.52 128.626c-6.353-.037-9.976.466-9.976 1.576c2.82 12.857 7.998 26.53 15.432 39.48c26.005-3.718 53.01-5.705 80.652-5.488c26.75 8.66 54.68 16.02 80.83 25.338c-25.477-4.52-50.737-6.842-75.512-7.3a490 490 0 0 0-11.82-.073c-28.5.16-56.26 2.772-82.938 7.17c4.785 32.48 20.097 79.06 50.397 120.476c32.95 45.036 82.958 84.022 156.976 94.457c58.185 8.202 107.473-4.926 132.47-31.346c12.5-13.21 19.395-29.548 19.23-49.768c-.157-18.958-6.877-41.526-22.327-67.106c-1.133-.884-2.3-1.766-3.52-2.654c-13.164 10.368-31.666 13.752-47.895 15.322l-18.392 1.78l9.94-15.58c2.974-4.66 2.76-9.265.433-15.474c-1.486-3.962-4.016-8.048-6.75-11.992c-9.13 4.418-19.634 5.185-29.495 4.887c-12.977-.392-25.546-2.913-33.66-4.262l-9.268-1.538l1.936-9.193c2.894-13.746 7.735-30.663 15.19-46.902c-46.584-23.24-175.11-41.595-211.933-41.812zm303.762.088c8.852 0 16.186 7.384 16.186 16.213s-7.334 16.213-16.186 16.213c-8.85 0-16.187-7.384-16.187-16.213s7.336-16.213 16.187-16.213m73.906 13.47l-1.707.936c-5.958 3.
…调整颜色、描边或开启轮廓化,使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
小鸡 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。
在本页点击「下载」即可保存 小鸡 的 SVG 矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
小鸡 的品牌标志与名称版权归其品牌方所有,本站内容仅供学习与设计识别参考,请勿用于商标注册或误导性用途;商用前请确认品牌官方的使用规范与授权要求。文件体积 4.73 KB,viewBox 为 0 0 512 512,共 1 个矢量图元。
小鸡 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。
在本页点击「下载 SVG」即可保存 小鸡 的矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
小鸡 为品牌标志,版权归品牌方所有,本站内容仅供识别参考;商用前请先确认对应品牌的使用规范与授权要求。
在「预览参数」面板中调整颜色与描边宽度,使用场景与用法示例会实时跟随,确认效果后再复制或下载即可。
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
文件体积
4.73 KB
4,847 字节
viewBox
0 0 512 512
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
图元总数
1
<path> ×1
风格
单色轮廓
无显式填色,跟随容器 currentColor
小鸡 是一个通用类别的单文件 SVG 矢量图标,文件体积 4.73 KB,协议为™ 品牌商标(版权归品牌方,仅供识别参考)。可在本站免费下载 小鸡的 SVG 源文件与 PNG 位图(16-512px),支持自定义颜色与描边宽度、一键生成 Favicon 包,并提供 React / Vue 组件代码与 Data URI 引用。
同名不同风格的版本,点击查看与下载
Search for a command to run...