Buy
buy
使用场景
颜色与描边跟随预览参数实时变化，以下为常见界面中的渲染效果。
按钮内
输入框
搜索Bend...
导航
Bend
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · App 图标
9:41
Bend
浏览器 · 标签页与站点
79049cb730656f2e.example
Bend开始使用
操作按钮 · 主次层级
Bend了解更多
底部导航 · Tab 栏
Bend推荐收藏我的
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">
<!-- 内联 Bend 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">
<!-- 内联 Bend SVG -->
立即开始
</button>React 组件
内联引入
react
import { BendIcon } from './icons';
function Nav() {
return <BendIcon 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">
<!-- 内联 Bend SVG -->
已完成
</span>输入框前缀
搜索框
搜索Bend…
html
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 Bend SVG -->
<input placeholder="搜索Bend…" 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">
<!-- 内联 Bend SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>动效图标
为 Bend 添加 CSS 动效，导出的 SVG 内嵌样式，单文件即可播放，无需任何依赖。
描画
线条从无到有依次绘出，适合线性图标
.icon-79049cb730656f2e { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变，适合状态提示图标
.icon-79049cb730656f2e { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转，适合加载中场景
.icon-79049cb730656f2e { animation: svg-spin 1.6s linear infinite; }用法示例
Bend 在真实界面中的三种常见用法。
继续下一步
按钮内
16px · action 触发
Bend
导航项
18px · 列表选中态
暂无数据
空状态
40px · 引导提示
各尺寸下的 Bend
24px 到 128px 六个常用尺寸的真实渲染，用于检查小尺寸下的可读性。
24px
32px
48px
64px
96px
128px
下载 Bend 图标
SVG 矢量文件、PNG 位图（预设 16~512px 或自定义 16~1024px）、Favicon 包、App 图标包（iOS + Android）与矢量 PDF 一键导出；下载前可在下方「预览参数」改色，导出文件同步生效。
按预览颜色导出px（16~1024）
复制 Bend 图标代码
Web、移动端、桌面端与小程序共 17 种格式；代码基于当前预览颜色生成，复制即用。
svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#181b1e" fill-rule="evenodd" d="M5.813 7.832c1.035-.432 2.656-.783 5.028-.783c2.377 0 4.902.54 6.833 1.427c.968.44 1.796.972 2.385 1.575c.58.599.941 1.274.941 2.012c0 1.463-1.274 2.683-3.277 3.529c-2.016.855-4.839 1.36-8.066 1.36c-2.588 0-4.24-.473-5.248-1.081c-1.013-.612-1.395-1.36-1.409-1.9v-.062l.045-.046q.09-.092.207-.328c.072-.149.149-.338.22-.554c.293-.85.559-2.07.703-2.92c.072-.429.112-.748.112-.879c0-.211.144-.45.387-.666a4 4 0 0 1 1.144-.684zm-.977.936l.203.31l.225-.152l-.076-.432c-.144.09-.262.184-.352.27zm-.26.414c0-.058.03-.157.134-.288l.072.405l-.14.153l-.08-.058zm-1.211 5.154l-.054-.18l.252-.32c.018.032.045.068.063.109zm.216.414l-.068-.108l.297-.45l.1.113zm.391.437l-.198-.198l.342-.473c.068.063.14.122.22.185zm.504.378a4 4 0 0 1-.279-.194l.374-.495l.27.176zm.622.329a5 5 0 0 1-.37-.18l.374-.518q.162.093.351.18zm.837.306a7 7 0 0 1-.558-.19l.355-.522c.144.064.302.117.464.171l-.315.505zm.846.207a9 9 0 0 1-.612-.144l.32-.514c.18.05.368.1.567.14zm1.004.148a13 13 0 0 1-.702-.094l.27-.509q.31.054.648.095l-.225.504zm1.08.081a14 14 0 0 1-.783-.05l.225-.503c.225.022.468.04.72.045l-.158.508zm.306.01l.153-.505h.747l-.094.509h-.81zm1.999-.032c-.298.013-.595.027-.896.031l.09-.508l.806-.032zm1.201-.09c-.297.031-.603.054-.909.072v-.509c.275-.013.55-.036.824-.058l.09.495zm1.121-.135c-.27.045-.549.076-.828.108l-.09-.495l.743-.09l.175.481zm.293-.045c.279-.04.544-.09.81-.135l-.27-.455l-.711.117l.17.477zm-.28-.766c.226-.026.442-.063.653-.099l-.26-.44l-.559.085l.167.459zm-.27-.742l.496-.072l-.284-.477l-.396.045l.18.504zm-.292-.793l.333-.035l-.315-.527l-.216.018zm-.504-.521l.202.553l-.396.027l-.099-.567c.104 0 .198-.009.293-.014m.198-.316l.157-.009l-.256-.427l-.059.004l.158.437zm-.464-.418l.162.44l-.238.01l-.081-.446h.157zm.576 1.575l.185.504q-.269.034-.545.054l-.09-.522zm.293.797l-.603.058l.09.486l.68-.08zm2.674.787c-.261.073-.54.136-.82.194l-.27-.45c.253-.045.495-.104.734-.162l.36.418zm.999-.297q-.331.116-.684.212l-.356-.414c.207-.054.405-.117.594-.18l.45.382zm.324-.112l-.441-.378c.18-.063.355-.135.522-.203l.518.347c-.19.08-.392.162-.599.234m1.45-.644l-.527.27l-.522-.35c.148-.073.288-.145.423-.226zm.729-.459c-.131.1-.27.19-.419.28l-.63-.307l.32-.23zm.616-.513c-.103.1-.211.203-.333.297l-.747-.265a2.4 2.4 0 0 0 .234-.244zm.45-.54q-.1.147-.22.288l-.873-.216l.135-.216l.954.144zm.297-.585q-.056.16-.13
…预览参数
调整颜色、描边或开启轮廓化，使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 Bend 图标
Bend 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。
在本页点击「下载」即可保存 Bend 的 SVG 矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Bend 的品牌标志与名称版权归其品牌方所有，本站内容仅供学习与设计识别参考，请勿用于商标注册或误导性用途；商用前请确认品牌官方的使用规范与授权要求。文件体积 10.99 KB，viewBox 为 0 0 24 24，共 1 个矢量图元。
常见问题
Bend 图标是什么？
Bend 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。
如何下载 Bend 图标？
在本页点击「下载 SVG」即可保存 Bend 的矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Bend 图标可以商用吗？
Bend 为品牌标志，版权归品牌方所有，本站内容仅供识别参考；商用前请先确认对应品牌的使用规范与授权要求。
如何修改 Bend 图标的颜色？
在「预览参数」面板中调整颜色与描边宽度，使用场景与用法示例会实时跟随，确认效果后再复制或下载即可。
SVG 健康报告
100/100
同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器
文件体积
10.99 KB
11,255 字节
viewBox
0 0 24 24
同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器
图元总数
1
<path> ×1
风格
单色品牌
1 种品牌色 · 纯填充
提取色值#181b1e
同色系图标
品牌色 #181b1e 的同色相色阶，点击复制色值；下方为同分类中可搭配使用的图标。
#f1f2f4#dde0e4#bbc2c9#939ea9#6d7a88#181b1e#24292d#121417
| 色值 | RGB | HSL | CMYK | 色名 |
|---|---|---|---|---|
| 24, 27, 30 | 210°, 11%, 11% | 20, 10, 0, 88 | 品牌主色 · 黑色 | |
| 221, 224, 228 | 214°, 11%, 88% | 3, 2, 0, 11 | 浅灰色 | |
| 187, 194, 201 | 210°, 11%, 76% | 7, 3, 0, 21 | 银色 | |
| 147, 158, 169 | 210°, 11%, 62% | 13, 7, 0, 34 | 灰色 |
图标信息摘要
Bend 是一个通用类别的单文件 SVG 矢量图标，文件体积 10.99 KB，协议为™ 品牌商标（版权归品牌方，仅供识别参考）。可在本站免费下载 Bend的 SVG 源文件与 PNG 位图（16-512px），支持自定义颜色与描边宽度、一键生成 Favicon 包，并提供 React / Vue 组件代码与 Data URI 引用。
继续探索
相关搜索
暂无推荐
已显示全部 24 项
