使用场景
颜色与描边跟随预览参数实时变化，以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · App 图标
9:41
浏览器 · 标签页与站点
操作按钮 · 主次层级
底部导航 · 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">
<!-- 内联 Babel 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">
<!-- 内联 Babel SVG -->
立即开始
</button>React 组件
内联引入
react
import { BabelIcon } from './icons';
function Nav() {
return <BabelIcon 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">
<!-- 内联 Babel SVG -->
已完成
</span>输入框前缀
搜索框
html
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 Babel SVG -->
<input placeholder="搜索Babel…" 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">
<!-- 内联 Babel SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>动效图标
为 Babel 添加 CSS 动效，导出的 SVG 内嵌样式，单文件即可播放，无需任何依赖。
描画
线条从无到有依次绘出，适合线性图标
.icon-66eedd2db2957381 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变，适合状态提示图标
.icon-66eedd2db2957381 { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转，适合加载中场景
.icon-66eedd2db2957381 { animation: svg-spin 1.6s linear infinite; }用法示例
Babel 在真实界面中的三种常见用法。
按钮内
16px · action 触发
导航项
18px · 列表选中态
暂无数据
空状态
40px · 引导提示
各尺寸下的 Babel
24px 到 128px 六个常用尺寸的真实渲染，用于检查小尺寸下的可读性。
24px
32px
48px
64px
96px
128px
下载 Babel 图标
SVG 矢量文件、PNG 位图（预设 16~512px 或自定义 16~1024px）、Favicon 包、App 图标包（iOS + Android）与矢量 PDF 一键导出；下载前可在下方「预览参数」改色，导出文件同步生效。
按预览颜色导出px（16~1024）
复制 Babel 图标代码
Web、移动端、桌面端与小程序共 17 种格式；代码基于当前预览颜色生成，复制即用。
svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1349 519">
<path fill="#f9dc3e" d="m955 115 1 1h3l1-5-1-2-4 6Zm-31-76v-3h-5v3h5Zm-92 172c0-3-8-14-25-32 0-4 5-9 17-15l33-29c8-10 12-25 14-47l-1-5c-1-14-12-26-32-35-12-9-34-13-65-14-26 2-59 12-101 28-11 8-24 16-39 24v3l4-2c2 0 3 1 3 2l3-1h1v1c0 1-9 9-27 21l1 3h-1l-3-1-4 2v1l3 3-4-1c-4 1-8 3-12 7l1-7c6-27 11-50 13-70v-1c-5-3-9-7-13-12v-6h-1a1864 1864 0 0 1-137 180c-4 2-5 4-4 6l-2-1c-5 8-12 14-22 16l-11 2-2 3 1 2 3-1 1 1-9 3-16 4h-8c-1 2 7 0 4 1l-11 2c-6 2-9 1-10-1h-1l-9 2c0-4-11-18-33-41 0-5 7-12 23-20l44-39c9-12 15-33 17-60v-7c-2-20-16-35-43-48-16-10-44-16-85-17-34 3-79 15-133 36-15 11-32 22-52 33l1 3 5-2c2 0 3 1 3 3l4-2h2v1c0 2-12 11-36 28l2 3h-2l-4-1c0 1-1 2-5 2v2l4 4-5-1c-8 1-15 7-23 17l2 3 11-9 1 5-5 2 4 6c8-8 16-16 26-22 5 1 7 3 7 5l4-1c26-19 51-33 76-41l1 3c-5 7-8 11-10 11 0 2 1 5 3 6C122 235 66 356 0 472l2 5c9-2 14-4 17-6h2v3h3l4-2c0 1 1 2 3 1v4c1 3-1 8-5 15-4 4-8 13-12 26v1h4c14-16 25-32 32-47 42-13 74-25 97-37 22-1 39-7 51-17l-1-2-8 3h-2v-2c16-2 28-6 34-11 32-25 56-42 72-52 34-25 55-49 65-72l6-2h8l1-2h9l12-3 2-1-1 1h5l1 3-57 91-13 16-6 21h1l6-3-2 8 1 3 1 2v3l2-1c4-3 6-6 5-9l8 1 1 1c-3 1-4 3-4 6v1h1c21-23 72-100 113-153-1-6 20-14 64-24h2c1 7-2 23-11 50-5 16-8 25-7 26-7 21-11 33-10 35l-16 51c-10 26-18 54-23 83h4l3-2 1 1-1-4h7c2 0 4-3 5-7 0-7 1-11 4-12l8-25c4-16 7-25 9-28 6-21 10-32 13-32v2l-4 11c-7 34-15 60-23 79l3 10 1-1c19-40 45-119 80-237 1-11 6-19 15-24l-2-2v-2c4 0 7-2 8-4l-10-4 17-75 7-5v4l-4 1 4 5 19-17c4 1 6 3 6 4h2c20-15 40-25 59-32v3l-7 8 1 5c-34 95-77 188-127 276l2 3c7-1 11-3 13-5h1v3h3l2-2 3 1v3c0 2-1 6-4 11-3 3-6 10-9 20v1h2c11-12 20-24 25-36 32-9 57-19 73-28 17-1 30-5 39-13v-1l-6 2h-2v-1c12-2 21-5 26-9 24-18 42-32 55-39 38-29 56-56 54-81Zm-6 1v10l-3 4-2-17 5 3ZM68 131h-1l-1-3 7-1v2l-5 2ZM35 468c-4-2-8-3-11-2v-5c-1-2 0-3 3-4 2 0 3 1 4 5l9-11 4 1c-1 10-4 15-9 16ZM395 91c-2 0-5-5-10-15l-1-4c4 0 7 5 10 16l1 3Zm-5-37-1 3-49-20c32 1 49 7 50 17ZM183 231l-7 1v-3l7-1v3Zm-5-106h1l1 4c-2 1-4 3-6 8l-1-4c3-4 5-6 5-8Zm-15 34 1 6h-2v-6h1Zm-7 12h3c0 5-2 8-5 8h-1l3-8Zm-6 17h2v1l-3 6h-3l-1-2c4 0 5-2 5-5Zm-6 15-1 9h-1l-1-8 3-1ZM88 363c-2 11-4 17-7 17v-2c-1-5 2-10 7-15Zm-10 22v2c0 2-1 3-3 3v-1c0-2 1-3 3-4Zm-3 46h5v2l-5 2h-3c0-2 1-3 3-4Zm148-45c-29 14-46 24-51 29-32 11-48 18-47 21-29 11-47 19-56 24l-9-2c-1-6 2-11 8-14 4-1 9 0 14 2 5-3 14-6 27-9l-1-3H98l30-14h5v1c-8 1-13 4-14 9 0 2 1 3 3 2l10-7c13-2 48-21 1
…预览参数
调整颜色、描边或开启轮廓化，使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 Babel 图标
Babel 是软件SaaS分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。软件产品与在线服务平台的品牌标识。
在本页点击「下载」即可保存 Babel 的 SVG 矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。 了解 Babel 更多信息可访问官方网站。
Babel 的品牌标志与名称版权归其品牌方所有，本站内容仅供学习与设计识别参考，请勿用于商标注册或误导性用途；商用前请确认品牌官方的使用规范与授权要求（参见品牌官网）。文件体积 7.58 KB，viewBox 为 0 0 1349 519，共 1 个矢量图元。
常见问题
Babel 图标是什么？
Babel 是软件SaaS分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。
如何下载 Babel 图标？
在本页点击「下载 SVG」即可保存 Babel 的矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Babel 图标可以商用吗？
Babel 为品牌标志，版权归品牌方所有，本站内容仅供识别参考；商用前请先确认对应品牌的使用规范与授权要求。
如何修改 Babel 图标的颜色？
在「预览参数」面板中调整颜色与描边宽度，使用场景与用法示例会实时跟随，确认效果后再复制或下载即可。
SVG 健康报告
100/100
文件结构良好，未检测到问题
文件体积
7.58 KB
7,757 字节
viewBox
0 0 1349 519
缩放适配正常
图元总数
1
<path> ×1
风格
单色品牌
1 种品牌色 · 纯填充
提取色值#f9dc3e
相似图标
按名称与标签相似度排序。
同色系图标
品牌色 #f9dc3e 的同色相色阶，点击复制色值；下方为同分类中可搭配使用的图标。
#fefbe6#fdf4c4#fbe988#f9dd43#edca07#f9dc3e#e8c507#ad9305
| 色值 | RGB | HSL | CMYK | 色名 |
|---|---|---|---|---|
| 249, 220, 62 | 51°, 94%, 61% | 0, 12, 75, 2 | 品牌主色 · 金色 | |
| 253, 244, 196 | 51°, 93%, 88% | 0, 4, 23, 1 | 米色 | |
| 251, 233, 136 | 51°, 93%, 76% | 0, 7, 46, 2 | 粉红色 | |
| 249, 221, 67 | 51°, 94%, 62% | 0, 11, 73, 2 | 金色 |
Babel 的其他风格版本
同名图标的不同绘制风格，切换后预览与下载均使用所选版本。
默认
单色
图标信息摘要
Babel 是一个软件SaaS类别的单文件 SVG 矢量图标，文件体积 7.58 KB，协议为™ 品牌商标（版权归品牌方，仅供识别参考）。可在本站免费下载 Babel的 SVG 源文件与 PNG 位图（16-512px），支持自定义颜色与描边宽度、一键生成 Favicon 包，并提供 React / Vue 组件代码与 Data URI 引用。 详情参见Babel 官网。
继续探索
相关搜索
相关标签
相关图标
