眼镜
OpenMoji
使用场景
颜色与描边跟随预览参数实时变化，以下为常见界面中的渲染效果。
按钮内
输入框
搜索眼镜...
导航
眼镜
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · App 图标
9:41
眼镜
浏览器 · 标签页与站点
0acf95b081b97851.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-0acf95b081b97851 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变，适合状态提示图标
.icon-0acf95b081b97851 { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转，适合加载中场景
.icon-0acf95b081b97851 { 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 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M33.68 66.75c-2.74-2.06-5.75-3.61-9.11-4.42c-.86-.21-4.08-1.03-6.77-1.1c-2.45-.07-5.01.35-5.91 2.06c-.51.97-.49 1.87-.61 2.94c-.74 6.21 1.98 13.95 6.61 18.24c1.71 1.58 4.17 2.81 6.42 3.27c5.64 1.15 10.37-.1 12.86-4.52c.48-.84.83-1.75 1.06-2.68c.42-1.67.46-3.44.13-5.14c-.44-2.38-2.2-6.78-4.68-8.65m48.75 8.74c-3.16-.81-10-1.76-14.72-1.16c-2.26.23-4.49.71-6.23 1.79c-2.6 1.61-3.38 4.91-3.06 7.8c.49 4.5 2.65 8.9 6.12 11.88c3.53 3.05 8.25 4.13 12.77 4.73c2.13.28 4.36.48 6.48.21c2.17-.28 4.22-1.04 5.93-2.7c2.78-2.67 4.67-6.94 4.69-10.83c.01-6.98-5.77-10.14-11.98-11.72" fill="#40c0e7"></path><path d="M110.84 55.19c-2.15 2.66-4.4 5.24-6.58 7.88c-1.58 1.94-3.32 5.5-5.76 6.44c-1.03.4-1.83-.12-2.75-.47c-.8-.31-1.62-.61-2.42-.9c-1.13-.42-2.28-.91-3.44-1.21c-6.72-1.75-13.47-2.88-20.43-2.6c-3.53.15-6.63.3-10.09 1.06c-2.02.45-3.77 1.38-5.87 1.5c-1.77.11-3.59.02-5.29-.52c-1.72-.55-2.62-1.69-4.02-2.73c-2.41-1.78-4.26-3.94-6.93-5.42c-1.99-1.1-4.09-1.97-6.26-2.65c-1.54-.49-3.88-.64-5.15-1.74c-.21-.18-.64-.62-.63-.9c.01-.42.64-.7.92-.91c5.24-3.74 10.49-7.3 16.05-10.58c2.28-1.35 4.51-2.82 6.93-3.95c3.67-1.71 8.27-2.41 12.27-1.66c3.36.62 4.13 3.85 5.74 6.33c1.52 2.35 4.74 3.46 7.2 1.98c3.1-1.86 3.36-6.65 1.64-9.57c-2.24-3.81-8.33-5.24-12.35-5.94c-2.25-.39-4.58-.52-6.87-.44c-13.12.42-23.98 9.5-35.43 14.78c-4.13 1.91-8.47 3.43-12.41 5.75c-5.05 1.48-9.8 4.2-7.75 9.24c.46 1.12 1.15 2.16 1.55 3.31c.45 1.29.17 2.34.16 3.65c-.01 1.15.04 2.31.14 3.46c.21 2.39.62 4.76 1.23 7.09c1.22 4.63 3.21 9.14 6.14 12.95c2.75 3.58 6.42 6.52 10.81 7.8c1.19.35 2.44.58 3.68.68c8.5.68 15.38-2.34 19.3-10.05c1.25-2.44 1.04-6.28 4.91-5.34c2.28.56 2.01 4.39 2.34 6.15c.86 4.61 2.91 8.93 6.36 12.16c.3.28.6.55.92.82c6.27 5.2 14.63 8.44 22.8 8.46c2.32.01 4.68-.37 6.89-1.1c4.15-1.39 8.06-3.86 10.9-7.23c2.32-2.75 3.61-6.13 4.37-9.6c.36-1.63.46-3.34 1.03-4.91c.84-2.36 2.85-4.54 2.84-7.14c-.01-1.03-.53-1.99-.18-3.01c.36-1.02 1.08-2.02 1.59-2.97c1.97-3.66 3.75-7.42 5.86-11c.67-1.13 1.3-2.3 2.09-3.35c.43-.58 1.41-1.98 2.21-1.57c.77.39.43 2.04.46 2.71c.11 2.47 1.7 5.85 4.77 4.57c1.9-.79 2.88-2.17 2.97-4.26c.16-3.59-.41-7.33-1.95-10.59c-3.54-7.58-11.87 2.25-14.51 5.54M38.23 80.54c-.23.93-.58 1.83-1.06 2.68c-2.49 4.42-7.22 5.67-12.86 4.52c-2.25-.46-4.7-1.69-6.42-3.27c-4.62-4.29-7.35-12.03-6.61-18.24c.13-1.07.1-
…预览参数
调整颜色、描边或开启轮廓化，使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 眼镜 图标
眼镜 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。
在本页点击「下载」即可保存 眼镜 的 SVG 矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
眼镜 的品牌标志与名称版权归其品牌方所有，本站内容仅供学习与设计识别参考，请勿用于商标注册或误导性用途；商用前请确认品牌官方的使用规范与授权要求。文件体积 4.16 KB，viewBox 为 0 0 128 128，共 4 个矢量图元。
常见问题
眼镜 图标是什么？
眼镜 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。
如何下载 眼镜 图标？
在本页点击「下载 SVG」即可保存 眼镜 的矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
眼镜 图标可以商用吗？
眼镜 为品牌标志，版权归品牌方所有，本站内容仅供识别参考；商用前请先确认对应品牌的使用规范与授权要求。
如何修改 眼镜 图标的颜色？
在「预览参数」面板中调整颜色与描边宽度，使用场景与用法示例会实时跟随，确认效果后再复制或下载即可。
SVG 健康报告
100/100
同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器
文件体积
4.16 KB
4,261 字节
viewBox
0 0 128 128
同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器
图元总数
4
<path> ×4
风格
多彩
3 种品牌色 · 纯填充
提取色值#40c0e7#855c52#b89278
同色系图标
品牌色 #40c0e7 的同色相色阶，点击复制色值；下方为同分类中可搭配使用的图标。
#e8f8fc#c9edf8#92dbf1#53c6e9#1badd9#40c0e7#199ec7#127390
| 色值 | RGB | HSL | CMYK | 色名 |
|---|---|---|---|---|
| 64, 192, 231 | 194°, 78%, 58% | 72, 17, 0, 9 | 品牌主色 · 矢车菊蓝 | |
| 201, 237, 248 | 194°, 77%, 88% | 19, 4, 0, 3 | 浅灰色 | |
| 146, 219, 241 | 194°, 77%, 76% | 39, 9, 0, 5 | 天蓝色 | |
| 83, 198, 233 | 194°, 77%, 62% | 64, 15, 0, 9 | 矢车菊蓝 |
图标信息摘要
眼镜 是一个通用类别的单文件 SVG 矢量图标，文件体积 4.16 KB，协议为™ 品牌商标（版权归品牌方，仅供识别参考）。可在本站免费下载 眼镜的 SVG 源文件与 PNG 位图（16-512px），支持自定义颜色与描边宽度、一键生成 Favicon 包，并提供 React / Vue 组件代码与 Data URI 引用。
继续探索
相关搜索
暂无推荐
眼镜 在其他图标库
同名不同风格的版本，点击查看与下载
已显示全部 72 项
